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.