<div class="basic-plan">
<p class="basic-plan-text-head">BASIC PLAN</p>
<p class="basic-plan-money"><span class="basic-plan-money-span"><sup class="basic-plan-money-span-dol">$</sup>22</span> PER MONTH</p>
<hr class="basic-plan-hr">
<p class="basic-plan-catig">1 Account</p><hr class="basic-plan-hr">
<p class="basic-plan-catig">8 hour support</p><hr class="basic-plan-hr">
<p class="basic-plan-catig">Custom Cloud Services</p>
<button class="basic-plan-button">GET STARTED</button>
</div>
.basic-plan {
position: relative;
width: 391px;
height: 441px;
border-radius: 3px;
border: solid 1px #ccd5df;
background-color: #ffffff;
transition: 1s;
}
.basic-plan:hover{
transform:scale(1.08);
border-radius: 3px;
background-color: #709dca;
color: #ffffff;
}
.basic-plan-text-head {
width: 150px;
height: 18px;
font-family: Lato;
font-size: 25px;
font-weight: 300;
font-stretch: normal;
font-style: normal;
line-height: 0.88;
letter-spacing: normal;
text-align: center;
color: #818b95;
margin: 0 auto;
padding: 57px 0px 30px 0px;
}
.basic-plan-money {
width: 120px;
height: 71px;
font-family: Lato;
font-size: 20px;
font-weight: 300;
font-stretch: normal;
font-style: normal;
line-height: 1.1;
letter-spacing: normal;
text-align: center;
color: #818b95;
margin: 0 auto;
padding: 0px 0px 16px 0px;
}
.basic-plan-money-span {
font-size: 60px;
font-weight: bold;
color: #ffbb42;
}
.basic-plan-money-span-dol {
font-size: 32px;
}
.basic-plan-hr {
width: 329px;
height: 1px;
background-color: #e2e9f0;
margin: 0 auto;
margin-top: 16px;
margin-bottom: 16px;
}
.basic-plan-catig {
width: 170px;
font-family: Lato;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
letter-spacing: normal;
text-align: center;
color: #b5bbc1;
margin: 0 auto;
}
.basic-plan-button {
width: 131px;
height: 42px;
border-radius: 2px;
background-color: #ffbb42;
color: #ffffff;
font-family: Lato;
position: relative;
left: 50%;
transform: translate(-50%, 0);
margin: 30px 0px 0px 0px;
outline: none;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.