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