Skip to content

Instantly share code, notes, and snippets.

@dzt

dzt/trash.html

Created March 26, 2020 07:34
Show Gist options
  • Save dzt/3157406aac7e0e33b2607511c80fa271 to your computer and use it in GitHub Desktop.
Save dzt/3157406aac7e0e33b2607511c80fa271 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
trash.html
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
<title>Offcanvas template for Bootstrap</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/offcanvas/">
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="offcanvas.css" rel="stylesheet">
</head>
<body class="bg-light" data-gr-c-s-loaded="true" style="">
<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
<img class="navbar-brand" src="https://i.imgur.com/TSh3nLk.png" style="
width: 100px;
">
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Aero</a>
<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><li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Guides</a>
<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>
<li class="nav-item">
<a class="nav-link" href="#">New/Used Parts</a>
</li>
<li class="nav-item">
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<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&amp;bg=6f42c1&amp;fg=6f42c1&amp;size=1" alt="32x32" class="mr-2 rounded" src="https://i.imgur.com/8M4Zh53.png" data-holder-rendered="true" style="width: 42px;height: 42px;object-fit: cover;">
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
<strong class="d-block text-gray-dark" style="
/* font-size: 16px; */
">Foresight Aero Hood</strong>Added 10 Hours Ago</p>
</div><div class="media text-muted pt-3">
<img data-src="holder.js/32x32?theme=thumb&amp;bg=6f42c1&amp;fg=6f42c1&amp;size=1" alt="32x32" class="mr-2 rounded" src="https://i.imgur.com/J144xX8.jpg" data-holder-rendered="true" style="width: 42px;height: 42px;object-fit: cover;">
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
<strong class="d-block text-gray-dark" style="
/* font-size: 16px; */
">KnightSports Hood</strong>Added 1 Day Ago</p>
</div><div class="media text-muted pt-3">
<img data-src="holder.js/32x32?theme=thumb&amp;bg=6f42c1&amp;fg=6f42c1&amp;size=1" alt="32x32" class="mr-2 rounded" src="https://i.imgur.com/jRu0rhy.png" data-holder-rendered="true" style="width: 42px;height: 42px;object-fit: cover;">
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
<strong class="d-block text-gray-dark" style="
/* font-size: 16px; */
">Mazdaspeed Hood Scoop</strong>Added Last Week</p>
</div>
<small class="d-block text-right mt-3">
<a href="#">View All Aero Parts</a>
</small>
</div>
<div class="my-3 p-3 bg-white rounded box-shadow">
<h6 class="border-bottom border-gray pb-2 mb-0" style="
padding: 20px;
font-size: 25px;
font-weight: 700;
margin-bottom: 15px !important;
border-bottom: none !important;
">New Items</h6>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]" style="height: 225px;width: 100%;display: block;object-fit: cover;" src="https://i.imgur.com/7tD93t3.png" data-holder-rendered="true">
<div class="card-body">
<p class="card-text" style="
margin-bottom: 5px;
font-weight: 700;
">S4 Tii mirrors</p>
<p class="card-text" style="
margin-bottom: 5px;
">$150.00</p><p class="card-text" style="
color: green;
">Shipping Available</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Bookmark</button>
</div>
<small class="text-muted">1 day ago</small>
</div>
</div>
</div>
</div><div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]" style="height: 225px;width: 100%;display: block;object-fit: cover;" src="https://i.imgur.com/ViJFrBb.png" data-holder-rendered="true">
<div class="card-body">
<p class="card-text" style="
margin-bottom: 5px;
font-weight: 700;
">Automatic Transmission</p>
<p class="card-text" style="
margin-bottom: 5px;
">Make an Offer</p><p class="card-text" style="
color: #e6b00f;
">Pickup Only</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Bookmark</button>
</div>
<small class="text-muted">3 day ago</small>
</div>
</div>
</div>
</div><div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]" style="height: 225px;width: 100%;display: block;object-fit: cover;" src="https://i.imgur.com/KXBXct9.png" data-holder-rendered="true">
<div class="card-body">
<p class="card-text" style="
margin-bottom: 5px;
font-weight: 700;
">S5 BAC Valve</p>
<p class="card-text" style="
margin-bottom: 5px;
">Make an Offer</p><p class="card-text" style="
color: green;
">Shipping Available</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Bookmark</button>
</div>
<small class="text-muted">3 day ago</small>
</div>
</div>
</div>
</div>
</div>
</div>
<small class="d-block text-right mt-3">
<a href="#">View All</a>
</small>
</div>
</main>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../assets/js/vendor/popper.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/vendor/holder.min.js"></script>
<script src="offcanvas.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" preserveAspectRatio="none" style="display: none; visibility: hidden; position: absolute; top: -100%; left: -100%;"><defs><style type="text/css"></style></defs><text x="0" y="2" style="font-weight:bold;font-size:2pt;font-family:Arial, Helvetica, Open Sans, sans-serif">32x32</text></svg></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment