<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="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet"> <section class="blog-area pt-80 pb-80"> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="section-title"> <h4>Latest <span>Design</span> Blog</h4> </div> </div> <div class="col-md-9"> <div class="row"> <div class="col-md-4"> <div class="single-blog h-100" style="background-image: url('https://nahian91.github.io/arrow-creative-agency/assets/images/blog/blog-1.png');"> <span class="blog-cat"><a href="">blog</a></span> <div class="blog-content"> <h4>Blog title here</h4> <div class="meta"> <a href="">admin</a> <a href="">1 june 2021</a> </div> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum, assumenda.</p> </div> </div> </div> <div class="col-md-8"> <div class="row"> <div class="col-md-6"> <div class="single-blog" style="background-image: url('https://nahian91.github.io/arrow-creative-agency/assets/images/blog/blog-2.jpg');"> <span class="blog-cat"><a href="">blog</a></span> <div class="blog-content"> <h4>Blog title here</h4> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum, assumenda.</p> </div> </div> </div> <div class="col-md-6"> <div class="single-blog" style="background-image: url('https://nahian91.github.io/arrow-creative-agency/assets/images/blog/blog-3.jpg');"> <span class="blog-cat"><a href="">blog</a></span> <div class="blog-content"> <h4>Blog title here</h4> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum, assumenda.</p> </div> </div> </div> <div class="col-md-6"> <div class="single-blog" style="background-image: url('https://nahian91.github.io/arrow-creative-agency/assets/images/blog/blog-4.jpg');"> <span class="blog-cat"><a href="">blog</a></span> <div class="blog-content"> <h4>Blog title here</h4> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum, assumenda.</p> </div> </div> </div> <div class="col-md-6"> <div class="single-blog" style="background-image: url('https://nahian91.github.io/arrow-creative-agency/assets/images/blog/blog-5.jpg');"> <span class="blog-cat"><a href="">blog</a></span> <div class="blog-content"> <h4>Blog title here</h4> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum, assumenda.</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section>

body{ font-family: 'Bebas Neue', cursive; } .pt-80{ padding-top:80px; } .pb-80{ padding-bottom:80px; } .section-title { display: flex; height: 100%; align-items: flex-end; margin-bottom: -15px; } .section-title h4 { font-size: 90px; font-family: 'Bebas Neue', cursive; margin-bottom: -15px; color: #454443; line-height: 80px; } .section-title h4 span { display: block; color: #d25b38; } .single-blog { background-size: cover; background-position: 0 0; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; } .blog-cat a { background-color: #d25b38; display: inline-block; text-decoration: none; color: #fff; padding: 5px 20px; text-transform: uppercase; border-radius: 3px; } .blog-content { color: #fff; margin-top: 40px; } .single-blog { position: relative; z-index: 2; } .single-blog:before { position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; background-color: #333; z-index: -1; opacity: 0.75; } .blog-content h4 { text-transform: uppercase; font-family: 'Bebas Neue', cursive; font-size: 36px; } .meta a { color: #fff; text-transform: uppercase; text-decoration: none; font-weight: bold; position: relative; margin-right: 12px; font-size: 14px; font-family: inherit; } .blog-content p { margin-bottom: 0; margin-top: 30px; } .meta a:after { position: absolute; content: ""; width: 5px; height: 5px; background-color: #fff; top: 7px; left: -10px; } .meta { margin-left: 12px; } .blog-area .col-md-6:nth-child(3), .blog-area .col-md-6:nth-child(4) { margin-top: 20px; }