Created
August 9, 2022 14:06
-
-
Save lesp/a6665f67ece3ebff04652d24c3d40041 to your computer and use it in GitHub Desktop.
Tom's Hardware Raspberry Pi Pico W Web Server: Bootstrap Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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