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

*, *: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: #514B48;

-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 */

/* Yama */

.pricing--yama .pricing__item {

margin: 1em;

padding: 0 0 2em;

color: #fff;

background: #1e1c20;

}

.pricing--yama .pricing__title {

font-family: 'Playfair Display', serif;

font-size: 2.35em;

font-weight: 900;

line-height: 1;

width: 290px;

margin: 0 auto;

padding: 1em 1em 0em;

}

.pricing__amp {

padding: 0.15em 0 0.1em;

color: #0f0e0f;

}

.pricing--yama .pricing__sentence {

margin-bottom: 2em;

color: #555357;

}

.pricing--yama .pricing__price {

font-size: 2em;

font-weight: bold;

position: relative;

z-index: 10;

overflow: hidden;

padding: 0.75em;

cursor: default;

color: #ef7d46;

background: #1a181b;

-webkit-transition: color 0.3s;

transition: color 0.3s;

}

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

color: #fff;

}

.pricing--yama .pricing__price::before {

content: '';

position: absolute;

z-index: -1;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none;

background: #141315;

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

transition: transform 0.3s, opacity 0.3s;

-webkit-transform: translate3d(-150%,0,0) skewX(40deg);

transform: translate3d(-150%,0,0) skewX(40deg);

}

.pricing--yama .pricing__item:hover .pricing__price::before {

opacity: 1;

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

transform: translate3d(0,0,0) skewX(0deg);

}

.pricing--yama .pricing__period {

font-size: 0.5em;

font-weight: normal;

display: block;

color: #2a272c;

}

.pricing--yama .pricing__feature-list {

margin: 0;

padding: 2em 1em;

list-style: none;

text-align: center;

color: #6a6563;

}

.pricing--yama .pricing__action {

font-weight: bold;

margin: 0 2em;

padding: 1em 2em;

border-radius: 4px;

background: #ef7d46;

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

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

}

.pricing--yama .pricing__action:hover,

.pricing--yama .pricing__action:focus {

color: #ef7d46;

background: #fff;

}