Created
August 9, 2016 11:16
-
-
Save Lysindr/6a986e47862684d1ee97246b6823df15 to your computer and use it in GitHub Desktop.
Flex pricing card
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
html// | |
<div class="pricing-grid"> | |
<div class="plan plan1"> | |
<h2>Title</h2> | |
<p>Some short description</p> | |
<ul class="features"> | |
<li>Feature 1</li> | |
<li>Feature 2</li> | |
<li>Feature 3</li> | |
<li>Feature 4</li> | |
</ul> | |
<p class="price">50$</p> | |
<a href="" class="buy">Buy NOW</a> | |
</div> | |
<div class="plan plan2"> | |
<h2>Title 2</h2> | |
<p>Some short description Some short description Some short description</p> | |
<ul class="features"> | |
<li>Feature 1</li> | |
<li>Feature 2</li> | |
<li>Feature 3</li> | |
<li>Feature 4</li> | |
</ul> | |
<p class="price">50$</p> | |
<a href="" class="buy">Buy NOW</a> | |
</div> | |
<div class="plan plan3"> | |
<h2>Title 3</h2> | |
<p>Some short description</p> | |
<ul class="features"> | |
<li>Feature 1</li> | |
<li>Feature 2</li> | |
</ul> | |
<p class="price">50$</p> | |
<a href="" class="buy">Buy NOW</a> | |
</div> | |
</div> | |
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
//SCSS | |
//Default properities | |
body { | |
padding: 30px 0; | |
} | |
* { | |
font-family: Tahoma; | |
line-height: 1.2; | |
margin: 0; | |
padding: 0; | |
} | |
a { | |
display: inline-block; | |
text-decoration: none; | |
transition: .3s all; | |
font-weight: bold; | |
&:hover { | |
background-color: darken(#ff2, 15%); | |
} | |
} | |
ul { | |
list-style: none; | |
} | |
h2 { | |
text-transform: uppercase; | |
} | |
//Pricing Items | |
.buy { | |
border-radius: 5px; | |
background-color: #ff2; | |
padding: 10px; | |
max-width: 50%; | |
margin: 0 auto; | |
} | |
.features li { | |
margin-top: 10px; | |
border-bottom: 1px solid red; | |
} | |
//Flex-container | |
.pricing-grid { | |
display: flex; | |
flex-wrap: wrap; | |
max-width: 750px; | |
margin: 0 auto; | |
border: 1px solid #333; | |
align-items: stretch; //default | |
} | |
.plan { | |
flex: 1; | |
display: flex; | |
flex-wrap: wrap; | |
//flex-direction: column; | |
margin: 10px; | |
padding: 10px; | |
background-color: rgba(0,0,0,.2); | |
text-align: center; | |
border-radius: 5px; | |
} | |
.plan > * { | |
flex: 1; | |
flex-basis: 100%; | |
} | |
.plan .buy { | |
align-self: flex-end; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment