"List Type Sitemap with Gradient Background"
Bootstrap 4.1.1 Snippet by webui

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
<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 ---------->
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>List Type Sitemap with Gradient Background Color - </h3>
</div>
<div class="col-md-12">
<div class="lisitemap-section">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our Story</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">How It Works?</a></li>
<li><a href="#">Our Principles</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div class="col-md-12">
<p>Choose color from your requirement.</p>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.lisitemap-section ul>li {
padding: 8px;
font-size: 18px;
background: #f12711; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f5af19, #f12711); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f5af19, #f12711); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
list-style: none;
margin: 1px;
}
.lisitemap-section li>a {
color: #fff;
}
.lisitemap-section li>a:hover {
color: #29ad3a;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: