<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:Condensed" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'>
<body>
<div id="plan">
<div class="title promo">
<p>Trial</p>
<h1>3 Days Free<sup>†</sup><span></span></h1>
</div>
<div class="containDetails">
<h2><sub>Includes</sub></h2>
<div class="details block-1">
<p>Gold Level Access</p>
<p>50GB Storage</p>
<p>AAA</p>
<p>bbbb</p>
<p>ccccc</p>
</div>
<div class="details block-2">
<p>ddddd</p>
<p>ggggg</p>
<p>hhhhhhhhhhhhhhh</p>
<p>iiiiiiiiiiiiiii</p>
</div>
</div>
<div class="end">
<div class="select">
<a href="#" class="button button-flat-royal button-pill">Select</a>
</div></div>
</div>
<div id="plan">
<div class="title gold">
<p>Gold</p>
<h1>$14.95 <span>/month</span></h1>
</div>
<div class="containDetails">
<h2><sub>INCLUDES</sub></h2>
<div class="details block-1">
<p>Gold Level Access</p>
<p>50GB Storage</p>
<p>AAA</p>
<p>bbbb</p>
<p>ccccc</p>
</div>
<div class="details block-2">
<p>ddddd</p>
<p>ggggg</p>
<p>hhhhhhhhhhhhhhh</p>
<p>iiiiiiiiiiiiiii</p>
</div>
</div>
<div class="end">
<div class="select">
<a href="#" class="button button-flat-royal button-pill">Select</a>
</div></div>
</div>
<div id="plan">
<div class="title silver">
<p>Silver</p>
<h1>$7.95 <span>/month</span></h1>
</div>
<div class="containDetails">
<h2><sub>Includes</sub></h2>
<div class="details block-1">
<p>Gold Level Access</p>
<p>50GB Storage</p>
<p>AAA</p>
<p>bbbb</p>
<p>ccccc</p>
</div>
<div class="details block-2">
<p>ddddd</p>
<p>ggggg</p>
<p>hhhhhhhhhhhhhhh</p>
<p>iiiiiiiiiiiiiii</p>
</div>
</div>
<div class="end">
<div class="select">
<a href="#" class="button button-flat-royal button-pill">Select</a>
</div></div>
</div>
<div id="plan">
<div class="title basic">
<p>Basic</p>
<h1>FREE <span></span></h1>
</div>
<div class="containDetails">
<h2><sub>Includes</sub></h2>
<div class="details block-1">
<p>Gold Level Access</p>
<p>50GB Storage</p>
<p>AAA</p>
<p>bbbb</p>
<p>ccccc</p>
</div>
<div class="details block-2">
<p>ddddd</p>
<p>ggggg</p>
<p>hhhhhhhhhhhhhhh</p>
<p>iiiiiiiiiiiiiii</p>
</div>
</div>
<div class="end">
<div class="select">
<a href="#" class="button button-flat-royal button-pill">Select</a>
</div></div>
</div>
</body>
body {
background:#000;
}
#plan{
width:945px;
height:200px;
margin: 0 auto;
margin-top: 30px;
background: #1d1d1d;
}
.title.promo {
background-image: url("https://s3.wasabisys.com/my-slam/wp-content/uploads/2023/01/19125345/promo_back.png");
}
.title.gold {
background-image: url("https://s3.wasabisys.com/my-slam/wp-content/uploads/2023/01/19142202/gold_back.png");
}
.title.silver {
background-image: url("https://s3.wasabisys.com/my-slam/wp-content/uploads/2023/01/19142207/silver_back.png");
}
.title.basic {
background-image: url("https://s3.wasabisys.com/my-slam/wp-content/uploads/2023/01/19142156/basic-back.png");
}
.title{
width:200px;
height:200px;
float:left;
-webkit-transition: background-color 0.3s ease-out 0.3s, width 0.3s ease-out 0.3s;
-moz-transition:background-color width 0.3s ease-out 0.3s, width 0.3s ease-out 0.3s;
-o-transition: background-color width 0.3s ease-out 0.3s, width 0.3s ease-out 0.3s;
transition: background-color width 0.3s ease-out 0.3s, width 0.3s ease-out 0.3s;
padding-top: 35px;
}
.title h1{
color:white;
font-family:'Public Sans';
text-transform:uppercase;
font-size:30px;
font-weight: 100;
text-align:center;
margin:0px;
padding:0px;
}
.title h1 span{
font-size:10px;
}
.title p{
padding-top:65px;
color:white;
font-family:'Public Sans';
text-transform:uppercase;
font-size:40px;
font-weight:bold;
text-align:center;
margin:0px;
padding:0px;
}
.title:hover{
width:230px;
-webkit-transition: background-color 0.3s ease-out 0.3s, width 0.3s ease-out 0.3s;
-moz-transition:background-color width 0.3s ease-out 0.3s, width 0.3s ease-out 0.3s;
-o-transition: background-color width 0.3s ease-out 0.3s, width 0.3s ease-out 0.3s;
transition: background-color width 0.3s ease-out 0.3s, width 0.3s ease-out 0.3s;
}
.containDetails{
max-width: 550px;
min-width: 550px;
float:left;
margin-top: 8px;
padding-left: 0px;
}
h2 {
width: 500px;
padding-left: 29px;
padding-bottom: 5px;
margin-left: 0px;
text-transform: uppercase;
font-weight: 900;
font-family: "Public Sans";
color: #666;
background-color: #1d1d1d;
letter-spacing: 1px;
text-shadow:
-1px -1px 1px #000,
2px 2px 1px #161616;
}
.block-1 {
width: 50%;
display: block;
position: relative;
float:left;
}
.block-2 {
width: 50%;
display: block;
position: relative;
float: left;
}
p {
color: #fff;
padding-left: 29px;
font-size: 15px;
font-family: 'Open Sans';
margin: 0 0;
line-height:1.5;
}
.select{
margin-top: 73px;
margin-left: 14px;
text-align: center;
}
.end{
width: 150px;
height: 200px;
background: #1d1d1d;
float: left;
position: relative;
}
.button-pill {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
}
.button {
-webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
background-color: #083cfc;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbfbfb), color-stop(100%, #e1e1e1));
background: -webkit-linear-gradient(top, #fbfbfb, #e1e1e1);
background: -moz-linear-gradient(top, #fbfbfb, #e1e1e1);
background: -o-linear-gradient(top, #fbfbfb, #e1e1e1);
background: linear-gradient(top, #fbfbfb, #e1e1e1);
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
border: 1px solid #d4d4d4;
height: 32px;
line-height: 32px;
padding: 0px 25.6px;
font-weight: 300;
font-size: 14px;
font-family:'Open Sans';
color: #fff;
text-shadow: 0 1px 1px white;
margin: 0 auto;
text-decoration: none;
text-align: center;
}
.button-flat-royal {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background: #083cfc;
color: #fff;
text-shadow: none;
border: none;
margin: 0 auto;
}
a:hover {
color: #fff!important;
text-decoration: none!important;
}
