Categories
Uncategorized

Create CSS 3 Dashboard Text

https://codepen.io/Shiva1029/pen/ppgzgx
Creating this using CSS is a better way as it is lightweight speeds up your homepage load times, when compared to using a static image. Also you have an option of rendering it dynamically using Javascript.

HTML 5 (Bootstrap 4)

<div class="row">
  <div class="col-4 students-ad"><span class="make-big">> Students</span>
    <ul>
      <li>Your details are private and never shared with recruiters automatically.</li>
      <li>All of your portfolios in one place (<em>github</em>, (<em>linkedin</em>, <em>website</em>).</li>
    </ul>
  </div>
</div>
<div class="row">
  <div class="col-4 recruiters-ad"><span class="make-big">> Recruiters</span>
    <ul>
      <li>Verified Students apply to jobs you post.</li>
      <li>Students grant access to their information when they apply for the job</li>
      </li>
    </ul>
  </div>
</div>

CSS 3

.students-ad {
  background-color: #0078d7;
  color: #ffffff;
  font-size: large;
  font-family: Verdana, sans-serif;
  padding: 12px;
  margin: 10px 50px 10px 50px;
}

.make-big {
  font-size: 150% !important;
}

.recruiters-ad {
  background-color: #4ba449;
  color: #ffffff;
  font-size: large;
  font-family: Verdana, sans-serif;
  padding: 12px;
  margin: 10px 50px 10px 50px;
}

Demo

I have used the same on my job portal here.