Skip to content

L
landing_pages
Commit b0989fc7 by Iren
Options

add style option

parent e1ab4d1e
Pipeline #3607 canceled with stage
    Showing with 68 additions and 28 deletions
    css/styles.css
    ...@@ -503,14 +503,14 @@ h1 { ...@@ -503,14 +503,14 @@ h1 {
    } }
    @media (max-width: 768px) { @media (max-width: 768px) {
    .header-btn { .header-btn {
    width: 220px; width: 120px;
    font-size: 16px; font-size: 10px;
    } }
    } }
    @media (max-width: 576px) { @media (max-width: 576px) {
    .header-btn { .header-btn {
    margin-bottom: 20px; margin-bottom: 20px;
    width: 230px; width: 180px;
    height: 48px; height: 48px;
    font-size: 16px; font-size: 16px;
    line-height: 30px; line-height: 30px;
    ...@@ -552,15 +552,15 @@ h1 { ...@@ -552,15 +552,15 @@ h1 {
    } }
    @media (max-width: 768px) { @media (max-width: 768px) {
    .header-btn-background { .header-btn-background {
    width: 220px; width: 120px;
    font-size: 16px; font-size: 10px;
    } }
    } }
    @media (max-width: 576px) { @media (max-width: 576px) {
    .header-btn-background { .header-btn-background {
    width: 230px; width: 180px;
    height: 48px; height: 48px;
    font-size: 16px; font-size: 12px;
    line-height: 30px; line-height: 30px;
    font-weight: 400; font-weight: 400;
    letter-spacing: 0.16px; letter-spacing: 0.16px;
    ...@@ -1359,9 +1359,9 @@ video { ...@@ -1359,9 +1359,9 @@ video {
    min-height: 70px; min-height: 70px;
    width: 405px; width: 405px;
    } }
    @media (min-width: 1240px) { @media (min-width: 1270px) {
    .option-text { .option-text {
    padding-left: 45px; padding-left: 40px;
    } }
    } }
    @media (max-width: 992px) { @media (max-width: 992px) {
    ...@@ -2279,7 +2279,6 @@ video { ...@@ -2279,7 +2279,6 @@ video {
    font-family: SFUIDisplay-Light; font-family: SFUIDisplay-Light;
    text-transform: uppercase; text-transform: uppercase;
    color: #303a81; color: #303a81;
    font-size: 24px;
    margin-bottom: 11px; margin-bottom: 11px;
    } }
    @media (max-width: 1250px) { @media (max-width: 1250px) {
    ...@@ -2289,7 +2288,7 @@ video { ...@@ -2289,7 +2288,7 @@ video {
    } }
    @media (max-width: 992px) { @media (max-width: 992px) {
    .price-active p.price-user p { .price-active p.price-user p {
    font-size: 30px; font-size: 20px;
    } }
    } }
    @media (max-width: 768px) { @media (max-width: 768px) {
    ...@@ -2301,7 +2300,6 @@ video { ...@@ -2301,7 +2300,6 @@ video {
    font-family: SFUIDisplay-Light; font-family: SFUIDisplay-Light;
    text-transform: uppercase; text-transform: uppercase;
    color: #303a81; color: #303a81;
    font-size: 24px;
    margin-bottom: 11px; margin-bottom: 11px;
    } }
    @media (max-width: 1250px) { @media (max-width: 1250px) {
    ...@@ -2311,7 +2309,7 @@ video { ...@@ -2311,7 +2309,7 @@ video {
    } }
    @media (max-width: 992px) { @media (max-width: 992px) {
    .price p.price-user p { .price p.price-user p {
    font-size: 30px; font-size: 20px;
    } }
    } }
    @media (max-width: 768px) { @media (max-width: 768px) {
    ...@@ -2350,13 +2348,31 @@ video { ...@@ -2350,13 +2348,31 @@ video {
    @media (max-width: 768px) { @media (max-width: 768px) {
    .price p, .price p,
    .price-active p { .price-active p {
    font-size: 10px; font-size: 20px;
    } }
    } }
    .price span, .price span,
    .price-active span { .price-active span {
    font-size: 30px; font-size: 30px;
    } }
    @media (max-width: 1250px) {
    .price span,
    .price-active span {
    font-size: 30px;
    }
    }
    @media (max-width: 992px) {
    .price span,
    .price-active span {
    font-size: 18px;
    }
    }
    @media (max-width: 768px) {
    .price span,
    .price-active span {
    font-size: 10px;
    }
    }
    .price-active .price-user { .price-active .price-user {
    font-size: 20px; font-size: 20px;
    text-transform: uppercase; text-transform: uppercase;
    ...@@ -2413,6 +2429,16 @@ p.price-p { ...@@ -2413,6 +2429,16 @@ p.price-p {
    letter-spacing: 0; letter-spacing: 0;
    color: #303a81; color: #303a81;
    } }
    @media (max-width: 992px) {
    p.price-p {
    font-size: 20px;
    }
    }
    @media (max-width: 768px) {
    p.price-p {
    font-size: 10px;
    }
    }
    .price-p-margin { .price-p-margin {
    line-height: 40px; line-height: 40px;
    margin-top: 50px; margin-top: 50px;
    ......
    css/styles.less
    ...@@ -418,12 +418,12 @@ h1 { ...@@ -418,12 +418,12 @@ h1 {
    margin-top: 5px; margin-top: 5px;
    } }
    @media (max-width: 768px) { @media (max-width: 768px) {
    width: 220px; width: 120px;
    font-size: 16px; font-size: 10px;
    } }
    @media (max-width: 576px) { @media (max-width: 576px) {
    margin-bottom: 20px; margin-bottom: 20px;
    width: 230px; width: 180px;
    height: 48px; height: 48px;
    font-size: 16px; font-size: 16px;
    line-height: 30px; line-height: 30px;
    ...@@ -459,13 +459,13 @@ h1 { ...@@ -459,13 +459,13 @@ h1 {
    margin-top: 5px; margin-top: 5px;
    } }
    @media (max-width: 768px) { @media (max-width: 768px) {
    width: 220px; width: 120px;
    font-size: 16px; font-size: 10px;
    } }
    @media (max-width: 576px) { @media (max-width: 576px) {
    width: 230px; width: 180px;
    height: 48px; height: 48px;
    font-size: 16px; font-size: 12px;
    line-height: 30px; line-height: 30px;
    font-weight: 400; font-weight: 400;
    letter-spacing: 0.16px; letter-spacing: 0.16px;
    ...@@ -1108,8 +1108,8 @@ video { ...@@ -1108,8 +1108,8 @@ video {
    .option-text { .option-text {
    min-height: 70px; min-height: 70px;
    width: 405px; width: 405px;
    @media(min-width: 1240px){ @media(min-width: 1270px){
    padding-left: 45px; padding-left: 40px;
    } }
    @media (max-width: 992px) { @media (max-width: 992px) {
    width: 260px; width: 260px;
    ...@@ -1839,14 +1839,13 @@ padding-left: 45px; ...@@ -1839,14 +1839,13 @@ padding-left: 45px;
    font-family: SFUIDisplay-Light; font-family: SFUIDisplay-Light;
    text-transform: uppercase; text-transform: uppercase;
    color: #303a81; color: #303a81;
    font-size: 24px;
    margin-bottom: 11px; margin-bottom: 11px;
    p { p {
    @media (max-width: 1250px) { @media (max-width: 1250px) {
    font-size: 40px; font-size: 40px;
    } }
    @media (max-width: 992px) { @media (max-width: 992px) {
    font-size: 30px; font-size: 20px;
    } }
    @media (max-width: 768px) { @media (max-width: 768px) {
    font-size: 10px; font-size: 10px;
    ...@@ -1857,14 +1856,14 @@ padding-left: 45px; ...@@ -1857,14 +1856,14 @@ padding-left: 45px;
    font-family: SFUIDisplay-Light; font-family: SFUIDisplay-Light;
    text-transform: uppercase; text-transform: uppercase;
    color: #303a81; color: #303a81;
    font-size: 24px;
    margin-bottom: 11px; margin-bottom: 11px;
    p { p {
    @media (max-width: 1250px) { @media (max-width: 1250px) {
    font-size: 40px; font-size: 40px;
    } }
    @media (max-width: 992px) { @media (max-width: 992px) {
    font-size: 30px; font-size: 20px;
    } }
    @media (max-width: 768px) { @media (max-width: 768px) {
    font-size: 10px; font-size: 10px;
    ...@@ -1890,11 +1889,20 @@ padding-left: 45px; ...@@ -1890,11 +1889,20 @@ padding-left: 45px;
    font-size: 30px; font-size: 30px;
    } }
    @media (max-width: 768px) { @media (max-width: 768px) {
    font-size: 10px; font-size: 20px;
    } }
    } }
    span { span {
    font-size: 30px; font-size: 30px;
    @media (max-width: 1250px) {
    font-size: 30px;
    }
    @media (max-width: 992px) {
    font-size: 18px;
    }
    @media (max-width: 768px) {
    font-size: 10px;
    }
    } }
    } }
    .price-active .price-user { .price-active .price-user {
    ...@@ -1942,6 +1950,12 @@ p.price-p { ...@@ -1942,6 +1950,12 @@ p.price-p {
    line-height: 24px; line-height: 24px;
    letter-spacing: 0; letter-spacing: 0;
    color: #303a81; color: #303a81;
    @media(max-width: 992px){
    font-size: 20px;
    }
    @media(max-width: 768px){
    font-size: 10px;
    }
    } }
    .price-p-margin { .price-p-margin {
    line-height: 40px; line-height: 40px;
    ......
    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