Issues:
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <title>
5 Pixel Lite - Accessibility first and open source Bootstrap UI Kit
6 </title>
7 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><!-- Primary Meta Tags -->
8 <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
9 <meta name="title" content="Pixel Lite - Accessibility first and open source Bootstrap UI Kit" />
10 <meta name="author" content="Themesberg" />
11 <meta name="description" content="Open source and accessibility first Bootstrap UI Kit featuring over 80 premium components and 4 example pages." />
12 <meta name="keywords" content="bootstrap, bootstrap ui kit, accessiblity, accessibility first, open source, open source bootstrap ui kit" />
13 <link rel="canonical" href="https://themesberg.com/product/ui-kits/pixel-lite-free-bootstrap-4-ui-kit" /><!-- Open Graph / Facebook -->
14 <meta content="website" property="og:type" />
15 <meta content="https://demo.themesberg.com/pixel-lite" property="og:url" />
16 <meta content="Pixel Lite - Accessibility first and open source Bootstrap UI Kit" property="og:title" />
17 <meta content="Open source and accessibility oriented Bootstrap UI Kit featuring over 80 premium components and 4 example pages." property="og:description" />
18 <meta content="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-lite/pixel-lite-preview.jpg" property="og:image" /><!-- Twitter -->
19 <meta content="summary_large_image" property="twitter:card" />
20 <meta content="https://demo.themesberg.com/pixel-lite" property="twitter:url" />
21 <meta content="Pixel Lite - Accessibility first and open source Bootstrap UI Kit" property="twitter:title" />
22 <meta content="Open source and accessibility oriented Bootstrap UI Kit featuring over 80 premium components and 4 example pages." property="twitter:description" />
23 <meta content="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-lite/pixel-lite-preview.jpg" property="twitter:image" /><!-- Favicon -->
24 <link rel="apple-touch-icon" href="./assets/img/favicon/apple-touch-icon.png" sizes="120x120" />
25 <link rel="icon" type="image/png" href="./assets/img/favicon/favicon-32x32.png" sizes="32x32" />
26 <link rel="icon" type="image/png" href="./assets/img/favicon/favicon-16x16.png" sizes="16x16" />
27 <link rel="manifest" href="./assets/img/favicon/site.webmanifest" />
28 <link rel="mask-icon" href="./assets/img/favicon/safari-pinned-tab.svg" color="#ffffff" />
29 <meta name="msapplication-TileColor" content="#ffffff" />
30 <meta name="theme-color" content="#ffffff" /><!-- Fontawesome -->
31 <link rel="stylesheet" type="text/css" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" /><!-- Pixel CSS -->
32 <link rel="stylesheet" type="text/css" href="./css/pixel.css" /><!-- Fullstory tracking -->
33
34 <script type="text/javascript" src="https://www.google-analytics.com/analytics.js" async="true"></script>
35 <script src="https://edge.fullstory.com/s/fs.js" async="1" crossorigin="anonymous"></script>
36 <script>
37 <![CDATA[
38 window['_fs_debug'] = false;
39 window['_fs_host'] = 'fullstory.com';
40 window['_fs_script'] = 'edge.fullstory.com/s/fs.js';
41 window['_fs_org'] = 'S6PW8';
42 window['_fs_namespace'] = 'FS';
43 (function(m,n,e,t,l,o,g,y){
44 if (e in m) {if(m.console && m.console.log) { m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].');} return;}
45 g=m[e]=function(a,b,s){g.q?g.q.push([a,b,s]):g._api(a,b,s);};g.q=[];
46 o=n.createElement(t);o.async=1;o.crossOrigin='anonymous';o.src='https://'+_fs_script;
47 y=n.getElementsByTagName(t)[0];y.parentNode.insertBefore(o,y);
48 g.identify=function(i,v,s){g(l,{uid:i},s);if(v)g(l,v,s)};g.setUserVars=function(v,s){g(l,v,s)};g.event=function(i,v,s){g('event',{n:i,p:v},s)};
49 g.shutdown=function(){g("rec",!1)};g.restart=function(){g("rec",!0)};
50 g.log = function(a,b){g("log",[a,b])};
51 g.consent=function(a){g("consent",!arguments.length||a)};
52 g.identifyAccount=function(i,v){o='account';v=v||{};v.acctId=i;g(o,v)};
53 g.clearUserCookie=function(){};
54 g._w={};y='XMLHttpRequest';g._w[y]=m[y];y='fetch';g._w[y]=m[y];
55 if(m[y])m[y]=function(){return g._w[y].apply(this,arguments)};
56 })(window,document,window['_fs_namespace'],'script','user');
57 ]]>
58 </script><!-- Global site tag (gtag.js) - Google Analytics -->
59
60 <script src="https://www.googletagmanager.com/gtag/js?id=UA-141734189-1" async="async"></script>
61 <script>
62 <![CDATA[
63 window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-141734189-1');
64 ]]>
65 </script>
66 </head>
67 <body>
68 <header class="header-global">
69 <nav id="navbar-main" class="navbar navbar-main navbar-expand-lg navbar-theme-primary headroom navbar-dark">
70 <div class="container position-relative">
71 <a class="navbar-brand mr-lg-5" href="./index.html">
<img class="navbar-brand-dark" alt="Logo light" src="./assets/img/brand/light.svg" />
<img class="navbar-brand-light" alt="Logo dark" src=
72 "./assets/img/brand/dark.svg" /></a>
73 <div id="navbar_global" class="navbar-collapse collapse">
74 <div class="navbar-collapse-header">
75 <div class="row">
76 <div class="col-6 collapse-brand">
77 <a href="./index.html">
<img alt="menuimage" src="./assets/img/brand/dark.svg" /></a>
78 </div>
79 <div class="col-6 collapse-close">
80 <a aria-expanded="false" aria-label="Toggle navigation" aria-controls="navbar_global" class="fas fa-times" href="#navbar_global" data-target="#navbar_global" data-toggle="collapse"></a>
81 </div>
82 </div>
83 </div>
84 <ul class="navbar-nav navbar-nav-hover align-items-lg-center">
85 <li class="nav-item dropdown">
86 <a class="nav-link" href="#" data-toggle="dropdown"><span class="nav-link-inner-text">Pages</span></a>
87 <ul class="dropdown-menu">
88 <li>
89 <a class="dropdown-item" href="./html/pages/about-company.html">About</a>
90 </li>
91 <li>
92 <a class="dropdown-item" href="./html/pages/contact.html">Contact</a>
93 </li>
94 <li>
95 <a class="dropdown-item" href="./html/pages/pricing.html">Pricing</a>
96 </li>
97 <li>
98 <a class="dropdown-item" href="./html/pages/services.html">Services</a>
99 </li>
100 </ul>
101 </li>
102 <li class="nav-item dropdown mega-dropdown">
103 <a class="nav-link" href="#" data-toggle="dropdown"><span class="nav-link-inner-text">Components</span></a>
104 <div class="dropdown-menu">
105 <div class="row">
106 <div class="col-lg-6 inside-bg d-none d-lg-block">
107 <div class="justify-content-center bg-tertiary text-white">
108 <div class="px-6 pb-4 pt-5">
109
<img alt="image" src="./assets/img/megamenu_image.png" />
110 </div>
111 <div class="z-2 pb-4 text-center">
112 <a class="btn btn-primary btn-icon animate-up-2 mb-2 mb-sm-0 mr-3" href="./html/components/all.html">All components</a> <a class=
113 "btn btn-outline-white btn-icon animate-up-2 mb-2 mb-sm-0" href="https://themesberg.com/docs/pixel-bootstrap/getting-started/overview/" target="_blank">Docs v3.0</a>
114 </div>
115 </div>
116 </div>
117 <div class="col pl-0">
118 <ul class="list-style-none">
119 <li>
120 <a class="dropdown-item" href="./html/components/accordions.html">Accordions</a>
121 </li>
122 <li>
123 <a class="dropdown-item" href="./html/components/alerts.html">Alerts</a>
124 </li>
125 <li>
126 <a class="dropdown-item" href="./html/components/badges.html">Badges</a>
127 </li>
128 <li>
129 <a class="dropdown-item" href="./html/components/cards.html">Cards</a>
130 </li>
131 <li>
132 <a class="dropdown-item" href="./html/components/bootstrap-carousels.html">Bootstrap Carousels</a>
133 </li>
134 <li>
135 <a class="dropdown-item" href="./html/components/breadcrumbs.html">Breadcrumbs</a>
136 </li>
137 <li>
138 <a class="dropdown-item" href="./html/components/buttons.html">Buttons</a>
139 </li>
140 <li>
141 <a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/pixel-bootstrap/plugins/jquery-counters/" target="_blank">Counters
142 <span class="badge badge-tertiary text-uppercase ml-3">Pro</span></a>
143 </li>
144 <li>
145 <a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/pixel-bootstrap/components/buttons/#button-dropdown" target=
146 "_blank">Dropdowns <span class="badge badge-tertiary text-uppercase ml-3">Pro</span></a>
147 </li>
148 </ul>
149 </div>
150 <div class="col pl-0">
151 <ul class="list-style-none">
152 <li>
153 <a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/pixel-bootstrap/components/e-commerce/" target="_blank">E-commerce
154 <span class="badge badge-tertiary text-uppercase ml-3">Pro</span></a>
155 </li>
156 <li>
157 <a class="dropdown-item" href="./html/components/forms.html">Forms</a>
158 </li>
159 <li>
160 <a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/pixel-bootstrap/components/icon-boxes/" target="_blank">Icon Boxes
161 <span class="badge badge-tertiary text-uppercase ml-3">Pro</span></a>
162 </li>
163 <li>
164 <a class="dropdown-item" href="./html/components/modals.html">Modals</a>
165 </li>
166 <li>
167 <a class="dropdown-item" href="./html/components/navs.html">Navs</a>
168 </li>
169 <li>
170 <a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/pixel-bootstrap/plugins/owl-carousel/" target="_blank">Owl Carousels
171 <span class="badge badge-tertiary text-uppercase ml-3">Pro</span></a>
172 </li>
173 <li>
174 <a class="dropdown-item" href="./html/components/pagination.html">Pagination</a>
175 </li>
176 <li>
177 <a class="dropdown-item" href="./html/components/popovers.html">Popovers</a>
178 </li>
179 <li>
180 <a class="dropdown-item" href="./html/components/progress-bars.html">Progress Bars</a>
181 </li>
182 </ul>
183 </div>
184 <div class="col pl-0">
185 <ul class="list-style-none">
186 <li>
187 <a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/pixel-bootstrap/components/icon-boxes/#steps" target="_blank">Steps
188 <span class="badge badge-tertiary text-uppercase ml-3">Pro</span></a>
189 </li>
190 <li>
191 <a class="dropdown-item" href="./html/components/tables.html">Tables</a>
192 </li>
193 <li>
194 <a class="dropdown-item" href="./html/components/tabs.html">Tabs</a>
195 </li>
196 <li>
197 <a class="dropdown-item" href="./html/components/toasts.html">Toasts</a>
198 </li>
199 <li>
200 <a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/pixel-bootstrap/components/timelines/" target="_blank">Timelines <span class=
201 "badge badge-tertiary text-uppercase ml-3">Pro</span></a>
202 </li>
203 <li>
204 <a class="dropdown-item" href="./html/components/tooltips.html">Tooltips</a>
205 </li>
206 <li>
207 <a class="dropdown-item" href="./html/components/typography.html">Typography</a>
208 </li>
209 <li>
210 <a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/pixel-bootstrap/plugins/chart-js/" target="_blank">Charts <span class=
211 "badge badge-tertiary text-uppercase ml-3">Pro</span></a>
212 </li>
213 <li>
214 <a class="dropdown-item d-flex align-items-center justify-content-between" href="https://demo.themesberg.com/pixel-pro/html/components/widgets.html">Widgets <span class=
215 "badge badge-tertiary text-uppercase ml-3">Pro</span></a>
216 </li>
217 </ul>
218 </div>
219 </div>
220 </div>
221 </li>
222 <li class="nav-item dropdown">
223 <a class="nav-link" href="#" data-toggle="dropdown"><span class="nav-link-inner-text">Support</span></a>
224 <div class="dropdown-menu dropdown-menu-lg">
225 <div class="col-auto px-0" data-dropdown-content="">
226 <div class="list-group list-group-flush">
227 <a class="list-group-item list-group-item-action d-flex align-items-center p-0 py-3 px-lg-4" href="https://themesberg.com/docs/pixel-bootstrap/getting-started/overview/" target="_blank">
228 <div class="ml-4">
229 <span class="text-dark d-block">Documentation<span class="badge badge-sm badge-secondary ml-2">v3.0</span></span> <span class="small">Examples and guides</span>
230 </div></a><a class="list-group-item list-group-item-action d-flex align-items-center p-0 py-3 px-lg-4" href="https://github.com/themesberg/pixel-bootstrap-ui-kit/issues" target="_blank">
231 <div class="ml-4">
232 <span class="text-dark d-block">Support</span> <span class="small">Found an issue? Let us know!</span>
233 </div></a>
234 </div>
235 </div>
236 </div>
237 </li>
238 </ul>
239 </div>
240 <div class="d-flex align-items-center">
241 <span class="d-none d-md-inline"><a class="btn btn-tertiary animate-up-2" href="https://demo.themesberg.com/pixel-pro/" target="_blank">Upgrade to Pro</a></span> <a class=
242 "btn btn-outline-soft ml-md-3 animate-up-2" href="https://themesberg.com/docs/pixel-bootstrap/getting-started/overview/" target="_blank">Docs v3.0</a>
243 </div>
244 </div>
245 </nav>
246 </header>
247 <main>
248 <div class="preloader bg-dark flex-column justify-content-center align-items-center">
249
<svg id="loader-logo" viewbox="0 0 64 78.4" height="50" width="50" xmlns="http://www.w3.org/2000/svg">
250 <path fill="#fff" d="M10,0h1.2V11.2H0V10A10,10,0,0,1,10,0Z"></path>
251 <rect fill="none" height="25.6" width="0" y="17.6" x="40" stroke-width="11.2" stroke="#fff"></rect>
252 <rect fill="none" height="25.6" width="0" y="35.2" x="23" stroke-width="11.2" stroke="#fff" stroke-opacity="0.4"></rect>
253 <path fill="#fff" d="M52.8,35.2H64V53.8a7,7,0,0,1-7,7H52.8V35.2Z"></path>
254 <rect fill="none" height="25.6" width="0" y="52.8" x="6" stroke-width="11.2" stroke="#fff"></rect>
255 <path fill="#fff" d="M52.8,0H57a7,7,0,0,1,7,7h0v4.2H52.8V0Z"></path>
256 <rect fill="none" height="11.2" width="0" y="17.6" x="57.8" stroke-width="11.2" stroke="#fff" stroke-opacity="0.4"></rect>
257 <rect fill="none" height="11.2" width="0" y="35.2" x="6" stroke-width="11.2" stroke="#fff"></rect>
258 <rect fill="none" height="11.2" width="0" y="49.6" x="40.2" stroke-width="11.2" stroke="#fff"></rect>
259 <path fill="#fff" d="M17.6,67.2H28.8v1.2a10,10,0,0,1-10,10H17.6V67.2Z"></path>
260 <rect fill="none" height="11.2" width="0" x="31.6" stroke-width="28.8" stroke="#fff" stroke-opacity="0.4"></rect>
261 <rect fill="none" height="11.2" width="0" y="17.6" x="14" stroke-width="28.8" stroke="#fff"></rect></svg>
262 </div><!-- Hero -->
263 <section class="section section bg-primary pb-11 pb-lg-12 text-white overflow-hidden z-2">
264 <div class="container z-2">
265 <div class="row justify-content-center text-center pt-6 pb-3">
266 <div class="col-12 col-md-8">
267
<h1 class="display-1 font-weight-light mb-3">
268 Pixel<span class="pixel-pro-badge font-weight-bolder text-primary">LITE</span>
269 </h1>
270 <p class="lead px-xl-6 mb-5">
271 Accessibility first <span class="font-weight-bold">User Interface Kit</span> that will help you prototype and design beautiful, creative and modern websites.
272 </p>
273 <div class="d-flex flex-column flex-wrap flex-md-row mb-5 justify-content-center align-items-center">
274 <a class="btn btn-tertiary mb-3 mt-2 mr-2 mr-md-3 animate-up-2" href="https://themesberg.com/product/ui-kits/pixel-lite-free-bootstrap-4-ui-kit" target="_blank">Download</a>
275 <div class="mt-1">
276 <!-- Place this tag where you want the button to render. --><a aria-label="Star themesberg/pixel-bootstrap-ui-kit on GitHub" class="github-button" href=
277 "https://github.com/themesberg/pixel-bootstrap-ui-kit" data-show-count="true" data-size="large" data-icon="octicon-star" data-color-scheme=
278 "no-preference: dark; light: light; dark: light;">Star</a>
279 </div>
280 </div><a class="d-flex justify-content-center flex-column mb-6" href="https://themesberg.com" target="_blank">
<img class="mb-3" alt="Themesberg Logo" src="./assets/img/themesberg.svg" height=
281 "25" /> <span class="text-muted font-small">A Themesberg production</span></a>
282 </div>
283 </div>
284 </div>
285
<figure class="position-absolute bottom-0 left-0 w-100 d-none d-md-block mb-n2">
286
<svg class="fill-white" style="enable-background: new 0 0 1920 43.4" viewbox="0 0 1920 43.4" xmlns="http://www.w3.org/2000/svg" y="0px" x="0px" xml:space="preserve" xmlns:xlink=
287 "http://www.w3.org/1999/xlink" version="1.1">
288 <path d="M0,23.3c0,0,405.1-43.5,697.6,0c316.5,1.5,108.9-2.6,480.4-14.1c0,0,139-12.2,458.7,14.3 c0,0,67.8,19.2,283.3-22.7v35.1H0V23.3z"></path></svg>
289 </figure>
290 </section>
291 <div class="section py-0">
292 <div class="container mt-n10 mt-lg-n12 z-2">
293 <div class="row justify-content-center">
294 <div class="col-12 col-md-10">
295
<img alt="illustration" src="./assets/img/presentation-mockup.png" />
296 </div>
297 </div>
298 </div>
299 </div>
300 <section class="section section-lg pb-0">
301 <div class="container">
302 <div class="row">
303 <div class="col-12 col-md-4">
304 <!-- Icon box -->
305 <div class="icon-box text-center mb-5 mb-md-0">
306 <div class="icon icon-shape icon-lg bg-white shadow-lg border-light rounded-circle icon-secondary mb-3"></div>
307 <h5 class="my-3">
308 80 components
309 </h5>
310 <p class="px-lg-4">
311 Beatifully crafted and creative components made with great care for each pixel
312 </p>
313 </div><!-- End of Icon box -->
314 </div>
315 <div class="col-12 col-md-4 mb-5 mb-md-0">
316 <!-- Icon box -->
317 <div class="icon-box text-center">
318 <div class="icon icon-shape icon-lg bg-white shadow-lg border-light rounded-circle icon-secondary mb-3"></div>
319 <h5 class="my-3">
320 3 sections
321 </h5>
322 <p class="px-lg-4">
323 Navigation bars, pricing cards, footers and many more sections to enhance page variety
324 </p>
325 </div><!-- End of Icon box -->
326 </div>
327 <div class="col-12 col-md-4 mb-5 mb-md-0">
328 <!-- Icon box -->
329 <div class="icon-box text-center">
330 <div class="icon icon-shape icon-lg bg-white shadow-lg border-light rounded-circle icon-secondary mb-3"></div>
331 <h5 class="my-3">
332 4 example pages
333 </h5>
334 <p class="px-lg-4">
335 We took the time to create a few example pages to show you how gorgeous pages can look like
336 </p>
337 </div><!-- End of Icon box -->
338 </div>
339 </div>
340 </div>
341 </section>
342 <div class="section section-sm pb-0 mb-n4">
343 <div class="container">
344 <div class="row justify-content-center">
345 <h4>
346 Accordion
347 </h4>
348 </div>
349 </div>
350 </div><!--End of Title section-->
351 <div class="section section-md">
352 <div class="container">
353 <div class="row justify-content-center mt-4">
354 <div class="col-12 col-lg-8">
355 <!--Accordion-->
356 <div id="accordionExample1" class="accordion">
357 <div class="card card-sm card-body border-light mb-0">
358 <a aria-expanded="false" role="button" aria-controls="panel-1" class="accordion-panel-header" href="#panel-1" data-target="#panel-1" data-toggle="collapse"><span class=
359 "h6 mb-0 font-weight-bold">Our Company</span></a>
360 <div id="panel-1" class="collapse">
361 <div class="pt-3">
362 <p class="mb-0">
363 At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share
364 ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that
365 supports this vision.
366 </p>
367 </div>
368 </div>
369 </div>
370 <div class="card card-sm card-body border-light mb-0">
371 <a aria-expanded="false" role="button" aria-controls="panel-1" class="accordion-panel-header" href="#panel-2" data-target="#panel-2" data-toggle="collapse"><span class=
372 "h6 mb-0 font-weight-bold">Pixel Components</span></a>
373 <div id="panel-2" class="collapse">
374 <div class="pt-3">
375 <p class="mb-0">
376 At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share
377 ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that
378 supports this vision.
379 </p>
380 </div>
381 </div>
382 </div>
383 <div class="card card-sm card-body border-light">
384 <a aria-expanded="false" role="button" aria-controls="panel-1" class="accordion-panel-header" href="#panel-3" data-target="#panel-3" data-toggle="collapse"><span class=
385 "h6 mb-0 font-weight-bold">Licenses</span></a>
386 <div id="panel-3" class="collapse">
387 <div class="pt-3">
388 <p class="mb-0">
389 At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share
390 ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that
391 supports this vision.
392 </p>
393 </div>
394 </div>
395 </div>
396 </div><!--End of Accordion-->
397 </div>
398 </div>
399 </div>
400 </div>
401 <div class="section section-sm pb-0 mb-n4">
402 <div class="container">
403 <div class="row justify-content-center">
404 <h4>
405 Alerts
406 </h4>
407 </div>
408 </div>
409 </div><!-- Section -->
410 <div class="section section-md">
411 <div class="container">
412 <div class="row">
413 <div class="col-lg-12">
414 <div role="alert" class="alert alert-primary">
415 <span class="alert-inner--text">This is a primary alert with <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</span>
416 </div>
417 <div role="alert" class="alert alert-secondary">
418 <span class="alert-inner--text">This is a secondary alert with <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</span>
419 </div>
420 <div role="alert" class="alert alert-success">
421 <span class="alert-inner--text">This is a success alert with <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</span>
422 </div>
423 <div role="alert" class="alert alert-info">
424 <span class="alert-inner--text">This is a info alert with <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</span>
425 </div>
426 <div role="alert" class="alert alert-warning">
427 <span class="alert-inner--text">This is a warning alert with <a class="alert-link text-dark" href="#">an example link</a>. Give it a click if you like.</span>
428 </div>
429 <div role="alert" class="alert alert-danger">
430 <span class="alert-inner--text">This is a danger alert with <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</span>
431 </div>
432 </div>
433 </div>
434 </div>
435 </div><!-- End of Section -->
436 <div class="section section-sm pb-0 mb-n4">
437 <div class="container">
438 <div class="row justify-content-center">
439 <h4>
440 Badges
441 </h4>
442 </div>
443 </div>
444 </div><!-- Section -->
445 <div class="section section-md">
446 <div class="container">
447 <div class="row">
448 <div class="col-lg-6">
449 <div class="mb-4">
450 <h6 class="font-weight-bold">
451 Square Badges
452 </h6>
453 </div><span class="badge badge-primary text-uppercase">Primary</span> <span class="badge badge-secondary text-uppercase">Secondary</span> <span class=
454 "badge badge-tertiary text-uppercase">Tertiary</span> <span class="badge badge-gray text-uppercase">Gray</span> <span class="badge badge-success text-uppercase">Success</span> <span class=
455 "badge badge-danger text-uppercase">Danger</span> <span class="badge badge-warning text-uppercase">Warning</span> <span class="badge badge-info text-uppercase">Info</span>
456 </div>
457 <div class="col-lg-6">
458 <div class="mb-4">
459 <h6 class="font-weight-bold">
460 Round Badges
461 </h6>
462 </div><span class="badge badge-pill badge-primary text-uppercase">Primary</span> <span class="badge badge-pill badge-secondary text-uppercase">Secondary</span> <span class=
463 "badge badge-pill badge-tertiary text-uppercase">Tertiary</span> <span class="badge badge-pill badge-gray text-uppercase">Gray</span> <span class=
464 "badge badge-pill badge-success text-uppercase">Success</span> <span class="badge badge-pill badge-danger text-uppercase">Danger</span> <span class=
465 "badge badge-pill badge-warning text-uppercase">Warning</span> <span class="badge badge-pill badge-info text-uppercase">Info</span>
466 </div>
467 </div>
468 </div>
469 </div><!-- End of Section -->
470 <div class="section section-sm pb-0 mb-n4">
471 <div class="container">
472 <div class="row justify-content-center">
473 <h4>
474 Cards
475 </h4>
476 </div>
477 </div>
478 </div><!--End of Title section-->
479 <div class="section section-md">
480 <div class="container">
481 <div class="row mb-5">
482 <div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0">
483 <div class="card border-light">
484
<img class="card-img-top rounded-top" alt="image" src="./assets/img/blog/image-1.jpg" />
485 <div class="card-body">
486 <span class="h6 icon-tertiary small">Awards</span>
487 <h5 class="card-title mt-3">
488 We partnered up with Ildiesign
489 </h5>
490 <p class="card-text">
491 Some quick example text to build on the card title and make up the bulk of the card's content.
492 </p>
<a class="btn btn-primary btn-sm" href="#">Read More</a>
493 </div>
494 </div>
495 </div>
496 <div class="col-12 col-md-6 col-lg-4 mb-5 mb-md-7 mb-lg-0">
497 <div class="card overflow-hidden">
498 <div class="position-relative">
499
<img class="card-img-top" alt="image" src="./assets/img/team/profile-picture-1.jpg" />
500 </div>
501 <div class="card-body position-relative mt-n6 mx-2 bg-white text-center rounded border border-light">
502 <h5 class="card-title">
503 Neil D. Sims
504 </h5><span class="text-gray">New York, USA</span>
505 <p class="mt-3">
506 Neil drives the technical strategy of the platform and brand.
507 </p>
508 <div class="btn-group">
509 <button class="btn btn-secondary btn-icon">Follow</button>
510 </div>
511 </div>
512 </div>
513 </div>
514 <div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0">
515 <div class="card border-light text-center">
516 <!-- Header -->
517 <div class="card-header bg-white p-3">
518 <h3 class="text-primary mb-4">
519 Basic
520 </h3><span class="d-block"><span class="display-1 text-dark font-weight-bold"><span class="align-top font-medium">$</span>19</span> <span class="d-block text-gray font-small">/
521 month</span></span>
522 </div><!-- End Header --><!-- Content -->
523 <div class="card-body">
524 <ul class="list-unstyled mb-4">
525 <li class="list-item pb-3">
526 <strong>1</strong> free domain
527 </li>
528 <li class="list-item pb-3">Storage space: <strong>5GB</strong>
529 </li>
530 <li class="list-item pb-3">
531 <strong>100k</strong> monthly visitors
532 </li>
533 <li class="list-item pb-3">One-click staging site
534 </li>
535 <li class="list-item pb-3">Search engine wizard
536 </li>
537 <li class="list-item pb-3">Community support
538 </li>
539 </ul><button class="btn btn-primary btn-block animate-up-1">Start Starter</button>
540 </div><!-- End Content -->
541 </div>
542 </div>
543 <div class="col-12 mt-5">
544 <div class="card border-light px-4 py-5 text-center">
545 <div class="card-header bg-white pb-0">
546 <h2 class="h1 mb-3">
547 Get the most out of your network.
548 </h2>
549 </div>
550 <div class="card-body pt-2 px-0 px-lg-7">
551 <p class="mb-5 lead">
552 Contact management designed for teams and individuals
553 </p>
554 <div class="row justify-content-center">
555 <div class="col-12 col-md-8">
556 <div class="form-group">
557 <div class="d-flex flex-row justify-content-center">
558 <div class="input-group">
559
<input class="form-control form-control-xl border-light" placeholder="Your email address" />
560 <div class="input-group-prepend">
561 <button class="btn btn-primary rounded-right" type="submit">Subscribe</button>
562 </div>
563 </div>
564 </div>
565 </div>
566 </div>
567 </div>
568 </div>
569 </div>
570 </div>
571 </div>
572 </div>
573 </div>
574 <div class="section section-sm pb-0 mb-n4">
575 <div class="container">
576 <div class="row justify-content-center">
577 <h4>
578 Carousels
579 </h4>
580 </div>
581 </div>
582 </div><!-- Section -->
583
<section class="section section-md">
584 <div class="container">
585 <div class="row">
586 <div class="col-md-10 mx-auto">
587 <!-- Carousel -->
588 <div id="Carousel2" class="carousel slide" data-ride="carousel">
589 <div class="carousel-inner">
590 <div class="carousel-item active">
591
<img class="d-block w-100 rounded" alt="First slide" src="./assets/img/carousel/image-1.jpg" />
592 </div>
593 <div class="carousel-item">
594
<img class="d-block w-100 rounded" alt="Second slide" src="./assets/img/carousel/image-2.jpg" />
595 </div>
596 <div class="carousel-item">
597
<img class="d-block w-100 rounded" alt="Third slide" src="./assets/img/carousel/image-3.jpg" />
598 </div>
599 </div><a role="button" class="carousel-control-prev" href="#Carousel2" data-slide="prev"><span class="sr-only">Previous</span></a> <a role="button" class="carousel-control-next" href=
600 "#Carousel2" data-slide="next"><span class="sr-only">Next</span></a>
601 </div><!-- End of Carousel -->
602 </div>
603 </div>
604 </div>
605 </section><!-- End of Section -->
606 <div class="section section-sm pb-0 mb-n4">
607 <div class="container">
608 <div class="row justify-content-center">
609 <h4>
610 Breadcrumbs
611 </h4>
612 </div>
613 </div>
614 </div><!-- Section -->
615
<section class="section section-md">
616 <div class="container">
617 <div class="row">
618 <div class="col-12">
619 <div class="mb-6">
620 <!--Breadcrumb-->
621 <nav aria-label="breadcrumb">
622 <ol class="breadcrumb breadcrumb-text-light breadcrumb-primary text-white">
623 <li class="breadcrumb-item">
624 <a href="#">Home</a>
625 </li>
626 <li class="breadcrumb-item">
627 <a href="#">Library</a>
628 </li>
629 <li class="breadcrumb-item active" aria-current="page">Data
630 </li>
631 </ol>
632 </nav><!--End of Breadcrumb--><!--Breadcrumb-->
633 <nav aria-label="breadcrumb">
634 <ol class="breadcrumb breadcrumb-text-light breadcrumb-secondary text-white">
635 <li class="breadcrumb-item">
636 <a href="#">Home</a>
637 </li>
638 <li class="breadcrumb-item">
639 <a href="#">Library</a>
640 </li>
641 <li class="breadcrumb-item active" aria-current="page">Data
642 </li>
643 </ol>
644 </nav><!--End of Breadcrumb--><!--Breadcrumb-->
645 <nav aria-label="breadcrumb">
646 <ol class="breadcrumb breadcrumb-text-light breadcrumb-tertiary text-white">
647 <li class="breadcrumb-item">
648 <a href="#">Home</a>
649 </li>
650 <li class="breadcrumb-item">
651 <a href="#">Library</a>
652 </li>
653 <li class="breadcrumb-item active" aria-current="page">Data
654 </li>
655 </ol>
656 </nav><!--End of Breadcrumb--><!--Breadcrumb-->
657 <nav aria-label="breadcrumb">
658 <ol class="breadcrumb breadcrumb-text-light breadcrumb-info text-white">
659 <li class="breadcrumb-item">
660 <a href="#">Home</a>
661 </li>
662 <li class="breadcrumb-item">
663 <a href="#">Library</a>
664 </li>
665 <li class="breadcrumb-item active" aria-current="page">Data
666 </li>
667 </ol>
668 </nav><!--End of Breadcrumb-->
669 </div>
670 </div>
671 </div>
672 </div>
673 </section><!-- End of Section -->
674 <div class="section section-sm pb-0 mb-n4">
675 <div class="container">
676 <div class="row justify-content-center">
677 <h4>
678 Buttons
679 </h4>
680 </div>
681 </div>
682 </div><!--End of Title section-->
683 <div class="section section-md components-section">
684 <div class="container">
685 <div class="row">
686 <div class="col-lg-12">
687 <div class="mb-3">
688 <h5>
689 Main Buttons
690 </h5>
691 </div><!--Buttons--><button class="btn btn-primary">Button</button><button class="btn btn-primary">Icon Left</button><button class="btn btn-primary">Icon Right</button><!--End of Buttons-->
692 <!--End of Buttons-->
693 <div class="mb-3 mt-5">
694 <h5>
695 Outline Buttons
696 </h5>
697 </div><!--Buttons--><button class="btn btn-outline-primary">Outline-primary</button><button class="btn btn-outline-primary">Icon Left</button><button class="btn btn-outline-primary">Icon
698 Right</button><!--End of Buttons-->
699 <div class="mb-3 mt-5">
700 <h5>
701 Sizes
702 </h5>
703 </div><!--Buttons--><button class="btn btn-sm btn-primary">Small</button><button class="btn btn-primary">Regular</button><button class="btn btn-lg btn-primary">Large Button</button>
704 <!--End of Buttons--><!-- Button colors -->
705 <div class="mb-3 mt-5">
706 <h5>
707 Choose your color
708 </h5>
709 </div>
710 <div class="mb-3 mt-5">
711 <small class="text-uppercase font-weight-bold">Main</small>
712 </div><!--Buttons--><button class="btn btn-primary">Primary</button><button class="btn btn-secondary">Secondary</button><button class="btn btn-tertiary">Tertiary</button><button class=
713 "btn btn-info">Info</button><button class="btn btn-success">Success</button><button class="btn btn-warning">Warning</button><button class="btn btn-danger">Danger</button><button class=
714 "btn btn-dark">Dark</button><button class="btn btn-gray">Gray</button><button class="btn btn-light">Light</button><button class="btn btn-white">White</button><!--End Of Buttons-->
715 <div class="mb-3 mt-5">
716 <small class="text-uppercase font-weight-bold">Outline</small>
717 </div><!--Buttons--><button class="btn btn-outline-primary">Primary</button><button class="btn btn-outline-secondary">Secondary</button><button class=
718 "btn btn-outline-tertiary">Tertiary</button><button class="btn btn-outline-info">Info</button><button class="btn btn-outline-success">Success</button><button class=
719 "btn btn-outline-warning">Warning</button><button class="btn btn-outline-danger">Danger</button><button class="btn btn-outline-dark">Dark</button><button class=
720 "btn btn-outline-gray">Gray</button>
721 </div>
722 <div class="row">
723 <div class="col-12 col-lg-4">
724 <!-- Button Social -->
725 <div class="mb-4 mt-5">
726 <h6>
727 Social Buttons
728 </h6>
729 </div><button class="btn btn-twitter">Login with Twitter</button>
730 <br />
731 <button class="btn btn-facebook">Login with Facebook</button>
732 <br />
733 <button class="btn btn-instagram">Follow on Instagram</button>
734 <br />
735 <button class="btn btn-pinterest">Share on Pinterest</button>
736 </div>
737 <div class="col-12 col-lg-4">
738 <!-- Button Social -->
739 <div class="mb-4 mt-5">
740 <h6>
741 Round Social Buttons
742 </h6>
743 </div><button class="btn btn-pill btn-twitter">Login with Twitter</button>
744 <br />
745 <button class="btn btn-pill btn-facebook">Login with Facebook</button>
746 <br />
747 <button class="btn btn-pill btn-instagram">Follow on Instagram</button>
748 <br />
749 <button class="btn btn-pill btn-pinterest">Share on Pinterest</button>
750 </div>
751 <div class="col-12 col-lg-1">
752 <!-- Square -->
753 <div class="mb-4 mt-5">
754 <h6>
755 Square
756 </h6>
757 </div>
758 </div>
759 <div class="col-12 col-lg-1">
760 <!-- Circle -->
761 <div class="mb-4 mt-5">
762 <h6>
763 Circle
764 </h6>
765 </div>
766 </div>
767 </div>
768 </div>
769 </div>
770 </div>
771 <div class="section section-sm pb-0 mb-n4">
772 <div class="container">
773 <div class="row justify-content-center">
774 <h4>
775 Forms
776 </h4>
777 </div>
778 </div>
779 </div><!-- Section -->
780 <section class="section section-md pb-0">
781 <div class="container">
782 <!-- Title -->
783 <div class="row">
784 <div class="col-md-4">
785 <div class="mb-5">
786 <h5>
787 Default Forms
788 </h5>
789 </div>
790 </div>
791 </div><!-- End of Title -->
792 <div class="row">
793 <div class="col-lg-4 col-sm-6">
794 <!-- Form -->
795 <div class="form-group">
796
<input class="form-control" placeholder="Default" />
797 </div><!-- End of Form --><!-- Form -->
798 <div class="form-group">
799 <div class="input-group mb-4">
800 <div class="input-group-prepend"></div>
<input class="form-control" placeholder="Icon Left" />
801 </div>
802 </div><!-- End of Form --><!-- Form -->
803 <div class="form-group">
804 <div class="input-group mb-4">
805
<input class="form-control" type="password" value="" placeholder="Password" />
806 <div class="input-group-append"></div>
807 </div>
808 </div><!-- End of Form --><!-- Form -->
809 <div class="custom-file">
810 <input id="customFile" class="custom-file-input" type="file" /> <label class="custom-file-label" for="customFile">Choose file</label>
811 </div><!-- End of Form -->
812 </div>
813 <div class="col-lg-4 col-sm-6">
814 <!-- Form -->
815 <div class="form-group mt-3 mt-sm-0">
816
<input disabled="disabled" class="form-control" placeholder="Disabled" />
817 </div><!-- End of Form --><!-- Form -->
818 <div class="form-group">
819 <div class="input-group mb-4">
820
<input class="form-control" placeholder="Icon Right" />
821 <div class="input-group-append"></div>
822 </div>
823 </div><!-- End of Form --><!-- Form -->
824 <div class="form-group">
825 <div class="input-group mb-4">
826 <div class="input-group-prepend"></div>
<input class="form-control" type="password" value="" placeholder="Password" />
827 </div>
828 </div><!-- End of Form --><!-- Form -->
829 <div class="form-group">
830
<textarea id="exampleFormControlTextarea" class="form-control" rows="4" placeholder="Enter your message..."></textarea>
831 </div><!-- End of Form -->
832 </div>
833 <div class="col-lg-4 col-sm-6">
834 <!-- Form -->
835 <div class="form-group has-success">
836
<input class="form-control is-valid" placeholder="Success Input" />
837 </div><!-- End of Form --><!-- Form -->
838 <div class="form-group has-danger mb-4">
839
<input class="form-control is-invalid" placeholder="Error Input" />
840 </div><!-- End of Form --><!-- Form -->
841 <div class="form-group">
842
<select id="inlineFormCustomSelect" class="custom-select mr-sm-2">
843 <option selected="selected">
844 Select your country
845 </option>
846 <option>
847 Italia
848 </option>
849 <option>
850 USA
851 </option>
852 <option>
853 England
854 </option>
855 <option>
856 France
857 </option>
858 </select>
859 </div><!-- End of Form -->
860 </div>
861 </div>
862 </div>
863 </section><!-- End of Section --><!-- Section -->
864 <div class="section section-md">
865 <div class="container">
866 <h5>
867 Datepicker
868 </h5>
869 <div class="row mt-5 mb-5">
870 <div class="col-md-4">
871 <!-- Form --><small class="d-block font-weight-normal mb-3">Date of birth</small>
872 <div class="form-group">
873 <div class="input-group input-group-border">
874 <div class="input-group-prepend"></div>
<input class="form-control datepicker" value="06/20/2018" placeholder="Select date" />
875 </div>
876 </div><!-- End of Form -->
877 </div>
878 <div class="col-md-8 mt-4 mt-md-0">
879 <!-- Form --><small class="d-block font-weight-normal mb-3">Employment Period</small>
880 <div class="input-daterange datepicker row align-items-center">
881 <div class="col">
882 <div class="form-group">
883 <div class="input-group input-group-border">
884 <div class="input-group-prepend"></div>
<input class="form-control" value="06/18/2018" placeholder="Start date" />
885 </div>
886 </div>
887 </div>
888 <div class="col">
889 <div class="form-group">
890 <div class="input-group input-group-border">
891 <div class="input-group-prepend"></div>
<input class="form-control" value="06/22/2018" placeholder="End date" />
892 </div>
893 </div>
894 </div>
895 </div><!-- End of Form -->
896 </div>
897 </div>
898 <h5>
899 Range Sliders
900 </h5>
901 <div class="row mt-5 mb-5">
902 <div class="col-lg-6 col-sm-6">
903 <!-- Simple slider -->
904 <div class="input-slider-container">
905 <div id="input-slider-forms" class="input-slider" data-range-value-max="500" data-range-value-min="100"></div><!-- Input slider values -->
906 <div class="row mt-3 d-none">
907 <div class="col-6"></div>
908 </div>
909 </div><!-- End of Slider -->
910 </div><!-- Range slider -->
911 <div class="col-lg-6 col-sm-6">
912 <!-- Range slider container -->
913 <div id="input-slider-range" data-range-value-max="500" data-range-value-min="100"></div><!-- Range slider values -->
914 <div class="row d-none">
915 <div class="col-6">
916 <span id="input-slider-range-value-low" class="range-slider-value value-low" data-range-value-low="200"></span>
917 </div>
918 <div class="col-6 text-right">
919 <span id="input-slider-range-value-high" class="range-slider-value value-high" data-range-value-high="400"></span>
920 </div>
921 </div><!-- End of range slider values -->
922 </div>
923 </div>
924 <div class="row mt-5">
925 <div class="col-lg-6 col-sm-6 my-5 my-md-0">
926 <!-- Range slider container -->
927 <div id="input-slider-range-2" data-range-value-max="500" data-range-value-min="100"></div><!-- Range slider values -->
928 <div class="row d-none">
929 <div class="col-6">
930 <span id="input-slider-range-value-low-2" class="range-slider-value value-low" data-range-value-low="200"></span>
931 </div>
932 <div class="col-6 text-right">
933 <span id="input-slider-range-value-high-2" class="range-slider-value value-high" data-range-value-high="400"></span>
934 </div>
935 </div><!-- End of range slider values -->
936 </div>
937 <div class="col-3 offset-md-2 col-lg-2">
938 <!-- Range slider container -->
939 <div id="input-slider-vertical-1" data-range-value-max="500" data-range-value-min="100"></div><!-- Range slider values -->
940 <div class="row d-none">
941 <div class="col-6">
942 <span id="input-slider-range-value-low-3" class="range-slider-value value-low" data-range-value-low="200"></span>
943 </div>
944 <div class="col-6 text-right">
945 <span id="input-slider-range-value-high-3" class="range-slider-value value-high" data-range-value-high="400"></span>
946 </div>
947 </div><!-- End of range slider values -->
948 </div>
949 <div class="col-3 col-lg-2">
950 <!-- Range slider container -->
951 <div id="input-slider-vertical-2" data-range-value-max="500" data-range-value-min="100"></div><!-- Range slider values -->
952 <div class="row d-none">
953 <div class="col-6">
954 <span id="input-slider-range-value-low-4" class="range-slider-value value-low" data-range-value-low="200"></span>
955 </div>
956 <div class="col-6 text-right">
957 <span id="input-slider-range-value-high-4" class="range-slider-value value-high" data-range-value-high="400"></span>
958 </div>
959 </div><!-- End of range slider values -->
960 </div>
961 </div>
962 <h5 class="mt-5 mt-md-0">
963 Custom Forms
964 </h5>
965 <div class="row">
966 <div class="col-lg-3 col-md-6">
967 <div class="mb-3">
968 <small class="font-weight-bold">Checkboxes</small>
969 </div><!-- Checkbox -->
970 <div class="form-check mb-3">
971 <label class="form-check-label">
<input class="form-check-input" type="checkbox" /> Unchecked</label>
972 </div><!-- End of Checkbox --><!-- Checkbox -->
973 <div class="form-check">
974 <label class="form-check-label">
<input class="form-check-input" checked="checked" type="checkbox" /> Checked</label>
975 </div><!-- End of Checkbox --><!-- Checkbox -->
976 <div class="form-check disabled">
977 <label class="form-check-label">
<input disabled="disabled" class="form-check-input" type="checkbox" /> Disabled Unchecked</label>
978 </div><!-- End of Checkbox --><!-- Checkbox -->
979 <div class="form-check disabled">
980 <label class="form-check-label">
<input disabled="disabled" class="form-check-input" checked="checked" type="checkbox" /> Disabled Checked</label>
981 </div><!-- End of Checkbox -->
982 </div>
983 <div class="col-lg-3 col-md-6">
984 <!-- Checkboxes -->
985 <div class="mb-3">
986 <small class="font-weight-bold">Checkboxes Round</small>
987 </div><!-- Checkbox -->
988 <div class="form-check round-check mb-3">
989 <label class="form-check-label">
<input class="form-check-input" type="checkbox" /> Unchecked</label>
990 </div><!-- End of Checkbox --><!-- Checkbox -->
991 <div class="form-check round-check">
992 <label class="form-check-label">
<input class="form-check-input" checked="checked" type="checkbox" /> Checked</label>
993 </div><!-- End of Checkbox --><!-- Checkbox -->
994 <div class="form-check round-check disabled">
995 <label class="form-check-label">
<input disabled="disabled" class="form-check-input" type="checkbox" /> Disabled Unchecked</label>
996 </div><!-- End of Checkbox --><!-- Checkbox -->
997 <div class="form-check round-check disabled">
998 <label class="form-check-label">
<input disabled="disabled" class="form-check-input" checked="checked" type="checkbox" /> Disabled Checked</label>
999 </div><!-- End of Checkbox -->
1000 </div>
1001 <div class="col-lg-3 col-sm-6 mt-4 mt-md-0">
1002 <!-- Radio buttons -->
1003 <div class="mb-3">
1004 <small class="font-weight-bold">Radios</small>
1005 </div><!-- Radio -->
1006 <div class="form-check form-check-radio">
1007 <label class="form-check-label"><input id="exampleRadios1" class="form-check-input" type="radio" value="option1" name="exampleRadios" /> Radio is off</label>
1008 </div><!-- End of Radio --><!-- Radio -->
1009 <div class="form-check form-check-radio">
1010 <label class="form-check-label"><input id="exampleRadios2" class="form-check-input" checked="checked" type="radio" value="option2" name="exampleRadios" /> Radio is on</label>
1011 </div><!-- End of Radio --><!-- Radio -->
1012 <div class="form-check form-check-radio disabled">
1013 <label class="form-check-label"><input disabled="disabled" id="exampleRadios3" class="form-check-input" type="radio" value="option3" name="exampleRadios1" /> Disabled radio is off</label>
1014 </div><!-- End of Radio --><!-- Radio -->
1015 <div class="form-check form-check-radio disabled">
1016 <label class="form-check-label"><input disabled="disabled" id="exampleRadios4" class="form-check-input" checked="checked" type="radio" value="option4" name="exampleRadios1" /> Disabled radio
1017 is on</label>
1018 </div><!-- End of Radio -->
1019 </div>
1020 <div class="col-lg-3 col-sm-6 mt-4 mt-md-0">
1021 <div class="mb-3">
1022 <small class="font-weight-bold">Switches</small>
1023 </div>
1024 <div class="custom-control custom-switch">
1025 <input id="customSwitch1" class="custom-control-input" type="checkbox" /> <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
1026 </div>
1027 <div class="custom-control custom-switch">
1028 <input disabled="disabled" id="customSwitch2" class="custom-control-input" type="checkbox" /> <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
1029 </div>
1030 </div>
1031 <div class="col-lg-6 col-sm-6 mt-4">
1032 <div class="mb-3">
1033 <small class="font-weight-bold">Tags Input</small>
1034 </div><!-- Tags Input -->
<input class="form-control" value="Bootstrap,Angular,Vue,Wordpress,React,Java,Php,Gulp" data-role="tagsinput" /><!-- End of Tags Input -->
1035 </div>
1036 </div>
1037 </div>
1038 </div><!-- End of Section -->
1039 <div class="section section-sm pb-0 mb-n4">
1040 <div class="container">
1041 <div class="row justify-content-center">
1042 <h4>
1043 Modals
1044 </h4>
1045 </div>
1046 </div>
1047 </div><!-- Section -->
1048 <div class="section section-md">
1049 <div class="container">
1050 <div class="row mt-4">
1051 <div class="col-md-4">
1052 <!-- Button Modal --><button class="btn btn-block btn-primary mb-3" data-target="#modal-default" data-toggle="modal">Default</button><!-- Modal Content -->
1053 <div role="dialog" tabindex="-1" aria-hidden="true" id="modal-default" class="modal fade" aria-labelledby="modal-default">
1054 <div role="document" class="modal-dialog modal-dialog-centered">
1055 <div class="modal-content">
1056 <div class="modal-header">
1057 <h6 class="modal-title">
1058 Terms of Service
1059 </h6><button aria-label="Close" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
1060 </div>
1061 <div class="modal-body">
1062 <p>
1063 With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to
1064 comply.
1065 </p>
1066 <p>
1067 The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires
1068 organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
1069 </p>
1070 </div>
1071 <div class="modal-footer">
1072 <button class="btn btn-sm btn-secondary">I Got It</button><button class="btn btn-link text-danger ml-auto" data-dismiss="modal">Close</button>
1073 </div>
1074 </div>
1075 </div>
1076 </div><!-- End of Modal Content -->
1077 </div>
1078 <div class="col-md-4">
1079 <!-- Button Modal --><button class="btn btn-block btn-primary mb-3" data-target="#modal-notification" data-toggle="modal">Notification</button><!-- Modal Content -->
1080 <div role="dialog" tabindex="-1" aria-hidden="true" id="modal-notification" class="modal fade" aria-labelledby="modal-notification">
1081 <div role="document" class="modal-dialog modal-info modal-dialog-centered">
1082 <div class="modal-content bg-gradient-secondary">
1083 <div class="modal-header">
1084 <p id="modal-title-notification" class="modal-title">
1085 A new experience, personalized for you.
1086 </p><button aria-label="Close" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
1087 </div>
1088 <div class="modal-body">
1089 <div class="py-3 text-center">
1090 <h4 class="modal-title my-3">
1091 Important message!
1092 </h4>
1093 <p>
1094 Do you know that you can assign status and relation to a company right in the visit list?.
1095 </p>
1096 </div>
1097 </div>
1098 <div class="modal-footer">
1099 <button class="btn btn-sm btn-white">Go to Inbox</button>
1100 </div>
1101 </div>
1102 </div>
1103 </div><!-- End of Modal Content -->
1104 </div>
1105 </div>
1106 </div>
1107 </div><!-- End of Section -->
1108 <div class="section section-sm pb-0 mb-n4">
1109 <div class="container">
1110 <div class="row justify-content-center">
1111 <h4>
1112 Navs
1113 </h4>
1114 </div>
1115 </div>
1116 </div><!-- Section -->
1117 <div class="section section-md">
1118 <div class="container">
1119 <div class="row">
1120 <div class="col-md-10">
1121 <!-- Nav Wrapper -->
1122 <div class="nav-wrapper position-relative">
1123 <ul class="nav nav-pills nav-fill flex-column flex-sm-row">
1124 <li class="nav-item">
1125 <a class="nav-link mb-sm-3 mb-md-0 active" href="#" data-toggle="tab">Home</a>
1126 </li>
1127 <li class="nav-item">
1128 <a class="nav-link mb-sm-3 mb-md-0" href="#" data-toggle="tab">Profile</a>
1129 </li>
1130 <li class="nav-item">
1131 <a class="nav-link mb-sm-3 mb-md-0" href="#" data-toggle="tab">Settings</a>
1132 </li>
1133 <li class="nav-item">
1134 <a class="nav-link mb-sm-3 mb-md-0" href="#" data-toggle="tab">Messages</a>
1135 </li>
1136 </ul>
1137 </div><!-- End of Nav Wrapper -->
1138 </div>
1139 </div><!-- Title -->
1140 <div class="row mt-5 mb-3">
1141 <div class="col-md-4">
1142 <div class="mb-2">
1143 <h5>
1144 Round Pill
1145 </h5>
1146 </div>
1147 </div>
1148 </div><!-- End of Title -->
1149 <div class="row">
1150 <div class="col-md-10">
1151 <!-- Nav Wrapper -->
1152 <div class="nav-wrapper position-relative">
1153 <ul class="nav nav-pills rounded nav-fill flex-column flex-md-row">
1154 <li class="nav-item">
1155 <a class="nav-link mb-sm-3 mb-md-0 active" href="#" data-toggle="tab">Home</a>
1156 </li>
1157 <li class="nav-item">
1158 <a class="nav-link mb-sm-3 mb-md-0" href="#" data-toggle="tab">Profile</a>
1159 </li>
1160 <li class="nav-item">
1161 <a class="nav-link mb-sm-3 mb-md-0" href="#" data-toggle="tab">Settings</a>
1162 </li>
1163 <li class="nav-item">
1164 <a class="nav-link mb-sm-3 mb-md-0" href="#" data-toggle="tab">Messages</a>
1165 </li>
1166 </ul>
1167 </div><!-- End of Nav Wrapper -->
1168 </div>
1169 </div><!-- Title -->
1170 <div class="row mt-5 mb-3">
1171 <div class="col-md-4">
1172 <div class="mb-2">
1173 <h5>
1174 Pills with Icons
1175 </h5>
1176 </div>
1177 </div>
1178 </div><!-- End of Title -->
1179 <div class="row">
1180 <div class="col-md-10">
1181 <!-- Nav Wrapper -->
1182 <div class="nav-wrapper position-relative">
1183 <ul class="nav nav-pills nav-fill flex-column flex-md-row">
1184 <li class="nav-item">
1185 <a class="nav-link mb-sm-3 mb-md-0 active" href="#" data-toggle="tab">Dashboard</a>
1186 </li>
1187 <li class="nav-item">
1188 <a class="nav-link mb-sm-3 mb-md-0" href="#" data-toggle="tab">Profile</a>
1189 </li>
1190 <li class="nav-item">
1191 <a class="nav-link mb-sm-3 mb-md-0" href="#" data-toggle="tab">Settings</a>
1192 </li>
1193 <li class="nav-item">
1194 <a class="nav-link mb-sm-3 mb-md-0" href="#" data-toggle="tab">Messages</a>
1195 </li>
1196 </ul>
1197 </div><!-- End of Nav Wrapper -->
1198 </div>
1199 </div><!-- Title -->
1200 <div class="row mt-5 mb-3">
1201 <div class="col-md-4">
1202 <div class="mb-2">
1203 <h5>
1204 Vertical Pills
1205 </h5>
1206 </div>
1207 </div>
1208 </div><!-- End of Title -->
1209 <div class="row">
1210 <div class="col-md-3">
1211 <!-- Nav Wrapper -->
1212 <div class="nav-wrapper position-relative">
1213 <ul class="nav nav-pills square nav-fill flex-column vertical-tab">
1214 <li class="nav-item">
1215 <a class="nav-link active" href="#" data-toggle="tab"><span class="d-block">Home</span></a>
1216 </li>
1217 <li class="nav-item">
1218 <a class="nav-link" href="#" data-toggle="tab"><span class="d-block">Profile</span></a>
1219 </li>
1220 <li class="nav-item">
1221 <a class="nav-link" href="#" data-toggle="tab"><span class="d-block">Settings</span></a>
1222 </li>
1223 <li class="nav-item">
1224 <a class="nav-link" href="#" data-toggle="tab"><span class="d-block">Messages</span></a>
1225 </li>
1226 </ul>
1227 </div><!-- End of Nav Wrapper -->
1228 </div>
1229 </div>
1230 </div>
1231 </div><!-- End of Section -->
1232 <div class="section section-sm pb-0 mb-n4">
1233 <div class="container">
1234 <div class="row justify-content-center">
1235 <h4>
1236 Pagination
1237 </h4>
1238 </div>
1239 </div>
1240 </div><!-- Section -->
1241 <div class="section section-md">
1242 <div class="container">
1243 <!-- Section title-->
1244 <div class="row">
1245 <div class="col-md-4">
1246 <div class="mb-1">
1247 <h5>
1248 Square pagination
1249 </h5>
1250 </div>
1251 </div>
1252 </div><!--End section title-->
1253 <div class="row mt-4">
1254 <div class="col-md-6">
1255 <div class="mb-4">
1256 <small class="font-weight-bold">Square pagination with icon-nav</small>
1257 </div>
1258 <nav aria-label="Page navigation example">
1259 <ul class="pagination">
1260 <li class="page-item">
1261
<a class="page-link" href="#"></a>
1262 </li>
1263 <li class="page-item">
1264 <a class="page-link" href="#">1</a>
1265 </li>
1266 <li class="page-item active">
1267 <a class="page-link" href="#">2</a>
1268 </li>
1269 <li class="page-item">
1270 <a class="page-link" href="#">3</a>
1271 </li>
1272 <li class="page-item">
1273 <a class="page-link" href="#">4</a>
1274 </li>
1275 <li class="page-item">
1276 <a class="page-link" href="#">5</a>
1277 </li>
1278 <li class="page-item">
1279
<a class="page-link" href="#"></a>
1280 </li>
1281 </ul>
1282 </nav>
1283 </div>
1284 <div class="col-md-6">
1285 <div class="mt-4 mb-4 mt-sm-0">
1286 <small class="font-weight-bold">Square pagination with text-nav</small>
1287 </div>
1288 <nav aria-label="Page navigation example">
1289 <ul class="pagination">
1290 <li class="page-item">
1291 <a class="page-link" href="#">Previous</a>
1292 </li>
1293 <li class="page-item">
1294 <a class="page-link" href="#">1</a>
1295 </li>
1296 <li class="page-item active">
1297 <a class="page-link" href="#">2</a>
1298 </li>
1299 <li class="page-item">
1300 <a class="page-link" href="#">3</a>
1301 </li>
1302 <li class="page-item">
1303 <a class="page-link" href="#">4</a>
1304 </li>
1305 <li class="page-item">
1306 <a class="page-link" href="#">5</a>
1307 </li>
1308 <li class="page-item">
1309 <a class="page-link" href="#">Next</a>
1310 </li>
1311 </ul>
1312 </nav>
1313 </div>
1314 </div><!-- Section title-->
1315 <div class="row mt-5">
1316 <div class="col-md-4">
1317 <div class="mb-1">
1318 <h5>
1319 Round pagination
1320 </h5>
1321 </div>
1322 </div>
1323 </div><!--End section title-->
1324 <div class="row mt-4">
1325 <div class="col-lg-6">
1326 <div class="mb-4">
1327 <small class="font-weight-bold">Round pagination with icon-nav</small>
1328 </div>
1329 <nav aria-label="Page navigation example">
1330 <ul class="pagination circle-pagination">
1331 <li class="page-item">
1332
<a class="page-link" href="#"></a>
1333 </li>
1334 <li class="page-item">
1335 <a class="page-link" href="#">1</a>
1336 </li>
1337 <li class="page-item active">
1338 <a class="page-link" href="#">2</a>
1339 </li>
1340 <li class="page-item">
1341 <a class="page-link" href="#">3</a>
1342 </li>
1343 <li class="page-item">
1344 <a class="page-link" href="#">4</a>
1345 </li>
1346 <li class="page-item">
1347 <a class="page-link" href="#">5</a>
1348 </li>
1349 <li class="page-item">
1350
<a class="page-link" href="#"></a>
1351 </li>
1352 </ul>
1353 </nav>
1354 </div>
1355 <div class="col-lg-6">
1356 <div class="mt-4 mb-4 mt-sm-0">
1357 <small class="font-weight-bold">Basic round pagination</small>
1358 </div>
1359 <nav aria-label="Page navigation example">
1360 <ul class="pagination circle-pagination">
1361 <li class="page-item">
1362 <a class="page-link" href="#">1</a>
1363 </li>
1364 <li class="page-item active">
1365 <a class="page-link" href="#">2</a>
1366 </li>
1367 <li class="page-item">
1368 <a class="page-link" href="#">3</a>
1369 </li>
1370 <li class="page-item">
1371 <a class="page-link" href="#">4</a>
1372 </li>
1373 <li class="page-item">
1374 <a class="page-link" href="#">5</a>
1375 </li>
1376 </ul>
1377 </nav>
1378 </div>
1379 </div><!-- Section title-->
1380 <div class="row mt-5">
1381 <div class="col-md-4">
1382 <div class="mb-1">
1383 <h5>
1384 Options
1385 </h5>
1386 </div>
1387 </div>
1388 </div><!--End section title-->
1389 <div class="row mt-4">
1390 <div class="col-lg-6">
1391 <div class="mb-4">
1392 <small class="font-weight-bold">Disabled and active states</small>
1393 </div>
1394 <nav aria-label="Page navigation example">
1395 <ul class="pagination">
1396 <li class="page-item disabled">
1397 <a tabindex="-1" class="page-link" href="#">Previous</a>
1398 </li>
1399 <li class="page-item">
1400 <a class="page-link" href="#">1</a>
1401 </li>
1402 <li class="page-item active">
1403 <a class="page-link" href="#">2</a>
1404 </li>
1405 <li class="page-item">
1406 <a class="page-link" href="#">3</a>
1407 </li>
1408 <li class="page-item">
1409 <a class="page-link" href="#">4</a>
1410 </li>
1411 <li class="page-item">
1412 <a class="page-link" href="#">5</a>
1413 </li>
1414 <li class="page-item">
1415 <a class="page-link" href="#">Next</a>
1416 </li>
1417 </ul>
1418 </nav>
1419 </div>
1420 <div class="col-lg-6">
1421 <div class="mt-4 mb-4 mt-sm-0">
1422 <small class="font-weight-bold">Choose your size</small>
1423 </div>
1424 <nav aria-label="Page navigation example">
1425 <ul class="pagination pagination-lg">
1426 <li class="page-item">
1427
<a class="page-link" href="#"></a>
1428 </li>
1429 <li class="page-item">
1430 <a class="page-link" href="#">1</a>
1431 </li>
1432 <li class="page-item active">
1433 <a class="page-link" href="#">2</a>
1434 </li>
1435 <li class="page-item">
1436 <a class="page-link" href="#">3</a>
1437 </li>
1438 <li class="page-item">
1439 <a class="page-link" href="#">4</a>
1440 </li>
1441 <li class="page-item">
1442 <a class="page-link" href="#">5</a>
1443 </li>
1444 <li class="page-item">
1445
<a class="page-link" href="#"></a>
1446 </li>
1447 </ul>
1448 </nav>
1449 <nav aria-label="Page navigation example">
1450 <ul class="pagination">
1451 <li class="page-item">
1452
<a class="page-link" href="#"></a>
1453 </li>
1454 <li class="page-item">
1455 <a class="page-link" href="#">1</a>
1456 </li>
1457 <li class="page-item active">
1458 <a class="page-link" href="#">2</a>
1459 </li>
1460 <li class="page-item">
1461 <a class="page-link" href="#">3</a>
1462 </li>
1463 <li class="page-item">
1464 <a class="page-link" href="#">4</a>
1465 </li>
1466 <li class="page-item">
1467 <a class="page-link" href="#">5</a>
1468 </li>
1469 <li class="page-item">
1470
<a class="page-link" href="#"></a>
1471 </li>
1472 </ul>
1473 </nav>
1474 <nav aria-label="Page navigation example">
1475 <ul class="pagination pagination-sm">
1476 <li class="page-item">
1477
<a class="page-link" href="#"></a>
1478 </li>
1479 <li class="page-item">
1480 <a class="page-link" href="#">1</a>
1481 </li>
1482 <li class="page-item active">
1483 <a class="page-link" href="#">2</a>
1484 </li>
1485 <li class="page-item">
1486 <a class="page-link" href="#">3</a>
1487 </li>
1488 <li class="page-item">
1489 <a class="page-link" href="#">4</a>
1490 </li>
1491 <li class="page-item">
1492 <a class="page-link" href="#">5</a>
1493 </li>
1494 <li class="page-item">
1495
<a class="page-link" href="#"></a>
1496 </li>
1497 </ul>
1498 </nav>
1499 </div>
1500 </div>
1501 </div>
1502 </div><!-- End of Section -->
1503 <div class="section section-sm pb-0 mb-n4">
1504 <div class="container">
1505 <div class="row justify-content-center">
1506 <h4>
1507 Progress bars
1508 </h4>
1509 </div>
1510 </div>
1511 </div><!-- Section -->
1512 <div class="section section-md">
1513 <div class="container">
1514 <div class="row justify-content-center">
1515 <div class="col-lg-6">
1516 <div class="progress-wrapper">
1517 <div class="progress-info">
1518 <div class="progress-label">
1519 <span class="text-primary">Primary Color</span>
1520 </div>
1521 <div class="progress-percentage">
1522 <span>50%</span>
1523 </div>
1524 </div>
1525 <div class="progress">
1526 <div role="progressbar" aria-valuenow="50" class="progress-bar bg-primary" aria-valuemin="0" aria-valuemax="100"></div>
1527 </div>
1528 </div>
1529 <div class="progress-wrapper">
1530 <div class="progress-info">
1531 <div class="progress-label">
1532 <span class="text-secondary">Secondary Color</span>
1533 </div>
1534 <div class="progress-percentage">
1535 <span>60%</span>
1536 </div>
1537 </div>
1538 <div class="progress">
1539 <div role="progressbar" aria-valuenow="60" class="progress-bar bg-secondary" aria-valuemin="0" aria-valuemax="100"></div>
1540 </div>
1541 </div>
1542 <div class="progress-wrapper">
1543 <div class="progress-info">
1544 <div class="progress-label">
1545 <span class="text-tertiary">Tertiary Color</span>
1546 </div>
1547 <div class="progress-percentage">
1548 <span>60%</span>
1549 </div>
1550 </div>
1551 <div class="progress">
1552 <div role="progressbar" aria-valuenow="60" class="progress-bar bg-tertiary" aria-valuemin="0" aria-valuemax="100"></div>
1553 </div>
1554 </div>
1555 <div class="progress-wrapper">
1556 <div class="progress-info">
1557 <div class="progress-label">
1558 <span class="text-dark">Dark Color</span>
1559 </div>
1560 <div class="progress-percentage">
1561 <span>60%</span>
1562 </div>
1563 </div>
1564 <div class="progress">
1565 <div role="progressbar" aria-valuenow="60" class="progress-bar bg-dark" aria-valuemin="0" aria-valuemax="100"></div>
1566 </div>
1567 </div>
1568 <div class="progress-wrapper">
1569 <div class="progress-info">
1570 <div class="progress-label">
1571 <span class="text-gray">Gray Color</span>
1572 </div>
1573 <div class="progress-percentage">
1574 <span>60%</span>
1575 </div>
1576 </div>
1577 <div class="progress">
1578 <div role="progressbar" aria-valuenow="60" class="progress-bar bg-gray" aria-valuemin="0" aria-valuemax="100"></div>
1579 </div>
1580 </div>
1581 <div class="progress-wrapper">
1582 <div class="progress-info">
1583 <div class="progress-label">
1584 <span class="text-success">Success Bar</span>
1585 </div>
1586 <div class="progress-percentage">
1587 <span>60%</span>
1588 </div>
1589 </div>
1590 <div class="progress">
1591 <div role="progressbar" aria-valuenow="60" class="progress-bar bg-success" aria-valuemin="0" aria-valuemax="100"></div>
1592 </div>
1593 </div>
1594 <div class="progress-wrapper">
1595 <div class="progress-info">
1596 <div class="progress-label">
1597 <span class="text-info">Info Bar</span>
1598 </div>
1599 <div class="progress-percentage">
1600 <span>60%</span>
1601 </div>
1602 </div>
1603 <div class="progress">
1604 <div role="progressbar" aria-valuenow="60" class="progress-bar bg-info" aria-valuemin="0" aria-valuemax="100"></div>
1605 </div>
1606 </div>
1607 <div class="progress-wrapper">
1608 <div class="progress-info">
1609 <div class="progress-label">
1610 <span class="text-danger">Danger Bar</span>
1611 </div>
1612 <div class="progress-percentage">
1613 <span>60%</span>
1614 </div>
1615 </div>
1616 <div class="progress">
1617 <div role="progressbar" aria-valuenow="60" class="progress-bar bg-danger" aria-valuemin="0" aria-valuemax="100"></div>
1618 </div>
1619 </div>
1620 <div class="progress-wrapper">
1621 <div class="progress-info">
1622 <div class="progress-label">
1623 <span class="text-warning">Warning Bar</span>
1624 </div>
1625 <div class="progress-percentage">
1626 <span>60%</span>
1627 </div>
1628 </div>
1629 <div class="progress">
1630 <div role="progressbar" aria-valuenow="60" class="progress-bar bg-warning" aria-valuemin="0" aria-valuemax="100"></div>
1631 </div>
1632 </div>
1633 </div>
1634 </div>
1635 </div>
1636 </div><!-- End of Section -->
1637 <div class="section section-sm pb-0 mb-n4">
1638 <div class="container">
1639 <div class="row justify-content-center">
1640 <h4>
1641 Tables
1642 </h4>
1643 </div>
1644 </div>
1645 </div><!-- End of Hero -->
1646 <div class="section section-md">
1647 <div class="container">
1648 <div class="row justify-content-center">
1649 <div class="col-lg-12">
1650 <div class="mb-5">
1651 <h6 class="mb-3">
1652 Default table
1653 </h6>
1654 <table class="table">
1655 <thead>
1656 <tr>
1657 <th scope="col">
1658 #
1659 </th>
1660 <th scope="col">
1661 First
1662 </th>
1663 <th scope="col">
1664 Last
1665 </th>
1666 <th scope="col">
1667 Actions
1668 </th>
1669 </tr>
1670 </thead>
1671 <tbody>
1672 <tr>
1673 <th scope="row">
1674 1
1675 </th>
1676 <td>
1677 <div class="d-flex align-items-center">
1678 Zoltan <span class="badge badge-primary ml-2">Pro</span>
1679 </div>
1680 </td>
1681 <td>
1682 Robi
1683 </td>
1684 <td>
1685 <div class="d-flex"></div>
1686 </td>
1687 </tr>
1688 <tr>
1689 <th scope="row">
1690 2
1691 </th>
1692 <td>
1693 <div class="d-flex align-items-center">
1694 Jacob <span class="badge badge-secondary ml-2">Mid</span>
1695 </div>
1696 </td>
1697 <td>
1698 Thornton
1699 </td>
1700 <td>
1701 <div class="d-flex"></div>
1702 </td>
1703 </tr>
1704 <tr>
1705 <th scope="row">
1706 3
1707 </th>
1708 <td>
1709 <div class="d-flex align-items-center">
1710 Larry <span class="badge badge-tertiary ml-2">Noob</span>
1711 </div>
1712 </td>
1713 <td>
1714 the Bird
1715 </td>
1716 <td>
1717 <div class="d-flex"></div>
1718 </td>
1719 </tr>
1720 </tbody>
1721 </table>
1722 </div>
1723 <div class="mb-5">
1724 <h6 class="mb-3">
1725 Dark table
1726 </h6>
1727 <table class="table table-dark">
1728 <thead>
1729 <tr>
1730 <th scope="col">
1731 #
1732 </th>
1733 <th scope="col">
1734 First
1735 </th>
1736 <th scope="col">
1737 Last
1738 </th>
1739 <th scope="col">
1740 Handle
1741 </th>
1742 </tr>
1743 </thead>
1744 <tbody>
1745 <tr>
1746 <th scope="row">
1747 1
1748 </th>
1749 <td>
1750 Zoltan
1751 </td>
1752 <td>
1753 Robi
1754 </td>
1755 <td>
1756 @calota
1757 </td>
1758 </tr>
1759 <tr>
1760 <th scope="row">
1761 2
1762 </th>
1763 <td>
1764 Jacob
1765 </td>
1766 <td>
1767 Thornton
1768 </td>
1769 <td>
1770 @fat
1771 </td>
1772 </tr>
1773 <tr>
1774 <th scope="row">
1775 3
1776 </th>
1777 <td>
1778 Larry
1779 </td>
1780 <td>
1781 the Bird
1782 </td>
1783 <td>
1784 @twitter
1785 </td>
1786 </tr>
1787 </tbody>
1788 </table>
1789 </div>
1790 <div class="mb-5">
1791 <h6 class="mb-3">
1792 Table head colors
1793 </h6>
1794 <table class="table">
1795 <thead class="thead-dark">
1796 <tr>
1797 <th scope="col">
1798 #
1799 </th>
1800 <th scope="col">
1801 First
1802 </th>
1803 <th scope="col">
1804 Last
1805 </th>
1806 <th scope="col">
1807 Handle
1808 </th>
1809 </tr>
1810 </thead>
1811 <tbody>
1812 <tr>
1813 <th scope="row">
1814 1
1815 </th>
1816 <td>
1817 Zoltan
1818 </td>
1819 <td>
1820 Robi
1821 </td>
1822 <td>
1823 @calota
1824 </td>
1825 </tr>
1826 <tr>
1827 <th scope="row">
1828 2
1829 </th>
1830 <td>
1831 Jacob
1832 </td>
1833 <td>
1834 Thornton
1835 </td>
1836 <td>
1837 @fat
1838 </td>
1839 </tr>
1840 <tr>
1841 <th scope="row">
1842 3
1843 </th>
1844 <td>
1845 Larry
1846 </td>
1847 <td>
1848 the Bird
1849 </td>
1850 <td>
1851 @twitter
1852 </td>
1853 </tr>
1854 </tbody>
1855 </table>
1856 <table class="table">
1857 <thead class="thead-light">
1858 <tr>
1859 <th scope="col">
1860 #
1861 </th>
1862 <th scope="col">
1863 First
1864 </th>
1865 <th scope="col">
1866 Last
1867 </th>
1868 <th scope="col">
1869 Handle
1870 </th>
1871 </tr>
1872 </thead>
1873 <tbody>
1874 <tr>
1875 <th scope="row">
1876 1
1877 </th>
1878 <td>
1879 Zoltan
1880 </td>
1881 <td>
1882 Robi
1883 </td>
1884 <td>
1885 @calota
1886 </td>
1887 </tr>
1888 <tr>
1889 <th scope="row">
1890 2
1891 </th>
1892 <td>
1893 Jacob
1894 </td>
1895 <td>
1896 Thornton
1897 </td>
1898 <td>
1899 @fat
1900 </td>
1901 </tr>
1902 <tr>
1903 <th scope="row">
1904 3
1905 </th>
1906 <td>
1907 Larry
1908 </td>
1909 <td>
1910 the Bird
1911 </td>
1912 <td>
1913 @twitter
1914 </td>
1915 </tr>
1916 </tbody>
1917 </table>
1918 </div>
1919 <div class="mb-5">
1920 <h6 class="mb-3">
1921 Striped rows
1922 </h6>
1923 <table class="table table-striped">
1924 <thead>
1925 <tr>
1926 <th scope="col">
1927 #
1928 </th>
1929 <th scope="col">
1930 First
1931 </th>
1932 <th scope="col">
1933 Last
1934 </th>
1935 <th scope="col">
1936 Handle
1937 </th>
1938 </tr>
1939 </thead>
1940 <tbody>
1941 <tr>
1942 <th scope="row">
1943 1
1944 </th>
1945 <td>
1946 Zoltan
1947 </td>
1948 <td>
1949 Robi
1950 </td>
1951 <td>
1952 @calota
1953 </td>
1954 </tr>
1955 <tr>
1956 <th scope="row">
1957 2
1958 </th>
1959 <td>
1960 Jacob
1961 </td>
1962 <td>
1963 Thornton
1964 </td>
1965 <td>
1966 @fat
1967 </td>
1968 </tr>
1969 <tr>
1970 <th scope="row">
1971 3
1972 </th>
1973 <td>
1974 Larry
1975 </td>
1976 <td>
1977 the Bird
1978 </td>
1979 <td>
1980 @twitter
1981 </td>
1982 </tr>
1983 </tbody>
1984 </table>
1985 </div>
1986 <div class="mb-5">
1987 <h6 class="mb-3">
1988 Table bordered
1989 </h6>
1990 <table class="table table-bordered">
1991 <thead>
1992 <tr>
1993 <th scope="col">
1994 #
1995 </th>
1996 <th scope="col">
1997 First
1998 </th>
1999 <th scope="col">
2000 Last
2001 </th>
2002 <th scope="col">
2003 Handle
2004 </th>
2005 </tr>
2006 </thead>
2007 <tbody>
2008 <tr>
2009 <th scope="row">
2010 1
2011 </th>
2012 <td>
2013 Zoltan
2014 </td>
2015 <td>
2016 Robi
2017 </td>
2018 <td>
2019 @calota
2020 </td>
2021 </tr>
2022 <tr>
2023 <th scope="row">
2024 2
2025 </th>
2026 <td>
2027 Jacob
2028 </td>
2029 <td>
2030 Thornton
2031 </td>
2032 <td>
2033 @fat
2034 </td>
2035 </tr>
2036 <tr>
2037 <th scope="row">
2038 3
2039 </th>
2040 <td colspan="2">
2041 Larry the Bird
2042 </td>
2043 <td>
2044 @twitter
2045 </td>
2046 </tr>
2047 </tbody>
2048 </table>
2049 <h6 class="mb-3 mt-5">
2050 Table bordered dark
2051 </h6>
2052 <table class="table table-bordered table-dark">
2053 <thead>
2054 <tr>
2055 <th scope="col">
2056 #
2057 </th>
2058 <th scope="col">
2059 First
2060 </th>
2061 <th scope="col">
2062 Last
2063 </th>
2064 <th scope="col">
2065 Handle
2066 </th>
2067 </tr>
2068 </thead>
2069 <tbody>
2070 <tr>
2071 <th scope="row">
2072 1
2073 </th>
2074 <td>
2075 Zoltan
2076 </td>
2077 <td>
2078 Robi
2079 </td>
2080 <td>
2081 @calota
2082 </td>
2083 </tr>
2084 <tr>
2085 <th scope="row">
2086 2
2087 </th>
2088 <td>
2089 Jacob
2090 </td>
2091 <td>
2092 Thornton
2093 </td>
2094 <td>
2095 @fat
2096 </td>
2097 </tr>
2098 <tr>
2099 <th scope="row">
2100 3
2101 </th>
2102 <td colspan="2">
2103 Larry the Bird
2104 </td>
2105 <td>
2106 @twitter
2107 </td>
2108 </tr>
2109 </tbody>
2110 </table>
2111 </div>
2112 <div class="mb-5">
2113 <h6 class="mb-3">
2114 Hoverable rows
2115 </h6>
2116 <table class="table table-hover">
2117 <thead>
2118 <tr>
2119 <th scope="col">
2120 #
2121 </th>
2122 <th scope="col">
2123 First
2124 </th>
2125 <th scope="col">
2126 Last
2127 </th>
2128 <th scope="col">
2129 Handle
2130 </th>
2131 </tr>
2132 </thead>
2133 <tbody>
2134 <tr>
2135 <th scope="row">
2136 1
2137 </th>
2138 <td>
2139 Zoltan
2140 </td>
2141 <td>
2142 Robi
2143 </td>
2144 <td>
2145 @calota
2146 </td>
2147 </tr>
2148 <tr>
2149 <th scope="row">
2150 2
2151 </th>
2152 <td>
2153 Jacob
2154 </td>
2155 <td>
2156 Thornton
2157 </td>
2158 <td>
2159 @fat
2160 </td>
2161 </tr>
2162 <tr>
2163 <th scope="row">
2164 3
2165 </th>
2166 <td colspan="2">
2167 Larry the Bird
2168 </td>
2169 <td>
2170 @twitter
2171 </td>
2172 </tr>
2173 </tbody>
2174 </table>
2175 <h6 class="mb-3 mt-5">
2176 Hoverable dark rows
2177 </h6>
2178 <table class="table table-hover table-dark">
2179 <thead>
2180 <tr>
2181 <th scope="col">
2182 #
2183 </th>
2184 <th scope="col">
2185 First
2186 </th>
2187 <th scope="col">
2188 Last
2189 </th>
2190 <th scope="col">
2191 Handle
2192 </th>
2193 </tr>
2194 </thead>
2195 <tbody>
2196 <tr>
2197 <th scope="row">
2198 1
2199 </th>
2200 <td>
2201 Zoltan
2202 </td>
2203 <td>
2204 Robi
2205 </td>
2206 <td>
2207 @calota
2208 </td>
2209 </tr>
2210 <tr>
2211 <th scope="row">
2212 2
2213 </th>
2214 <td>
2215 Jacob
2216 </td>
2217 <td>
2218 Thornton
2219 </td>
2220 <td>
2221 @fat
2222 </td>
2223 </tr>
2224 <tr>
2225 <th scope="row">
2226 3
2227 </th>
2228 <td colspan="2">
2229 Larry the Bird
2230 </td>
2231 <td>
2232 @twitter
2233 </td>
2234 </tr>
2235 </tbody>
2236 </table>
2237 </div>
2238 <div class="mb-5">
2239 <h6 class="mb-3">
2240 Small tables
2241 </h6>
2242 <table class="table table-sm">
2243 <thead>
2244 <tr>
2245 <th scope="col">
2246 #
2247 </th>
2248 <th scope="col">
2249 First
2250 </th>
2251 <th scope="col">
2252 Last
2253 </th>
2254 <th scope="col">
2255 Handle
2256 </th>
2257 </tr>
2258 </thead>
2259 <tbody>
2260 <tr>
2261 <th scope="row">
2262 1
2263 </th>
2264 <td>
2265 Zoltan
2266 </td>
2267 <td>
2268 Robi
2269 </td>
2270 <td>
2271 @calota
2272 </td>
2273 </tr>
2274 <tr>
2275 <th scope="row">
2276 2
2277 </th>
2278 <td>
2279 Jacob
2280 </td>
2281 <td>
2282 Thornton
2283 </td>
2284 <td>
2285 @fat
2286 </td>
2287 </tr>
2288 <tr>
2289 <th scope="row">
2290 3
2291 </th>
2292 <td colspan="2">
2293 Larry the Bird
2294 </td>
2295 <td>
2296 @twitter
2297 </td>
2298 </tr>
2299 </tbody>
2300 </table>
2301 <h6 class="mb-3 mt-5">
2302 Small dark tables
2303 </h6>
2304 <table class="table table-sm table-dark">
2305 <thead>
2306 <tr>
2307 <th scope="col">
2308 #
2309 </th>
2310 <th scope="col">
2311 First
2312 </th>
2313 <th scope="col">
2314 Last
2315 </th>
2316 <th scope="col">
2317 Handle
2318 </th>
2319 </tr>
2320 </thead>
2321 <tbody>
2322 <tr>
2323 <th scope="row">
2324 1
2325 </th>
2326 <td>
2327 Zoltan
2328 </td>
2329 <td>
2330 Robi
2331 </td>
2332 <td>
2333 @calota
2334 </td>
2335 </tr>
2336 <tr>
2337 <th scope="row">
2338 2
2339 </th>
2340 <td>
2341 Jacob
2342 </td>
2343 <td>
2344 Thornton
2345 </td>
2346 <td>
2347 @fat
2348 </td>
2349 </tr>
2350 <tr>
2351 <th scope="row">
2352 3
2353 </th>
2354 <td colspan="2">
2355 Larry the Bird
2356 </td>
2357 <td>
2358 @twitter
2359 </td>
2360 </tr>
2361 </tbody>
2362 </table>
2363 </div>
2364 </div>
2365 </div>
2366 </div>
2367 </div>
2368 <div class="section section-sm pb-0 mb-n4">
2369 <div class="container">
2370 <div class="row justify-content-center">
2371 <h4>
2372 Tabs
2373 </h4>
2374 </div>
2375 </div>
2376 </div><!-- Section -->
2377 <div class="section section-md">
2378 <div class="container">
2379 <div class="row justify-content-center">
2380 <div class="col-12 col-md-10 col-lg-8">
2381 <!-- Tab Nav -->
2382 <div class="nav-wrapper position-relative mb-2">
2383 <ul role="tablist" id="tabs-text" class="nav nav-pills nav-fill flex-column flex-md-row">
2384 <li class="nav-item">
2385 <a role="tab" aria-selected="true" aria-controls="tabs-text-1" id="tabs-text-1-tab" class="nav-link mb-sm-3 mb-md-0 active" href="#tabs-text-1" data-toggle="tab">Home</a>
2386 </li>
2387 <li class="nav-item">
2388 <a role="tab" aria-selected="false" aria-controls="tabs-text-2" id="tabs-text-2-tab" class="nav-link mb-sm-3 mb-md-0" href="#tabs-text-2" data-toggle="tab">Profile</a>
2389 </li>
2390 <li class="nav-item">
2391 <a role="tab" aria-selected="false" aria-controls="tabs-text-3" id="tabs-text-3-tab" class="nav-link mb-sm-3 mb-md-0" href="#tabs-text-3" data-toggle="tab">Messages</a>
2392 </li>
2393 </ul>
2394 </div><!-- End of Tab Nav --><!-- Tab Content -->
2395 <div class="card">
2396 <div class="card-body p-0">
2397 <div id="tabcontent1" class="tab-content">
2398 <div role="tabpanel" id="tabs-text-1" class="tab-pane fade show active" aria-labelledby="tabs-text-1-tab">
2399 <p>
2400 Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum.
2401 Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.
2402 </p>
2403 <p>
2404 Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.
2405 </p>
2406 </div>
2407 <div role="tabpanel" id="tabs-text-2" class="tab-pane fade" aria-labelledby="tabs-text-2-tab">
2408 <p>
2409 Photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam
2410 delectus, Marfa eiusmod Pinterest in do umami readymade swag.
2411 </p>
2412 <p>
2413 Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.
2414 </p>
2415 </div>
2416 <div role="tabpanel" id="tabs-text-3" class="tab-pane fade" aria-labelledby="tabs-text-3-tab">
2417 <p>
2418 Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum.
2419 Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.
2420 </p>
2421 <p>
2422 Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.
2423 </p>
2424 </div>
2425 </div>
2426 </div>
2427 </div><!-- End of Tab Content -->
2428 </div>
2429 </div>
2430 </div>
2431 </div><!-- End of Section -->
2432 <div class="section section-sm pb-0 mb-n4">
2433 <div class="container">
2434 <div class="row justify-content-center">
2435 <h4>
2436 Toasts
2437 </h4>
2438 </div>
2439 </div>
2440 </div><!-- Section -->
2441 <div class="section section-md">
2442 <div class="container">
2443 <div class="row mt-4">
2444 <div class="col-md-6 col-lg-4">
2445 <div role="alert" aria-live="assertive" class="toast fade show" aria-atomic="true">
2446 <div class="toast-header text-primary">
2447 <strong class="mr-auto ml-2">Bootstrap</strong> <small class="text-muted">11 mins ago</small><button aria-label="Close" class="ml-2 mb-1 close" data-dismiss="toast"><span aria-hidden=
2448 "true">×</span></button>
2449 </div>
2450 <div class="toast-body">
2451 Hello, world! This is a toast message.
2452 </div>
2453 </div>
2454 </div>
2455 <div class="col-md-6 col-lg-4">
2456 <div role="alert" aria-live="assertive" class="toast bg-primary text-white fade show" aria-atomic="true">
2457 <div class="toast-header text-primary">
2458 <strong class="mr-auto ml-2">Bootstrap</strong> <small>11 mins ago</small><button aria-label="Close" class="ml-2 mb-1 close" data-dismiss="toast"><span aria-hidden="true">×</span></button>
2459 </div>
2460 <div class="toast-body">
2461 Hello, world! This is a toast message.
2462 </div>
2463 </div>
2464 </div>
2465 <div class="col-md-6 col-lg-4">
2466 <div role="alert" aria-live="assertive" class="toast bg-tertiary text-white fade show" aria-atomic="true">
2467 <div class="toast-header bg-tertiary text-white">
2468 <strong class="mr-auto ml-2">Bootstrap</strong> <small>11 mins ago</small><button aria-label="Close" class="ml-2 mb-1 close" data-dismiss="toast"><span aria-hidden="true" class=
2469 "text-white">×</span></button>
2470 </div>
2471 <div class="toast-body">
2472 Hello, world! This is a toast message.
2473 </div>
2474 </div>
2475 </div>
2476 </div>
2477 </div>
2478 </div><!-- End of Section -->
2479 <div class="section section-sm pb-0 mb-n4">
2480 <div class="container">
2481 <div class="row justify-content-center">
2482 <h4>
2483 Tooltips
2484 </h4>
2485 </div>
2486 </div>
2487 </div><!-- Section -->
2488 <div class="section section-md">
2489 <div class="container">
2490 <!-- End of Title -->
2491 <div class="row mt-5">
2492 <div class="col-lg-12 d-block d-md-flex justify-content-around">
2493 <button title="Tooltip on top" class="btn btn-secondary btn-sm mr-4 mb-4" data-toggle="tooltip" data-placement="top">Tooltip on top</button><button title="Tooltip on right" class=
2494 "btn btn-secondary btn-sm mr-4 mb-4" data-toggle="tooltip" data-placement="right">Tooltip on right</button><button title="Tooltip on bottom" class="btn btn-secondary btn-sm mr-4 mb-4"
2495 data-toggle="tooltip" data-placement="bottom">Tooltip on bottom</button><button title="Tooltip on left" class="btn btn-secondary btn-sm mr-4 mb-4" data-toggle="tooltip" data-placement=
2496 "left">Tooltip on left</button>
2497 </div>
2498 </div>
2499 </div>
2500 </div><!-- End of Section -->
2501 <div class="section section-sm pb-0 mb-n4">
2502 <div class="container">
2503 <div class="row justify-content-center">
2504 <h4>
2505 Typography
2506 </h4>
2507 </div>
2508 </div>
2509 </div><!-- Section -->
2510 <div class="section section-md">
2511 <div class="container">
2512 <!-- Title -->
2513 <div class="row">
2514 <div class="col-md-4">
2515 <div class="mb-5">
2516 <h6 class="font-weight-bold">
2517 Headings
2518 </h6>
2519 </div>
2520 </div>
2521 </div><!-- End of Title -->
2522 <div class="row">
2523 <div class="col-md-12">
2524
<h1>
2525 h1. Bootstrap heading
2526 </h1>
2527 <h2>
2528 h2. Bootstrap heading
2529 </h2>
2530 <h3>
2531 h3. Bootstrap heading
2532 </h3>
2533 <h4>
2534 h4. Bootstrap heading
2535 </h4>
2536 <h5>
2537 h5. Bootstrap heading
2538 </h5>
2539 <h6>
2540 h6. Bootstrap heading
2541 </h6>
2542 </div>
2543 </div><!-- Title -->
2544 <div class="row">
2545 <div class="col-md-4">
2546 <div class="mt-6 mb-5">
2547 <h6 class="font-weight-bold">
2548 Customizing headings
2549 </h6>
2550 </div>
2551 </div>
2552 </div><!-- End of Title -->
2553 <div class="row">
2554 <div class="col-md-12">
2555
<h1>
2556 Fancy display heading <small class="text-muted">With faded secondary text</small>
2557 </h1>
2558 <h2>
2559 Fancy display heading <small class="text-muted">With faded secondary text</small>
2560 </h2>
2561 <h3>
2562 Fancy display heading <small class="text-muted">With faded secondary text</small>
2563 </h3>
2564 <h4>
2565 Fancy display heading <small class="text-muted">With faded secondary text</small>
2566 </h4>
2567 <h5>
2568 Fancy display heading <small class="text-muted">With faded secondary text</small>
2569 </h5>
2570 <h6>
2571 Fancy display heading <small class="text-muted">With faded secondary text</small>
2572 </h6>
2573 </div>
2574 </div><!-- Title -->
2575 <div class="row">
2576 <div class="col-md-4">
2577 <div class="mt-6 mb-5">
2578 <h6 class="font-weight-bold">
2579 Display headings
2580 </h6>
2581 </div>
2582 </div>
2583 </div><!-- End of Title -->
2584 <div class="row">
2585 <div class="col-md-12">
2586
<h1 class="display-1">
2587 Display 1
2588 </h1>
2589
<h1 class="display-2">
2590 Display 2
2591 </h1>
2592
<h1 class="display-3">
2593 Display 3
2594 </h1>
2595
<h1 class="display-4">
2596 Display 4
2597 </h1>
2598 </div>
2599 </div><!-- Title -->
2600 <div class="row">
2601 <div class="col-md-4">
2602 <div class="mt-6 mb-5">
2603 <h6 class="font-weight-bold">
2604 Paragraphs
2605 </h6>
2606 </div>
2607 </div>
2608 </div><!-- End of Title -->
2609 <div class="row">
2610 <div class="col-md-6">
2611 <div class="mb-3">
2612 <h6 class="font-weight-bold">
2613 Simple paragraph
2614 </h6>
2615 </div>
2616 <p>
2617 Start your development with a Pixel Design System for Bootstrap 4.Themesberg makes beautiful products to help people with creative ideas succeed.Our company empowers millions of people.
2618 </p>
2619 </div>
2620 <div class="col-md-6">
2621 <div class="mt-5 mb-3 mt-sm-0">
2622 <h6 class="font-weight-bold">
2623 Lead paragraph
2624 </h6>
2625 </div>
2626 <p class="lead">
2627 Start your development with a Pixel Design System for Bootstrap 4.Themesberg makes beautiful products to help people with creative ideas succeed.Our company empowers millions of people.
2628 </p>
2629 </div>
2630 </div>
2631 <div class="row mt-5 py-3 align-items-center">
2632 <div class="col-sm-2">
2633 <small class="text-uppercase text-muted">Light text</small>
2634 </div>
2635 <div class="col-sm-10">
2636 <p class="text-light mb-0">
2637 Design is not just what it looks like and feels like. Design is how it works.
2638 </p>
2639 </div>
2640 </div>
2641 <div class="row py-3 align-items-center">
2642 <div class="col-sm-2">
2643 <small class="text-uppercase text-muted">Muted text</small>
2644 </div>
2645 <div class="col-sm-10">
2646 <p class="text-muted mb-0">
2647 Design is not just what it looks like and feels like. Design is how it works.
2648 </p>
2649 </div>
2650 </div>
2651 <div class="row py-3 align-items-center">
2652 <div class="col-sm-2">
2653 <small class="text-uppercase text-muted">Dark text</small>
2654 </div>
2655 <div class="col-sm-10">
2656 <p class="text-dark mb-0">
2657 Design is not just what it looks like and feels like. Design is how it works.
2658 </p>
2659 </div>
2660 </div>
2661 <div class="row py-3 align-items-center">
2662 <div class="col-sm-2">
2663 <small class="text-uppercase text-muted">Primary text</small>
2664 </div>
2665 <div class="col-sm-10">
2666 <p class="text-primary mb-0">
2667 Design is not just what it looks like and feels like. Design is how it works.
2668 </p>
2669 </div>
2670 </div>
2671 <div class="row py-3 align-items-center">
2672 <div class="col-sm-2">
2673 <small class="text-uppercase text-muted">Secondary text</small>
2674 </div>
2675 <div class="col-sm-10">
2676 <p class="text-secondary mb-0">
2677 Design is not just what it looks like and feels like. Design is how it works.
2678 </p>
2679 </div>
2680 </div>
2681 <div class="row py-3 align-items-center">
2682 <div class="col-sm-2">
2683 <small class="text-uppercase text-muted">Tertiary text</small>
2684 </div>
2685 <div class="col-sm-10">
2686 <p class="text-tertiary mb-0">
2687 Design is not just what it looks like and feels like. Design is how it works.
2688 </p>
2689 </div>
2690 </div>
2691 <div class="row py-3 align-items-center">
2692 <div class="col-sm-2">
2693 <small class="text-uppercase text-muted">Info text</small>
2694 </div>
2695 <div class="col-sm-10">
2696 <p class="text-info mb-0">
2697 Design is not just what it looks like and feels like. Design is how it works.
2698 </p>
2699 </div>
2700 </div>
2701 <div class="row py-3 align-items-center">
2702 <div class="col-sm-2">
2703 <small class="text-uppercase text-muted">Danger text</small>
2704 </div>
2705 <div class="col-sm-10">
2706 <p class="text-danger mb-0">
2707 Design is not just what it looks like and feels like. Design is how it works.
2708 </p>
2709 </div>
2710 </div>
2711 <div class="row py-3 align-items-center">
2712 <div class="col-sm-2">
2713 <small class="text-uppercase text-muted">Success text</small>
2714 </div>
2715 <div class="col-sm-10">
2716 <p class="text-success mb-0">
2717 Design is not just what it looks like and feels like. Design is how it works.
2718 </p>
2719 </div>
2720 </div>
2721 <div class="row py-3 align-items-center">
2722 <div class="col-sm-2">
2723 <small class="text-uppercase text-muted">Warning text</small>
2724 </div>
2725 <div class="col-sm-10">
2726 <p class="text-warning mb-0">
2727 Design is not just what it looks like and feels like. Design is how it works.
2728 </p>
2729 </div>
2730 </div><!-- Title -->
2731 <div class="row">
2732 <div class="col-md-4">
2733 <div class="mt-6 mb-5">
2734 <h6 class="font-weight-bold">
2735 Inline Text Elements
2736 </h6>
2737 </div>
2738 </div>
2739 </div><!-- End of Title -->
2740 <div class="row">
2741 <div class="col-md-6">
2742 <p>
2743 You can use the mark tag to <mark>highlight</mark> text.
2744 </p>
2745 <p>
2746 <del>This line of text is meant to be treated as deleted text.</del>
2747 </p>
2748 <p>
2749 <s>This line of text is meant to be treated as no longer accurate.</s>
2750 </p>
2751 <p>
2752 <ins>This line of text is meant to be treated as an addition to the document.</ins>
2753 </p>
2754 <p>
2755
<u>This line of text will render as underlined</u>
2756 </p>
2757 <p>
2758 <small>This line of text is meant to be treated as fine print.</small>
2759 </p>
2760 <p>
2761 <strong>This line rendered as bold text.</strong>
2762 </p>
2763 <p>
2764 <em>This line rendered as italicized text.</em>
2765 </p>
2766 </div>
2767 </div><!-- Title -->
2768 <div class="row">
2769 <div class="col-md-4">
2770 <div class="mt-6 mb-5">
2771 <h6 class="font-weight-bold">
2772 Blockquote
2773 </h6>
2774 </div>
2775 </div>
2776 </div><!-- End of Title -->
2777 <div class="row">
2778 <div class="col-md-8">
2779 <blockquote class="blockquote text-center">
2780 Themesberg makes beautiful products to help people with creative ideas succeed. Our company empowers millions of people.
2781 <footer class="blockquote-footer mt-3 text-primary">
2782 Zoltan Szőgyényi
2783 </footer>
2784 </blockquote>
2785 </div>
2786 </div><!-- Title -->
2787 <div class="row">
2788 <div class="col-md-4">
2789 <div class="mt-6 mb-5">
2790 <h6 class="font-weight-bold">
2791 Lists
2792 </h6>
2793 </div>
2794 </div>
2795 </div><!-- End of Title -->
2796 <div class="row">
2797 <div class="col-md-6">
2798 <div class="mb-3">
2799 <h6 class="font-weight-bold">
2800 Unordered
2801 </h6>
2802 </div>
2803 <ul>
2804 <li>Minutes of the last meeting
2805 </li>
2806 <li>Do we need yet more meetings?
2807 </li>
2808 <li>Any other business
2809 <ul>
2810 <li>Programming
2811 </li>
2812 <li>Web Design
2813 </li>
2814 <li>Database
2815 </li>
2816 </ul>
2817 </li>
2818 <li>Something funny
2819 </li>
2820 </ul>
2821 </div>
2822 <div class="col-md-6">
2823 <div class="mt-5 mb-3 mt-sm-0">
2824 <h6 class="font-weight-bold">
2825 Ordered
2826 </h6>
2827 </div>
2828 <ol>
2829 <li>Minutes of the last meeting
2830 </li>
2831 <li>Do we need yet more meetings?
2832 </li>
2833 <li>Any other business
2834 <ol>
2835 <li>Programming
2836 </li>
2837 <li>Web Design
2838 </li>
2839 <li>Database
2840 </li>
2841 </ol>
2842 </li>
2843 <li>Something funny
2844 </li>
2845 </ol>
2846 </div>
2847 </div>
2848 </div>
2849 </div><!-- End of Section -->
2850 <section class="section section-md bg-soft">
2851 <div class="container">
2852 <div class="row justify-content-center mb-5 mb-lg-6">
2853 <div class="col-12 text-center">
2854 <h2 class="h1 px-lg-5">
2855 4 hand-crafted example pages
2856 </h2>
2857 </div>
2858 </div>
2859 <div class="row">
2860 <div class="col-6 col-lg-3 mb-5">
2861 <a class="page-preview scale-up-hover-2" href="./html/pages/about-company.html">
<img class="shadow-lg rounded scale" alt="About company page preview" src=
2862 ".//assets/img/presentation/all-pages/about-company.jpg" />
2863 <div class="text-center show-on-hover">
2864 <h6 class="m-0 text-center text-white">
2865 About company
2866 </h6>
2867 </div></a>
2868 </div>
2869 <div class="col-6 col-lg-3 mb-5">
2870 <a class="page-preview scale-up-hover-2" href="./html/pages/pricing.html">
<img class="shadow-lg rounded scale" alt="Pricing page preview" src=
2871 ".//assets/img/presentation/all-pages/pricing.jpg" />
2872 <div class="text-center show-on-hover">
2873 <h6 class="m-0 text-center text-white">
2874 Pricing
2875 </h6>
2876 </div></a>
2877 </div>
2878 <div class="col-6 col-lg-3 mb-5">
2879 <a class="page-preview scale-up-hover-2" href="./html/pages/services.html">
<img class="shadow-lg rounded scale" alt="Services page preview" src=
2880 ".//assets/img/presentation/all-pages/services.jpg" />
2881 <div class="text-center show-on-hover">
2882 <h6 class="m-0 text-center text-white">
2883 Services
2884 </h6>
2885 </div></a>
2886 </div>
2887 <div class="col-6 col-lg-3 mb-5">
2888 <a class="page-preview scale-up-hover-2" href="./html/pages/contact.html">
<img class="shadow-lg rounded scale" alt="Contact page preview" src=
2889 ".//assets/img/presentation/all-pages/contact.jpg" />
2890 <div class="text-center show-on-hover">
2891 <h6 class="m-0 text-center text-white">
2892 Contact
2893 </h6>
2894 </div></a>
2895 </div>
2896 </div>
2897 </div>
2898 </section>
2899 <section class="section section-lg bg-tertiary">
2900 <div class="container">
2901 <div class="row justify-content-center">
2902 <div class="col-lg-8 text-center text-white">
2903
<h1 class="font-weight-light">
2904 Notable <span class="font-weight-bold">features</span>
2905 </h1>
2906 <p class="lead">
2907 You get all Bootstrap components fully customized. Besides, you receive numerous plugins out of the box and ready to use
2908 </p>
2909 </div>
2910 </div>
2911 <div class="row mt-6 text-white">
2912 <div class="col-md-4">
2913 <!-- Icon box -->
2914 <div class="icon-box text-lg-center mb-5">
2915 <div class="icon"></div>
2916 <h5 class="my-3">
2917 Latest Bootstrap
2918 </h5>
2919 <p>
2920 A responsive and mobile-first theme built with the world's most popular CSS framework
2921 </p>
2922 </div><!-- End of Icon box -->
2923 </div>
2924 <div class="col-md-4">
2925 <!-- Icon box -->
2926 <div class="icon-box text-lg-center mb-5">
2927 <div class="icon"></div>
2928 <h5 class="my-3">
2929 Build with Sass
2930 </h5>
2931 <p>
2932 Change one variable and the theme adapts. Colors, fonts, sizes, buttons... you name it
2933 </p>
2934 </div><!-- End of Icon box -->
2935 </div>
2936 <div class="col-md-4">
2937 <!-- Icon box -->
2938 <div class="icon-box text-lg-center mb-5">
2939 <div class="icon"></div>
2940 <h5 class="my-3">
2941 Responsive Design
2942 </h5>
2943 <p>
2944 Did you know 53% of the world web traffic is mobile? Pixel is fully responsive and mobile first
2945 </p>
2946 </div><!-- End of Icon box -->
2947 </div>
2948 <div class="col-md-4">
2949 <!-- Icon box -->
2950 <div class="icon-box text-lg-center mb-5">
2951 <div class="icon"></div>
2952 <h5 class="my-3">
2953 Modular approach
2954 </h5>
2955 <p>
2956 Nicely customized components that can be reused anytime and anywhere in your project
2957 </p>
2958 </div><!-- End of Icon box -->
2959 </div>
2960 <div class="col-md-4">
2961 <!-- Icon box -->
2962 <div class="icon-box text-lg-center mb-5">
2963 <div class="icon"></div>
2964 <h5 class="my-3">
2965 Gulp & BrowserSync
2966 </h5>
2967 <p>
2968 With our custom Gulp commands & BrowserSync we offer a seemless and fast workflow for your project
2969 </p>
2970 </div><!-- End of Icon box -->
2971 </div>
2972 <div class="col-md-4">
2973 <!-- Icon box -->
2974 <div class="icon-box text-lg-center mb-5">
2975 <div class="icon"></div>
2976 <h5 class="my-3">
2977 Well documented
2978 </h5>
2979 <p>
2980 Our kit is delivered with very detailed documentation, describing all components, styles and usages
2981 </p>
2982 </div><!-- End of Icon box -->
2983 </div>
2984 <div class="col-md-4">
2985 <!-- Icon box -->
2986 <div class="icon-box text-lg-center">
2987 <div class="icon"></div>
2988 <h5 class="my-3">
2989 Google PageSpeed
2990 </h5>
2991 <p>
2992 Pixel has 80+ scores on Google PageSpeed Insights to offer you and your clients a fast website
2993 </p>
2994 </div><!-- End of Icon box -->
2995 </div>
2996 <div class="col-md-4">
2997 <!-- Icon box -->
2998 <div class="icon-box text-lg-center mb-5">
2999 <div class="icon"></div>
3000 <h5 class="my-3">
3001 SVG illustrations
3002 </h5>
3003 <p>
3004 Photography and Illustration SVGs are included in the download package and are free to use
3005 </p>
3006 </div><!-- End of Icon box -->
3007 </div>
3008 <div class="col-md-4">
3009 <!-- Icon box -->
3010 <div class="icon-box text-lg-center mb-5">
3011 <div class="icon">
3012
<img class="navbar-brand-dark" style="HEIGHT: 37px" alt="menuimage" src="./assets/img/brand/light.svg" />
3013 </div>
3014 <h5 class="my-3">
3015 Every pixel matters
3016 </h5>
3017 <p>
3018 We crafted each component with great care so that no rouge pixel is left behind
3019 </p>
3020 </div><!-- End of Icon box -->
3021 </div>
3022 </div>
3023 </div>
3024 </section>
3025 <section class="section section-lg line-bottom-soft">
3026 <div class="container">
3027 <div class="row justify-content-center mb-5 mb-lg-6">
3028 <div class="col-12 text-center">
3029 <h2 class="h1 px-lg-5">
3030 What's inside?
3031 </h2>
3032 <p class="lead px-lg-8">
3033 We have carefully crafted the perfect folder structure to ensure that finding the files you're looking for are easily reachable and well organized.
3034 </p>
3035 </div>
3036 </div>
3037 <div class="row d-flex align-items-center">
3038 <div class="col-12 col-lg-6 mb-4">
3039 <div class="d-none d-lg-block mt-5">
3040 <h4>
3041 You need only HTML, CSS and Javascript?
3042 </h4>
3043 <p class="lead mb-4">
3044 Don't worry, we got you covered. We have a folder called <code class="text-danger">html&css</code> which includes only the basic HTML5, CSS3 and Javascript technologies.
3045 </p><a class="btn btn-md btn-secondary animate-up-2" href="https://themesberg.com/docs/pixel-bootstrap/getting-started/file-structure/" target="_blank">Docs v3.0</a>
3046 </div>
3047 </div>
3048 <div class="col-12 col-lg-6 order-lg-first d-flex justify-content-center">
3049 <ul class="d-block fmw-100 list-style-none folder-structure">
3050
<li title="Main folder that you will be working with" data-toggle="tooltip" data-placement="left">src
3051 </li>
3052 <li>
3053 <ul class="list-style-none pl-4">
3054
<li title="CSS, Images, Fonts and Javascript" data-toggle="tooltip" data-placement="left">assets
3055 </li>
3056
<li title="HTML templates" data-toggle="tooltip" data-placement="left">html
3057 </li>
3058
<li title="Partials are HTML snippets that are included in multiple pages, such as the menu or footer" data-toggle="tooltip" data-placement="left">partials
3059 </li>
3060
<li title="Sass source files" data-toggle="tooltip" data-placement="left">scss
3061 </li>
3062
<li title="The page you're looking at right now. Call it inception." data-toggle="tooltip" data-placement="left">index.html
3063 </li>
3064 </ul>
3065 </li>
3066
<li title="Pixel with only HTML, CSS and Javascript" data-toggle="tooltip" data-placement="left">html&css
3067 </li>
3068 <li title="Temporary folder that is created when serving files with BrowserSync" data-toggle="tooltip" data-placement="left">.temp
3069 </li>
3070
<li title="Minified version of the project" data-toggle="tooltip" data-placement="left">dist
3071 </li>
3072
<li title="Project dependencies from package.json" data-toggle="tooltip" data-placement="left">node_modules
3073 </li>
3074
<li title="Development workflow commands. We have them well documented." data-toggle="tooltip" data-placement="left">gulpfile.js
3075 </li>
3076
<li title="Project details and dependencies." data-toggle="tooltip" data-placement="left">package.json
3077 </li>
3078 <li title="No project can miss a README :)" data-toggle="tooltip" data-placement="left">README.md
3079 </li>
3080 <li title="This file ensures that generated files and folder are ignored by Git. (eg. node_modules)" data-toggle="tooltip" data-placement="left">.gitignore
3081 </li>
3082 </ul>
3083 </div>
3084 <div class="col-12 mt-5 d-lg-none">
3085 <h5>
3086 You need only HTML, CSS and Javascript?
3087 </h5>
3088 <p>
3089 Don't worry, we got you covered. We have a folder called <code class="text-danger">html&css</code> which includes only the basic HTML5, CSS3 and Javascript technologies.
3090 </p>
3091 </div>
3092 </div>
3093 </div>
3094 </section>
3095 <section class="section section-lg bg-primary">
3096 <div class="container">
3097 <div class="row justify-content-center text-center text-white">
3098 <div class="col-lg-10 col-xl-12">
3099
<h1 class="font-weight-light mb-4">
3100 WCAG 2.1 accessible <span class="font-weight-bold">color scheme</span>
3101 </h1>
3102 <p class="lead">
3103 We've enhanced Bootstrap’s color settings
3104 <br />
3105 to comply with the latest accessibility standards
3106 </p>
3107 </div>
3108 </div>
3109 <div class="row mt-6">
3110 <div class="col-md-6 col-sm-6 col-lg-3">
3111 <div class="card shadow-soft border-soft bg-soft p-5 text-center mb-4">
3112 <div class="color-shape rounded bg-primary m-auto"></div>
3113 <div class="mt-4">
3114 <h6 class="text-dark">
3115 Primary:
3116 </h6><span class="font-weight-bold text-primary">#174F84</span>
3117 </div>
3118 </div>
3119 </div>
3120 <div class="col-md-6 col-sm-6 col-lg-3">
3121 <div class="card shadow-soft border-soft bg-soft p-5 text-center mb-4">
3122 <div class="color-shape rounded bg-secondary m-auto"></div>
3123 <div class="mt-4">
3124 <h6 class="text-dark">
3125 Secondary:
3126 </h6><span class="font-weight-bold text-secondary">#10AB7C</span>
3127 </div>
3128 </div>
3129 </div>
3130 <div class="col-md-6 col-sm-6 col-lg-3">
3131 <div class="card shadow-soft border-dark bg-dark p-5 text-center mb-4">
3132 <div class="color-shape rounded bg-tertiary m-auto"></div>
3133 <div class="mt-4">
3134 <h6 class="text-white">
3135 Tertiary:
3136 </h6><span class="font-weight-bold text-tertiary">#FF7F66</span>
3137 </div>
3138 </div>
3139 </div>
3140 <div class="col-md-6 col-sm-6 col-lg-3">
3141 <div class="card shadow-soft border-dark bg-dark p-5 text-center mb-4">
3142 <div class="color-shape rounded bg-info m-auto"></div>
3143 <div class="mt-4">
3144 <h6 class="text-white">
3145 Info:
3146 </h6><span class="font-weight-bold text-info">#1E90FF</span>
3147 </div>
3148 </div>
3149 </div>
3150 <div class="col-md-6 col-sm-6 col-lg-3">
3151 <div class="card shadow-soft border-dark bg-dark p-5 text-center mb-4">
3152 <div class="color-shape rounded bg-warning m-auto"></div>
3153 <div class="mt-4">
3154 <h6 class="text-white">
3155 Warning:
3156 </h6><span class="font-weight-bold text-warning">#F5B759</span>
3157 </div>
3158 </div>
3159 </div>
3160 <div class="col-md-6 col-sm-6 col-lg-3">
3161 <div class="card shadow-soft border-dark bg-dark p-5 text-center mb-4">
3162 <div class="color-shape rounded bg-success m-auto"></div>
3163 <div class="mt-4">
3164 <h6 class="text-white">
3165 Success:
3166 </h6><span class="font-weight-bold text-success">#00BF9A</span>
3167 </div>
3168 </div>
3169 </div>
3170 <div class="col-md-6 col-sm-6 col-lg-3">
3171 <div class="card shadow-soft border-dark bg-dark p-5 text-center mb-4">
3172 <div class="color-shape rounded bg-danger m-auto"></div>
3173 <div class="mt-4">
3174 <h6 class="text-white">
3175 Danger:
3176 </h6><span class="font-weight-bold text-danger">#FA5252</span>
3177 </div>
3178 </div>
3179 </div>
3180 <div class="col-md-6 col-sm-6 col-lg-3">
3181 <div class="card shadow-soft border-dark bg-dark p-5 text-center mb-4">
3182 <div class="color-shape rounded bg-dark m-auto"></div>
3183 <div class="mt-4">
3184 <h6 class="text-white">
3185 Dark:
3186 </h6><span class="font-weight-bold text-dark">#2A354F</span>
3187 </div>
3188 </div>
3189 </div>
3190 <div class="col-md-6 col-sm-6 col-lg-3">
3191 <div class="card shadow-soft border-dark bg-dark p-5 text-center mb-4">
3192 <div class="color-shape rounded bg-light m-auto"></div>
3193 <div class="mt-4">
3194 <h6 class="text-white">
3195 Light:
3196 </h6><span class="font-weight-bold text-light">#DDE1ED</span>
3197 </div>
3198 </div>
3199 </div>
3200 <div class="col-md-6 col-sm-6 col-lg-3">
3201 <div class="card shadow-soft border-dark bg-dark p-5 text-center mb-4">
3202 <div class="color-shape rounded bg-soft m-auto"></div>
3203 <div class="mt-4">
3204 <h6 class="text-white">
3205 Soft:
3206 </h6><span class="font-weight-bold text-light">#EFF2F5</span>
3207 </div>
3208 </div>
3209 </div>
3210 </div>
3211 </div>
3212 </section>
3213 <section class="section section-lg bg-soft">
3214 <div class="container">
3215 <div class="row justify-content-center text-center text-dark mb-5">
3216 <div class="col-lg-9 col-xl-8">
3217 <h2 class="h1 font-weight-light mb-3">
3218 Less <span class="font-weight-bold">work</span>, more <span class="font-weight-bold">flow</span>.
3219 </h2>
3220 <p class="lead">
3221 Boost productivity with BrowserSync. SCSS changes are reflected instantly and pages scroll and refresh on devices as you work.
3222 </p>
3223 </div>
3224 </div>
3225 <div class="row justify-content-center mb-6">
3226 <div class="col-md-10 col-xl-9">
3227 <div class="position-relative">
3228 <div class="rounded bg-dark p-4 text-white mb-2">
3229 <div class="mb-3">
3230 <div class="font-weight-normal">
3231 > $ npm install
3232 </div>
3233 <div class="text-muted">
3234 Everything’s installed!
3235 </div>
3236 </div>
3237 <div class="mb-3">
3238 <div class="font-weight-normal">
3239 > $ gulp
3240 </div>
3241 <div class="text-muted">
3242 SCSS watching
3243 </div>
3244 <div class="text-muted">
3245 LiveReload started
3246 </div>
3247 <div class="text-muted">
3248 Opening localhost:3000
3249 </div>
3250 </div>
3251 <div>
3252 <div class="font-weight-normal">
3253 > $ that's it?
3254 </div>
3255 <div class="text-muted">
3256 It's that simple!
3257 </div>
3258 </div>
3259 </div>
3260 </div>
3261 <div class="alert alert-dark position-relative mt-4">
3262 Looks unfamiliar? Don’t worry! Our <a class="text-white font-weight-bold text-underline" href="https://themesberg.com/docs/pixel-bootstrap/getting-started/overview/" target=
3263 "_blank">documentation</a> has got you covered.
3264 </div>
3265 </div>
3266 </div>
3267 </div>
3268 </section>
3269 <section class="section section-lg bg-white">
3270 <div class="container">
3271 <div class="row">
3272 <div class="col-12 col-lg-8">
3273 <h2 class="h1 font-weight-light mb-3">
3274 <strong>Open source</strong> project
3275 </h2>
3276 <p class="lead mb-4">
3277 Pixel Lite is an open source UI Kit that is licensed under the very permissive MIT License. Consider giving us a star on the official Github repository to spread the news!
3278 </p>
3279 <div class="d-flex align-items-center">
3280 <a class="btn btn-tertiary mr-4 animate-up-2" href="https://github.com/themesberg/pixel-bootstrap-ui-kit" target="_blank">View on GitHub</a>
3281 <!-- Place this tag where you want the button to render. -->
3282 <div class="mt-2">
3283 <!-- Place this tag where you want the button to render. --><a aria-label="Star themesberg/pixel-bootstrap-ui-kit on GitHub" class="github-button" href=
3284 "https://github.com/themesberg/pixel-bootstrap-ui-kit" data-show-count="true" data-size="large" data-icon="octicon-star" data-color-scheme=
3285 "no-preference: dark; light: light; dark: light;">Star</a>
3286 </div>
3287 </div>
3288 </div>
3289 <div class="col-12 col-lg-4">
3290 <div class="github-big-icon"></div>
3291 </div>
3292 </div>
3293 <div class="row mt-6">
3294 <div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0">
3295 <div class="card border-light p-4">
3296 <!-- Header -->
3297 <div class="card-header bg-white pb-0">
3298 <span class="d-block"><span class="h2 text-primary font-weight-bold">Free Version</span></span>
3299 </div><!-- End Header --><!-- Content -->
3300 <div class="card-body">
3301 <ul class="list-group list-group-flush price-list">
3302 <li class="list-group-item bg-white pl-0">
3303 <strong>80</strong> Components
3304 </li>
3305 <li class="list-group-item bg-white pl-0">
3306 <strong>4</strong> Example Pages
3307 </li>
3308 <li class="list-group-item bg-white pl-0">Uncoventional cards
3309 </li>
3310 <li class="list-group-item bg-white pl-0">Timelines
3311 </li>
3312 <li class="list-group-item bg-white pl-0">E-commerce
3313 </li>
3314 <li class="list-group-item bg-white pl-0">Charts
3315 </li>
3316 <li class="list-group-item bg-white pl-0 pb-0">Premium Support
3317 </li>
3318 </ul>
3319 </div><!-- End Content -->
3320 </div>
3321 </div>
3322 <div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0 mt-lg-n5">
3323 <div class="card border-light p-4">
3324 <!-- Header -->
3325 <div class="card-header bg-white pb-0">
3326 <span class="d-block"><span class="h2 text-primary font-weight-bold">Pro Version</span></span>
3327 </div><!-- End Header --><!-- Content -->
3328 <div class="card-body">
3329 <ul class="list-group list-group-flush price-list mb-5">
3330 <li class="list-group-item bg-white pl-0">
3331 <strong>1000+</strong> Components
3332 </li>
3333 <li class="list-group-item bg-white pl-0">
3334 <strong>17</strong> Example Pages
3335 </li>
3336 <li class="list-group-item bg-white pl-0">Uncoventional cards
3337 </li>
3338 <li class="list-group-item bg-white pl-0">Timelines
3339 </li>
3340 <li class="list-group-item bg-white pl-0">E-commerce
3341 </li>
3342 <li class="list-group-item bg-white pl-0">Charts
3343 </li>
3344 <li class="list-group-item bg-white border-0 pl-0 pb-0">Premium Support
3345 </li>
3346 </ul><a class="btn btn-block btn-tertiary mr-4 animate-up-2" href="https://demo.themesberg.com/pixel-pro/" target="_blank">Live demo </a>
3347 </div><!-- End Content -->
3348 </div>
3349 </div>
3350 </div>
3351 </div>
3352 </section>
3353 <footer class="footer pt-7 pb-6 bg-primary text-white">
3354 <div class="container">
3355 <div class="row">
3356 <div class="col-md-4">
3357 <p>
3358 <strong>Pixel</strong> is a large User Interface Kit that will help you prototype and design beautiful, creative and modern websites.
3359 </p>
3360 <ul class="social-buttons mb-5 mb-lg-0">
3361 <li>
3362 <a title="Follow us on Twitter" class="icon icon-xs icon-white" href="https://twitter.com/themesberg" data-toggle="tooltip" data-placement="top"></a>
3363 </li>
3364 <li>
3365 <a title="Like us on Facebook" class="icon icon-xs icon-white" href="https://www.facebook.com/Themesberg-214738555737136/" data-toggle="tooltip" data-placement="top"></a>
3366 </li>
3367 <li>
3368 <a title="Star us on Github" class="icon icon-xs icon-white" href="https://github.com/themesberg" data-toggle="tooltip" data-placement="top"></a>
3369 </li>
3370 <li>
3371 <a title="Like us on Dribbble" class="icon icon-xs icon-white" href="https://dribbble.com/themesberg" data-toggle="tooltip" data-placement="top"></a>
3372 </li>
3373 </ul>
3374 </div>
3375 <div class="col-6 col-md-2 mb-5 mb-lg-0">
3376 <h5>
3377 Themesberg
3378 </h5>
3379 <ul class="links-vertical">
3380 <li>
3381 <a href="https://themesberg.com/blog" target="_blank">Blog</a>
3382 </li>
3383 <li>
3384 <a href="https://themesberg.com/products" target="_blank">Products</a>
3385 </li>
3386 <li>
3387 <a href="https://themesberg.com/about" target="_blank">About Us</a>
3388 </li>
3389 <li>
3390 <a href="https://themesberg.com/contact" target="_blank">Contact Us</a>
3391 </li>
3392 </ul>
3393 </div>
3394 <div class="col-6 col-md-2 mb-5 mb-lg-0">
3395 <h5>
3396 Other
3397 </h5>
3398 <ul class="links-vertical">
3399 <li>
3400 <a href="https://themesberg.com/docs/pixel-bootstrap/getting-started/overview/" target="_blank">Docs <span class="badge badge-sm badge-secondary ml-2">v3.0</span></a>
3401 </li>
3402 <li>
3403 <a href="https://themesberg.com/docs/pixel-bootstrap/getting-started/changelog" target="_blank">Changelog</a>
3404 </li>
3405 <li>
3406 <a href="https://themesberg.com/licensing" target="_blank">License</a>
3407 </li>
3408 <li>
3409 <a href="https://github.com/themesberg/pixel-bootstrap-ui-kit/issues" target="_blank">Support</a>
3410 </li>
3411 </ul>
3412 </div>
3413 <div class="col-12 col-md-4 mb-5 mb-lg-0">
3414 <h5>
3415 Subscribe
3416 </h5>
3417 <p class="text-muted">
3418 Join our mailing list. We write rarely, but only the best content.
3419 </p>
3420 <form action="#">
3421 <div class="form-row mb-2">
3422 <div class="col-12">
3423
<input class="form-control mb-2" name="email" placeholder="Email Address" required="" />
3424 </div>
3425 <div class="col-12">
3426 <button class="btn btn-tertiary shadow-soft btn-block" type="submit" data-loading-text="Sending"><span>Subscribe</span></button>
3427 </div>
3428 </div>
3429 </form><small class="text-muted">We’ll never share your details. See our <a class="text-white" href="#">Privacy Policy</a></small>
3430 </div>
3431 </div>
3432 <hr class="my-5" />
3433 <div class="row">
3434 <div class="col mb-md-0">
3435 <a class="d-flex justify-content-center" href="https://themesberg.com" target="_blank">
<img class="mb-3" alt="Themesberg Logo" src="./assets/img/themesberg.svg" height="25" /></a>
3436 <div class="d-flex text-center justify-content-center align-items-center">
3437 <p class="font-weight-normal font-small mb-0">
3438 Copyright © <a href="https://themesberg.com" target="_blank">Themesberg</a> <span class="current-year">2020</span>. All rights reserved.
3439 </p>
3440 </div>
3441 </div>
3442 </div>
3443 </div>
3444 </footer><!-- Core -->
3445 <script src="./node_modules/jquery/dist/jquery.min.js"></script>
3446 <script src="./node_modules/popper.js/dist/umd/popper.min.js"></script>
3447 <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
3448 <script src="./node_modules/headroom.js/dist/headroom.min.js"></script> <!-- Vendor JS -->
3449 <script src="./node_modules/onscreen/dist/on-screen.umd.min.js"></script>
3450 <script src="./node_modules/nouislider/distribute/nouislider.min.js"></script>
3451 <script src="./node_modules/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
3452 <script src="./node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
3453 <script src="./node_modules/waypoints/lib/jquery.waypoints.min.js"></script>
3454 <script src="./node_modules/jarallax/dist/jarallax.min.js"></script>
3455 <script src="./node_modules/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
3456 <script src="./node_modules/vivus/dist/vivus.min.js"></script>
3457 <script src="./node_modules/vivus/src/pathformer.js"></script> <!-- Place this tag in your head or just before your close body tag. -->
3458 <script defer="defer" src="https://buttons.github.io/buttons.js" async="async"></script> <!-- pixel JS -->
3459 <script src="./assets/js/pixel.js"></script>
3460 </main>
3461 </body>
3462</html>