Skip to content

L
landing_pages
Commit 605943e1 by Iren
Options

add style for price

parent 5d06c5fa
Showing with 181 additions and 45 deletions
css/styles.css
...@@ -2116,19 +2116,29 @@ video { ...@@ -2116,19 +2116,29 @@ video {
margin-bottom: 60px; margin-bottom: 60px;
} }
} }
.price-display-none {
position: relative;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.price-display-none { .price-display-none {
position: relative; position: relative;
display: none; display: none;
} }
} }
.price-tittle-line {
width: 200px;
height: 1px;
border-bottom: #c94d4e 2px solid;
margin-top: -3px;
margin-bottom: 28px;
}
.price-container, .price-container,
.price-container-active { .price-container-active {
position: relative; position: relative;
max-width: 256px; max-width: 256px;
height: 834px; height: 834px;
margin-top: 17px; margin-top: 17px;
padding: 30px 16px 32px 16px; padding: 27px 16px 32px 16px;
background: #f9fbff; background: #f9fbff;
border: #e6effa 1px solid; border: #e6effa 1px solid;
border-radius: 8px; border-radius: 8px;
...@@ -2198,13 +2208,16 @@ video { ...@@ -2198,13 +2208,16 @@ video {
width: 50px; width: 50px;
} }
} }
.user {
padding-top: 10px;
}
.price-container.active { .price-container.active {
box-shadow: 0 25px 25px #e6effa; box-shadow: 0 25px 25px #e6effa;
height: 875px; height: 875px;
position: relative; position: relative;
width: 256px; width: 256px;
margin-top: 20px; margin-top: 20px;
padding: 20px 16px 32px 16px; padding: 15px 16px 32px 16px;
background: white; background: white;
border: #e6effa 1px solid; border: #e6effa 1px solid;
border-radius: 8px; border-radius: 8px;
...@@ -2262,25 +2275,53 @@ video { ...@@ -2262,25 +2275,53 @@ video {
width: 50px; width: 50px;
} }
} }
.price-active .price-user { .price-active p.price-user {
font-family: SFUIDisplay-Light;
text-transform: uppercase;
color: #303a81;
font-size: 24px;
margin-bottom: 11px;
}
@media (max-width: 1250px) {
.price-active p.price-user p {
font-size: 40px;
}
}
@media (max-width: 992px) {
.price-active p.price-user p {
font-size: 30px;
}
}
@media (max-width: 768px) {
.price-active p.price-user p {
font-size: 10px;
}
}
.price p.price-user {
font-family: SFUIDisplay-Light;
text-transform: uppercase; text-transform: uppercase;
color: #303a81; color: #303a81;
font-size: 24px;
margin-bottom: 11px;
} }
@media (max-width: 1250px) { @media (max-width: 1250px) {
.price-active .price-user p { .price p.price-user p {
font-size: 40px; font-size: 40px;
} }
} }
@media (max-width: 992px) { @media (max-width: 992px) {
.price-active .price-user p { .price p.price-user p {
font-size: 30px; font-size: 30px;
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.price-active .price-user p { .price p.price-user p {
font-size: 10px; font-size: 10px;
} }
} }
.price {
margin-top: -20px;
}
.price, .price,
.price-active { .price-active {
width: 100%; width: 100%;
...@@ -2363,9 +2404,18 @@ video { ...@@ -2363,9 +2404,18 @@ video {
font-size: 10px; font-size: 10px;
} }
} }
p.price-p {
font-family: SFUIDisplay-Regular;
margin-top: 100px;
text-transform: none;
font-size: 28px;
line-height: 24px;
letter-spacing: 0;
color: #303a81;
}
.price-p-margin { .price-p-margin {
line-height: 40px; line-height: 40px;
margin-top: 110px; margin-top: 50px;
} }
@media (max-width: 1250px) { @media (max-width: 1250px) {
.price-p-margin { .price-p-margin {
...@@ -2377,26 +2427,39 @@ video { ...@@ -2377,26 +2427,39 @@ video {
height: 1px; height: 1px;
border-bottom: #c94d4e 1px solid; border-bottom: #c94d4e 1px solid;
margin: 0 auto; margin: 0 auto;
margin-bottom: 19px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.price-line-little { .price-line-little {
width: 30px; width: 30px;
} }
} }
.price-line-little-user {
width: 75px;
height: 1px;
border-bottom: #c94d4e 1px solid;
margin: 0 auto;
margin-bottom: 16px;
}
@media (max-width: 768px) {
.price-line-little-user {
width: 30px;
}
}
.price-info { .price-info {
margin-left: 16px; margin-left: 16px;
list-style-type: disc; list-style-type: disc;
} }
.price-info li { .price-info li p {
font-family: SFUIDisplay-Light; font-family: SFUIDisplay-Regular;
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 300;
letter-spacing: 0; letter-spacing: 0;
color: #303a81; color: #303a81;
line-height: 42px; line-height: 43px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.price-info li { .price-info li p {
font-size: 5px; font-size: 5px;
line-height: 10px; line-height: 10px;
} }
...@@ -2437,8 +2500,12 @@ video { ...@@ -2437,8 +2500,12 @@ video {
width: 50px; width: 50px;
} }
} }
.price-info-carry { /*
line-height: 12px; position: absolute;
top: 30px;
left: 1px;*/
.price-display-none .price-info-carry p {
line-height: 4px;
color: #c94d4e; color: #c94d4e;
} }
.price-btn { .price-btn {
...@@ -2478,6 +2545,9 @@ video { ...@@ -2478,6 +2545,9 @@ video {
margin-left: -3px; margin-left: -3px;
} }
} }
.btn-user {
margin-top: 4px;
}
.price-btn-active { .price-btn-active {
background: #c94d4e; background: #c94d4e;
color: white; color: white;
......
css/styles.less
...@@ -1711,17 +1711,25 @@ padding-left: 45px; ...@@ -1711,17 +1711,25 @@ padding-left: 45px;
} }
} }
.price-display-none { .price-display-none {
position: relative;
@media (max-width: 768px){ @media (max-width: 768px){
position: relative; position: relative;
display: none; display: none;
} }
} }
.price-tittle-line {
width: 200px;
height: 1px;
border-bottom: #c94d4e 2px solid;
margin-top: -3px;
margin-bottom: 28px;
}
.price-container, .price-container-active { .price-container, .price-container-active {
position: relative; position: relative;
max-width: 256px; max-width: 256px;
height: 834px; height: 834px;
margin-top: 17px; margin-top: 17px;
padding: 30px 16px 32px 16px; padding: 27px 16px 32px 16px;
background: #f9fbff; background: #f9fbff;
border: #e6effa 1px solid; border: #e6effa 1px solid;
border-radius: 8px; border-radius: 8px;
...@@ -1770,13 +1778,16 @@ padding-left: 45px; ...@@ -1770,13 +1778,16 @@ padding-left: 45px;
} }
} }
} }
.user {
padding-top: 10px;
}
.price-container.active { .price-container.active {
box-shadow: 0 25px 25px #e6effa; box-shadow: 0 25px 25px #e6effa;
height: 875px; height: 875px;
position: relative; position: relative;
width: 256px; width: 256px;
margin-top: 20px; margin-top: 20px;
padding: 20px 16px 32px 16px; padding: 15px 16px 32px 16px;
background: white; background: white;
border: #e6effa 1px solid; border: #e6effa 1px solid;
border-radius: 8px; border-radius: 8px;
...@@ -1823,20 +1834,45 @@ padding-left: 45px; ...@@ -1823,20 +1834,45 @@ padding-left: 45px;
} }
} }
} }
.price-active .price-user {
text-transform: uppercase; .price-active p.price-user{
color: #303a81; font-family: SFUIDisplay-Light;
p { text-transform: uppercase;
@media (max-width: 1250px) { color: #303a81;
font-size: 40px; font-size: 24px;
} margin-bottom: 11px;
@media (max-width: 992px) { p {
font-size: 30px; @media (max-width: 1250px) {
} font-size: 40px;
@media (max-width: 768px) { }
font-size: 10px; @media (max-width: 992px) {
} font-size: 30px;
} }
@media (max-width: 768px) {
font-size: 10px;
}
}
}
.price p.price-user{
font-family: SFUIDisplay-Light;
text-transform: uppercase;
color: #303a81;
font-size: 24px;
margin-bottom: 11px;
p {
@media (max-width: 1250px) {
font-size: 40px;
}
@media (max-width: 992px) {
font-size: 30px;
}
@media (max-width: 768px) {
font-size: 10px;
}
}
}
.price {
margin-top: -20px;
} }
.price, .price-active { .price, .price-active {
width: 100%; width: 100%;
...@@ -1898,9 +1934,18 @@ padding-left: 45px; ...@@ -1898,9 +1934,18 @@ padding-left: 45px;
font-size: 10px; font-size: 10px;
} }
} }
p.price-p {
font-family: SFUIDisplay-Regular;
margin-top: 100px;
text-transform: none;
font-size: 28px;
line-height: 24px;
letter-spacing: 0;
color: #303a81;
}
.price-p-margin { .price-p-margin {
line-height: 40px; line-height: 40px;
margin-top: 110px; margin-top: 50px;
@media (max-width: 1250px) { @media (max-width: 1250px) {
margin-top: 48px; margin-top: 48px;
} }
...@@ -1910,6 +1955,17 @@ padding-left: 45px; ...@@ -1910,6 +1955,17 @@ padding-left: 45px;
height: 1px; height: 1px;
border-bottom: #c94d4e 1px solid; border-bottom: #c94d4e 1px solid;
margin: 0 auto; margin: 0 auto;
margin-bottom: 19px;
@media (max-width: 768px) {
width: 30px;
}
}
.price-line-little-user {
width: 75px;
height: 1px;
border-bottom: #c94d4e 1px solid;
margin: 0 auto;
margin-bottom: 16px;
@media (max-width: 768px) { @media (max-width: 768px) {
width: 30px; width: 30px;
} }
...@@ -1918,13 +1974,13 @@ padding-left: 45px; ...@@ -1918,13 +1974,13 @@ padding-left: 45px;
.price-info { .price-info {
margin-left: 16px; margin-left: 16px;
list-style-type: disc; list-style-type: disc;
li { li p{
font-family: SFUIDisplay-Light; font-family: SFUIDisplay-Regular;
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 300;
letter-spacing: 0; letter-spacing: 0;
color: #303a81; color: #303a81;
line-height: 42px; line-height: 43px;
@media (max-width: 768px) { @media (max-width: 768px) {
font-size: 5px; font-size: 5px;
line-height: 10px; line-height: 10px;
...@@ -1959,9 +2015,15 @@ padding-left: 45px; ...@@ -1959,9 +2015,15 @@ padding-left: 45px;
width: 50px; width: 50px;
} }
} }
.price-info-carry { /*
line-height: 12px; position: absolute;
color: #c94d4e; top: 30px;
left: 1px;*/
.price-display-none .price-info-carry {
p {
line-height: 4px;
color: #c94d4e;
}
} }
.price-btn { .price-btn {
margin-left: 7px; margin-left: 7px;
...@@ -1995,6 +2057,9 @@ padding-left: 45px; ...@@ -1995,6 +2057,9 @@ padding-left: 45px;
margin-left: -3px; margin-left: -3px;
} }
} }
.btn-user {
margin-top: 4px;
}
.price-btn-active { .price-btn-active {
background: #c94d4e; background: #c94d4e;
color: white; color: white;
......
index.html
...@@ -699,7 +699,7 @@ ...@@ -699,7 +699,7 @@
<section class="main-container"> <section class="main-container">
<h2 class="h2-desktop">Цены</h2> <h2 class="h2-desktop">Цены</h2>
<div class="main-line"> <div class="price-tittle-line">
</div> </div>
<div class="price-wrapper"> <div class="price-wrapper">
<div class="price-container"> <div class="price-container">
...@@ -762,8 +762,11 @@ ...@@ -762,8 +762,11 @@
</li> </li>
<li class="price-display-none"> <li class="price-display-none">
<p> <p>
Оперативная поддержка<span class="price-info-carry">Только по e-mail</span> Оперативная поддержка</p>
</p> <div class="price-info-carry">
<p>Только по e-mail</p>
</div>
<div class="price-line price-display-none"> <div class="price-line price-display-none">
</div> </div>
</li> </li>
...@@ -905,14 +908,14 @@ ...@@ -905,14 +908,14 @@
</ol> </ol>
<button type="button" class="price-btn price-btn-active">Попробовать бесплатно</button> <button type="button" class="price-btn price-btn-active">Попробовать бесплатно</button>
</div> </div>
<div class="price-container"> <div class="price-container user">
<img src="img/price.png"> <img src="img/price.png">
<h6>Free (Beta)</h6> <h6>Free (Beta)</h6>
<div class="price"> <div class="price">
<p>1000<span>&#8381</span></p> <p>1000<span>&#8381</span></p>
<p class="price-user">за пользователя</p> <p class="price-user">за пользователя</p>
</div> </div>
<div class="price-line-little"> <div class="price-line-little-user">
</div> </div>
<ol class="price-info"> <ol class="price-info">
<li> <li>
...@@ -1003,17 +1006,15 @@ ...@@ -1003,17 +1006,15 @@
<p> <p>
Среда для разработки<span>+</span> Среда для разработки<span>+</span>
</p> </p>
<div class="price-line-big">
</div>
</li> </li>
</ol> </ol>
<button type="button" class="price-btn">Попробовать бесплатно</button> <button type="button" class="price-btn btn-user">Попробовать бесплатно</button>
</div> </div>
<div class="price-container"> <div class="price-container">
<img src="img/price.png"> <img src="img/price.png">
<h6>Free (Beta)</h6> <h6>Free (Beta)</h6>
<div class="price"> <div class="price">
<p class="price-user price-p-margin">По договоренности</p> <p class="price-p">По договоренности</p>
</div> </div>
<div class="price-line-little"> <div class="price-line-little">
</div> </div>
......
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