![]()
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;
}I have used the same on my job portal here.