mirror of
https://github.com/sergeyyarkov/advogrand-grid.git
synced 2026-10-11 10:19:40 +03:00
334 lines
7.6 KiB
CSS
334 lines
7.6 KiB
CSS
@font-face {
|
||
font-family: ProximaNovaLight;
|
||
src: url(../fonts/ProximaNovaLight.ttf);
|
||
}
|
||
|
||
@font-face {
|
||
font-family: ProximaNovaBold;
|
||
/* Имя шрифта */
|
||
src: url(../fonts/ProximaNovaBold.ttf);
|
||
/* Путь к файлу со шрифтом */
|
||
}
|
||
|
||
@font-face {
|
||
font-family: ProximaNovaExtrabld;
|
||
/* Имя шрифта */
|
||
src: url(../fonts/ProximaNovaExtrabld.ttf);
|
||
/* Путь к файлу со шрифтом */
|
||
}
|
||
@font-face {
|
||
font-family: MullerLight;
|
||
/* Имя шрифта */
|
||
src: url(../fonts/MullerLight.otf);
|
||
/* Путь к файлу со шрифтом */
|
||
}
|
||
@font-face {
|
||
font-family: MullerBold;
|
||
/* Имя шрифта */
|
||
src: url(../fonts/MullerBold.otf);
|
||
/* Путь к файлу со шрифтом */
|
||
}
|
||
@font-face {
|
||
font-family: MullerMedium;
|
||
/* Имя шрифта */
|
||
src: url(../fonts/MullerMedium.otf);
|
||
/* Путь к файлу со шрифтом */
|
||
}
|
||
body {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
h1,h2,h3,h4,h5,h6 {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
p {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
h2 {
|
||
font-family: ProximaNovaBold;
|
||
font-size: 30px;
|
||
text-align: center;
|
||
}
|
||
.btn-red {
|
||
height: 65px;
|
||
width: 300px;
|
||
background-color: #c70f0f;
|
||
color: #fff;
|
||
font-family: ProximaNovaBold;
|
||
font-size: 18px;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: all .2s;
|
||
border-radius: 5px;
|
||
outline: none;
|
||
}
|
||
.btn-red:hover {
|
||
background-color: #d15252;
|
||
}
|
||
.container {
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
padding-left: 15px;
|
||
padding-right: 15px;
|
||
max-width: 960px;
|
||
}
|
||
ul li {
|
||
display: inline-block;
|
||
list-style: none;
|
||
font-size: 16px;
|
||
font-family: ProximaNovaBold;
|
||
}
|
||
ul {
|
||
padding: 0;
|
||
margin: 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
a {
|
||
text-decoration: none;
|
||
color: #1c1c1c;
|
||
}
|
||
header {
|
||
margin-top: 20px;
|
||
}
|
||
.header-btn_call {
|
||
height: 30px;
|
||
background-color: #ff0000;
|
||
border: none;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
font-family: ProximaNovaBold;
|
||
cursor: pointer;
|
||
padding-left: 11px;
|
||
padding-right: 11px;
|
||
border-radius: 5px;
|
||
max-width: 140px;
|
||
}
|
||
.header-telephone {
|
||
font-family: ProximaNovaBold;
|
||
}
|
||
.header-content_top {
|
||
margin-bottom: 30px;
|
||
}
|
||
.header-bottom_text {
|
||
color: #1c1c1c;
|
||
font-size: 16px;
|
||
font-family: ProximaNovaBold;
|
||
}
|
||
.header-bottom_info a {
|
||
font-size: 18px;
|
||
font-family: ProximaNovaBold;
|
||
margin-right: 30px;
|
||
}
|
||
.header-bottom_info {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.header-content_bottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.android {
|
||
margin-right: 10px;
|
||
background: url(../img/android.svg) no-repeat center center;
|
||
}
|
||
.apple {
|
||
background: url(../img/apple.svg) no-repeat center center;
|
||
background-position-y: 6px;
|
||
background-position-x: 7px;
|
||
}
|
||
.android, .apple {
|
||
height: 40px;
|
||
width: 40px;
|
||
display: inline-block;
|
||
border-radius: 5px;
|
||
border: 1px solid #e42626;
|
||
cursor: pointer;
|
||
}
|
||
/* First Section */
|
||
#first {
|
||
margin-top: 35px;
|
||
min-height: 610px;
|
||
background: url(../img/section-first_background.jpg) no-repeat center center;
|
||
background-size: cover;
|
||
color: #fff;
|
||
padding-top: 130px;
|
||
}
|
||
.section-first_wrap {
|
||
font-family: ProximaNovaBold;
|
||
}
|
||
.section-first_wrap h1 {
|
||
font-size: 36px;
|
||
line-height: 50px
|
||
}
|
||
.section-first_wrap h1 span {
|
||
text-transform: uppercase;
|
||
font-family: ProximaNovaExtrabld;
|
||
}
|
||
.section-first_wrap p {
|
||
font-size: 24px;
|
||
line-height: 32px;
|
||
font-family: ProximaNovaLight;
|
||
margin-bottom: 70px;
|
||
margin-top: 65px;
|
||
}
|
||
.section-first_wrap p b {
|
||
font-family: ProximaNovaBold;
|
||
}
|
||
/* Secction Services */
|
||
#services {
|
||
padding-top: 100px;
|
||
padding-bottom: 100px;
|
||
}
|
||
#services h2 {
|
||
text-align: center;
|
||
}
|
||
.section-services_wrap {
|
||
margin-top: 85px;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
grid-row-gap: 85px;
|
||
grid-column-gap: 100px;
|
||
}
|
||
.section-services_wrap div {
|
||
font-family: ProximaNovaLight;
|
||
font-size: 16px;
|
||
}
|
||
.section-services_wrap div p {
|
||
position: relative;
|
||
padding-left: 70px;
|
||
top: 7px
|
||
}
|
||
.section-services_wrap div:nth-child(1)::before {
|
||
content: '';
|
||
height: 50px;
|
||
width: 50px;
|
||
background: url(../img/services/consultation-logo.png) no-repeat center center;
|
||
display: inline-block;
|
||
position: absolute;
|
||
}
|
||
.section-services_wrap div:nth-child(2)::before {
|
||
content: '';
|
||
height: 50px;
|
||
width: 50px;
|
||
background: url(../img/services/phone-call.png) no-repeat center center;
|
||
display: inline-block;
|
||
position: absolute;
|
||
}
|
||
.section-services_wrap div:nth-child(3)::before {
|
||
content: '';
|
||
height: 50px;
|
||
width: 50px;
|
||
background: url(../img/services/file.png) no-repeat center center;
|
||
display: inline-block;
|
||
position: absolute;
|
||
}
|
||
.section-services_wrap div:nth-child(4)::before {
|
||
content: '';
|
||
height: 50px;
|
||
width: 50px;
|
||
background: url(../img/services/tactics.png) no-repeat center center;
|
||
display: inline-block;
|
||
position: absolute;
|
||
}
|
||
.section-services_wrap div:nth-child(5)::before {
|
||
content: '';
|
||
height: 50px;
|
||
width: 50px;
|
||
background: url(../img/services/work-communication.png) no-repeat center center;
|
||
display: inline-block;
|
||
position: absolute;
|
||
}
|
||
.section-services_wrap div:nth-child(6)::before {
|
||
content: '';
|
||
height: 50px;
|
||
width: 50px;
|
||
background: url(../img/services/law-book.png) no-repeat center center;
|
||
display: inline-block;
|
||
position: absolute;
|
||
}
|
||
.section-services_wrap div:nth-child(7)::before {
|
||
content: '';
|
||
height: 50px;
|
||
width: 50px;
|
||
background: url(../img/services/exam.png) no-repeat center center;
|
||
display: inline-block;
|
||
position: absolute;
|
||
}
|
||
.section-services_wrap div:nth-child(8)::before {
|
||
content: '';
|
||
height: 50px;
|
||
width: 50px;
|
||
background: url(../img/services/lawyer.png) no-repeat center center;
|
||
display: inline-block;
|
||
position: absolute;
|
||
}
|
||
.section-services_wrap div:nth-child(9)::before {
|
||
content: '';
|
||
height: 50px;
|
||
width: 50px;
|
||
background: url(../img/services/balance.png) no-repeat center center;
|
||
display: inline-block;
|
||
position: absolute;
|
||
}
|
||
/* Section About */
|
||
#about {
|
||
padding-top: 100px;
|
||
padding-bottom: 100px;
|
||
min-height: 600px;
|
||
background: url(../img/about/about_background.jpg) no-repeat center center;
|
||
background-size: cover;
|
||
}
|
||
#about h2 {
|
||
color: #fff;
|
||
}
|
||
#about p {
|
||
font-family: ProximaNovaLight;
|
||
font-size: 16px;
|
||
text-align: center;
|
||
color: #fff;
|
||
margin-top: 85px;
|
||
}
|
||
#about p:nth-child(3) {
|
||
margin-top: 30px;
|
||
}
|
||
.section-about_feature span {
|
||
font-size: 48px;
|
||
font-family: ProximaNovaBold;
|
||
}
|
||
.section-about_wrap {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||
margin-top: 85px;
|
||
}
|
||
/* Section About-Turn */
|
||
#turn {
|
||
padding-top: 100px;
|
||
padding-bottom: 100px;
|
||
background-color: #f5f5f5;
|
||
}
|
||
.section-turn_wrap {
|
||
margin-top: 100px;
|
||
text-align: center;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
}
|
||
.section-turn_feature {
|
||
margin-top: 20px;
|
||
}
|
||
.wrap-img_feature {
|
||
min-height: 90px;
|
||
max-height: 90px;
|
||
}
|
||
.section-turn_feature p {
|
||
font-family: ProximaNovaLight;
|
||
font-size: 16px;
|
||
margin-top: 55px;
|
||
}
|
||
.section-turn_feature p b {
|
||
font-family: ProximaNovaBold;
|
||
} |