Skip to content

L
landing_pages
Commit d918fef3 by Iren
Options

add style for max-widht 576px for forms and footer

parent aea888c6
Showing with 250 additions and 37 deletions
css/styles.css
......@@ -485,6 +485,14 @@ video {
margin-left: 25px;
}
}
@media (max-width: 768px) {
video {
width: 85%;
height: 50%;
margin-top: 50px;
margin-left: 25px;
}
}
@media (max-width: 576px) {
video {
width: 20%;
......@@ -1249,6 +1257,26 @@ video {
line-height: 24px;
}
}
.protection-flex {
display: flex;
flex-direction: row;
}
@media (max-width: 992px) {
.protection-flex {
height: 430px;
}
}
@media (max-width: 768px) {
.protection-flex {
height: 350px;
}
}
@media (max-width: 576px) {
.protection-flex {
flex-flow: wrap;
height: 350px;
}
}
.protection {
display: flex;
flex-direction: row;
......@@ -1277,7 +1305,7 @@ video {
flex-flow: nowrap;
width: 100%;
padding-right: 0;
height: auto;
height: 90px;
}
}
.protection-img {
......@@ -1292,7 +1320,7 @@ video {
}
@media (max-width: 576px) {
.protection-img {
height: 110px;
height: 90px;
margin-left: -10px;
}
}
......@@ -1707,8 +1735,16 @@ video {
@media (max-width: 576px) {
.price-wrapper {
width: 300px;
height: 731px;
text-overflow: ellipsis;
justify-content: flex-start;
height: 581px;
margin-bottom: 60px;
}
}
@media (max-width: 768px) {
.price-display-none {
position: relative;
display: none;
}
}
.price-container,
......@@ -1737,10 +1773,11 @@ video {
padding: 30px 8px 32px 8px;
}
}
@media (max-width: 768px) {
@media (max-width: 768px) and (max-width: 768px) {
.price-container,
.price-container-active {
width: 145px;
width: 60px;
height: 476px;
}
}
.price-container h6,
......@@ -1780,6 +1817,12 @@ video {
width: 190px;
}
}
@media (max-width: 768px) {
.price-container img,
.price-container-active img {
width: 50px;
}
}
.price-container-active {
box-shadow: 0 25px 25px #e6effa;
height: 875px;
......@@ -1806,7 +1849,8 @@ video {
}
@media (max-width: 768px) {
.price-container-active {
width: 145px;
width: 60px;
height: 476px;
}
}
.price-container-active h6 {
......@@ -1838,8 +1882,12 @@ video {
width: 191px;
}
}
@media (max-width: 768px) {
.price-container-active img {
width: 50px;
}
}
.price-active .price-user {
font-size: 20px;
text-transform: uppercase;
color: #303a81;
}
......@@ -1853,11 +1901,21 @@ video {
font-size: 30px;
}
}
@media (max-width: 768px) {
.price-active .price-user p {
font-size: 10px;
}
}
.price .price-user {
font-size: 20px;
text-transform: uppercase;
color: #303a81;
}
@media (max-width: 768px) {
.price .price-user {
font-size: 10px;
}
}
.price,
.price-active {
width: 100%;
......@@ -1883,6 +1941,12 @@ video {
font-size: 30px;
}
}
@media (max-width: 768px) {
.price p,
.price-active p {
font-size: 10px;
}
}
.price span,
.price-active span {
font-size: 30px;
......@@ -1909,6 +1973,12 @@ video {
font-size: 24px;
}
}
@media (max-width: 768px) {
.price .price-p-margin {
line-height: 30px;
font-size: 10px;
}
}
.price-p-margin {
line-height: 40px;
margin-top: 110px;
......@@ -1924,6 +1994,11 @@ video {
border-bottom: #c94d4e 1px solid;
margin: 0 auto;
}
@media (max-width: 768px) {
.price-line-little {
width: 30px;
}
}
.price-info {
margin-left: 16px;
list-style-type: disc;
......@@ -1936,6 +2011,12 @@ video {
color: #303a81;
line-height: 42px;
}
@media (max-width: 768px) {
.price-info li {
font-size: 5px;
line-height: 10px;
}
}
.price-info span {
margin-left: 5px;
color: #c94d4e;
......@@ -1951,6 +2032,11 @@ video {
width: 170px;
}
}
@media (max-width: 768px) {
.price-line {
width: 50px;
}
}
.price-line-big {
width: 256px;
height: 2px;
......@@ -1962,6 +2048,11 @@ video {
width: 170px;
}
}
@media (max-width: 768px) {
.price-line-big {
width: 50px;
}
}
.price-info-carry {
line-height: 12px;
color: #c94d4e;
......@@ -1995,6 +2086,14 @@ video {
margin-left: -3px;
}
}
@media (max-width: 768px) {
.price-btn {
font-size: 8px;
width: 50px;
padding: 12px 10px 15px 10px;
margin-left: -3px;
}
}
.price-btn-active {
background: #c94d4e;
color: white;
......@@ -2011,6 +2110,14 @@ video {
padding: 12px 10px 15px 10px;
}
}
@media (max-width: 768px) {
.price-btn-active {
font-size: 8px;
width: 50px;
padding: 12px 10px 15px 10px;
margin-left: -3px;
}
}
/*forms*/
.connection {
background-image: url("../img/background-form.jpg");
......@@ -2020,7 +2127,7 @@ video {
}
.form-wrapper {
text-align: center;
height: 548px;
height: 508px;
max-width: 650px;
margin: 0 auto;
padding-top: 12.7%;
......@@ -2028,8 +2135,9 @@ video {
}
@media (max-width: 576px) {
.form-wrapper {
height: 614px;
padding-top: 71px;
height: 560px;
padding-top: 45px;
padding-bottom: 1px;
}
}
.form-wrapper h6 {
......@@ -2047,9 +2155,9 @@ video {
}
@media (max-width: 576px) {
.form-wrapper h6 {
font-size: 30px;
font-size: 24px;
font-weight: 400;
line-height: 62px;
line-height: 57px;
letter-spacing: 0.24px;
margin-bottom: 0;
}
......@@ -2073,7 +2181,7 @@ video {
font-weight: 400;
line-height: 21px;
letter-spacing: 0;
margin-bottom: 31px;
margin-bottom: 23px;
color: white;
}
}
......@@ -2115,7 +2223,7 @@ input.form-last-child {
.form-line {
margin: 0 auto;
width: 398px;
height: 10px;
height: 2px;
border-bottom: #c94d4e 2px solid;
margin-bottom: 47px;
}
......@@ -2165,7 +2273,7 @@ input.form-last-child {
/*footer*/
@media (max-width: 576px) {
footer {
padding-top: 60px;
padding-top: 20px;
}
}
.footer-wrapper-logo {
......@@ -2199,6 +2307,11 @@ input.form-last-child {
.footer-logo-link {
margin-top: -1px;
}
@media (max-width: 576px) {
.footer-logo-link {
margin-top: 0;
}
}
.footer-logo-link a {
font-family: SFUIDisplay-Regular;
font-size: 16px;
......@@ -2207,6 +2320,12 @@ input.form-last-child {
letter-spacing: 0.35px;
color: #315197;
}
@media (max-width: 576px) {
.footer-logo-link a {
font-size: 14px;
letter-spacing: 0.14px;
}
}
.footer-wrapper-info {
display: flex;
justify-content: space-between;
......@@ -2232,7 +2351,7 @@ input.form-last-child {
order: 3;
width: 320px;
margin-bottom: 10px;
margin-top: 0;
margin-top: -3px;
}
}
@media (max-width: 576px) {
......@@ -2253,7 +2372,7 @@ input.form-last-child {
}
@media (max-width: 576px) {
.footer-link {
margin-bottom: 10px;
margin-bottom: 3px;
}
}
@media (max-width: 576px) {
......@@ -2289,7 +2408,7 @@ input.form-last-child {
font-family: SFUIDisplay-Regular;
font-size: 14px;
font-weight: 400;
line-height: 40px;
line-height: 25px;
letter-spacing: 0.14px;
color: #315197;
}
......@@ -2297,6 +2416,11 @@ input.form-last-child {
.footer-contacts-link {
height: 34px;
}
@media (max-width: 576px) {
.footer-contacts-link {
margin-top: 2px;
}
}
.footer-contact-img {
padding-top: 5px;
}
......
css/styles.less
......@@ -406,6 +406,12 @@ video {
margin-top: 50px;
margin-left: 25px;
}
@media (max-width: 768px) {
width: 85%;
height: 50%;
margin-top: 50px;
margin-left: 25px;
}
@media (max-width: 576px) {
width: 20%;
height: 20%;
......@@ -1047,6 +1053,20 @@ video {
}
}
}
.protection-flex {
display: flex;
flex-direction: row;
@media (max-width: 992px) {
height: 430px;
}
@media (max-width: 768px) {
height: 350px;
}
@media (max-width: 576px) {
flex-flow: wrap;
height: 350px;
}
}
.protection {
display: flex;
flex-direction: row;
......@@ -1069,7 +1089,7 @@ video {
flex-flow: nowrap;
width: 100%;
padding-right: 0;
height: auto;
height: 90px;
}
}
.protection-img {
......@@ -1080,7 +1100,7 @@ video {
margin-left: -10px;
}
@media (max-width: 576px) {
height: 110px;
height: 90px;
margin-left: -10px;
}
img {
......@@ -1412,10 +1432,19 @@ video {
}
@media (max-width: 576px) {
width: 300px;
height: 731px;
text-overflow: ellipsis;
justify-content: flex-start;
height: 581px;
margin-bottom: 60px;
}
}
.price-display-none {
@media (max-width: 768px){
position: relative;
display: none;
}
}
.price-container, .price-container-active {
position: relative;
max-width: 256px;
......@@ -1435,7 +1464,10 @@ video {
padding: 30px 8px 32px 8px;
}
@media (max-width: 768px) {
width: 145px;
@media (max-width: 768px) {
width: 60px;
height: 476px;
}
}
h6 {
font-family: AvenirNext-Heavy;
......@@ -1462,6 +1494,9 @@ video {
@media (max-width: 992px) {
width: 190px;
}
@media (max-width: 768px) {
width: 50px;
}
}
}
.price-container-active {
......@@ -1483,9 +1518,11 @@ video {
height: 970px;
padding: 30px 8px 32px 8px;
}
@media (max-width: 768px) {
width: 145px;
}
@media (max-width: 768px) {
width: 60px;
height: 476px;
}
h6 {
font-family: AvenirNext-Heavy;
position: relative;
......@@ -1510,10 +1547,12 @@ video {
@media (max-width: 992px) {
width: 191px;
}
@media (max-width: 768px) {
width: 50px;
}
}
}
.price-active .price-user {
font-size: 20px;
text-transform: uppercase;
color: #303a81;
p {
......@@ -1523,12 +1562,18 @@ video {
@media (max-width: 992px) {
font-size: 30px;
}
@media (max-width: 768px) {
font-size: 10px;
}
}
}
.price .price-user {
font-size: 20px;
text-transform: uppercase;
color: #303a81;
@media (max-width: 768px) {
font-size: 10px;
}
}
.price, .price-active {
width: 100%;
......@@ -1545,6 +1590,9 @@ video {
@media (max-width: 992px) {
font-size: 30px;
}
@media (max-width: 768px) {
font-size: 10px;
}
}
span {
font-size: 30px;
......@@ -1567,6 +1615,10 @@ video {
line-height: 30px;
font-size: 24px;
}
@media (max-width: 768px) {
line-height: 30px;
font-size: 10px;
}
}
.price-p-margin {
line-height: 40px;
......@@ -1580,6 +1632,9 @@ video {
height: 1px;
border-bottom: #c94d4e 1px solid;
margin: 0 auto;
@media (max-width: 768px) {
width: 30px;
}
}
.price-info {
......@@ -1592,6 +1647,10 @@ video {
letter-spacing: 0;
color: #303a81;
line-height: 42px;
@media (max-width: 768px) {
font-size: 5px;
line-height: 10px;
}
}
span {
margin-left: 5px;
......@@ -1606,6 +1665,9 @@ video {
@media (max-width: 1250px) {
width: 170px;
}
@media (max-width: 768px) {
width: 50px;
}
}
.price-line-big {
width: 256px;
......@@ -1615,6 +1677,9 @@ video {
@media (max-width: 1250px) {
width: 170px;
}
@media (max-width: 768px) {
width: 50px;
}
}
.price-info-carry {
line-height: 12px;
......@@ -1645,6 +1710,12 @@ video {
padding: 12px 10px 15px 10px;
margin-left: -3px;
}
@media (max-width: 768px) {
font-size: 8px;
width: 50px;
padding: 12px 10px 15px 10px;
margin-left: -3px;
}
}
.price-btn-active {
background: #c94d4e;
......@@ -1657,6 +1728,12 @@ video {
width: 180px;
padding: 12px 10px 15px 10px;
}
@media (max-width: 768px) {
font-size: 8px;
width: 50px;
padding: 12px 10px 15px 10px;
margin-left: -3px;
}
}
/*forms*/
.connection {
......@@ -1667,14 +1744,15 @@ video {
}
.form-wrapper {
text-align: center;
height: 548px;
height: 508px;
max-width: 650px;
margin: 0 auto;
padding-top: 12.7%;
padding-bottom: 14%;
@media (max-width: 576px) {
height: 614px;
padding-top: 71px;
height: 560px;
padding-top: 45px;
padding-bottom: 1px;
}
h6 {
font-family: SF-UI-Display-Black;
......@@ -1687,9 +1765,9 @@ video {
font-size: 50px;
}
@media (max-width: 576px) {
font-size: 30px;
font-size: 24px;
font-weight: 400;
line-height: 62px;
line-height: 57px;
letter-spacing: 0.24px;
margin-bottom: 0;
}
......@@ -1712,7 +1790,7 @@ video {
font-weight: 400;
line-height: 21px;
letter-spacing: 0;
margin-bottom: 31px;
margin-bottom: 23px;
color: white;
}
}
......@@ -1750,7 +1828,7 @@ input.form-last-child {
.form-line {
margin: 0 auto;
width: 398px;
height: 10px;
height: 2px;
border-bottom: #c94d4e 2px solid;
margin-bottom: 47px;
@media (max-width: 576px) {
......@@ -1794,7 +1872,7 @@ input.form-last-child {
/*footer*/
footer {
@media (max-width: 576px) {
padding-top: 60px;
padding-top: 20px;
}
}
.footer-wrapper-logo {
......@@ -1824,6 +1902,9 @@ footer {
}
.footer-logo-link {
margin-top: -1px;
@media (max-width: 576px){
margin-top: 0;
}
a {
font-family: SFUIDisplay-Regular;
font-size: 16px;
......@@ -1831,7 +1912,12 @@ footer {
line-height: 30px;
letter-spacing: 0.35px;
color: #315197;
@media (max-width: 576px){
font-size: 14px;
letter-spacing: 0.14px;
}
}
}
.footer-wrapper-info {
display: flex;
......@@ -1854,7 +1940,7 @@ footer {
order: 3;
width: 320px;
margin-bottom: 10px;
margin-top: 0;
margin-top: -3px;
}
img {
@media (max-width: 576px) {
......@@ -1873,7 +1959,7 @@ footer {
.footer-link {
margin-bottom: 20px;
@media(max-width: 576px){
margin-bottom: 10px;
margin-bottom: 3px;
}
a {
@media (max-width: 576px) {
......@@ -1905,7 +1991,7 @@ footer {
font-family: SFUIDisplay-Regular;
font-size: 14px;
font-weight: 400;
line-height: 40px;
line-height: 25px;
letter-spacing: 0.14px;
color: #315197;
}
......@@ -1913,6 +1999,9 @@ footer {
}
.footer-contacts-link {
height: 34px;
@media (max-width: 576px) {
margin-top: 2px;
}
}
.footer-contact-img {
padding-top: 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