<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous" /> <div class="container"> <div class="row"> <div class="col-md-12 d-flex justify-content-center right-bck"> <div class="registration-right"> <h2>Our News</h2> <div class="event-list"> <div class="card flex-row"><img class="card-img-left img-fluid" src="https://via.placeholder.com/150 C/O https://placeholder.com/" /> <div class="card-body"> <h4 class="card-title h5 h4-sm"><i class="fas fa-caret-right" aria-hidden="true"></i><span>AUG 01 2021</span><i class="fas fa-caret-right" aria-hidden="true"></i><span>12:00 AM - 11:59 PM</span> </h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed</p> </div> </div> <div class="card flex-row"><img class="card-img-left img-fluid" src="https://via.placeholder.com/150 C/O https://placeholder.com/" /> <div class="card-body"> <h4 class="card-title h5 h4-sm"><i class="fas fa-caret-right" aria-hidden="true"></i><span>AUG 01 2021</span><i class="fas fa-caret-right" aria-hidden="true"></i><span>12:00 AM - 11:59 PM</span> </h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed</p> </div> </div> <div class="card flex-row"><img class="card-img-left img-fluid" src="https://via.placeholder.com/150 C/O https://placeholder.com/" /> <div class="card-body"> <h4 class="card-title h5 h4-sm"><i class="fas fa-caret-right" aria-hidden="true"></i><span>AUG 01 2021</span><i class="fas fa-caret-right" aria-hidden="true"></i><span>12:00 AM - 11:59 PM</span> </h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed</p> </div> </div> </div> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>

.right-bck { background-color: #231833; } .registration-right { width: 80%; padding-top: 50px; padding-bottom: 50px; } .registration-right h2 { color: #ffffff; font-weight: 700; padding-bottom: 20px; } .registration .btn { width: 100%; } .fa, .fas, .fab { font-family: "Font Awesome 5 Free"; font-weight: 900; } .far { font-family: "Font Awesome 5 Free"; font-weight: 400; } .event-list .card { background-color: #30263f; padding: 18px; margin-bottom: 3px; } .event-list img { width: 77px; height: 77px; } .event-list h4 { color: #c0bfc9; font-size: 16px; } .event-list .card-title span { padding-left: 5px; padding-right: 20px; font-size: 12px; font-weight: 700; } .event-list .card-text { color: #ffffff; font-weight: 700; font-size: 16px; } .event-list .card-body { padding: 0 20px; margin: 0 0 10px 0; } .event-list .card-title svg { color: #ffffff; }