Skip to content

Instantly share code, notes, and snippets.

@gottalovelattes
Forked from anonymous/pricingtablesnippetCSS
Created February 10, 2017 17:21
Show Gist options
  • Save gottalovelattes/7147a8824b3c988dc3c3cb873aa1d0ed to your computer and use it in GitHub Desktop.
Save gottalovelattes/7147a8824b3c988dc3c3cb873aa1d0ed to your computer and use it in GitHub Desktop.
/* Pricing Table
--------------------------------------------- */
.pricing-table {
/* font-size: 22px; */
line-height: 1;
}
.pricing-table h4 {
border-bottom: 1px solid #BFB3A7;
/* color: #000; */
margin: -40px -40px 40px;
padding: 40px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.pricing-table .one-third {
background-color: #ffffff;
border: 1px solid #BFB3A7;
margin: 20px -2px;
padding: 40px;
width: 33.33%;
}
.pricing-table .one-third:nth-child(3n+1) {
margin: 20px 0;
}
.pricing-table .one-third:nth-child(3n+2) {
margin-bottom: 0;
margin-top: 0;
}
.pricing-table .one-third:nth-child(3n) {
margin: 20px 0;
}
.pricing-table ul li::before {
content: "\f139";
display: inline-block;
font: normal 20px/1 'dashicons';
margin-right: 5px;
margin-top: -2px;
vertical-align: top;
-webkit-font-smoothing: antialiased;
}
.pricing-table ul li {
border-bottom: 1px dotted #fef5f5;
/* color: #000; */
padding-bottom: 10px;
margin-bottom: 15px;
}
.pricing-table a.button {
background-color: #9B1A2C;
/*border: 3px solid #f7cac9;*/
color: #ffffff;
}
.pricing-table a.button:hover {
background-color: #584C4C;
/*border: 3px solid #f7cac9;*/
color: #fff !important;
}
@media only screen and (max-width: 960px) {
.pricing-table .one-third:nth-child(3n+1) {
width: 100%;
}
.pricing-table .one-third:nth-child(3n+2) {
margin-bottom: 20px;
margin-top: 20px;
width: 100%;
}
.pricing-table .one-third:nth-child(3n) {
width: 100%;
}
}
/* Pricing Table - Media Queries for Mobile Devices
--------------------------------------------- */
@media only screen and (max-width: 1140px) {
.pricing-table .one-third {
width: 32%;
}
}
@media only screen and (max-width: 800px) {
.pricing-table .one-third {
width: 100%;
}
}
@media only screen and (max-width: 568px) {
.pricing-table .one-third {
width: 100%;
}
}
@media only screen and (max-width: 480px) {
.pricing-table .one-third {
width: 100%;
}
}
@media only screen and (max-width: 420px) {
.pricing-table .one-third {
width: 100%;
margin: 20px 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment