Skip to content

L
landing_pages
Commit 834c2017 by Iren
Options

Add section "option"

parent 9af6f20c
Showing with 323 additions and 40 deletions
css/styles.css
...@@ -52,8 +52,8 @@ button.main-btn { ...@@ -52,8 +52,8 @@ button.main-btn {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
button.main-btn { button.main-btn {
width: 231px; width: 143px;
height: 49px; height: 44px;
margin-top: 30px; margin-top: 30px;
margin-bottom: 75px; margin-bottom: 75px;
border-radius: 24px; border-radius: 24px;
...@@ -61,11 +61,11 @@ button.main-btn { ...@@ -61,11 +61,11 @@ button.main-btn {
color: #ffffff; color: #ffffff;
font-size: 16px; font-size: 16px;
line-height: 27.33px; line-height: 27.33px;
letter-spacing: 0.18px; letter-spacing: 0.16px;
} }
} }
header { header {
background-image: url("../img/banner.png"); background-image: url("../img/banner.jpg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
background-position: center center; background-position: center center;
...@@ -124,9 +124,10 @@ header { ...@@ -124,9 +124,10 @@ header {
} }
.main-line { .main-line {
width: 200px; width: 200px;
height: 2px; height: 1px;
background: #c94d4e; border-bottom: #c94d4e 2px solid;
padding-bottom: 9px; padding-bottom: 9px;
margin-top: -7px;
} }
.text-h2-desktop { .text-h2-desktop {
font-size: 18px; font-size: 18px;
...@@ -234,6 +235,18 @@ header { ...@@ -234,6 +235,18 @@ header {
background-size: 100% 100%; background-size: 100% 100%;
background-position: center center; background-position: center center;
padding-top: 75px; padding-top: 75px;
margin-bottom: 95px;
}
@media (max-width: 576px) {
.advertising-background {
padding-top: 45px;
padding-bottom: 20px;
margin-bottom: 50px;
background-image: url("../img/Прямоугольник_6_копия_5.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center center;
}
} }
.advertising { .advertising {
display: flex; display: flex;
...@@ -255,7 +268,7 @@ header { ...@@ -255,7 +268,7 @@ header {
letter-spacing: 0.36px; letter-spacing: 0.36px;
max-width: 803px; max-width: 803px;
margin-top: 110px; margin-top: 110px;
margin-bottom: 30px; margin-bottom: 15px;
line-height: 36px; line-height: 36px;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
...@@ -299,20 +312,21 @@ header { ...@@ -299,20 +312,21 @@ header {
.advertising-img-order img { .advertising-img-order img {
width: 100%; width: 100%;
} }
@media (min-height: 577px) { @media (max-width: 576px) {
.advertising-img-order { .advertising-img-order {
order: 5; order: 10;
width: 50%; min-width: 320px;
padding-top: 0;
} }
.advertising-img-order img { .advertising-img-order img {
width: 100%; min-width: 320px;
margin-left: -25px;
} }
} }
@media (max-width: 576px) { @media (min-width: 577px) {
.advertising-img-order { .advertising-img-order {
order: 10; order: 5;
width: 100%; width: 50%;
padding-top: 0;
} }
.advertising-img-order img { .advertising-img-order img {
width: 100%; width: 100%;
...@@ -330,7 +344,7 @@ header { ...@@ -330,7 +344,7 @@ header {
letter-spacing: 0.36px; letter-spacing: 0.36px;
max-width: 803px; max-width: 803px;
margin-top: 110px; margin-top: 110px;
margin-bottom: 30px; margin-bottom: 15px;
line-height: 36px; line-height: 36px;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
...@@ -384,10 +398,136 @@ header { ...@@ -384,10 +398,136 @@ header {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.advertising-img { .advertising-img {
width: 100%; min-width: 320px;
} }
.advertising-img img { .advertising-img img {
width: 100%; min-width: 320px;
margin-left: -25px;
}
}
/*option*/
.option h2 {
font-size: 36px;
font-weight: 400;
line-height: 62px;
margin-bottom: 3px;
color: #315197;
letter-spacing: 0.36px;
max-width: 803px;
font-weight: 800;
}
@media (max-width: 576px) {
.option h2 {
font-size: 24px;
line-height: 30px;
margin-bottom: 3px;
letter-spacing: 0.24px;
max-width: 250px;
margin-top: 20px;
}
}
@media (max-width: 576px) {
.option h2 {
margin-bottom: 15px;
line-height: 24px;
font-weight: 800;
}
}
.option-container {
position: relative;
display: flex;
margin-top: 76px;
justify-content: space-around;
align-items: baseline;
}
@media (max-width: 576px) {
.option-container {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
align-items: baseline;
margin-top: 32px;
}
}
.option-card-img {
text-align: center;
max-width: 485px;
}
.option-card-img h4 {
font-size: 30px;
line-height: 30px;
font-weight: 400;
color: #303a81;
letter-spacing: 0.3px;
margin-top: 0;
margin-bottom: 0;
}
@media (max-width: 576px) {
.option-card-img h4 {
font-size: 20px;
line-height: 24px;
letter-spacing: 0.2px;
}
}
.option-card-img p {
font-size: 16px;
line-height: 24px;
font-weight: 300;
color: #303a81;
letter-spacing: 0.16px;
}
@media (max-width: 576px) {
.option-card-img p {
font-size: 14px;
line-height: 24px;
letter-spacing: 0.14px;
margin-top: 5px;
margin-bottom: 0;
}
}
@media (max-width: 576px) {
.option-card-img {
max-width: 140px;
}
}
.option-text {
min-height: 75px;
}
@media (max-width: 576px) {
.option-text {
min-height: 145px;
}
}
.option-card-img-container {
margin: 0 auto;
max-width: 281px;
max-height: 284px;
}
@media (max-width: 576px) {
.option-card-img-container {
max-width: 139px;
max-height: 139px;
}
}
.option-card-img-container img {
max-width: 140px;
}
.option-card-line {
position: absolute;
left: 50%;
top: 3%;
width: 105px;
height: 387px;
border-left: 1px solid gray;
transform: rotate(10deg);
}
@media (max-width: 576px) {
.option-card-line {
position: absolute;
width: 2px;
height: 353px;
transform: rotate(0deg);
left: 155px;
} }
} }
/*# sourceMappingURL=styles.css.map */ /*# 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"} {"version":3,"sources":["styles.less"],"names":[],"mappings":"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","file":"styles.css"}
\ No newline at end of file \ No newline at end of file
css/styles.less
...@@ -51,8 +51,8 @@ button.main-btn { ...@@ -51,8 +51,8 @@ button.main-btn {
letter-spacing: 0.18px; letter-spacing: 0.18px;
text-align: center; text-align: center;
@media (max-width: 576px) { @media (max-width: 576px) {
width: 231px; width: 143px;
height: 49px; height: 44px;
margin-top: 30px; margin-top: 30px;
margin-bottom: 75px; margin-bottom: 75px;
border-radius: 24px; border-radius: 24px;
...@@ -60,11 +60,11 @@ button.main-btn { ...@@ -60,11 +60,11 @@ button.main-btn {
color: #ffffff; color: #ffffff;
font-size: 16px; font-size: 16px;
line-height: 27.33px; line-height: 27.33px;
letter-spacing: 0.18px; letter-spacing: 0.16px;
} }
} }
header { header {
background-image: url("../img/banner.png"); background-image: url("../img/banner.jpg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
background-position: center center; background-position: center center;
...@@ -117,9 +117,10 @@ header { ...@@ -117,9 +117,10 @@ header {
} }
.main-line { .main-line {
width: 200px; width: 200px;
height: 2px; height: 1px;
background: #c94d4e; border-bottom: #c94d4e 2px solid;
padding-bottom: 9px; padding-bottom: 9px;
margin-top: -7px;
} }
.text-h2-desktop { .text-h2-desktop {
font-size: 18px; font-size: 18px;
...@@ -215,6 +216,16 @@ header { ...@@ -215,6 +216,16 @@ header {
background-size: 100% 100%; background-size: 100% 100%;
background-position: center center; background-position: center center;
padding-top: 75px; padding-top: 75px;
margin-bottom: 95px;
@media (max-width: 576px) {
padding-top: 45px;
padding-bottom: 20px;
margin-bottom: 50px;
background-image: url("../img/Прямоугольник_6_копия_5.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center center;
}
} }
.advertising { .advertising {
display: flex; display: flex;
...@@ -227,7 +238,7 @@ header { ...@@ -227,7 +238,7 @@ header {
h2 { h2 {
.h2-desktop; .h2-desktop;
margin-top: 110px; margin-top: 110px;
margin-bottom: 30px; margin-bottom: 15px;
line-height: 36px; line-height: 36px;
} }
p { p {
...@@ -244,17 +255,18 @@ header { ...@@ -244,17 +255,18 @@ header {
img { img {
width: 100%; width: 100%;
} }
@media (min-height: 577px) { @media (max-width: 576px) {
order: 5; order: 10;
width: 50%; min-width: 320px;
padding-top: 0;
img { img {
width: 100%; min-width: 320px;
margin-left: -25px;
} }
} }
@media (max-width: 576px) { @media (min-width: 577px) {
order: 10; order: 5;
width: 100%; width: 50%;
padding-top: 0;
img { img {
width: 100%; width: 100%;
} }
...@@ -265,7 +277,7 @@ header { ...@@ -265,7 +277,7 @@ header {
h2 { h2 {
.h2-desktop; .h2-desktop;
margin-top: 110px; margin-top: 110px;
margin-bottom: 30px; margin-bottom: 15px;
line-height: 36px; line-height: 36px;
} }
p { p {
...@@ -289,9 +301,107 @@ header { ...@@ -289,9 +301,107 @@ header {
} }
} }
@media (max-width: 576px) { @media (max-width: 576px) {
width: 100%; min-width: 320px;
img { img {
width: 100%; min-width: 320px;
margin-left: -25px;
} }
} }
} }
\ No newline at end of file /*option*/
.option {
h2 {
.h2-desktop;
font-weight: 800;
@media (max-width: 576px) {
margin-bottom: 15px;
line-height: 24px;
font-weight: 800;
}
}
}
.option-container {
position: relative;
display: flex;
margin-top: 76px;
justify-content: space-around;
align-items: baseline;
@media (max-width: 576px) {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
align-items: baseline;
margin-top: 32px;
}
}
.option-card-img {
text-align: center;
max-width: 485px;
h4 {
font-size: 30px;
line-height: 30px;
font-weight: 400;
color: #303a81;
letter-spacing: 0.3px;
margin-top: 0;
margin-bottom: 0;
@media (max-width: 576px) {
font-size: 20px;
line-height: 24px;
letter-spacing: 0.2px;
}
}
p {
font-size: 16px;
line-height: 24px;
font-weight: 300;
color: #303a81;
letter-spacing: 0.16px;
@media (max-width: 576px) {
font-size: 14px;
line-height: 24px;
letter-spacing: 0.14px;
margin-top: 5px;
margin-bottom: 0;
}
}
@media (max-width: 576px) {
max-width: 140px;
}
}
.option-text {
min-height: 75px;
@media (max-width: 576px) {
min-height: 145px;
}
}
.option-card-img-container {
margin: 0 auto;
max-width: 281px;
max-height: 284px;
@media (max-width: 576px) {
max-width: 139px;
max-height: 139px;
}
img {
max-width: 140px;
}
}
.option-card-line {
position: absolute;
left: 50%;
top: 3%;
width: 105px;
height: 387px;
border-left: 1px solid gray;
transform: rotate(10deg);
@media (max-width: 576px) {
position: absolute;
width: 2px;
height: 353px;
transform: rotate(0deg);
left: 155px;
}
}
index.html
...@@ -334,6 +334,39 @@ ...@@ -334,6 +334,39 @@
</div> </div>
</div> </div>
</section> </section>
<section class="option main-container">
<h2>Варианты развертывания</h2>
<div class="main-line">
</div>
<div class="option-container">
<div class="option-card-img">
<div class="option-card-img-container">
<img class="vvv" src="img/option1.png">
</div>
<h4>Cloud</h4>
<div class="option-text">
<p>Быстрый и менее затратный вариант развертывания
системы с использованием облачных технологий.
</p>
</div>
<button type="button" class="main-btn">Заказать</button>
</div>
<div class="option-card-line">
</div>
<div class="option-card-img">
<div class="option-card-img-container">
<img class="vvv" src="img/option2.png">
</div>
<h4>Cloud</h4>
<div class="option-text">
<p>Быстрый и менее затратный вариант развертывания
системы с использованием облачных технологий.
</p>
</div>
<button type="button" class="main-btn">Заказать</button>
</div>
</div>
</section>
<!--<section id="id_about_section"> <!--<section id="id_about_section">
<div class="section-header"> <div class="section-header">
<h3>Что такое MySmart Office</h3> <h3>Что такое MySmart Office</h3>
......
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