-
Notifications
You must be signed in to change notification settings - Fork 3
/
light.html
90 lines (83 loc) · 6.05 KB
/
light.html
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Boostrap 4 responsive Sidebar template with slide in/out effect">
<meta name="author" content="Simran Singh">
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
<title>Responsive sidebar - Boostrap 4 - Light</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
crossorigin="anonymous">
<link rel="stylesheet" href="./css/b4.side-bar.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
</head>
<body>
<div class="side-bar side-bar-light">
<nav class="navbar navbar-inverse">
<button class="navbar-toggler hidden-lg-up" type="button" id="toggler" aria-controls="list-container" aria-label="Toggle side-bar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
<div class="list-container">
<ul>
<li><a href="#" class="active"><span class="navIcon"><i class="fa fa-sticky-note"></i></span> Active Link</a></li>
<li><a href="#"><span class="navIcon"><i class="fa fa-star-half-o"></i></span> Something</a></li>
<li><a href="#"><span class="navIcon"><i class="fa fa-car"></i></span> Link</a></li>
<li><a href="#"><span class="navIcon"><i class="fa fa-pencil-square-o"></i></span> Something else</a></li>
</ul>
</div>
</nav>
</div>
<div class="bodyContent">
<div style="padding:1rem">
<h2>Body Content</h2>
<br />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sodales libero. Quisque nulla felis, tristique venenatis
mi id, accumsan tempus sapien. Nam eu elit quis orci elementum lobortis ac eget felis. Maecenas vulputate
ligula nulla, a ultrices ex consectetur eu. Phasellus fringilla risus eget nulla vestibulum, et dapibus tortor
ullamcorper. Phasellus non nibh nec dolor sollicitudin porttitor sed id lectus. Etiam ultricies ligula a
libero malesuada tristique. Nam nunc nisl, varius sit amet finibus sit amet, blandit consequat odio. Quisque
eu mi ac nunc placerat consequat. Mauris ut metus eget dui pretium ornare at nec risus. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Curabitur varius pulvinar ipsum, nec pretium metus tristique interdum.
</p>
<p>
Ut arcu nisi, mollis a neque quis, congue molestie lorem. Nunc sed leo tortor. Nunc non viverra libero. Pellentesque pulvinar
eu risus id luctus. Mauris ut eros et leo egestas vehicula. Quisque rutrum dui ligula, eu tincidunt ligula
imperdiet nec. Curabitur dignissim accumsan ipsum, et euismod enim dignissim a. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas aliquet imperdiet magna, sollicitudin
lacinia augue tempor ac. In quis felis bibendum, tristique eros nec, pellentesque sapien. Curabitur pulvinar,
tellus sit amet aliquam interdum, tortor mauris pellentesque quam, ut ultricies mi ipsum eu justo. Mauris
consectetur elementum risus sit amet bibendum. Donec pellentesque pretium velit, at sagittis urna egestas
interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean sit
amet rutrum sapien, et semper odio.
</p>
<p>
Nulla suscipit placerat porttitor. Praesent vitae est et augue facilisis scelerisque sed in neque. Curabitur mollis, dui
a blandit cursus, metus nulla vehicula odio, lobortis rhoncus tortor augue eu risus. Proin vel nisl blandit,
efficitur lorem id, bibendum nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. In eu fermentum
justo. Pellentesque pretium est et efficitur maximus. Sed non sapien magna. Aliquam sollicitudin lacinia
erat eget ornare.
</p>
<p>
Mauris metus diam, posuere in bibendum imperdiet, auctor quis justo. Aliquam pulvinar egestas porttitor. Vestibulum iaculis
augue ac odio tristique, ut interdum tortor consequat. Maecenas faucibus vel lorem eu ultricies. Nulla lacinia
dapibus ligula, condimentum imperdiet lectus cursus at. Nullam dapibus nec nunc tristique efficitur. Mauris
non odio imperdiet, eleifend velit sit amet, semper odio. Suspendisse potenti. Proin erat arcu, aliquam eu
leo ac, facilisis dapibus velit. Phasellus elementum fermentum nibh, at vulputate neque tempor in. Morbi
purus nulla, lacinia ac pulvinar in, mollis vel tellus.
</p>
</div>
</div>
<!-- javascript includes -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>
<script src="./js/b4.side-bar.js"></script>
</body>
</html>