A Pen by Paulo Ribeiro on CodePen.
Created
November 22, 2019 04:08
-
-
Save CodeMyUI/1ce99c678d854cefff72c27dc18f82af to your computer and use it in GitHub Desktop.
Pricing Table
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<section class="pricing-table"> | |
<div class="card"> | |
<h6 class="type">basic</h6> | |
<div class="price"><span>$</span>20</div> | |
<h5 class="plan">plan</h5> | |
<ul class="details"> | |
<li>FREE Stickers</li> | |
<li>FREE Delivery</li> | |
<li>24/7 support</li> | |
</ul> | |
<div class="buy-button"> | |
<h3 class="btn">subscribe</h3> | |
</div> | |
</div> | |
<div class="card"> | |
<h6 class="type">Awesome</h6> | |
<div class="price"><span>$</span>50</div> | |
<h5 class="plan">plan</h5> | |
<ul class="details"> | |
<li>FREE Stickers</li> | |
<li>FREE Delivery</li> | |
<li>24/7 support</li> | |
</ul> | |
<div class="buy-button"> | |
<h3 class="btn">subscribe</h3> | |
</div> | |
</div> | |
<div class="card"> | |
<h6 class="type">premium</h6> | |
<div class="price"><span>$</span>100</div> | |
<h5 class="plan">plan</h5> | |
<ul class="details"> | |
<li>FREE Stickers</li> | |
<li>FREE Delivery</li> | |
<li>24/7 support</li> | |
</ul> | |
<div class="buy-button"> | |
<h3 class="btn">subscribe</h3> | |
</div> | |
</div> | |
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700"); | |
$yellow: #f6f792; | |
$black: #333745; | |
$blue: #77c4d3; | |
$lightBlue: #daede2; | |
$red: #ea2e49; | |
$white: #fff; | |
$mainFont: "Open Sans", sans-serif; | |
body { | |
background: $black; | |
color: $white; | |
font-family: $mainFont; | |
font-weight: bold; | |
text-transform: uppercase; | |
text-shadow: 2px 2px 1px rgba($black, 0.6); | |
} | |
// PRICING TABLE | |
.pricing-table { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
display: flex; | |
// INDIVIDUAL PRICING TABLE | |
.card { | |
width: 220px; | |
height: 370px; | |
padding: 30px; | |
border-radius: 1.5rem; | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
position: relative; | |
overflow: hidden; | |
box-shadow: 2px 2px 46px -4px rgba(0, 0, 0, 0.6); | |
transition: all 0.2s ease-in-out; | |
// SPECIFIC STYLING FOR THE FIRST TABLE | |
&:nth-child(1) { | |
background: #7f7fd5; | |
background: linear-gradient(to left, #91eae4, #86a8e7, #7f7fd5); | |
.price { | |
&::before { | |
content: "$20"; | |
} | |
} | |
} | |
// SPECIFIC STYLING FOR THE SECOND TABLE | |
&:nth-child(2) { | |
margin: 0 30px; | |
z-index: 2; | |
width: 250px; | |
height: 400px; | |
background: #ff416c; | |
background: linear-gradient(to right, #ff4b2b, #ff416c); | |
.price { | |
&::before { | |
content: "$50"; | |
} | |
} | |
} | |
// SPECIFIC STYLING FOR THE THIRD TABLE | |
&:nth-child(3) { | |
background: #00b09b; | |
background: linear-gradient(to right, #96c93d, #00b09b); | |
.price { | |
&::before { | |
content: "$100"; | |
} | |
} | |
} | |
// SPECIFIC STYLING FOR THE FIRST AND LAST TABLE | |
&:nth-child(1), | |
&:nth-child(3) { | |
.price { | |
font-size: 6rem; | |
} | |
.buy-button { | |
width: 230px; | |
height: 170px; | |
h3 { | |
top: 12%; | |
left: 10%; | |
font-size: 1rem; | |
} | |
} | |
} | |
// TYPE OF SUBSCRIPTION | |
.type { | |
margin-top: 30px; | |
letter-spacing: 0.1rem; | |
} | |
// PRICE | |
.price { | |
font-size: 7.5rem; | |
position: relative; | |
margin: 10px 0px 20px; | |
z-index: 2; | |
span { | |
font-size: 1.8rem; | |
position: absolute; | |
left: -15%; | |
top: 65%; | |
} | |
&::before { | |
position: absolute; | |
content: ""; | |
color: rgba($white, 0.06); | |
font-size: 9.5rem; | |
z-index: -1; | |
right: -30%; | |
bottom: 15%; | |
text-shadow: 0 0 0px rgba($black, 0); | |
transition: all 1s ease-in-out; | |
} | |
} | |
// PLAN WITH THE TWO BORDERS ON EACH SIDE | |
.plan { | |
font-size: 1.3rem; | |
position: relative; | |
margin-bottom: 10px; | |
&::before, | |
&::after { | |
position: absolute; | |
content: ""; | |
width: 35px; | |
height: 2px; | |
background: $white; | |
bottom: 40%; | |
transition: all 0.2s ease-out; | |
} | |
&::before { | |
right: 100%; | |
transform: translate(-50%, -50%); | |
} | |
&::after { | |
right: -100%; | |
transform: translate(-0%, -50%); | |
} | |
} | |
// DETAILS OF THE PLAN | |
.details { | |
text-transform: capitalize; | |
li { | |
margin: 15px 0px; | |
} | |
} | |
// BUTTON CONTAINER | |
.buy-button { | |
cursor: pointer; | |
position: absolute; | |
width: 250px; | |
height: 180px; | |
background: $white; | |
border-radius: 15%; | |
right: -34%; | |
bottom: -27%; | |
transition: all 0.4s ease-in-out; | |
// BUTTON | |
h3 { | |
text-shadow: 0 0 0; | |
text-decoration: none; | |
color: $white; | |
position: absolute; | |
left: 8%; | |
top: 10%; | |
color: $black; | |
font-size: 1.2rem; | |
transition: all 0.4s ease-in-out; | |
} | |
} | |
// HOVER | |
&:hover { | |
transform: scale(1.02); | |
// PRICE | |
.price { | |
&::before { | |
animation: text-hover 1s ease-in-out infinite normal; | |
} | |
} | |
// PLAN | |
.plan { | |
&::before { | |
right: 90%; | |
} | |
&::after { | |
right: -90%; | |
} | |
} | |
// HOVER BUTTON | |
.buy-button { | |
width: 100%; | |
right: 0%; | |
border-radius: 0%; | |
h3 { | |
left: 50%; | |
transform: translate(-50%, 0%); | |
} | |
} | |
} | |
} | |
} | |
// KEYFRAMES | |
@keyframes text-hover { | |
0% { | |
right: -30%; | |
} | |
50% { | |
right: -37%; | |
} | |
100% { | |
right: -30%; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello there, I hope you see my comment, I just tried to use the code above, the html code works fine but the css wont work as I get a lot of error that like the css file wont recognize the css code. I saw the extinction was scss! so I did not use it before. so could you help me please what should I do? I did not know where should I put scss file or where I locate it. I am using visual studio 2019 building asp.net core mvc. I really like this snippets. Thank you in advance.