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 {
display: flex;
}
.price-container {
width: 288px;
height: 896px;
margin-top: 15px;
padding: 132px 16px 32px 16px;
position: relative;
width: 256px;
height: 834px;
margin-top: 20px;
padding: 30px 16px 32px 16px;
/*background: #f9fbff;*/
background: yellow;
background: #f9fbff;
border: #e6effa 1px solid;
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 {
text-align: center;
width: 75px;
height: 53px;
margin: 0 auto;
......@@ -729,30 +745,43 @@ header {
.price span {
font-size: 30px;
}
.price-line {
display: inline-block;
width: 256px;
height: 45px;
border-bottom: red 1px solid;
.price-info {
margin-left: 16px;
list-style-type: disc;
}
.price-line p {
.price-info li {
font-size: 16px;
font-weight: 300;
letter-spacing: 0;
line-height: 52px;
color: #303a81;
line-height: 42px;
}
.price-line span {
.price-info span {
margin-left: 20px;
color: #c94d4e;
}
.price-point {
background: red;
height: 5px;
width: 5px;
border-radius: 50%;
margin-right: 10px;
margin-top: 17px;
font-size: 30px;
float: left;
.price-line {
width: 256px;
height: 3px;
margin-left: -16px;
border-bottom: #e6effa 1px solid;
}
.price-info-carry {
line-height: 12px;
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 */
\ No newline at end of file
css/styles.less
......@@ -577,17 +577,33 @@ header {
display: flex;
}
.price-container {
width: 288px;
height: 896px;
margin-top: 15px;
padding: 132px 16px 32px 16px;
position: relative;
width: 256px;
height: 834px;
margin-top: 20px;
padding: 30px 16px 32px 16px;
/*background: #f9fbff;*/
background: yellow;
background: #f9fbff;
border: #e6effa 1px solid;
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 {
text-align: center;
width: 75px;
height: 53px;
margin: 0 auto;
......@@ -601,31 +617,42 @@ header {
font-size: 30px;
}
}
.price-line {
display: inline-block;
width: 256px;
height: 45px;
border-bottom: red 1px solid;
p {
.price-info {
margin-left: 16px;
list-style-type: disc;
li {
font-size: 16px;
font-weight: 300;
letter-spacing: 0;
line-height: 52px;
color: #303a81;
line-height: 42px;
}
span {
margin-left: 20px;
color: #c94d4e;
}
}
.price-point {
background: red;
height: 5px;
width: 5px;
border-radius: 50%;
margin-right: 10px;
margin-top: 17px;
font-size: 30px;
float: left;
.price-line {
width: 256px;
height: 3px;
margin-left: -16px;
border-bottom: #e6effa 1px solid;
}
.price-info-carry {
line-height: 12px;
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 @@
</div>
<div class="price-wrapper">
<div class="price-container">
<img src="img/price.png">
<h6>Free (Beta)</h6>
<div class="price">
<p>0<span>&#8381</span></p>
</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-point">
</div>
<p>Объём данных<span>1 Гбайт</span></p>
</li>
<li>
<p>
API<span>+</span>
</p>
<div class="price-line">
</div>
</li>
<li>
<p>
Конструктор форм<span>+</span>
</p>
<div class="price-line">
<div class="price-point">
</div>
<p>Объём данных<span>1 Гбайт</span></p>
</li>
<li>
<p>
Среда для разработки<span>+</span>
</p>
<div class="price-line">
</div>
</li>
<li>
<p>
Собственный домен<span>-</span>
</p>
</li>
</ol>
<button type="button" class="price-btn">Попробовать бесплатно</button>
</div>
</div>
</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