<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="spacer"></div>
<div class="ui container pad-top-30 pad-bottom-30">
<div class="center aligned segment">
<div class="ui horizontal divider">Monthly Specials</div>
</div>
</div>
<div class="spacer"></div>
<div class="ui container">
<div class="ui four column grid">
<div class="row">
<div class="column">
<div class="ui card">
<div class="image">
<a class="ui red right ribbon label">-50%</a>
<img src="https://mrpg.scene7.com/is/image/MRP/01_1104170929_SI_11?wid=360&hei=540&qlt=80" />
</div>
<div class="content">
<a class="header">Denim Dress</a>
<div class="description">
Nec vestibulum eget augue sit vel varius, lacus sem.
</div>
</div>
<div class="extra content">
<a class="ui teal tag label">R500</a>
</div>
</div>
</div>
