Skip to content

L
landing_pages
Commit 14f861f5 by Iren
Options

agg section price

parent 9d47fa57
Showing with 186 additions and 51 deletions
css/styles.css
...@@ -705,17 +705,33 @@ header { ...@@ -705,17 +705,33 @@ header {
display: flex; display: flex;
} }
.price-container { .price-container {
width: 288px; position: relative;
height: 896px; width: 256px;
margin-top: 15px; height: 834px;
padding: 132px 16px 32px 16px; margin-top: 20px;
padding: 30px 16px 32px 16px;
/*background: #f9fbff;*/ /*background: #f9fbff;*/
background: yellow; background: #f9fbff;
border: #e6effa 1px solid; border: #e6effa 1px solid;
border-radius: 4px; border-radius: 4px;
} }
.price-container h6 {
position: relative;
z-index: 3;
margin-bottom: 70px;
margin-left: 10px;
font-size: 30px;
font-weight: 400;
letter-spacing: 0.3px;
color: white;
}
.price-container img {
position: absolute;
z-index: 2;
left: 0;
top: 0;
}
.price { .price {
text-align: center;
width: 75px; width: 75px;
height: 53px; height: 53px;
margin: 0 auto; margin: 0 auto;
...@@ -729,30 +745,43 @@ header { ...@@ -729,30 +745,43 @@ header {
.price span { .price span {
font-size: 30px; font-size: 30px;
} }
.price-line { .price-info {
display: inline-block; margin-left: 16px;
width: 256px; list-style-type: disc;
height: 45px;
border-bottom: red 1px solid;
} }
.price-line p { .price-info li {
font-size: 16px; font-size: 16px;
font-weight: 300; font-weight: 300;
letter-spacing: 0; letter-spacing: 0;
line-height: 52px; color: #303a81;
line-height: 42px;
} }
.price-line span { .price-info span {
margin-left: 20px; margin-left: 20px;
color: #c94d4e; color: #c94d4e;
} }
.price-point { .price-line {
background: red; width: 256px;
height: 5px; height: 3px;
width: 5px; margin-left: -16px;
border-radius: 50%; border-bottom: #e6effa 1px solid;
margin-right: 10px; }
margin-top: 17px; .price-info-carry {
font-size: 30px; line-height: 12px;
float: left; color: #c94d4e;
}
.price-btn {
margin-left: 7px;
width: 240px;
height: 40px;
margin-top: 20px;
background: #f9fbff;
border: #c94d4e 1px solid;
border-radius: 20px;
color: #c94d4e;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.16px;
padding: 10px 20px 12px 20px;
} }
/*# sourceMappingURL=styles.css.map */ /*# sourceMappingURL=styles.css.map */
\ No newline at end of file
css/styles.less
...@@ -577,17 +577,33 @@ header { ...@@ -577,17 +577,33 @@ header {
display: flex; display: flex;
} }
.price-container { .price-container {
width: 288px; position: relative;
height: 896px; width: 256px;
margin-top: 15px; height: 834px;
padding: 132px 16px 32px 16px; margin-top: 20px;
padding: 30px 16px 32px 16px;
/*background: #f9fbff;*/ /*background: #f9fbff;*/
background: yellow; background: #f9fbff;
border: #e6effa 1px solid; border: #e6effa 1px solid;
border-radius: 4px; border-radius: 4px;
h6 {
position: relative;
z-index: 3;
margin-bottom: 70px;
margin-left: 10px;
font-size: 30px;
font-weight: 400;
letter-spacing: 0.3px;
color: white;
}
img {
position: absolute;
z-index: 2;
left: 0;
top: 0;
}
} }
.price { .price {
text-align: center;
width: 75px; width: 75px;
height: 53px; height: 53px;
margin: 0 auto; margin: 0 auto;
...@@ -601,31 +617,42 @@ header { ...@@ -601,31 +617,42 @@ header {
font-size: 30px; font-size: 30px;
} }
} }
.price-line { .price-info {
display: inline-block; margin-left: 16px;
width: 256px; list-style-type: disc;
height: 45px; li {
border-bottom: red 1px solid;
p {
font-size: 16px; font-size: 16px;
font-weight: 300; font-weight: 300;
letter-spacing: 0; letter-spacing: 0;
line-height: 52px; color: #303a81;
line-height: 42px;
} }
span { span {
margin-left: 20px; margin-left: 20px;
color: #c94d4e; color: #c94d4e;
} }
} }
.price-point { .price-line {
background: red; width: 256px;
height: 5px; height: 3px;
width: 5px; margin-left: -16px;
border-radius: 50%; border-bottom: #e6effa 1px solid;
margin-right: 10px; }
margin-top: 17px; .price-info-carry {
font-size: 30px; line-height: 12px;
float: left; color: #c94d4e;
}
.price-btn {
margin-left: 7px;
width: 240px;
height: 40px;
margin-top: 20px;
background: #f9fbff;
border: #c94d4e 1px solid;
border-radius: 20px;
color: #c94d4e;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.16px;
padding: 10px 20px 12px 20px;
} }
\ No newline at end of file
index.html
...@@ -591,19 +591,96 @@ ...@@ -591,19 +591,96 @@
</div> </div>
<div class="price-wrapper"> <div class="price-wrapper">
<div class="price-container"> <div class="price-container">
<img src="img/price.png">
<h6>Free (Beta)</h6>
<div class="price"> <div class="price">
<p>0<span>&#8381</span></p> <p>0<span>&#8381</span></p>
</div> </div>
<ol class="price-info">
<li>
<p>
Объём данных<span>1 Гбайт</span>
</p>
<div class="price-line">
</div>
</li>
<li>
<p>
Пользователей<span> Пользователей Без ограничичений</span>
</p>
<div class="price-line">
</div>
</li>
<li>
<p>
Модуль Документы<span>+</span>
</p>
<div class="price-line">
</div>
</li>
<li>
<p>
Модуль VoiP<span>-</span>
</p>
<div class="price-line">
</div>
</li>
<li>
<p>
Маркет Плейс<span>Маркет Плейс</span>
</p>
<div class="price-line">
</div>
</li>
<li>
<p>
Модуль dashboard <span>+</span>
</p>
<div class="price-line">
</div>
</li>
<li>
<p>
Оперативная поддержка<p class="price-info-carry">Только по e-mail</p>
</p>
<div class="price-line">
</div>
</li>
<li>
<p>
Настройка системы <span>-</span>
</p>
<div class="price-line"> <div class="price-line">
<div class="price-point">
</div> </div>
<p>Объём данных<span>1 Гбайт</span></p> </li>
<li>
<p>
API<span>+</span>
</p>
<div class="price-line">
</div> </div>
</li>
<li>
<p>
Конструктор форм<span>+</span>
</p>
<div class="price-line"> <div class="price-line">
<div class="price-point">
</div> </div>
<p>Объём данных<span>1 Гбайт</span></p> </li>
<li>
<p>
Среда для разработки<span>+</span>
</p>
<div class="price-line">
</div> </div>
</li>
<li>
<p>
Собственный домен<span>-</span>
</p>
</li>
</ol>
<button type="button" class="price-btn">Попробовать бесплатно</button>
</div> </div>
</div> </div>
</section> </section>
......
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