"A simple Banner Design In Bootstrap For Shopping Website"
Bootstrap 4.1.1 Snippet by anjalish

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="//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 href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<section>
<div class="container-fluid">
<div class="row">
<div class="col-md-1">
<div class="row">
<div class="col-md-6">
<ul class="icon-list">
<li><i class="fa fa-user-o" aria-hidden="true"></i></li>
<li><i class="fa fa-user" aria-hidden="true"></i></li>
<li><i class="fa fa-search" aria-hidden="true"></i></li>
</ul>
</div>
<div class="col-dm-6">
<ul class="icon-list-1">
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-instagram" aria-hidden="true"></i></li>
<li><i class="fa fa-youtube" aria-hidden="true"></i></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4" style="background-color: #fed0f5;">
<center>
<img src="https://lp2.hm.com/hmgoepprod?set=source[/00/40/00409b855702e38fb47994a552452356327f4fee.jpg],origin[dam],category[ladies_knitwear_cardigans],type[LOOKBOOK],res[m],res[s],hmver[1]&call=url[file:/product/main]" alt="shopping-girl" class="">
</center>
</div>
<div class="col-md-7" style="background-color: #9c27b0;">
<br>
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
.icon-list>li,.icon-list-1>li {
list-style-type: none;
margin-top: 15px;}
.icon-list-1 {
margin-top: 20pc;
font-size: 13px;
margin-left: -2.2pc;}
.icon-list {
margin-top: 5pc;
font-size: 13px;}
.price-icon>li {
list-style-type: none;
color: white;
display: inline-block;}
.price-icon>li i {
padding: 19px;}
.price.lead {
background-color: white;
width: 68px;
height: 68px;
border-radius: 45px;
padding: 15px 12px 20px 14px;}
.fa.fa-shopping-bag {
font-size: 85px;
background-color: #FFC107;
padding: 42px;
color: #ffffff;}
.images1 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: