Skip to content

L
landing_pages
Commit 0dd4d620 by Iren
Options

add fonts

parent 8e59d69e
Showing with 69 additions and 2 deletions
css/styles.css
...@@ -4,6 +4,18 @@ ...@@ -4,6 +4,18 @@
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face {
font-family: SFUIDisplay-Regular;
src: url("../fonts/SFUIDisplay-Regular.otf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: SFUIDisplay-Light;
src: url("../fonts/SFUIDisplay-Light.otf");
font-weight: normal;
font-style: normal;
}
body { body {
box-sizing: border-box; box-sizing: border-box;
} }
...@@ -12,6 +24,7 @@ body { ...@@ -12,6 +24,7 @@ body {
justify-content: center; justify-content: center;
} }
button.main-btn { button.main-btn {
font-family: SFUIDisplay-Regular;
width: 290px; width: 290px;
height: 52px; height: 52px;
margin-top: 30px; margin-top: 30px;
...@@ -27,6 +40,7 @@ button.main-btn { ...@@ -27,6 +40,7 @@ button.main-btn {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
button.main-btn { button.main-btn {
font-family: SFUIDisplay-Regular;
width: 143px; width: 143px;
height: 44px; height: 44px;
margin-top: 30px; margin-top: 30px;
...@@ -89,6 +103,7 @@ header { ...@@ -89,6 +103,7 @@ header {
} }
} }
.h2-desktop { .h2-desktop {
font-family: AvenirNext-Heavy;
font-size: 36px; font-size: 36px;
font-weight: 800; font-weight: 800;
line-height: 62px; line-height: 62px;
...@@ -125,6 +140,7 @@ header { ...@@ -125,6 +140,7 @@ header {
margin-top: 4px; margin-top: 4px;
} }
.text-h2-desktop { .text-h2-desktop {
font-family: SFUIDisplay-Light;
font-size: 18px; font-size: 18px;
font-weight: 300; font-weight: 300;
line-height: 27px; line-height: 27px;
...@@ -142,12 +158,17 @@ header { ...@@ -142,12 +158,17 @@ header {
letter-spacing: 0.14px; letter-spacing: 0.14px;
} }
} }
.h2-desktop-tittle {
font-family: AvenirNext-Heavy;
}
@media (max-width: 576px) { @media (max-width: 576px) {
.h2-desktop-tittle { .h2-desktop-tittle {
font-family: AvenirNext-Heavy;
max-width: 170px; max-width: 170px;
} }
} }
.h3-desktop { .h3-desktop {
font-family: AvenirNext-Heavy;
margin-bottom: 18px; margin-bottom: 18px;
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
...@@ -165,6 +186,7 @@ header { ...@@ -165,6 +186,7 @@ header {
} }
} }
.text-h3-desktop { .text-h3-desktop {
font-family: SFUIDisplay-Light;
margin-top: -12px; margin-top: -12px;
font-size: 16px; font-size: 16px;
font-weight: 300; font-weight: 300;
...@@ -174,6 +196,7 @@ header { ...@@ -174,6 +196,7 @@ header {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.text-h3-desktop { .text-h3-desktop {
font-family: SFUIDisplay-Light;
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
letter-spacing: 0; letter-spacing: 0;
...@@ -268,6 +291,7 @@ header { ...@@ -268,6 +291,7 @@ header {
} }
} }
.advertising-text-order h2 { .advertising-text-order h2 {
font-family: AvenirNext-Heavy;
font-size: 36px; font-size: 36px;
line-height: 62px; line-height: 62px;
margin-bottom: 3px; margin-bottom: 3px;
...@@ -289,6 +313,7 @@ header { ...@@ -289,6 +313,7 @@ header {
} }
} }
.advertising-text-order p { .advertising-text-order p {
font-family: SFUIDisplay-Light;
font-size: 18px; font-size: 18px;
font-weight: 300; font-weight: 300;
line-height: 27px; line-height: 27px;
...@@ -336,6 +361,7 @@ header { ...@@ -336,6 +361,7 @@ header {
width: 110%; width: 110%;
} }
.advertising-text h2 { .advertising-text h2 {
font-family: AvenirNext-Heavy;
font-size: 36px; font-size: 36px;
line-height: 62px; line-height: 62px;
margin-bottom: 3px; margin-bottom: 3px;
...@@ -357,6 +383,7 @@ header { ...@@ -357,6 +383,7 @@ header {
} }
} }
.advertising-text p { .advertising-text p {
font-family: SFUIDisplay-Light;
font-size: 18px; font-size: 18px;
font-weight: 300; font-weight: 300;
line-height: 27px; line-height: 27px;
...@@ -400,6 +427,7 @@ header { ...@@ -400,6 +427,7 @@ header {
} }
/*option*/ /*option*/
.option h2 { .option h2 {
font-family: AvenirNext-Heavy;
font-size: 36px; font-size: 36px;
line-height: 62px; line-height: 62px;
margin-bottom: 3px; margin-bottom: 3px;
...@@ -447,6 +475,7 @@ header { ...@@ -447,6 +475,7 @@ header {
max-width: 485px; max-width: 485px;
} }
.option-card-img h4 { .option-card-img h4 {
font-family: AvenirNext-Heavy;
font-size: 30px; font-size: 30px;
line-height: 30px; line-height: 30px;
font-weight: 400; font-weight: 400;
...@@ -560,10 +589,12 @@ header { ...@@ -560,10 +589,12 @@ header {
} }
} }
.protection-text { .protection-text {
font-family: AvenirNext-Heavy;
height: 90px; height: 90px;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.protection-text { .protection-text {
font-family: AvenirNext-Heavy;
height: auto; height: auto;
margin-bottom: 10px; margin-bottom: 10px;
min-width: 216px; min-width: 216px;
...@@ -596,6 +627,7 @@ header { ...@@ -596,6 +627,7 @@ header {
margin-bottom: 70px; margin-bottom: 70px;
} }
.catalog-img-container { .catalog-img-container {
font-family: AvenirNext-Heavy;
margin-right: 5%; margin-right: 5%;
margin-bottom: 60px; margin-bottom: 60px;
} }
...@@ -874,6 +906,7 @@ header { ...@@ -874,6 +906,7 @@ header {
margin-bottom: 20px; margin-bottom: 20px;
} }
.form-wrapper p { .form-wrapper p {
font-family: SFUIDisplay-Regular;
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
color: white; color: white;
...@@ -902,6 +935,7 @@ input.form-last-child { ...@@ -902,6 +935,7 @@ input.form-last-child {
margin-bottom: 47px; margin-bottom: 47px;
} }
.form-btn { .form-btn {
font-family: SFUIDisplay-Regular;
margin-top: -100px; margin-top: -100px;
border: none; border: none;
} }
...@@ -949,6 +983,7 @@ footer { ...@@ -949,6 +983,7 @@ footer {
margin-top: 12px; margin-top: 12px;
} }
.footer-link a { .footer-link a {
font-family: SFUIDisplay-Regular;
width: 244px; width: 244px;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
...@@ -963,6 +998,7 @@ footer { ...@@ -963,6 +998,7 @@ footer {
margin-bottom: 9px; margin-bottom: 9px;
} }
.footer-contacts-link a { .footer-contacts-link a {
font-family: SFUIDisplay-Regular;
font-size: 16px; font-size: 16px;
font-weight: 300; font-weight: 300;
line-height: 30px; line-height: 30px;
...@@ -970,6 +1006,7 @@ footer { ...@@ -970,6 +1006,7 @@ footer {
letter-spacing: 0.16px; letter-spacing: 0.16px;
} }
.footer-icon-text { .footer-icon-text {
font-family: SFUIDisplay-Regular;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 30px; line-height: 30px;
......
css/styles.less
...@@ -4,6 +4,18 @@ ...@@ -4,6 +4,18 @@
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face {
font-family: SFUIDisplay-Regular;
src: url("../fonts/SFUIDisplay-Regular.otf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: SFUIDisplay-Light;
src: url("../fonts/SFUIDisplay-Light.otf");
font-weight: normal;
font-style: normal;
}
body { body {
box-sizing: border-box; box-sizing: border-box;
} }
...@@ -12,6 +24,7 @@ body { ...@@ -12,6 +24,7 @@ body {
justify-content: center; justify-content: center;
} }
button.main-btn { button.main-btn {
font-family: SFUIDisplay-Regular;
width: 290px; width: 290px;
height: 52px; height: 52px;
margin-top: 30px; margin-top: 30px;
...@@ -25,6 +38,7 @@ button.main-btn { ...@@ -25,6 +38,7 @@ button.main-btn {
letter-spacing: 0.18px; letter-spacing: 0.18px;
text-align: center; text-align: center;
@media (max-width: 576px) { @media (max-width: 576px) {
font-family: SFUIDisplay-Regular;
width: 143px; width: 143px;
height: 44px; height: 44px;
margin-top: 30px; margin-top: 30px;
...@@ -81,6 +95,7 @@ header { ...@@ -81,6 +95,7 @@ header {
} }
} }
.h2-desktop { .h2-desktop {
font-family: AvenirNext-Heavy;
font-size: 36px; font-size: 36px;
font-weight: 800; font-weight: 800;
line-height: 62px; line-height: 62px;
...@@ -115,6 +130,7 @@ header { ...@@ -115,6 +130,7 @@ header {
margin-top: 4px; margin-top: 4px;
} }
.text-h2-desktop { .text-h2-desktop {
font-family: SFUIDisplay-Light;
font-size: 18px; font-size: 18px;
font-weight: 300; font-weight: 300;
line-height: 27px; line-height: 27px;
...@@ -131,11 +147,14 @@ header { ...@@ -131,11 +147,14 @@ header {
} }
} }
.h2-desktop-tittle { .h2-desktop-tittle {
font-family: AvenirNext-Heavy;
@media (max-width: 576px){ @media (max-width: 576px){
font-family: AvenirNext-Heavy;
max-width: 170px; max-width: 170px;
} }
} }
.h3-desktop { .h3-desktop {
font-family: AvenirNext-Heavy;
margin-bottom: 18px; margin-bottom: 18px;
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
...@@ -151,6 +170,7 @@ header { ...@@ -151,6 +170,7 @@ header {
} }
} }
.text-h3-desktop { .text-h3-desktop {
font-family: SFUIDisplay-Light;
margin-top: -12px; margin-top: -12px;
font-size: 16px; font-size: 16px;
font-weight: 300; font-weight: 300;
...@@ -158,6 +178,7 @@ header { ...@@ -158,6 +178,7 @@ header {
color: #303a81; color: #303a81;
letter-spacing: 0.16px; letter-spacing: 0.16px;
@media (max-width: 576px) { @media (max-width: 576px) {
font-family: SFUIDisplay-Light;
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
letter-spacing: 0; letter-spacing: 0;
...@@ -342,6 +363,7 @@ header { ...@@ -342,6 +363,7 @@ header {
text-align: center; text-align: center;
max-width: 485px; max-width: 485px;
h4 { h4 {
font-family: AvenirNext-Heavy;
font-size: 30px; font-size: 30px;
line-height: 30px; line-height: 30px;
font-weight: 400; font-weight: 400;
...@@ -443,8 +465,10 @@ header { ...@@ -443,8 +465,10 @@ header {
} }
} }
.protection-text { .protection-text {
font-family: AvenirNext-Heavy;
height: 90px; height: 90px;
@media (max-width: 576px) { @media (max-width: 576px) {
font-family: AvenirNext-Heavy;
height: auto; height: auto;
margin-bottom: 10px; margin-bottom: 10px;
min-width: 216px; min-width: 216px;
...@@ -474,6 +498,7 @@ header { ...@@ -474,6 +498,7 @@ header {
margin-bottom: 70px; margin-bottom: 70px;
} }
.catalog-img-container { .catalog-img-container {
font-family: AvenirNext-Heavy;
margin-right: 5%; margin-right: 5%;
margin-bottom: 60px; margin-bottom: 60px;
img { img {
...@@ -737,6 +762,7 @@ header { ...@@ -737,6 +762,7 @@ header {
margin-bottom: 20px; margin-bottom: 20px;
} }
p { p {
font-family: SFUIDisplay-Regular;
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
color: white; color: white;
...@@ -766,6 +792,7 @@ input.form-last-child { ...@@ -766,6 +792,7 @@ input.form-last-child {
margin-bottom: 47px; margin-bottom: 47px;
} }
.form-btn { .form-btn {
font-family: SFUIDisplay-Regular;
margin-top: -100px; margin-top: -100px;
border: none; border: none;
} }
...@@ -811,6 +838,7 @@ footer { ...@@ -811,6 +838,7 @@ footer {
margin-top: 12px; margin-top: 12px;
} }
.footer-link a{ .footer-link a{
font-family: SFUIDisplay-Regular;
width: 244px; width: 244px;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
...@@ -825,6 +853,7 @@ footer { ...@@ -825,6 +853,7 @@ footer {
margin-bottom: 9px; margin-bottom: 9px;
} }
.footer-contacts-link a { .footer-contacts-link a {
font-family: SFUIDisplay-Regular;
font-size: 16px; font-size: 16px;
font-weight: 300; font-weight: 300;
line-height: 30px; line-height: 30px;
...@@ -832,6 +861,7 @@ footer { ...@@ -832,6 +861,7 @@ footer {
letter-spacing: 0.16px; letter-spacing: 0.16px;
} }
.footer-icon-text { .footer-icon-text {
font-family: SFUIDisplay-Regular;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 30px; line-height: 30px;
......
index.html
...@@ -205,7 +205,7 @@ ...@@ -205,7 +205,7 @@
</div> </div>
<div class="advertising main-container"> <div class="advertising main-container">
<div class="advertising-img-order"> <div class="advertising-img-order">
<img src="img/advertising1.png"> <img src="img/advertising3.png">
</div> </div>
<div class="advertising-text-order"> <div class="advertising-text-order">
<h2>Масштабируемость</h2> <h2>Масштабируемость</h2>
...@@ -237,7 +237,7 @@ ...@@ -237,7 +237,7 @@
</p> </p>
</div> </div>
<div class="advertising-img"> <div class="advertising-img">
<img src="img/advertising1.png"> <img src="img/advertising2.png">
</div> </div>
</div> </div>
<div class="advertising main-container"> <div class="advertising main-container">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment