Skip to content

Instantly share code, notes, and snippets.

@lesp

lesp/index.html

Created August 9, 2022 14:06
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lesp/a6665f67ece3ebff04652d24c3d40041 to your computer and use it in GitHub Desktop.
Save lesp/a6665f67ece3ebff04652d24c3d40041 to your computer and use it in GitHub Desktop.
Download ZIP
Tom's Hardware Raspberry Pi Pico W Web Server: Bootstrap Example
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tom's Hardware...on a Raspberry Pi Pico W</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.b-example-divider {
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.bi {
vertical-align: -.125em;
fill: currentColor;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
</style>
<!-- Custom styles for this template -->
<link href="heroes.css" rel="stylesheet">
</head>
<body>
<main>
<h1 class="visually-hidden">Heroes examples</h1>
<div class="px-4 py-5 my-5 text-center">
<h1 class="display-5 fw-bold">Tom's Hardware</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">Tom's Hardware is the leading destination for tech enthusiasts of all skill levels. Whether you're building a PC, buying a laptop or learning how to create robots with your kids, we've got comprehensive editorial resources and a vibrant expert community to help you on your journey.</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<a class="btn btn-danger" href="https://tomshardware.com" role="button">Visit Tom's Hardware</a>
</div>
</div>
</div>
<div class="b-example-divider"></div>
<div class="px-4 pt-5 my-5 text-center border-bottom">
<h1 class="display-4 fw-bold">Latest Tutorials</h1>
<div class="col-lg-6 mx-auto">
<img class="d-block mx-auto mb-4" src="https://farm5.staticflickr.com/4569/25161770978_9657525e9c_h_d.jpg" alt="" width="50%" height="50%">
<p class="lead mb-4">Harness the power of the $6 Raspberry Pi Pico W to create live data feeds.</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
<a class="btn btn-danger" href="https://www.tomshardware.com/how-to/raspberry-pi-pico-w-node-red" role="button">Read the Tutorial</a>
</div>
</div>
<div class="overflow-hidden" style="max-height: 30vh;">
<div class="container px-5">
</div>
</div>
</div>
<div class="b-example-divider"></div>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment