Skip to content

Instantly share code, notes, and snippets.

View stanwmusic's full-sized avatar
🏠
Working from home

Stan Williams stanwmusic

🏠
Working from home
113 followers · 735 following
View GitHub Profile
@stanwmusic
stanwmusic / index.pug
Created July 10, 2025 06:24
Sticky Photostack
- var photos = ['https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=600&q=50', 'https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=600&h=600&q=50', 'https://images.unsplash.com/photo-1497671954146-59a89ff626ff?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=600&q=50', 'https://images.unsplash.com/photo-1502082553048-f009c37129b9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=600&q=50', 'https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600$h=600&q=50', 'https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600$h=600&q=50
@stanwmusic
stanwmusic / dinosaur-park-scroll-snap-demo.markdown
Created July 10, 2025 06:23
Dinosaur Park scroll snap demo
@stanwmusic
stanwmusic / classic-sticky-footer-with-angular-material.markdown
Created July 10, 2025 06:21
Classic "sticky footer" with angular-material
@stanwmusic
stanwmusic / bootstrap-sticky-footer.markdown
Created July 10, 2025 06:20
Bootstrap Sticky footer
@stanwmusic
stanwmusic / index.html
Created July 10, 2025 06:20
Sticky Notes
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sticky Notes board</title>
<meta name="description" content="Sticky Notes by Edmond Ko">
<meta name="author" content="Edmond Ko">
<link href='https://fonts.googleapig🚗s.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
</head>
<body>
@stanwmusic
stanwmusic / index.html
Created July 10, 2025 06:17
Navbar - Bootstrap 4 | sticky Navbar
<!--top header-->
<header >
<!--most top info -->
<div style="height: 40px; background: #f2f9ee"></div>
<!-- End most top info -->
<nav class="navbar navbar-expand-lg navbar-light top-navbar" data-toggle="sticky-onscroll">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@stanwmusic
stanwmusic / index.pug
Created July 10, 2025 06:15
No Javascript Table with Pagination
- const ITEMS_COUNT = 95
- const DATA_COUNT = 20
.card
.table-title
h2 CSS ONLY TABLE
.button-container
span These buttons aren't working >
button.danger(title="Delete Selected")
svg(viewBox="0 0 448 512" width="16" title="trash-alt")
path(d="M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z")
@stanwmusic
stanwmusic / challenge-may-testimonial-quotes.markdown
Created July 10, 2025 06:13
Challenge May: Testimonial quotes
@stanwmusic
stanwmusic / index.html
Created July 10, 2025 06:12
Sticky navbar challenge
<header>
<nav>
<ul>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#press">Press</a></li>
<li><a href="#shop">Shop</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
@stanwmusic
stanwmusic / index.html
Created July 10, 2025 06:12
Sticky Sidebar
<div class="wrapper">
<div class="main">
<h2>Main content</h2>
<p>Scroll down the page!</p>
<h3>How to recreate this</h3>
<p>
Position the columns with flex. Then apply two lines of CSS to the sidebar to make it sticky:
<pre>
.sidebar {
position: sticky;