Sub Plan Card

by Kirubel Girma

HTML

<div class="splan looker" id="sfree">
  <div class="stitle">Free Service<span class="xssub">1 demo</span></div>
  <div class="ssub">It's often cheaper to have a small team build internal tools rather than buy them. But that means most internal toohe marketplace that are developed with more resources.</div>
  <a class="sbtn">Start</a>
</div>

<div class="splan looker" id="sfree">
  <div class="stitle">15/Mo<span class="xssub">Billed Anually</span></div>
  <div class="ssub">It's often cheaper to have a small team build internal tools rather than buy them. But that means most internal tools used to develop software are very sub standard compared to tools in the marketplace that are developed with more resources.</div>
  <a class="sbtn">Start</a>
</div>

<div class="splan looker" id="sfree">
  <div class="stitle">50/Mo<span class="xssub">Billed Anually</span></div>
  <div class="ssub">It's often cheaper to have a small team build internal tools rather than buy them. But that means most internal tools used to develop software are very sub standard compared to tools in the marketplace that are developed with more resources.</div>
  <a class="sbtn">Start</a>
</div>

CSS

* {
  font-family: arial;
}

.looker{float:left; margin:0em 1em;}

.splan {
  height: 23em;
  width: 17em;
  background: black;
  border-radius: .3em;
}

.stitle {
  text-align: center;
  font-weight: 700;
  font-size: 2em;
  color: white;
  opacity: .95;
  padding: 0.9em 0em 0.5em 0em;
}

.xssub{
  display: block;
  font-size: .5em;
}
.ssub {
  height: 9.3em;
  font-size: 1em;
  margin: 0em 0.8em;
  color: white;
  opacity: .8;
}

.sbtn {
  width: 9em;
  text-align: center;
  text-decoration: none;
  padding: .5em;
  margin: 3em 3.4em;
  float: left;
  color: white;
  cursor: pointer;
  border: 0.1em solid white;
  border-radius: 0.3em;
}

.sbtn:hover{
  background:white;
  color:inherit;
}

.sbtn:active{
  background:transparent;
  color:white;
}

#sfree {
  background: #E91E63;
}