Skip to content

L
landing_pages
Commit 7d3108a8 by Iren
Options

agg section price-active

parent 14f861f5
Showing with 169 additions and 16 deletions
css/styles.css
...@@ -703,19 +703,27 @@ header { ...@@ -703,19 +703,27 @@ header {
/*price*/ /*price*/
.price-wrapper { .price-wrapper {
display: flex; display: flex;
justify-content: space-between;
/*@media (max-width: 576px) {
position: absolute;
display: none;
}*/
} }
.price-container { .price-container,
.price-container-active {
position: relative; position: relative;
width: 256px; width: 256px;
height: 834px; height: 834px;
margin-top: 20px; margin-top: 20px;
/*margin-right: 32px;*/
padding: 30px 16px 32px 16px; padding: 30px 16px 32px 16px;
/*background: #f9fbff;*/ /*background: #f9fbff;*/
background: #f9fbff; background: #f9fbff;
border: #e6effa 1px solid; border: #e6effa 1px solid;
border-radius: 4px; border-radius: 4px;
} }
.price-container h6 { .price-container h6,
.price-container-active h6 {
position: relative; position: relative;
z-index: 3; z-index: 3;
margin-bottom: 70px; margin-bottom: 70px;
...@@ -725,26 +733,88 @@ header { ...@@ -725,26 +733,88 @@ header {
letter-spacing: 0.3px; letter-spacing: 0.3px;
color: white; color: white;
} }
.price-container img { .price-container img,
.price-container-active img {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
left: 0; left: 0;
top: 0; top: 0;
} }
.price { .price-container-active {
width: 75px; box-shadow: 0 25px 25px #e6effa;
height: 901px;
position: relative;
width: 256px;
margin-top: 20px;
/*margin-right: 32px;*/
padding: 20px 16px 32px 16px;
/*background: #f9fbff;*/
background: white;
border: #e6effa 1px solid;
border-radius: 4px;
}
.price-container-active h6 {
position: relative;
z-index: 3;
margin-bottom: 80px;
margin-left: 10px;
font-size: 30px;
font-weight: 400;
letter-spacing: 0.3px;
color: white;
}
.price-container-active img {
position: absolute;
z-index: 2;
left: 0;
top: -20px;
width: 288px;
height: 124px;
}
.price-active .price-user {
font-size: 20px;
text-transform: uppercase;
color: #303a81;
}
.price .price-user {
font-size: 20px;
text-transform: uppercase;
color: #303a81;
}
.price,
.price-active {
width: 100%;
height: 53px; height: 53px;
text-align: center;
margin: 0 auto; margin: 0 auto;
margin-bottom: 16px; margin-bottom: 16px;
border-bottom: #c94d4e 1px solid;
} }
.price p { .price p,
.price-active p {
font-size: 60px; font-size: 60px;
color: #303a81; color: #303a81;
} }
.price span { .price span,
.price-active span {
font-size: 30px; font-size: 30px;
} }
.price-active {
height: 90px;
}
.price .price-p-margin {
line-height: 110px;
font-size: 28px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
color: #303a81;
}
.price-line-little {
width: 75px;
height: 12px;
border-bottom: #c94d4e 1px solid;
margin: 0 auto;
}
.price-info { .price-info {
margin-left: 16px; margin-left: 16px;
list-style-type: disc; list-style-type: disc;
...@@ -757,15 +827,19 @@ header { ...@@ -757,15 +827,19 @@ header {
line-height: 42px; line-height: 42px;
} }
.price-info span { .price-info span {
margin-left: 20px; margin-left: 5px;
color: #c94d4e; color: #c94d4e;
} }
.price-line { .price-line,
.price-line-big {
width: 256px; width: 256px;
height: 3px; height: 3px;
margin-left: -16px; margin-left: -16px;
border-bottom: #e6effa 1px solid; border-bottom: #e6effa 1px solid;
} }
.price-line-big {
height: 3px;
}
.price-info-carry { .price-info-carry {
line-height: 12px; line-height: 12px;
color: #c94d4e; color: #c94d4e;
...@@ -784,4 +858,9 @@ header { ...@@ -784,4 +858,9 @@ header {
letter-spacing: 0.16px; letter-spacing: 0.16px;
padding: 10px 20px 12px 20px; padding: 10px 20px 12px 20px;
} }
.price-btn0active {
background: #c94d4e;
color: white;
margin-top: 27px;
}
/*# sourceMappingURL=styles.css.map */ /*# sourceMappingURL=styles.css.map */
\ No newline at end of file
css/styles.less
...@@ -575,12 +575,18 @@ header { ...@@ -575,12 +575,18 @@ header {
/*price*/ /*price*/
.price-wrapper { .price-wrapper {
display: flex; display: flex;
justify-content: space-between;
/*@media (max-width: 576px) {
position: absolute;
display: none;
}*/
} }
.price-container { .price-container, .price-container-active {
position: relative; position: relative;
width: 256px; width: 256px;
height: 834px; height: 834px;
margin-top: 20px; margin-top: 20px;
/*margin-right: 32px;*/
padding: 30px 16px 32px 16px; padding: 30px 16px 32px 16px;
/*background: #f9fbff;*/ /*background: #f9fbff;*/
background: #f9fbff; background: #f9fbff;
...@@ -603,12 +609,53 @@ header { ...@@ -603,12 +609,53 @@ header {
top: 0; top: 0;
} }
} }
.price { .price-container-active {
width: 75px; box-shadow: 0 25px 25px #e6effa;
height: 901px;
position: relative;
width: 256px;
margin-top: 20px;
/*margin-right: 32px;*/
padding: 20px 16px 32px 16px;
/*background: #f9fbff;*/
background: white;
border: #e6effa 1px solid;
border-radius: 4px;
h6 {
position: relative;
z-index: 3;
margin-bottom: 80px;
margin-left: 10px;
font-size: 30px;
font-weight: 400;
letter-spacing: 0.3px;
color: white;
}
img {
position: absolute;
z-index: 2;
left: 0;
top: -20px;
width: 288px;
height: 124px;
}
}
.price-active .price-user {
font-size: 20px;
text-transform: uppercase;
color: #303a81;
}
.price .price-user {
font-size: 20px;
text-transform: uppercase;
color: #303a81;
}
.price, .price-active {
width: 100%;
height: 53px; height: 53px;
text-align: center;
margin: 0 auto; margin: 0 auto;
margin-bottom: 16px; margin-bottom: 16px;
border-bottom: #c94d4e 1px solid;
p { p {
font-size: 60px; font-size: 60px;
color: #303a81; color: #303a81;
...@@ -617,6 +664,23 @@ header { ...@@ -617,6 +664,23 @@ header {
font-size: 30px; font-size: 30px;
} }
} }
.price-active {
height: 90px;
}
.price .price-p-margin {
line-height: 110px;
font-size: 28px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
color: #303a81;
}
.price-line-little {
width: 75px;
height: 12px;
border-bottom: #c94d4e 1px solid;
margin: 0 auto;
}
.price-info { .price-info {
margin-left: 16px; margin-left: 16px;
list-style-type: disc; list-style-type: disc;
...@@ -628,16 +692,19 @@ header { ...@@ -628,16 +692,19 @@ header {
line-height: 42px; line-height: 42px;
} }
span { span {
margin-left: 20px; margin-left: 5px;
color: #c94d4e; color: #c94d4e;
} }
} }
.price-line { .price-line, .price-line-big {
width: 256px; width: 256px;
height: 3px; height: 3px;
margin-left: -16px; margin-left: -16px;
border-bottom: #e6effa 1px solid; border-bottom: #e6effa 1px solid;
} }
.price-line-big {
height: 3px;
}
.price-info-carry { .price-info-carry {
line-height: 12px; line-height: 12px;
color: #c94d4e; color: #c94d4e;
...@@ -655,4 +722,9 @@ header { ...@@ -655,4 +722,9 @@ header {
font-weight: 400; font-weight: 400;
letter-spacing: 0.16px; letter-spacing: 0.16px;
padding: 10px 20px 12px 20px; padding: 10px 20px 12px 20px;
}
.price-btn0active {
background: #c94d4e;
color: white;
margin-top: 27px;
} }
\ No newline at end of file
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