Content section design with boxes and icons bootstrap snipp made with bootstrap framework, you can use this in middle of your webpage, simple div structure easy to implement.
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="css/bootstrap.min.css"> <link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet"> <title>Content section design with boxes and icons</title> </head> <body> <style type="text/css"> @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); body { font-family: 'Roboto', sans-serif; } .box-100{ transition:all 0.3s ease; cursor:pointer; box-shadow: 0px 0px 2px 6px rgba(0,0,0,0.03); width: 100px; height: 100px; border-radius: 100px; } .box-100 i{ font-size:26px; } .box-100:hover{ box-shadow: 0px 0px 5px 8px rgba(0,0,0,0.08); } .box-100:hover i{ color:#e34c43; } .btn-link { color: #e34c43; transition: all 0.3s ease; font-weight: bold; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; } .btn-link:hover { color: #db3447; opacity: 0.5; text-decoration: none; } .cc { transition: all 0.3s ease; cursor: pointer; } .cc:hover { box-shadow: 0px 0px 32px 2px rgba(0,0,0,0.06); } </style> <div class="container py-5"> <div class="row py-5"> <div class="col-12 text-center"> <h2 class="mb-2 h1 font-weight-bold">Super clean user interface for easier use.</h2> <p class="mb-5 text-black-50">Lost the plot cracking goal give us a bell is bog horse.</p> <div class="row pt-3"> <div class="col-lg-4 col-md-6 mb-4"> <div class="p-4 border-light border rounded cc"> <div class="d-flex justify-content-center align-items-center border rounded-circle box-100 mx-auto"> <i class="lni lni-apartment"></i> </div> <h5 class="mb-3 mt-5">Image Heading Here</h5> <p class="mb-4 text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a href="" class="btn-link">View More →</a> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="p-4 border-light border rounded cc"> <div class="d-flex justify-content-center align-items-center border rounded-circle box-100 mx-auto"> <i class="lni lni-calculator"></i> </div> <h5 class="mb-3 mt-5">Image Heading Here</h5> <p class="mb-4 text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a href="" class="btn-link">View More →</a> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="p-4 border-light border rounded cc"> <div class="d-flex justify-content-center align-items-center border rounded-circle box-100 mx-auto"> <i class="lni lni-bar-chart"></i> </div> <h5 class="mb-3 mt-5">Image Heading Here</h5> <p class="mb-4 text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a href="" class="btn-link">View More →</a> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="p-4 border-light border rounded cc"> <div class="d-flex justify-content-center align-items-center border rounded-circle box-100 mx-auto"> <i class="lni lni-cart-full"></i> </div> <h5 class="mb-3 mt-5">Image Heading Here</h5> <p class="mb-4 text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a href="" class="btn-link">View More →</a> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="p-4 border-light border rounded cc"> <div class="d-flex justify-content-center align-items-center border rounded-circle box-100 mx-auto"> <i class="lni lni-codepen"></i> </div> <h5 class="mb-3 mt-5">Image Heading Here</h5> <p class="mb-4 text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a href="" class="btn-link">View More →</a> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="p-4 border-light border rounded cc"> <div class="d-flex justify-content-center align-items-center border rounded-circle box-100 mx-auto"> <i class="lni lni-comments-alt"></i> </div> <h5 class="mb-3 mt-5">Image Heading Here</h5> <p class="mb-4 text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a href="" class="btn-link">View More →</a> </div> </div> </div> </div> </div> </div> </body> </html>