<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 ----------> <div class="container"> <div class="card"> <div class="card-header"> <img src="https://i.imgur.com/hQyxRB6.png" alt=""> </div> <div class="card-body"> <span class="tag"> Technology </span> <h4> Why is Tesla cyber truck is designed the way it is </h4> <p> An exploration into the truck's polorizing design</p> <div class="user"> <img src="./images/user-1.jpg" alt=""> <div class="user-info"> <h5> carrie Brew </h5> <small> few min ago </small> </div> </div> </div> </div> <div class="card"> <div class="card-header"> <img src="./images/city.jpeg" alt=""> </div> <div class="card-body"> <span class="tag"> Technology </span> <h4> How to Keep Going When You Don't Know What's Next </h4> <p> The future can be scary, but there are ways to deal with that fear.</p> <div class="user"> <img src="./images/user-2.jpg" alt=""> <div class="user-info"> <h5> jerome walt </h5> <small> yesterday </small> </div> </div> </div> </div> <div class="card"> <div class="card-header"> <img src="https://i.imgur.com/HY9KmRI.jpg" alt=""> </div> <div class="card-body"> <span class="tag"> Technology </span> <h4> 10 Rules of Dashboard Design </h4> <p> Dashboard Design Guidelines</p> <div class="user"> <img src="./images/user-3.jpg" alt=""> <div class="user-info"> <h5> carrie Brew </h5> <small> 2hr ago </small> </div> </div> </div> </div> </div>

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap"); * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } body { background-color: #f7f8fc; font-family: 'Roboto', sans-serif; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100vh; } body .container { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); gap: 25px; margin: auto; width: 940px; } body .container .card { background-color: #fff; border-radius: 10px; -webkit-box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); overflow: hidden; width: 300px; } body .container .card .card-header img { width: 100%; height: 200px; -o-object-fit: cover; object-fit: cover; } body .container .card .card-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: start; padding: 20px; min-height: 250px; } body .container .card .card-body .tag { background: #cccccc; border-radius: 50px; color: #fff; margin: 0; font-size: 12px; padding: 2px 10px; text-transform: uppercase; } body .container .card .card-body h4 { margin: 10px 0; } body .container .card .card-body p { font-size: 13px; margin: 0 0 40px; } body .container .card .card-body .user { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: auto; } body .container .card .card-body .user img { width: 50px; height: 50px; border-radius: 50%; margin-right: 10px; } body .container .card .card-body .user .user-info h5 { margin: 0; } body .container .card .card-body .user .user-info small { color: #888785; } @media (max-width: 940px) { .container { -ms-grid-columns: 1fr; grid-template-columns: 1fr; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } }