Cen

/*
* Developer: Alireza Eskandarpour Shoferi
* Designer: Wouter de Bres (dribbble.com/wdeb)
*
* Distributed under the terms of the MIT license
* https://opensource.org/licenses/MIT
*/
.wrapper {
position: absolute;
top: 50%;
left: 50%;
margin: -190px 0 0 -468px;
font-family: ‚Open Sans‘, sans-serif;
font-weight: 400;
color: #9f9f9f;
font-size: 15px;
}
.package {
box-sizing: border-box;
width: 301px;
height: 380px;
border: 3px solid #e8e8e8;
border-radius: 7px;
display: inline-block;
padding: 24px;
text-align: center;
float: left;
-webkit-transition: margin-top 0.5s linear;
transition: margin-top 0.5s linear;
position: relative;
margin-right: 11px;
}
.package:hover {
margin-top: -30px;
-webkit-transition: margin-top 0.3s linear;
transition: margin-top 0.3s linear;
}
.name {
color: #565656;
font-weight: 300;
font-size: 3rem;
margin-top: -5px;
}
.price {
margin-top: 7px;
font-weight: bold;
}
.price::after {
content: “ / month per user“;
font-weight: normal;
}
hr {
background-color: #dedede;
border: none;
height: 1px;
}
.trial {
font-size: .9rem;
font-weight: 600;
padding: 2px 21px 2px 21px;
color: #33c4b6;
border: 1px solid #e4e4e4;
display: inline-block;
border-radius: 15px;
background-color: white;
position: relative;
bottom: -20px;
}
ul {
list-style: none;
padding: 0;
text-align: left;
margin-top: 29px;
}
li {
margin-bottom: 15px;
}
.checkIcon {
font-family: „FontAwesome“;
content: „\f00c“;
}
li::before {
font-family: „FontAwesome“;
content: „\f00c“;
font-size: 1.3rem;
color: #33c4b6;
margin-right: 3px;
}
.brilliant {
border-color: #33c4b6;
}
/* Triangle */
.brilliant::before {
width: 0;
height: 0;
border-style: solid;
border-width: 64px 64px 0 0;
border-color: #3bc6b8 transparent transparent transparent;
position: absolute;
left: 0;
top: 0;
content: „“;
}
.brilliant::after {
font-family: „FontAwesome“;
content: „\f00c“;
color: white;
position: absolute;
left: 9px;
top: 6px;
text-shadow: 0 0 2px #37c5b6;
font-size: 1.4rem;
}