استایل زیبا برای جداول قیمت - pricing-tables ( نمونه 2)

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }

body {

font-family: "Avenir Next", Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif;

color: #444;

background: #A2E29E;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

a {

outline: none;

color: #63f8d3;

text-decoration: none;

}

a:hover, a:focus {

color: #57d8b8;

}

/* Common styles */

.pricing {

display: -webkit-flex;

display: flex;

-webkit-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-justify-content: center;

justify-content: center;

width: 100%;

margin: 0 auto 3em;

}

.pricing__item {

position: relative;

display: -webkit-flex;

display: flex;

-webkit-flex-direction: column;

flex-direction: column;

-webkit-align-items: stretch;

align-items: stretch;

text-align: center;

-webkit-flex: 0 1 330px;

flex: 0 1 330px;

}

.pricing__feature-list {

text-align: left;

}

.pricing__action {

color: inherit;

border: none;

background: none;

cursor: pointer;

}

.pricing__action:focus {

outline: none;

}

/* Individual styles */

/* Jinpa */

.pricing--jinpa .pricing__item {

font-family: 'Sahitya', serif;

margin: 1.5em 0;

padding: 2em;

cursor: default;

color: #fff;

border: 1px solid #CBFFC8;

-webkit-transition: background-color 0.6s, color 0.3s;

transition: background-color 0.6s, color 0.3s;

}

.pricing--jinpa .pricing__item:nth-child(2) {

border-right: none;

border-left: none;

}

.pricing--jinpa .pricing__item:hover {

color: #444;

background: #CBFFC8;

}

.pricing--jinpa .pricing__title {

font-size: 2em;

width: 100%;

margin: 0;

padding: 0;

}

.pricing--jinpa .pricing__price {

font-size: 1.45em;

font-weight: bold;

line-height: 95px;

width: 100px;

height: 100px;

margin: 1.15em auto 1em;

border-radius: 50%;

background: #ea716e;

-webkit-transition: color 0.3s, background 0.3s;

transition: color 0.3s, background 0.3s;

}

.pricing--jinpa .pricing__item:first-child .pricing__price {

background: #eac36e;

}

.pricing--jinpa .pricing__item:nth-child(2) .pricing__price {

background: #eaa36e;

}

.pricing--jinpa .pricing__item:hover .pricing__price {

color: #fff;

background: #82C57E;

}

.pricing--jinpa .pricing__sentence {

font-weight: bold;

}

.pricing--jinpa .pricing__feature-list {

margin: 0;

padding: 1em 1em 2em 1em;

list-style: none;

text-align: center;

}

.pricing--jinpa .pricing__action {

font-weight: bold;

margin-top: auto;

padding: 0.75em 2em;

opacity: 0;

color: #fff;

background: #82C57E;

-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;

transition: transform 0.3s, opacity 0.3s;

-webkit-transform: translate3d(0, -15px, 0);

transform: translate3d(0, -15px, 0);

}

.pricing--jinpa .pricing__item:hover .pricing__action {

opacity: 1;

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

.pricing--jinpa .pricing__action:hover,

.pricing--jinpa .pricing__action:focus {

background: #6EA76B;

}

@media screen and (max-width: 60em) {

.pricing--jinpa .pricing__item {

max-width: none;

width: 90%;

flex: none;

}

.pricing--jinpa .pricing__item:nth-child(2) {

border: 1px solid #fff;

}

}

- - , .