Skip to content

Instantly share code, notes, and snippets.

Avatar
🏠
Working from home

Stan Williams stanwmusic

🏠
Working from home
View GitHub Profile
@stanwmusic
stanwmusic / index.html
Created Apr 8, 2021
Rough CSS Grid layout Idea
View index.html
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<header><h1 align="center">HEADER </h1></header>
<section> <div align="center"><iframe width="100%" height="315" src="https://www.youtube.com/embed/qQ__2DIydJI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <br> <strong>Music Video</strong><br>Instrumental music by Stan Williams Feat Steve Grisham (Outlaws Band) on mandolin, and Pug Baker Drums.</div></section>
<aside><img src="https://placekitten.com/170/160"></img><br>
Meowsum Lorem ipsum dolor sit amet, sit boy! &nbsp; Consectetur adipiscing elit. Aliquam efficitur at augue ac dictum. Nunc aliquam blandit nunc. Fusce dignissim libero dolor, Duis ut leo lacinia, consectetur erat eu, tempor nisl. Phasellus porttitor nulla velit, et hendrerit tortor. </aside>
<nav><br> <a target="_blank" rel="
@stanwmusic
stanwmusic / index.html
Created Apr 8, 2021
Responsive Tabs/Accordion Prototype
View index.html
<h1>
<span class='sub-title'>
Progressively-Enhanced Responsive, Accessible Tab Navigation
</span>
</h1>
<ul class='desc'>
<li>Turns into an accordion on tablet and mobile</li>
<li>Works with JS disabled (content is still available and appears as headings + text, no tabs)</li>
<li>ARIA works across states, dynamically updated via the JS</li>
<li>Keyboard accessible</li>
@stanwmusic
stanwmusic / index.html
Created Feb 7, 2021
practice portfolio
View index.html
<!DOCTYPE HTML>
<html>
<head>
<meta name='viewport' contents='width=device-width, initial-scale=1.0'>
<meta charset='UTF-8'>
<title>Fcc: Personal Portfolio</title>
</head>
View grid-auto-fill-vs-auto-fit.markdown

Grid 'auto-fill' vs 'auto-fit'

How grid auto-fill and auto-fit works. auto-fill will make sure that the grid items (children) will retain their width and not stretch to fill up its parent element. On the other hand, auto-fit will make the grid-items to use up all the space of its the parent element.

A Pen by Stan Williams on CodePen.

License.

@stanwmusic
stanwmusic / index.pug
Created Nov 20, 2020
Tuggable Light Bulb! 💡(GSAP Draggable && MorphSVG)
View index.pug
svg(class="toggle-scene" xmlns='http://www.w3.org/2000/svg' preserveaspectratio='xMinYMin' viewBox='0 0 197.451 481.081')
defs
marker#e(orient='auto' overflow='visible' refx='0' refy='0')
path.toggle-scene__cord-end(fill-rule='evenodd' stroke-width='.2666' d='M.98 0a1 1 0 11-2 0 1 1 0 012 0z')
marker#d(orient='auto' overflow='visible' refx='0' refy='0')
path.toggle-scene__cord-end(fill-rule='evenodd' stroke-width='.2666' d='M.98 0a1 1 0 11-2 0 1 1 0 012 0z')
marker#c(orient='auto' overflow='visible' refx='0' refy='0')
path.toggle-scene__cord-end(fill-rule='evenodd' stroke-width='.2666' d='M.98 0a1 1 0 11-2 0 1 1 0 012 0z')
marker#b(orient='auto' overflow='visible' refx='0' refy='0')
path.toggle-scene__cord-end(fill-rule='evenodd' stroke-width='.2666' d='M.98 0a1 1 0 11-2 0 1 1 0 012 0z')
View index.html
<head>
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Vidaloka&family=Yesteryear&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap" rel="stylesheet">
</head>
<div class="frame">
<p><i class="fas fa-star" style="font-size: 15px;"></i> Premie Yum <i class="fas fa-star" style="font-size: 15px;"></i></p>
<h2>Coffee</h2>
<div class="ribbon">
@stanwmusic
stanwmusic / index.html
Created Aug 11, 2020
Neumorphism Social Share Button
View index.html
<head>
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
</head>
<body>
<div class ="frame">
<a href="#" class="btn">
<i class="fab fa-facebook-f" style="color: #3b5998;"></i>
</a>
<a href="#" class="btn">
@stanwmusic
stanwmusic / index.html
Created Aug 11, 2020
Neumorphism Play Button
View index.html
<head>
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
</head>
<body>
<div class ="frame">
<a href="#" class="btn">
<i class="fas fa-backward"></i>
</a>