Tryit My-Help HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

body{
 background-color:#f2f2f2;
}

*{
 box-sizing:border-box;
}

div.div-container {
 float: left;
 width: 33.33%;
 padding: 5px;
}

.clearfix::after {
 content: "";
 clear: both;
 display: table;
}

/* برای واکنش گرایی */
@media screen and (max-width: 500px) {
 div.div-container {
  float:none;
  width: 100%;
 }
}

div.pedar{
 position:relative;
 background-color:#0074d9;
 font-family:tahoma;
 text-align:center;
 padding:1px;
 height:200px;
 margin:10px auto;
 transition:0.5s;
}

div.pedar:hover{
 box-shadow: 0 6px 20px rgba(168,172,185,.3);
 transform: translateY(-4px);
 cursor:pointer;
}

div.pedar:hover .sale-perc-badge{
 transform: rotate(0);
}

div.farzand{
 background-color:#fff;
 padding:10px;
 position:absolute;
 bottom: 0;
 left: 0;
 right: 0;
}

div.pedar h2{
 margin-top:60px;
 color:#fff;
}

.sale-perc-badge {
 position: absolute;
 width: 54px;
 height: 55px;
 background: url("https://files.free-learn.ir/myhelp/html/img/discont_badge.png");
 z-index: 5;
 color: #fff;
 font-size: 14px;
 font-weight: 100;
 left: -10px;
 top: -10px;
 transform: rotate(-30deg);
 transition: all .3s;
}

</style>
</head>
<body>

<div class="div-container">
 <div class="pedar">
  <div class="sale-perc-badge">
    <div class="sale-perc">20% </div>
    <div class="sale-badge-text">تخفیف</div>
  </div>
     <h2>Free-Learn</h2>
   <div class="farzand">سایت آموزشی فری لرن</div>
 </div>
</div>

<div class="div-container">
 <div class="pedar">
     <h2>Free-Learn</h2>
   <div class="farzand">سایت آموزشی فری لرن</div>
 </div>
</div>

</div>

<div class="div-container">
 <div class="pedar">
     <h2>Free-Learn</h2>
   <div class="farzand">سایت آموزشی فری لرن</div>
 </div>
</div>

</div>

</body>
</html>

Www.Free-Learn.Ir