<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/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="banner" style="background:url(https://www.cashbackproject.com/fdspot/assets/images/Group-39484.jpg) no-repeat; "> <div class="row"> <div class="container"> <h1> Black Friday Spot </h1> <p> Alle Deals die je nodig hebt tijdens Black Friday</p> <div class="btn_group"> <a class="btn" href="#">Winkels </a> <a class="btn" href="#">Deals </a> </div> </div> </div> </div> <section class="container"> <div id="categories-slider"> <div class="category-slide"> <a href="#"> <img src="https://cashbackproject.com/fdspot/assets/images/ACER-BLACK-FRIDAY-DEALS-LOGO-1-1.svg" alt="Acer"> </a> </div> <div class="category-slide"> <a href="#"> <img src="https://cashbackproject.com/fdspot/assets/images/download-12.png" alt="Adobe"> </a> </div> <div class="category-slide"> <a href="#"> <img src="https://cashbackproject.com/fdspot/assets/images/adidas.png" alt="Adidas"> </a> </div> <div class="category-slide"> <a href="#"> <img src="https://cashbackproject.com/fdspot/assets/images/Balr-logo-black-friday-deals.png" alt="BALR"> </a> </div> <div class="category-slide"> <a href="#"> <img src="https://cashbackproject.com/fdspot/assets/images/Dyson_Logo-1024x389.png" alt="Dyson"> </a> </div> <div class="category-slide"> <a href="#"> <img src="https://cashbackproject.com/fdspot/assets/images/Asos-logo-black-friday-deals-1024x335.png" alt="ABOUT YOU"> </a> </div> <div class="category-slide"> <a href="#"> <img src="https://cashbackproject.com/fdspot/assets/images/ACER-BLACK-FRIDAY-DEALS-LOGO-1-1.svg" alt="Acer"> </a> </div> <div class="category-slide"> <a href="#"> <img src="https://cashbackproject.com/fdspot/assets/images/download-12.png" alt="Adobe"> </a> </div> <div class="category-slide"> <a href="#"> <img src="https://cashbackproject.com/fdspot/assets/images/adidas.png" alt="Adidas"> </a> </div> <div class="category-slide"> <a href="#"> <img src="https://cashbackproject.com/fdspot/assets/images/Balr-logo-black-friday-deals.png" alt="BALR"> </a> </div> <div class="category-slide"> <a href="#"> <img src="https://cashbackproject.com/fdspot/assets/images/Dyson_Logo-1024x389.png" alt="Dyson"> </a> </div> <div class="category-slide"> <a href="#"> <img src="https://cashbackproject.com/fdspot/assets/images/Asos-logo-black-friday-deals-1024x335.png" alt="ABOUT YOU"> </a> </div> </div> </section>

.banner{ min-height:300px; display:flex; align-items:center; justify-content:center; background-size:cover !important; margin-bottom:40px; } .banner h1, .banner p{ text-align:center; color:#fff; margin-bottom:20px; } .btn_group{ text-align:center; } .btn_group a{ color: #fff; } div#categories-slider { padding: 30px 2px; display: flex; justify-content: center; flex-wrap: wrap; border-radius: 22px; background: #FDFCFC; box-shadow: 7px 11px 18px 0px rgba(176, 176, 176, 0.25); padding:30px 10px; } .category-slide { background: #fff; margin: 10px; display: flex !important; border-radius: 10px; flex: 0 0 14%; padding: 20px 15px; box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.2); flex-wrap: wrap; justify-content: center; align-items: center; margin: 15px 8px; } .category-slide img { display: block; width: 123px; object-fit: contain; aspect-ratio: 3/2; text-align: center; margin: auto; }