Create pricing section

This commit is contained in:
Bartlomiej Pluta (PGS Software)
2018-04-03 13:23:28 +02:00
parent 7985979bc2
commit d3eb3b7ec3
3 changed files with 136 additions and 1 deletions

79
src/scss/_pricing.scss Normal file
View File

@@ -0,0 +1,79 @@
.pricing {
background: $background-violet url(../img/testimonials/pricing.png) no-repeat 50% 30% / contain;
padding-top: 90px;
position: relative;
}
.pricing__title {
padding-bottom: 110px;
font-family: Montserrat, sans-serif;
font-size: 48px;
font-weight: bold;
color: white;
text-transform: capitalize;
text-align: center;
}
.price {
background-color: rgba(255, 255, 255, 0.06);
height: 450px;
}
.price__title {
background-color: rgba(255, 255, 255, 0.06);
font-family: Montserrat, sans-serif;
font-size: 24px;
font-weight: 500;
color: white;
text-transform: uppercase;
padding: 30px 50px;
text-align: center;
}
.price__value {
font-family: Montserrat, sans-serif;
font-size: 60px;
font-weight: bold;
color: white;
text-align: center;
}
.price__period {
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 500;
color: white;
opacity: 0.3;
text-transform: uppercase;
text-align: center;
}
.price__splitter {
margin: 30px auto;
color: $primary;
border: none;
width: 60px;
height: 5px;
background-color: $primary;
}
.price__description {
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 500;
color: white;
text-transform: capitalize;
text-align: center;
}
.price__rounded-button--purchase {
background-color: rgba(255, 255, 255, 0.15);
position: absolute;
bottom: 35px;
left: 20%;
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 16px;
text-transform: uppercase;
}