Skip to content

L
landing_pages
Commit cbfbd797 by Iren
Options

add fonts

parent 19d37da0
Showing with 43 additions and 54 deletions
css/styles.css
...@@ -4,6 +4,11 @@ ...@@ -4,6 +4,11 @@
src: url("../fonts/ofont.ru_Avenir Next.ttf"); src: url("../fonts/ofont.ru_Avenir Next.ttf");
} }
@font-face { @font-face {
font-family: SF-UI-Display-Black;
/*src: url("../fonts/HelveticaNeue-Black.otf");*/
src: url("../fonts/SF-UI-Display-Black.ttf");
}
@font-face {
font-family: SFUIDisplay-Regular; font-family: SFUIDisplay-Regular;
src: url("../fonts/SF-UI-Display-Regular.ttf"); src: url("../fonts/SF-UI-Display-Regular.ttf");
font-weight: normal; font-weight: normal;
...@@ -288,7 +293,7 @@ header { ...@@ -288,7 +293,7 @@ header {
h1 { h1 {
position: relative; position: relative;
z-index: 3; z-index: 3;
font-family: Avenir Next; font-family: SF-UI-Display-Black;
font-size: 60px; font-size: 60px;
color: white; color: white;
font-weight: 800; font-weight: 800;
...@@ -337,6 +342,12 @@ h1 { ...@@ -337,6 +342,12 @@ h1 {
} }
.header-text-center { .header-text-center {
text-align: center; text-align: center;
width: 50%;
}
@media (max-width: 576px) {
.header-text-center {
width: 100%;
}
} }
.header-text { .header-text {
text-align: left; text-align: left;
...@@ -444,6 +455,7 @@ h1 { ...@@ -444,6 +455,7 @@ h1 {
} }
.header-video { .header-video {
position: relative; position: relative;
width: 50%;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.header-video { .header-video {
...@@ -488,7 +500,7 @@ video { ...@@ -488,7 +500,7 @@ video {
} }
} }
.h2-desktop { .h2-desktop {
font-family: Avenir Next; font-family: SF-UI-Display-Black;
font-size: 36px; font-size: 36px;
font-weight: 800; font-weight: 800;
line-height: 62px; line-height: 62px;
...@@ -499,7 +511,6 @@ video { ...@@ -499,7 +511,6 @@ video {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.h2-desktop { .h2-desktop {
font-family: Avenir Next;
font-size: 24px; font-size: 24px;
line-height: 30px; line-height: 30px;
margin-bottom: 3px; margin-bottom: 3px;
...@@ -508,6 +519,9 @@ video { ...@@ -508,6 +519,9 @@ video {
margin-top: 20px; margin-top: 20px;
} }
} }
.h2-desktop-mail {
font-family: SF-UI-Display-Black;
}
@media (max-width: 576px) { @media (max-width: 576px) {
.h2-desktop-mail { .h2-desktop-mail {
width: 200px; width: 200px;
...@@ -560,7 +574,7 @@ video { ...@@ -560,7 +574,7 @@ video {
} }
} }
.h2-desktop-tittle { .h2-desktop-tittle {
font-family: Avenir Next; font-family: SF-UI-Display-Black;
font-weight: 800; font-weight: 800;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
...@@ -803,7 +817,7 @@ video { ...@@ -803,7 +817,7 @@ video {
color: #315197; color: #315197;
letter-spacing: 0.36px; letter-spacing: 0.36px;
max-width: 803px; max-width: 803px;
font-family: Avenir Next; font-family: SF-UI-Display-Black;
margin-bottom: 21px; margin-bottom: 21px;
margin-top: 8px; margin-top: 8px;
line-height: 36px; line-height: 36px;
...@@ -811,7 +825,6 @@ video { ...@@ -811,7 +825,6 @@ video {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.advertising-text-order h2 { .advertising-text-order h2 {
font-family: Avenir Next;
font-size: 24px; font-size: 24px;
line-height: 30px; line-height: 30px;
margin-bottom: 3px; margin-bottom: 3px;
...@@ -844,7 +857,7 @@ video { ...@@ -844,7 +857,7 @@ video {
color: #315197; color: #315197;
letter-spacing: 0.36px; letter-spacing: 0.36px;
max-width: 803px; max-width: 803px;
font-family: Avenir Next; font-family: SF-UI-Display-Black;
font-weight: 700; font-weight: 700;
margin-bottom: 21px; margin-bottom: 21px;
margin-top: 4px; margin-top: 4px;
...@@ -852,7 +865,6 @@ video { ...@@ -852,7 +865,6 @@ video {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.advertising-text h2 { .advertising-text h2 {
font-family: Avenir Next;
font-size: 24px; font-size: 24px;
line-height: 30px; line-height: 30px;
margin-bottom: 3px; margin-bottom: 3px;
...@@ -950,13 +962,12 @@ video { ...@@ -950,13 +962,12 @@ video {
color: #315197; color: #315197;
letter-spacing: 0.36px; letter-spacing: 0.36px;
max-width: 803px; max-width: 803px;
font-family: Avenir Next; font-family: SF-UI-Display-Black;
font-weight: 800; font-weight: 800;
margin-bottom: 0; margin-bottom: 0;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.option h2 { .option h2 {
font-family: Avenir Next;
font-size: 24px; font-size: 24px;
line-height: 30px; line-height: 30px;
margin-bottom: 3px; margin-bottom: 3px;
...@@ -1940,7 +1951,7 @@ video { ...@@ -1940,7 +1951,7 @@ video {
.form-wrapper { .form-wrapper {
text-align: center; text-align: center;
height: 548px; height: 548px;
max-width: 610px; max-width: 650px;
margin: 0 auto; margin: 0 auto;
padding-top: 12.7%; padding-top: 12.7%;
padding-bottom: 14%; padding-bottom: 14%;
...@@ -1952,7 +1963,7 @@ video { ...@@ -1952,7 +1963,7 @@ video {
} }
} }
.form-wrapper h6 { .form-wrapper h6 {
font-family: Avenir Next; font-family: SF-UI-Display-Black;
font-size: 60px; font-size: 60px;
font-weight: 400; font-weight: 400;
color: white; color: white;
...@@ -1966,7 +1977,6 @@ video { ...@@ -1966,7 +1977,6 @@ video {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.form-wrapper h6 { .form-wrapper h6 {
font-family: Avenir Next;
font-size: 30px; font-size: 30px;
font-weight: 400; font-weight: 400;
line-height: 62px; line-height: 62px;
...@@ -2247,17 +2257,4 @@ input.form-last-child { ...@@ -2247,17 +2257,4 @@ input.form-last-child {
width: 5px; width: 5px;
} }
} }
#mous {
width: 50px;
height: 50px;
background: #00aa88;
}
#dog {
width: 100px;
height: 100px;
background: red;
}
.page-header__burger--active {
display: none;
}
/*# sourceMappingURL=styles.css.map */ /*# sourceMappingURL=styles.css.map */
\ No newline at end of file
css/styles.less
...@@ -4,6 +4,11 @@ ...@@ -4,6 +4,11 @@
src: url("../fonts/ofont.ru_Avenir Next.ttf"); src: url("../fonts/ofont.ru_Avenir Next.ttf");
} }
@font-face { @font-face {
font-family: SF-UI-Display-Black;
/*src: url("../fonts/HelveticaNeue-Black.otf");*/
src: url("../fonts/SF-UI-Display-Black.ttf");
}
@font-face {
font-family: SFUIDisplay-Regular; font-family: SFUIDisplay-Regular;
src: url("../fonts/SF-UI-Display-Regular.ttf"); src: url("../fonts/SF-UI-Display-Regular.ttf");
font-weight: normal; font-weight: normal;
...@@ -242,7 +247,7 @@ header { ...@@ -242,7 +247,7 @@ header {
h1 { h1 {
position: relative; position: relative;
z-index: 3; z-index: 3;
font-family: Avenir Next; font-family: SF-UI-Display-Black;
font-size: 60px; font-size: 60px;
color: white; color: white;
font-weight: 800; font-weight: 800;
...@@ -283,6 +288,10 @@ h1 { ...@@ -283,6 +288,10 @@ h1 {
} }
.header-text-center { .header-text-center {
text-align: center; text-align: center;
width: 50%;
@media (max-width: 576px){
width: 100%;
}
} }
.header-text { .header-text {
text-align: left; text-align: left;
...@@ -374,6 +383,7 @@ h1 { ...@@ -374,6 +383,7 @@ h1 {
} }
.header-video { .header-video {
position: relative; position: relative;
width: 50%;
@media (max-width: 576px) { @media (max-width: 576px) {
display: none; display: none;
width: 150px; width: 150px;
...@@ -411,7 +421,7 @@ video { ...@@ -411,7 +421,7 @@ video {
} }
} }
.h2-desktop { .h2-desktop {
font-family: Avenir Next; font-family: SF-UI-Display-Black;
font-size: 36px; font-size: 36px;
font-weight: 800; font-weight: 800;
line-height: 62px; line-height: 62px;
...@@ -420,7 +430,6 @@ video { ...@@ -420,7 +430,6 @@ video {
letter-spacing: 0.36px; letter-spacing: 0.36px;
max-width: 803px; max-width: 803px;
@media (max-width: 576px) { @media (max-width: 576px) {
font-family: Avenir Next;
font-size: 24px; font-size: 24px;
line-height: 30px; line-height: 30px;
margin-bottom: 3px; margin-bottom: 3px;
...@@ -430,6 +439,7 @@ video { ...@@ -430,6 +439,7 @@ video {
} }
} }
.h2-desktop-mail { .h2-desktop-mail {
font-family: SF-UI-Display-Black;
@media (max-width: 576px) { @media (max-width: 576px) {
width: 200px; width: 200px;
font-weight: 700; font-weight: 700;
...@@ -477,7 +487,7 @@ video { ...@@ -477,7 +487,7 @@ video {
} }
} }
.h2-desktop-tittle { .h2-desktop-tittle {
font-family: Avenir Next; font-family: SF-UI-Display-Black;
font-weight: 800; font-weight: 800;
@media (max-width: 576px){ @media (max-width: 576px){
max-width: 170px; max-width: 170px;
...@@ -669,7 +679,7 @@ video { ...@@ -669,7 +679,7 @@ video {
width: 110%; width: 110%;
h2 { h2 {
.h2-desktop; .h2-desktop;
font-family: Avenir Next; font-family: SF-UI-Display-Black;
margin-bottom: 21px; margin-bottom: 21px;
margin-top: 8px; margin-top: 8px;
line-height: 36px; line-height: 36px;
...@@ -692,7 +702,7 @@ video { ...@@ -692,7 +702,7 @@ video {
width: 110%; width: 110%;
h2 { h2 {
.h2-desktop; .h2-desktop;
font-family: Avenir Next; font-family: SF-UI-Display-Black;
font-weight: 700; font-weight: 700;
margin-bottom: 21px; margin-bottom: 21px;
margin-top: 4px; margin-top: 4px;
...@@ -771,7 +781,7 @@ video { ...@@ -771,7 +781,7 @@ video {
h2 h2
{ {
.h2-desktop; .h2-desktop;
font-family: Avenir Next; font-family: SF-UI-Display-Black;
font-weight: 800; font-weight: 800;
margin-bottom: 0; margin-bottom: 0;
@media (max-width: 576px) { @media (max-width: 576px) {
...@@ -1565,7 +1575,7 @@ video { ...@@ -1565,7 +1575,7 @@ video {
.form-wrapper { .form-wrapper {
text-align: center; text-align: center;
height: 548px; height: 548px;
max-width: 610px; max-width: 650px;
margin: 0 auto; margin: 0 auto;
padding-top: 12.7%; padding-top: 12.7%;
padding-bottom: 14%; padding-bottom: 14%;
...@@ -1574,7 +1584,7 @@ video { ...@@ -1574,7 +1584,7 @@ video {
padding-top: 71px; padding-top: 71px;
} }
h6 { h6 {
font-family: Avenir Next; font-family: SF-UI-Display-Black;
font-size: 60px; font-size: 60px;
font-weight: 400; font-weight: 400;
color: white; color: white;
...@@ -1584,7 +1594,6 @@ video { ...@@ -1584,7 +1594,6 @@ video {
font-size: 50px; font-size: 50px;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
font-family: Avenir Next;
font-size: 30px; font-size: 30px;
font-weight: 400; font-weight: 400;
line-height: 62px; line-height: 62px;
...@@ -1837,19 +1846,7 @@ footer { ...@@ -1837,19 +1846,7 @@ footer {
} }
} }
#mous {
width: 50px;
height: 50px;
background: #00aa88;
}
#dog {
width: 100px;
height: 100px;
background: red;
}
.page-header__burger--active {
display: none;
}
index.html
...@@ -1139,10 +1139,6 @@ ...@@ -1139,10 +1139,6 @@
</div> </div>
</div> </div>
</div> </div>
<div id="mous">
</div>
<div id="dog">
</div>
</footer> </footer>
<!-- <!--
<section id="id_about_section"> <section id="id_about_section">
......
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