2017-10-03 18:34:59 +02:00
<!doctype html>
2013-06-24 02:17:08 +02:00
< html lang = "en" >
< head >
< meta charset = "utf-8" >
2015-10-06 13:35:39 +02:00
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
2013-06-24 02:17:08 +02:00
< meta name = "description" content = "" >
< meta name = "author" content = "" >
2017-07-16 15:19:20 +02:00
< link rel = "icon" href = "../../../../favicon.ico" >
2013-06-24 02:17:08 +02:00
2018-01-15 01:06:52 +01:00
< title > Offcanvas template for Bootstrap< / title >
2013-06-24 02:17:08 +02:00
<!-- Bootstrap core CSS -->
2017-05-29 20:55:36 +02:00
< link href = "../../../../dist/css/bootstrap.min.css" rel = "stylesheet" >
2013-06-24 02:17:08 +02:00
<!-- Custom styles for this template -->
2013-07-21 08:30:08 +02:00
< link href = "offcanvas.css" rel = "stylesheet" >
2013-06-24 02:17:08 +02:00
< / head >
2018-01-15 01:06:52 +01:00
< body class = "bg-light" >
2016-12-23 08:08:02 +01:00
2017-06-26 03:29:43 +02:00
< nav class = "navbar navbar-expand-md fixed-top navbar-dark bg-dark" >
2018-01-15 01:06:52 +01:00
< a class = "navbar-brand" href = "#" > Offcanvas navbar< / a >
< button class = "navbar-toggler p-0 border-0" type = "button" data-toggle = "offcanvas" >
2016-12-23 08:08:02 +01:00
< span class = "navbar-toggler-icon" > < / span >
< / button >
2018-01-15 01:06:52 +01:00
< div class = "navbar-collapse offcanvas-collapse" id = "navbarsExampleDefault" >
2016-12-29 02:25:00 +01:00
< ul class = "navbar-nav mr-auto" >
2016-12-23 08:08:02 +01:00
< li class = "nav-item active" >
2018-01-15 01:06:52 +01:00
< a class = "nav-link" href = "#" > Dashboard < span class = "sr-only" > (current)< / span > < / a >
2016-12-23 08:08:02 +01:00
< / li >
< li class = "nav-item" >
2018-01-15 01:06:52 +01:00
< a class = "nav-link" href = "#" > Notifications< / a >
2016-12-23 08:08:02 +01:00
< / li >
< li class = "nav-item" >
2018-01-15 01:06:52 +01:00
< a class = "nav-link" href = "#" > Profile< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Switch account< / a >
2016-12-23 08:08:02 +01:00
< / li >
< li class = "nav-item dropdown" >
2018-01-15 01:06:52 +01:00
< a class = "nav-link dropdown-toggle" href = "http://example.com" id = "dropdown01" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" > Settings< / a >
2016-12-23 08:08:02 +01:00
< div class = "dropdown-menu" aria-labelledby = "dropdown01" >
< a class = "dropdown-item" href = "#" > Action< / a >
< a class = "dropdown-item" href = "#" > Another action< / a >
< a class = "dropdown-item" href = "#" > Something else here< / a >
< / div >
< / li >
2015-09-02 06:19:07 +02:00
< / ul >
2016-12-23 08:08:02 +01:00
< form class = "form-inline my-2 my-lg-0" >
2017-03-30 23:45:36 +02:00
< input class = "form-control mr-sm-2" type = "text" placeholder = "Search" aria-label = "Search" >
2016-12-23 08:08:02 +01:00
< button class = "btn btn-outline-success my-2 my-sm-0" type = "submit" > Search< / button >
< / form >
< / div >
< / nav >
2013-06-24 02:17:08 +02:00
2018-01-15 01:06:52 +01:00
< div class = "nav-scroller bg-white box-shadow" >
< nav class = "nav nav-underline" >
< a class = "nav-link active" href = "#" > Dashboard< / a >
< a class = "nav-link" href = "#" >
Friends
< span class = "badge badge-pill bg-light align-text-bottom" > 27< / span >
< / a >
< a class = "nav-link" href = "#" > Explore< / a >
< a class = "nav-link" href = "#" > Suggestions< / a >
< a class = "nav-link" href = "#" > Link< / a >
< a class = "nav-link" href = "#" > Link< / a >
< a class = "nav-link" href = "#" > Link< / a >
< a class = "nav-link" href = "#" > Link< / a >
< a class = "nav-link" href = "#" > Link< / a >
< / nav >
< / div >
2013-06-24 02:17:08 +02:00
2018-01-15 01:06:52 +01:00
< main role = "main" class = "container" >
< div class = "d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded box-shadow" >
< img class = "mr-3" src = "https://getbootstrap.com/assets/brand/bootstrap-outline.svg" alt = "" width = "48" height = "48" >
< div class = "lh-100" >
< h6 class = "mb-0 text-white lh-100" > Bootstrap< / h6 >
< small > Since 2011< / small >
< / div >
< / div >
2013-09-01 10:34:21 +02:00
2018-01-15 01:06:52 +01:00
< div class = "my-3 p-3 bg-white rounded box-shadow" >
< h6 class = "border-bottom border-gray pb-2 mb-0" > Recent updates< / h6 >
< div class = "media text-muted pt-3" >
< img data-src = "holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt = "" class = "mr-2 rounded" >
< p class = "media-body pb-3 mb-0 small lh-125 border-bottom border-gray" >
< strong class = "d-block text-gray-dark" > @username< / strong >
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
2013-06-24 02:17:08 +02:00
< / p >
2018-01-15 01:06:52 +01:00
< / div >
< div class = "media text-muted pt-3" >
< img data-src = "holder.js/32x32?theme=thumb&bg=e83e8c&fg=e83e8c&size=1" alt = "" class = "mr-2 rounded" >
< p class = "media-body pb-3 mb-0 small lh-125 border-bottom border-gray" >
< strong class = "d-block text-gray-dark" > @username< / strong >
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
< / p >
< / div >
< div class = "media text-muted pt-3" >
< img data-src = "holder.js/32x32?theme=thumb&bg=6f42c1&fg=6f42c1&size=1" alt = "" class = "mr-2 rounded" >
< p class = "media-body pb-3 mb-0 small lh-125 border-bottom border-gray" >
< strong class = "d-block text-gray-dark" > @username< / strong >
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
< / p >
< / div >
< small class = "d-block text-right mt-3" >
< a href = "#" > All updates< / a >
< / small >
< / div >
2013-08-16 02:39:37 +02:00
2018-01-15 01:06:52 +01:00
< div class = "my-3 p-3 bg-white rounded box-shadow" >
< h6 class = "border-bottom border-gray pb-2 mb-0" > Suggestions< / h6 >
< div class = "media text-muted pt-3" >
< img data-src = "holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt = "" class = "mr-2 rounded" >
< div class = "media-body pb-3 mb-0 small lh-125 border-bottom border-gray" >
< div class = "d-flex justify-content-between align-items-center w-100" >
< strong class = "text-gray-dark" > Full Name< / strong >
< a href = "#" > Follow< / a >
< / div >
< span class = "d-block" > @username< / span >
2013-09-01 10:34:21 +02:00
< / div >
2018-01-15 01:06:52 +01:00
< / div >
< div class = "media text-muted pt-3" >
< img data-src = "holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt = "" class = "mr-2 rounded" >
< div class = "media-body pb-3 mb-0 small lh-125 border-bottom border-gray" >
< div class = "d-flex justify-content-between align-items-center w-100" >
< strong class = "text-gray-dark" > Full Name< / strong >
< a href = "#" > Follow< / a >
< / div >
< span class = "d-block" > @username< / span >
< / div >
< / div >
< div class = "media text-muted pt-3" >
< img data-src = "holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt = "" class = "mr-2 rounded" >
< div class = "media-body pb-3 mb-0 small lh-125 border-bottom border-gray" >
< div class = "d-flex justify-content-between align-items-center w-100" >
< strong class = "text-gray-dark" > Full Name< / strong >
< a href = "#" > Follow< / a >
< / div >
< span class = "d-block" > @username< / span >
< / div >
< / div >
< small class = "d-block text-right mt-3" >
< a href = "#" > All suggestions< / a >
< / small >
< / div >
< / main >
2013-06-24 02:17:08 +02:00
2013-08-17 21:32:11 +02:00
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
2018-01-23 07:18:33 +01:00
< script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous" > < / script >
2017-11-08 00:11:04 +01:00
< script > window . jQuery || document . write ( '<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>' ) < / script >
2017-06-14 21:00:01 +02:00
< script src = "../../../../assets/js/vendor/popper.min.js" > < / script >
2017-05-29 20:55:36 +02:00
< script src = "../../../../dist/js/bootstrap.min.js" > < / script >
2018-01-15 01:06:52 +01:00
< script src = "../../../../assets/js/vendor/holder.min.js" > < / script >
2013-07-21 08:30:08 +02:00
< script src = "offcanvas.js" > < / script >
2013-06-24 02:17:08 +02:00
< / body >
2013-08-17 21:32:11 +02:00
< / html >
