Skip to content

Instantly share code, notes, and snippets.

View glvangorp's full-sized avatar

Greg Van Gorp glvangorp

5 followers · 12 following
  • Flock Safety (Aviation)
View GitHub Profile
@glvangorp
glvangorp / index.html
Created April 21, 2020 15:11
JS Bin Beautiful colors // source https://jsbin.com/ruwitob
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Beautiful colors">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<style id="jsbin-css">
body {
@glvangorp
glvangorp / index.html
Created April 21, 2020 15:10
JS Bin Confetti Checkbox // source https://jsbin.com/tuxixij
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Confetti Checkbox">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<style id="jsbin-css">
@glvangorp
glvangorp / index.html
Created July 30, 2019 00:54
JS Bin // source https://jsbin.com/dusohol
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
@glvangorp
glvangorp / index.html
Created October 27, 2018 04:10
JS Bin // source https://jsbin.com/vucodox
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300" rel="stylesheet">
<style id="jsbin-css">
:root {
--darkgray: #2d3842;
@glvangorp
glvangorp / motion-easing-variables.scss
Last active October 19, 2018 00:57
Motion Easing
/* # Motion Easing
https://material.io/guidelines/motion/material-motion.html#
https://material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
http://cubic-bezier.com/ */
$standard-ease: cubic-bezier(0.4, 0.0, 0.2, 1); /* "Standard curve": growing/shrinking an element and moving within the screen */
$ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); /* "Deceleration curve": moving an element from off the screen into view */
$ease-in: cubic-bezier(0.4, 0.0, 1, 1); /* "Acceleration curve": animating an element out of view or off the screen */
$ease-in-out: cubic-bezier(0.4, 0.0, 0.6, 1); /* "Sharp curve": used by exiting elements that may return to the screen at any time */
@glvangorp
glvangorp / index.html
Created May 15, 2018 15:34
Confetti Checkbox Animation // source http://jsbin.com/tuxixij
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Confetti Checkbox">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<style id="jsbin-css">
@glvangorp
glvangorp / index.html
Created April 12, 2018 17:05
JS Bin Masters color theme // source http://jsbin.com/viyizim
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Masters color theme">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
:root {
--masters-green: #186a4c;
@glvangorp
glvangorp / index.html
Created March 22, 2018 18:57
JS Bin Layout template with responsive menu // source http://jsbin.com/tuxixij
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Layout template with responsive menu">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<style id="jsbin-css">
@glvangorp
glvangorp / index.html
Created March 16, 2018 16:02
JS Bin TWNFY - Category Component // source https://jsbin.com/viceqoy
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="TWNFY - Category Component">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<style id="jsbin-css">
@glvangorp
glvangorp / index.html
Created March 9, 2018 17:27
JS Bin StackOverflow answer for: https://stackoverflow.com/questions/49196773/putting-an-irregular-box-shadow-on-a-heading-in-css-3#49197157 // source http://jsbin.com/buzuje
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="StackOverflow answer for: https://stackoverflow.com/questions/49196773/putting-an-irregular-box-shadow-on-a-heading-in-css-3#49197157">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
:root {
--header-size: 20px;