<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="container-fluid sec-calendar"> <div class="container"> <div class="row"> <div class="col"> <h3>تقویم اجرایی</h3> <h6 class="f-light mb-5">برنامه های اجرایی در مدرسه و فعالیت های مهم را در تقویم اجرایی دنبال کنید.</h6> </div><!--.col--> </div><!--.row--> <div class="row"> <div class="col-md-3"> <div class="card info-box active"> <div class="card-body"> <div class="card-title"><a href="#">جمعه 24 آذر</a></div> <div class="card-text">روز شادی پدر و پسری</div> </div> </div><!--.card--> </div><!--.col--> <div class="col-md-3"> <div class="card info-box"> <div class="card-body"> <div class="card-title"><a href="#">جمعه 24 آذر</a></div> <div class="card-text">روز شادی پدر و پسری</div> </div> </div><!--.card--> </div><!--.col--> <div class="col-md-3"> <div class="card info-box"> <div class="card-body"> <div class="card-title"><a href="#">جمعه 24 آذر</a></div> <div class="card-text">روز شادی پدر و پسری</div> </div> </div><!--.card--> </div><!--.col--> <div class="col-md-3"> <div class="card info-box"> <div class="card-body"> <div class="card-title"><a href="#">جمعه 24 آذر</a></div> <div class="card-text">روز شادی پدر و پسری</div> </div> </div><!--.card--> </div><!--.col--> <div class="col-md-3"> <div class="card info-box"> <div class="card-body"> <div class="card-title"><a href="#">جمعه 24 آذر</a></div> <div class="card-text">روز شادی پدر و پسری</div> </div> </div><!--.card--> </div><!--.col--> </div> </div> </section>

.sec-calendar{ background: #87c66d; direction: rtl; text-align: right; color: #ffffff; padding-top: 2.5rem; padding-bottom: 2rem; } .sec-calendar h2{ margin-bottom: 2rem; } .sec-calendar .info-box{ color: #433d7b; background: #fafafa; margin-bottom: 2rem; border-bottom: 3px solid #433d7b; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .sec-calendar .info-box:hover,.sec-calendar .active{ color: #fff; background: #433d7b; border-bottom: 3px solid #433d7b; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .sec-calendar .info-box .card-body .card-text{ font-family: iranyekan_light; color: #000; } .sec-calendar .info-box:hover .card-body .card-text,.sec-calendar .active .card-body .card-text{ color: #fff; } .sec-calendar .info-box a{ color: #433d7b; } .sec-calendar .info-box:hover a,.sec-calendar .active a{ color: #fff; }