<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"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="counter-area pt-80 pb-80" style="background-image: url('https://nahian91.github.io/arrow-creative-agency/assets/images/counter-bg.jpg');"> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="section-title"> <h4>Fun <span>Facts</span></h4> </div> </div> <div class="col-md-9"> <div class="row"> <div class="col-md-6"> <div class="single-counter"> <i class="fa fa-plus-square"></i> <h4>cup of coffees <span>123</span></h4> </div> </div> <div class="col-md-6"> <div class="single-counter"> <i class="fa fa-plus-square"></i> <h4>cup of coffees <span>123</span></h4> </div> </div> <div class="col-md-6"> <div class="single-counter"> <i class="fa fa-plus-square"></i> <h4>cup of coffees <span>123</span></h4> </div> </div> <div class="col-md-6"> <div class="single-counter"> <i class="fa fa-plus-square"></i> <h4>cup of coffees <span>123</span></h4> </div> </div> </div> </div> </div> </div> </div>

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; } .counter-area { position: relative; z-index: 2; background-size: cover; background-position: center; } .counter-area:before { position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; background-color: #333; opacity: 0.75; z-index: -1; } .counter-area .section-title h4 { color: #fff; } .single-counter { background-color: #fff; padding: 26px; margin-bottom: 36px; border-radius: 3px; display: flex; align-items: center; } .single-counter i { font-size: 24px; background-color: tomato; padding: 20px; border-radius: 50%; color: #fff; } .single-counter h4 { font-family: 'Bebas Neue', cursive; font-size: 20px; margin-left: 14px; } .single-counter h4 span { display: block; font-size: 50px; } .counter-area .section-title { margin-top: -40px; }