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