Skip to content

L
landing_pages
Commit 1f08ec96 by Iren
Options

add fonts

parent c3661a29
Showing with 252 additions and 48 deletions
css/styles.css
......@@ -20,6 +20,12 @@
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: SF-UI-Text-Heavy;
src: url("../fonts/SF-UI-Text-Heavy.ttf");
font-weight: normal;
font-style: normal;
}
body {
box-sizing: border-box;
}
......@@ -653,7 +659,7 @@ video {
margin-top: 4px;
}
.text-h2-desktop {
font-family: SFUIDisplay-Light;
font-family: SF-UI-Text-Heavy;
font-size: 18px;
font-weight: 300;
line-height: 27px;
......@@ -670,7 +676,6 @@ video {
}
@media (max-width: 576px) {
.text-h2-desktop {
font-family: SFUIDisplay-Light;
font-size: 14px;
font-weight: 300;
line-height: 21px;
......@@ -694,7 +699,7 @@ video {
}
}
.h3-desktop {
font-family: Avenir Next;
font-family: SF-UI-Text-Heavy;
margin-bottom: 18px;
font-size: 18px;
font-weight: 700;
......@@ -712,7 +717,7 @@ video {
}
}
.text-h3-desktop {
font-family: Avenir Next;
font-family: SFUIDisplay-Light;
margin-top: -12px;
font-size: 16px;
font-weight: 300;
......@@ -772,6 +777,17 @@ video {
margin-bottom: 15px;
}
}
@media (min-width: 1250px) {
.text-h2-desktop-main {
margin-bottom: 40px;
line-height: 10px;
}
}
@media (min-width: 1250px) {
.text-h2-desktop-main {
width: 870px;
}
}
@media (max-width: 576px) {
.text-h2-desktop-main {
margin-bottom: 40px;
......@@ -822,6 +838,26 @@ video {
margin-bottom: 10px;
}
}
.main-tittle-text {
font-family: SFUIDisplay-Light;
font-size: 18px;
font-weight: 300;
line-height: 27px;
letter-spacing: 0.18px;
color: #315197;
}
@media (max-width: 768px) {
.main-tittle-text {
font-size: 14px;
letter-spacing: 0.14px;
}
}
@media (max-width: 576px) {
.main-tittle-text {
font-size: 14px;
letter-spacing: 0.14px;
}
}
@media (max-width: 992px) {
.main-btn-margin {
margin-top: 130px;
......@@ -837,6 +873,26 @@ video {
margin-top: 15px!important;
}
}
.main-text {
font-family: SFUIDisplay-Light;
font-size: 18px;
font-weight: 300;
letter-spacing: 0.24px;
color: #303a81;
line-height: 21px;
}
@media (max-width: 768px) {
.main-text {
font-size: 14px;
letter-spacing: 0.14px;
}
}
@media (max-width: 576px) {
.main-text {
font-size: 14px;
letter-spacing: 0.14px;
}
}
/*advertising*/
.advertising-background {
/*background-repeat: no-repeat;
......@@ -849,9 +905,9 @@ video {
}
@media (max-width: 576px) {
.advertising-background {
padding-top: 45px;
padding-bottom: 20px;
margin-bottom: 60px;
padding-top: 60px;
padding-bottom: 5px;
margin-bottom: 68px;
background-image: url("../img/background-optuon-modal.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
......@@ -975,6 +1031,26 @@ video {
top: 40%;
}
}
.advertising-text {
font-family: SFUIDisplay-Light;
font-size: 18px;
font-weight: 300;
line-height: 24px;
letter-spacing: 0.24px;
color: #303a81;
}
@media (max-width: 768px) {
.advertising-text {
font-size: 14px;
letter-spacing: 0.14px;
}
}
@media (max-width: 576px) {
.advertising-text {
font-size: 14px;
letter-spacing: 0.14px;
}
}
@media (max-width: 576px) {
.advertising-text-p {
margin-bottom: 0;
......@@ -991,7 +1067,7 @@ video {
}
.advertising-text-order h2 {
/*.h2-desktop;*/
font-family: SFUIDisplay-Regular;
font-family: SF-UI-Text-Heavy;
font-size: 36px;
color: #303a81;
letter-spacing: 0.36px;
......@@ -1008,8 +1084,8 @@ video {
}
@media (max-width: 576px) {
.advertising-text-order h2 {
font-size: 24px;
width: 300px!important;
font-size: 22px;
width: 320px!important;
font-weight: 700;
letter-spacing: 0;
color: #303a81;
......@@ -1026,11 +1102,12 @@ video {
.advertising-text {
width: 300px;
order: 0;
line-height: 21px;
}
}
.advertising-text h2 {
/*.h2-desktop;*/
font-family: SFUIDisplay-Regular;
font-family: SF-UI-Text-Heavy;
font-size: 36px;
color: #303a81;
letter-spacing: 0.36px;
......@@ -1047,8 +1124,8 @@ video {
}
@media (max-width: 576px) {
.advertising-text h2 {
font-size: 24px;
width: 300px!important;
font-size: 22px;
width: 320px!important;
font-weight: bolder;
letter-spacing: 0;
color: #303a81;
......@@ -1103,7 +1180,7 @@ video {
min-width: 320px;
min-height: 183px;
margin-left: -25px;
margin-bottom: 17px;
margin-bottom: 13px;
}
}
@media (max-width: 1250px) {
......@@ -1132,7 +1209,7 @@ video {
min-width: 320px;
min-height: 183px;
margin-left: -25px;
margin-bottom: 50px;
margin-bottom: 52px;
}
}
/*option*/
......@@ -1235,6 +1312,7 @@ video {
}
.option-text {
min-height: 70px;
width: 385px;
}
@media (max-width: 768px) {
.option-text {
......@@ -1250,13 +1328,18 @@ video {
}
}
.option-text p {
font-family: Avenir Next;
font-size: 13px;
font-family: SFUIDisplay-Light;
font-size: 14px;
font-weight: 300;
line-height: 18px;
letter-spacing: 0.14px;
color: #303a81;
}
@media (max-width: 576px) {
.option-text p {
font-size: 13px;
}
}
.option-card-img-container {
text-align: center;
margin: 0 auto;
......@@ -1429,7 +1512,7 @@ video {
align-items: stretch;
width: 33%;
margin-top: 10px;
padding-right: 10%;
padding-right: 2%;
height: auto;
}
@media (max-width: 992px) {
......@@ -1475,6 +1558,12 @@ video {
margin-right: 16px;
}
}
@media (min-width: 1250px) {
.protection-text-margin {
width: 740px;
margin-bottom: 50px;
}
}
@media (max-width: 992px) {
.protection-text-margin {
margin-bottom: 40px;
......@@ -1552,6 +1641,11 @@ video {
.tittle-catalog {
margin-bottom: 70px;
}
@media (min-width: 1250px) {
.tittle-catalog {
width: 665px;
}
}
@media (max-width: 768px) {
.tittle-catalog {
margin-bottom: 50px;
......@@ -1591,15 +1685,17 @@ video {
margin-bottom: 23px;
}
}
.catalog-img-container h5 {
font-family: SF-UI-Text-Heavy;
}
@media (max-width: 576px) {
.catalog-img-container h5 {
font-family: AvenirNext-Heavy;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0.16px;
color: #303a81;
margin-bottom: 14px;
margin-bottom: 19px;
}
}
.catalog-img-container img {
......@@ -1676,9 +1772,9 @@ video {
font-family: AvenirNext-Heavy;
font-size: 18px;
font-weight: 700;
line-height: 18px;
line-height: 16px;
letter-spacing: 0.18px;
margin-bottom: 5px;
margin-bottom: 0;
}
}
.catalog-text p {
......@@ -1701,6 +1797,27 @@ video {
font-family: Avenir Next;
font-size: 14px;
letter-spacing: 0.14px;
line-height: 18px;
}
}
.catalog-tittle-text {
font-family: SFUIDisplay-Light;
font-size: 18px;
font-weight: 300;
line-height: 21px;
letter-spacing: 0.24px;
color: #303a81;
}
@media (max-width: 768px) {
.catalog-tittle-text {
font-size: 14px;
letter-spacing: 0.14px;
}
}
@media (max-width: 576px) {
.catalog-tittle-text {
font-size: 14px;
letter-spacing: 0.14px;
}
}
/*technology*/
......@@ -1739,7 +1856,7 @@ video {
}
@media (max-width: 576px) {
.technology {
padding-top: 55px;
padding-top: 58px;
padding-bottom: 35px;
margin-bottom: 40px;
}
......@@ -1788,6 +1905,11 @@ video {
margin-bottom: 10px;
}
}
@media (min-width: 1250px) {
.technology-p-margin {
width: 723px;
}
}
@media (max-width: 576px) {
.technology-p-margin {
margin-bottom: 5px;
......
css/styles.less
......@@ -20,6 +20,12 @@
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: SF-UI-Text-Heavy;
src: url("../fonts/SF-UI-Text-Heavy.ttf");
font-weight: normal;
font-style: normal;
}
body {
box-sizing: border-box;
}
......@@ -551,7 +557,7 @@ video {
margin-top: 4px;
}
.text-h2-desktop {
font-family: SFUIDisplay-Light;
font-family: SF-UI-Text-Heavy;
font-size: 18px;
font-weight: 300;
line-height: 27px;
......@@ -564,7 +570,6 @@ video {
letter-spacing: 0.14px;
}
@media (max-width: 576px) {
font-family: SFUIDisplay-Light;
font-size: 14px;
font-weight: 300;
line-height: 21px;
......@@ -584,7 +589,7 @@ video {
}
}
.h3-desktop {
font-family: Avenir Next;
font-family: SF-UI-Text-Heavy;
margin-bottom: 18px;
font-size: 18px;
font-weight: 700;
......@@ -600,7 +605,7 @@ video {
}
}
.text-h3-desktop {
font-family: Avenir Next;
font-family: SFUIDisplay-Light;
margin-top: -12px;
font-size: 16px;
font-weight: 300;
......@@ -651,6 +656,13 @@ video {
}
}
.text-h2-desktop-main {
@media(min-width: 1250px){
margin-bottom: 40px;
line-height: 10px;
}
@media(min-width: 1250px){
width: 870px;
}
@media (max-width: 576px) {
margin-bottom: 40px;
}
......@@ -696,6 +708,22 @@ video {
}
}
.main-tittle-text {
font-family: SFUIDisplay-Light;
font-size: 18px;
font-weight: 300;
line-height: 27px;
letter-spacing: 0.18px;
color: #315197;
@media (max-width: 768px) {
font-size: 14px;
letter-spacing: 0.14px;
}
@media (max-width: 576px) {
font-size: 14px;
letter-spacing: 0.14px;
}
}
.main-btn-margin {
@media (max-width: 992px) {
margin-top: 130px;
......@@ -707,6 +735,10 @@ video {
margin-top: 15px!important;
}
}
.main-text {
.catalog-tittle-text;
line-height: 21px;
}
/*advertising*/
.advertising-background {
/*background-repeat: no-repeat;
......@@ -717,9 +749,9 @@ video {
padding-bottom: 60px;
margin-bottom: 70px;
@media (max-width: 576px) {
padding-top: 45px;
padding-bottom: 20px;
margin-bottom: 60px;
padding-top: 60px;
padding-bottom: 5px;
margin-bottom: 68px;
background-image: url("../img/background-optuon-modal.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
......@@ -814,6 +846,22 @@ video {
top: 40%;
}
}
.advertising-text {
font-family: SFUIDisplay-Light;
font-size: 18px;
font-weight: 300;
line-height: 24px;
letter-spacing: 0.24px;
color: #303a81;
@media (max-width: 768px) {
font-size: 14px;
letter-spacing: 0.14px;
}
@media (max-width: 576px) {
font-size: 14px;
letter-spacing: 0.14px;
}
}
.advertising-text-p {
@media (max-width: 576px) {
margin-bottom: 0;
......@@ -827,7 +875,7 @@ video {
width: 110%;
h2 {
/*.h2-desktop;*/
font-family: SFUIDisplay-Regular;
font-family: SF-UI-Text-Heavy;
font-size: 36px;
color: #303a81;
letter-spacing: 0.36px;
......@@ -840,8 +888,8 @@ video {
margin-bottom: 15px;
}
@media (max-width: 576px) {
font-size: 24px;
width: 300px!important;
font-size: 22px;
width: 320px!important;
font-weight: 700;
letter-spacing: 0;
color: #303a81;
......@@ -856,11 +904,12 @@ video {
@media (max-width: 576px) {
width: 300px;
order: 0;
line-height: 21px;
}
width: 110%;
h2 {
/*.h2-desktop;*/
font-family: SFUIDisplay-Regular;
font-family: SF-UI-Text-Heavy;
font-size: 36px;
color: #303a81;
letter-spacing: 0.36px;
......@@ -873,8 +922,8 @@ video {
margin-bottom: 15px;
}
@media (max-width: 576px) {
font-size: 24px;
width: 300px!important;
font-size: 22px;
width: 320px!important;
font-weight: bolder;
letter-spacing: 0;
color: #303a81;
......@@ -921,7 +970,7 @@ video {
min-width: 320px;
min-height: 183px;
margin-left: -25px;
margin-bottom: 17px;
margin-bottom: 13px;
}
}
}
......@@ -946,7 +995,7 @@ video {
min-width: 320px;
min-height: 183px;
margin-left: -25px;
margin-bottom: 50px;
margin-bottom: 52px;
}
}
}
......@@ -1027,6 +1076,8 @@ video {
}
.option-text {
min-height: 70px;
width: 385px;
@media (max-width: 768px) {
margin: 0 auto;
height: 45px;
......@@ -1037,12 +1088,15 @@ video {
margin-bottom: 3px;
}
p {
font-family: Avenir Next;
font-size: 13px;
font-family: SFUIDisplay-Light;
font-size: 14px;
font-weight: 300;
line-height: 18px;
letter-spacing: 0.14px;
color: #303a81;
@media (max-width: 576px) {
font-size: 13px;
}
}
}
.option-card-img-container {
......@@ -1187,7 +1241,7 @@ video {
align-items: stretch;
width: 33%;
margin-top: 10px;
padding-right: 10%;
padding-right: 2%;
height: auto;
@media (max-width: 992px) {
height: 250px;
......@@ -1224,6 +1278,10 @@ video {
}
}
.protection-text-margin {
@media(min-width: 1250px){
width: 740px;
margin-bottom: 50px;
}
@media (max-width: 992px) {
margin-bottom: 40px;
}
......@@ -1280,7 +1338,11 @@ video {
@media (max-width: 768px) {
flex-wrap: wrap;
}
}.tittle-catalog {
}
.tittle-catalog {
@media(min-width: 1250px){
width: 665px;
}
margin-bottom: 70px;
@media (max-width: 768px) {
margin-bottom: 50px;
......@@ -1288,7 +1350,7 @@ video {
@media (max-width: 576px) {
margin-bottom: 47px;
}
}
}
.catalog-img-container {
font-family: AvenirNext-Heavy;
margin-right: 5%;
......@@ -1310,14 +1372,14 @@ video {
margin-bottom: 23px;
}
h5 {
font-family: SF-UI-Text-Heavy;
@media(max-width: 576px){
font-family: AvenirNext-Heavy;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0.16px;
color: #303a81;
margin-bottom: 14px;
margin-bottom: 19px;
}
}
img {
......@@ -1376,9 +1438,9 @@ video {
font-family: AvenirNext-Heavy;
font-size: 18px;
font-weight: 700;
line-height: 18px;
line-height: 16px;
letter-spacing: 0.18px;
margin-bottom: 5px;
margin-bottom: 0;
}
}
p {
......@@ -1397,7 +1459,24 @@ video {
font-family: Avenir Next;
font-size: 14px;
letter-spacing: 0.14px;
line-height: 18px;
}
}
}
.catalog-tittle-text {
font-family: SFUIDisplay-Light;
font-size: 18px;
font-weight: 300;
line-height: 21px;
letter-spacing: 0.24px;
color: #303a81;
@media (max-width: 768px) {
font-size: 14px;
letter-spacing: 0.14px;
}
@media (max-width: 576px) {
font-size: 14px;
letter-spacing: 0.14px;
}
}
/*technology*/
......@@ -1426,7 +1505,7 @@ video {
margin-bottom: 40px;
}
@media (max-width: 576px) {
padding-top: 55px;
padding-top: 58px;
padding-bottom: 35px;
margin-bottom: 40px;
}
......@@ -1470,6 +1549,9 @@ video {
}
}
.technology-p-margin {
@media(min-width: 1250px){
width: 723px;
}
@media (max-width: 576px) {
margin-bottom: 5px;
}
......
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