-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
179 lines (170 loc) · 9.82 KB
/
index.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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A theme for the Nevada Legislature site">
<meta name="theme-color" content="#30415b"/>
<link rel="shortcut icon" href="/Nelis-theme//images/favicon.ico">
<link rel="preconnect" href="https://kit.fontawesome.com/" crossorigin="anonymous" />
<link rel="preconnect" href="https://stackpath.bootstrapcdn.com/" crossorigin="anonymous"/>
<title>NELIS Bootstrap Theme</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="/Nelis-theme/styles/styles.css">
<script src="https://kit.fontawesome.com/d174097705.js" crossorigin="anonymous" async></script>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
</head>
<body class="bg-body bootstrap-fs-modal">
<header id="mainMenu"></header>
<nav id="nelisMenu" class="navbar navbar-light bg-complement navbar-expand-md sticky-top justify-content-between navbar-shadow navbar-without-dd-arrow nelis-menu">
</nav>
<main id="main-content" tabindex="-2" class="container-fluid pb-md-4">
<div class="row">
<div id=sidebar class="col-lg-3 pt-4">
</div>
<div class="col-lg-9 pt-4 main-content">
<h1>NELIS Bootstrap Theme</h1>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Second layer</a></li>
<li class="breadcrumb-item active" aria-current="page">Current page</li>
</ol>
</nav>
<p>Lorem ipsum dolor amet portland cloud bread jean shorts austin pug tumeric <a href="">messenger
bag</a>. Pabst heirloom 90's pok pok aesthetic coloring book kitsch succulents pork belly
church-key street art fingerstache quinoa messenger bag. Scenester sustainable activated charcoal
meditation truffaut tumeric, godard offal vape coloring book lyft. Single-origin coffee truffaut
fashion axe PBR&B, craft beer kickstarter deep v try-hard cloud bread selfies church-key. Ugh blue
bottle woke, tilde mustache sriracha selfies literally gochujang deep v waistcoat fam cronut.
</p>
<div class="row">
<div class="col">
<h2>Colors</h2>
<hr class="my-2">
<div class="row">
<div class="col">
<h3>Main</h3>
<div class="bg-main" style="padding: 5px;">Main base (.bg-main)</div>
<div class="bg-main-lighten-10" style="padding: 5px;">Main lightened 10%
(.bg-main-lighten-10)</div>
<div class="bg-main-lighten-20" style="padding: 5px;">Main lightened 20%
(.bg-main-lighten-20)</div>
<div class="bg-main-lighten-30" style="padding: 5px;">Main lightened 30%
(.bg-main-lighten-30)</div>
<div class="bg-main-lighten-40" style="padding: 5px;">Main lightened 40%
(.bg-main-lighten-40)</div>
<div class="bg-main-lighten-50" style="padding: 5px;">Main lightened 50%
(.bg-main-lighten-50)</div>
</div>
<div class="col">
<h3>Complementary</h3>
<div class="bg-complement" style="padding: 5px; border: 1px solid black;">Light bg
(.bg-complement)</div>
<div style="padding: 5px; background-color: #3d4551; color: white;">Header text color
</div>
<div class="bg-secondary-warm" style="padding: 5px;">Secondary warm
base(.bg-secondary-warm)</div>
<div class="bg-secondary-warm-lighten-10" style="padding: 5px;">Sec. warm light
(.bg-secondary-warm-lighten-10)</div>
<div class="bg-secondary-warm-lighten-20" style="padding: 5px;">Sec. warm lightest
(.bg-secondary-warm-lighten-20)</div>
</div>
<div class="col">
<h3>Accents</h3>
<div class="bg-accent-cool" style="padding: 5px;">Cool accent base (.bg-accent-cool)
</div>
<div class="bg-accent-cool-lighten-10" style="padding: 5px;">Cool accent light
(.bg-accent-cool-lighten-10)</div>
<div class="bg-accent-cool-lighten-20" style="padding: 5px;">Cool accent lightest
(.bg-accent-cool-lighten-20)</div>
<div class="bg-accent-warm" style="padding: 5px;">Warm accent base (.bg-accent-warm)
</div>
<div class="bg-accent-warm-lighten-10" style="padding: 5px;">Warm accent light
(.bg-accent-warm-lighten-10)</div>
<div class="bg-accent-warm-lighten-20" style="padding: 5px;">Warm accent lightest
(.bg-accent-warm-lighten-20)</div>
</div>
</div>
<div class="row mt-4">
<div class="col">
<p>The main colors up to the lightened by 20%, secondary warm base, and accent base
colors can also be used as border colors. Use class <code>.border-{color}</code> for
a border all the way around, or <code>.border-{side}-{color}</code> to add a border
to a particular side.</p>
<p><i class="fa fa-grav" aria-hidden="true"></i> Testing an icon</p>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col">
<h2>Modals</h2>
<hr class="my-2">
<p>We are using Bootstrap-FSModal to style the modals to be full-screen on mobile.</p>
</div>
<div class="col-12 mt-3 mb-5">
<button type="button" class="btn btn-primary square" data-toggle="modal"
data-target="#exampleModal">
Launch demo modal
</button>
</div>
</div>
</div>
</div>
</main>
<div class="drag-target"></div>
<div class="tap-target"></div>
<footer id="footer">
</footer>
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
<!--here for testing touch functionality-->
<!-- <script src="/src/touchemulator.js"></script>
<script>
TouchEmulator();
</script> -->
<!--end testing script-->
<script src="/Nelis-theme/src/hammer.min.js"></script>
<script src="/Nelis-theme/src/jquery.hammer.js"></script>
<script src="/Nelis-theme/src/app.js"></script>
<script>
function skipToMainContent(e) {
$("#main-content").focus();
$(window).scrollTop(0);
}
$(document).ready(function() {
$("#mainMenu").load('header.html');
$("#nelisMenu").load('menu.html');
$("#sidebar").load('sidebar.html');
$("#footer").load('footer.html');
});
</script>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
This is a modal.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary square" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary square">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>