Skip to content

L
landing_pages
Commit f5ec8b51 by Iren
Options

Add secthio advertising.

parent cd4b44a0
Showing with 693 additions and 2 deletions
css/styles.css
/*@desktop-size: 900px;
@mobile-size: 400px;
#id_about_section {
.section-header {
@media (min-width: @desktop-size) {
h3 { }
p { }
}
@media (min-width: @mobile-size) {
h3 { }
p { }
}
}
.item-wrapper {
.item {
// Тут нужн овпилить на флексах
// Тут нужно сделать чтобы картинка была по центру или по низу
// в зависимости от разрешения
@media (min-width: @desktop-size) {
img { }
h4 { }
p { }
}
@media (min-width: @mobile-size) {
img { }
h4 { }
p {}
}
}
}
}*/
.main-flex-btn {
display: flex;
justify-content: center;
}
button.main-btn {
width: 290px;
height: 52px;
margin-top: 30px;
margin-bottom: 75px;
border-radius: 26px;
background: #c94d4e;
color: #ffffff;
font-size: 18px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0.18px;
text-align: center;
}
@media (max-width: 576px) {
button.main-btn {
width: 231px;
height: 49px;
margin-top: 30px;
margin-bottom: 75px;
border-radius: 24px;
background: #c94d4e;
color: #ffffff;
font-size: 16px;
line-height: 27.33px;
letter-spacing: 0.18px;
}
}
header {
background-image: url("../img/banner.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center center;
margin-bottom: 66px;
}
@media (max-width: 576px) {
header {
margin-bottom: 0;
}
}
.bbb {
padding-top: 39.16%;
color: red;
}
.main-container {
max-width: 1250px;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
/*border: red 1px solid;*/
}
@media (max-width: 576px) {
.main-container {
padding-left: 0;
padding-right: 0;
}
}
.h2-desktop {
font-size: 36px;
font-weight: 400;
line-height: 62px;
margin-bottom: 3px;
color: #315197;
letter-spacing: 0.36px;
max-width: 803px;
}
@media (max-width: 576px) {
.h2-desktop {
font-size: 24px;
line-height: 30px;
margin-bottom: 3px;
letter-spacing: 0.24px;
max-width: 250px;
margin-top: 20px;
}
}
.h2-mobile {
font-size: 24px;
font-weight: 400;
line-height: 30px;
margin-bottom: 3px;
color: #315197;
letter-spacing: 0.24px;
max-width: 803px;
margin-top: 0!important;
}
.main-line {
width: 200px;
height: 2px;
background: #c94d4e;
padding-bottom: 9px;
}
.text-h2-desktop {
font-size: 18px;
font-weight: 300;
line-height: 27px;
color: #315197;
letter-spacing: 0.18px;
max-width: 850px;
margin-bottom: 40px;
}
@media (max-width: 576px) {
.text-h2-desktop {
font-size: 14px;
font-weight: 300;
line-height: 21px;
color: #315197;
letter-spacing: 0.14px;
}
}
@media (max-width: 576px) {
.h2-desktop-tittle {
max-width: 170px;
}
}
.h3-desktop {
font-size: 18px;
font-weight: 700;
line-height: 27px;
color: #315197;
letter-spacing: 0.18px;
}
@media (max-width: 576px) {
.h3-desktop {
font-size: 16px;
line-height: 24.59px;
letter-spacing: 0.18px;
margin-top: -6px;
margin-bottom: 10px;
}
}
.text-h3-desktop {
margin-top: -12px;
font-size: 16px;
font-weight: 300;
line-height: 24px;
color: #303a81;
letter-spacing: 0.16;
}
@media (max-width: 576px) {
.text-h3-desktop {
font-size: 14px;
line-height: 18px;
letter-spacing: 0;
}
}
.main-flex {
display: flex;
flex-direction: row;
}
@media (max-width: 576px) {
.main-flex {
flex-flow: wrap;
}
}
.main-card {
display: flex;
flex-flow: wrap;
align-items: stretch;
width: 33%;
padding-top: 10px;
height: auto;
}
@media (max-width: 576px) {
.main-card {
flex-flow: nowrap;
width: 100%;
}
}
.main-img {
width: 90px;
height: 90px;
margin-bottom: 5px;
}
@media (max-width: 576px) {
.main-img img {
width: 70px;
height: 70px;
margin-bottom: 0;
margin-right: 16px;
}
}
.main-card-text {
height: 150px;
}
@media (max-width: 576px) {
.main-card-text {
height: auto;
margin-bottom: 10px;
}
}
/*advertising*/
.advertising-background {
background-image: url("../img/background.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center center;
padding-top: 75px;
}
.advertising {
display: flex;
}
@media (max-width: 576px) {
.advertising {
flex-flow: wrap;
}
}
.advertising-text-order {
width: 50%;
}
.advertising-text-order h2 {
font-size: 36px;
font-weight: 400;
line-height: 62px;
margin-bottom: 3px;
color: #315197;
letter-spacing: 0.36px;
max-width: 803px;
margin-top: 110px;
margin-bottom: 30px;
line-height: 36px;
}
@media (max-width: 576px) {
.advertising-text-order h2 {
font-size: 24px;
line-height: 30px;
margin-bottom: 3px;
letter-spacing: 0.24px;
max-width: 250px;
margin-top: 20px;
}
}
.advertising-text-order p {
font-size: 18px;
font-weight: 300;
line-height: 27px;
color: #315197;
letter-spacing: 0.18px;
max-width: 850px;
margin-bottom: 40px;
}
@media (max-width: 576px) {
.advertising-text-order p {
font-size: 14px;
font-weight: 300;
line-height: 21px;
color: #315197;
letter-spacing: 0.14px;
}
}
@media (max-width: 576px) {
.advertising-text-order {
order: 5;
width: 100%;
}
}
.advertising-img-order {
padding-top: 45px;
width: 50%;
}
.advertising-img-order img {
width: 100%;
}
@media (min-height: 577px) {
.advertising-img-order {
order: 5;
width: 50%;
}
.advertising-img-order img {
width: 100%;
}
}
@media (max-width: 576px) {
.advertising-img-order {
order: 10;
width: 100%;
padding-top: 0;
}
.advertising-img-order img {
width: 100%;
}
}
.advertising-text {
width: 50%;
}
.advertising-text h2 {
font-size: 36px;
font-weight: 400;
line-height: 62px;
margin-bottom: 3px;
color: #315197;
letter-spacing: 0.36px;
max-width: 803px;
margin-top: 110px;
margin-bottom: 30px;
line-height: 36px;
}
@media (max-width: 576px) {
.advertising-text h2 {
font-size: 24px;
line-height: 30px;
margin-bottom: 3px;
letter-spacing: 0.24px;
max-width: 250px;
margin-top: 20px;
}
}
.advertising-text p {
font-size: 18px;
font-weight: 300;
line-height: 27px;
color: #315197;
letter-spacing: 0.18px;
max-width: 850px;
margin-bottom: 40px;
}
@media (max-width: 576px) {
.advertising-text p {
font-size: 14px;
font-weight: 300;
line-height: 21px;
color: #315197;
letter-spacing: 0.14px;
}
}
@media (max-width: 576px) {
.advertising-text {
width: 100%;
}
}
.advertising-img {
padding-top: 45px;
width: 50%;
}
.advertising-img img {
width: 100%;
}
@media (min-height: 577px) {
.advertising-img {
width: 50%;
padding-top: 0;
}
.advertising-img img {
width: 100%;
}
}
@media (max-width: 576px) {
.advertising-img {
width: 100%;
}
.advertising-img img {
width: 100%;
}
}
/*# sourceMappingURL=styles.css.map */
\ No newline at end of file
css/styles.css.map
{"version":3,"sources":["styles.less"],"names":[],"mappings":"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","file":"styles.css"}
\ No newline at end of file
css/styles.less
.t {
/*@desktop-size: 900px;
@mobile-size: 400px;
#id_about_section {
.section-header {
@media (min-width: @desktop-size) {
h3 { }
p { }
}
@media (min-width: @mobile-size) {
h3 { }
p { }
}
}
.item-wrapper {
.item {
// Тут нужн овпилить на флексах
// Тут нужно сделать чтобы картинка была по центру или по низу
// в зависимости от разрешения
@media (min-width: @desktop-size) {
img { }
h4 { }
p { }
}
@media (min-width: @mobile-size) {
img { }
h4 { }
p {}
}
}
}
}*/
.main-flex-btn {
display: flex;
justify-content: center;
}
button.main-btn {
width: 290px;
height: 52px;
margin-top: 30px;
margin-bottom: 75px;
border-radius: 26px;
background: #c94d4e;
color: #ffffff;
font-size: 18px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0.18px;
text-align: center;
@media (max-width: 576px) {
width: 231px;
height: 49px;
margin-top: 30px;
margin-bottom: 75px;
border-radius: 24px;
background: #c94d4e;
color: #ffffff;
font-size: 16px;
line-height: 27.33px;
letter-spacing: 0.18px;
}
}
header {
background-image: url("../img/banner.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center center;
margin-bottom: 66px;
@media (max-width: 576px) {
margin-bottom: 0;
}
}
.bbb {
padding-top: 39.16%;
color: red;
}
.main-container {
max-width: 1250px;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
/*border: red 1px solid;*/
@media (max-width: 576px) {
padding-left: 0;
padding-right: 0;
}
}
.h2-desktop {
font-size: 36px;
font-weight: 400;
line-height: 62px;
margin-bottom: 3px;
color: #315197;
letter-spacing: 0.36px;
max-width: 803px;
@media (max-width: 576px) {
font-size: 24px;
line-height: 30px;
margin-bottom: 3px;
letter-spacing: 0.24px;
max-width: 250px;
margin-top: 20px;
}
}
.h2-mobile {
font-size: 24px;
font-weight: 400;
line-height: 30px;
margin-bottom: 3px;
color: #315197;
letter-spacing: 0.24px;
max-width: 803px;
margin-top: 0!important;
}
.main-line {
width: 200px;
height: 2px;
background: #c94d4e;
padding-bottom: 9px;
}
.text-h2-desktop {
font-size: 18px;
font-weight: 300;
line-height: 27px;
color: #315197;
letter-spacing: 0.18px;
max-width: 850px;
margin-bottom: 40px;
@media (max-width: 576px) {
font-size: 14px;
font-weight: 300;
line-height: 21px;
color: #315197;
letter-spacing: 0.14px;
}
}
.h2-desktop-tittle {
@media (max-width: 576px){
max-width: 170px;
}
}
.h3-desktop {
font-size: 18px;
font-weight: 700;
line-height: 27px;
color: #315197;
letter-spacing: 0.18px;
@media (max-width: 576px) {
font-size: 16px;
line-height: 24.59px;
letter-spacing: 0.18px;
margin-top: -6px;
margin-bottom: 10px;
}
}
.text-h3-desktop {
margin-top: -12px;
font-size: 16px;
font-weight: 300;
line-height: 24px;
color: #303a81;
letter-spacing: 0.16;
@media (max-width: 576px) {
font-size: 14px;
line-height: 18px;
letter-spacing: 0;
}
}
.main-flex {
display: flex;
flex-direction: row;
@media (max-width: 576px) {
flex-flow: wrap;
}
}
.main-card {
display: flex;
flex-flow: wrap;
align-items: stretch;
width: 33%;
padding-top: 10px;
height: auto;
@media (max-width: 576px) {
flex-flow: nowrap;
width: 100%;
}
}
.main-img {
width: 90px;
height: 90px;
margin-bottom: 5px;
img {
@media (max-width: 576px) {
width: 70px;
height: 70px;
margin-bottom: 0;
margin-right: 16px;
}}
}
.main-card-text {
height: 150px;
@media (max-width: 576px) {
height: auto;
margin-bottom: 10px;
}
}
/*advertising*/
.advertising-background {
background-image: url("../img/background.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center center;
padding-top: 75px;
}
.advertising {
display: flex;
@media (max-width: 576px) {
flex-flow: wrap;
}
}
.advertising-text-order {
width: 50%;
h2 {
.h2-desktop;
margin-top: 110px;
margin-bottom: 30px;
line-height: 36px;
}
p {
.text-h2-desktop;
}
@media (max-width: 576px) {
order: 5;
width: 100%;
}
}
.advertising-img-order {
padding-top: 45px;
width: 50%;
img {
width: 100%;
}
@media (min-height: 577px) {
order: 5;
width: 50%;
img {
width: 100%;
}
}
@media (max-width: 576px) {
order: 10;
width: 100%;
padding-top: 0;
img {
width: 100%;
}
}
}
.advertising-text {
width: 50%;
h2 {
.h2-desktop;
margin-top: 110px;
margin-bottom: 30px;
line-height: 36px;
}
p {
.text-h2-desktop;
}
@media (max-width: 576px) {
width: 100%;
}
}
.advertising-img {
padding-top: 45px;
width: 50%;
img {
width: 100%;
}
@media (min-height: 577px) {
width: 50%;
padding-top: 0;
img {
width: 100%;
}
}
@media (max-width: 576px) {
width: 100%;
img {
width: 100%;
}
}
} }
\ No newline at end of file
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