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 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>
@stanwmusic
stanwmusic / index.html
Created Aug 11, 2020
Practicalmorphism 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" style="background: #3b5998;">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="btn" style="background: #00acee;">
View gsap-rocket.markdown