<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.