"categories-slider"
Bootstrap 3.1.0 Snippet by ayaz11244

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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="#">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: