<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html-templates•index•ShawnEEE•com</title>
<meta name="description" content="info">
<meta name="author" content="smp">
<!-- main gridzy files -
ALL GRIDZY css added to shawneee_base_plus_gridzy.css
skins/gridzySkinBlank
skins/gridzySkinBlur + script.min.js
skins/gridzySkinCard + script.min.js
skins/gridzySkinClassic
skins/gridzySkinFullOverlay
skins/gridzySkinLift
skins/gridzySkinMagnifiier
<link rel="stylesheet" href="gridzy/gridzy.min.css" />
<script src="gridzy/gridzy.min.js"></script>
gridzy file for gridzySkinClassic skin
<link rel="stylesheet" href="gridzy/skins/gridzySkinClassic/style.min.css" />
-->
<link rel="stylesheet" href="https://use.typekit.net/cwk1wtz.css">
<!-- reset (if not using a framework) css -->
<link rel="css/normalize.css">
<style>
* {
box-sizing: border-box; }
html {
background: #efefef;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-family: proxima-nova, sans-serif;
font-weight: 300;
line-height: 1.15;
letter-spacing: .5px;
color:#333333;
font-size:16px; }
html { font-size: 0.875em; }
a {color: #ff6600; font-weight:500; text-decoration:none; margin: .25em 0; font-size:120%; }
a:link {color:#ff6600; }
a:visited {color: #ff6600; color: rgba(255,153,0,.65)}
a:hover{ color: #9900ff; }
.mrkr { text-transform: uppercase; color: #0066ff; font-weight: 900; width: 33%; letter-spacing: 2px; display: inline-block; padding: 20px 10px 0 10px; margin: 0 4px 0 0; text-decoration: overline underline; height: 50px; vertical-align: middle; }
.doctype { font-variant: small-caps; display: inline-block; font-weight: 900; margin: 0 0px 0 0; }
.info { display: inline-block; font-weight: 900; margin: 0 0px 0 0; display: inline-block; vertical-align: top; font-size: 14px; width: 62%; text-align: right; }
.MainHeader { display: inline-block; width: 79%; margin: 10px 0px; }
/**
* 1. Apply rule to all browsers
* 2. Override WebKit browsers, because Safari needs percentages to work
* 3. Override IE/Edge, because Edge applies previous -webkit-calc() and
* won't work with percentages
*/
@media screen and (min-width: 80em) {
html {
font-size: calc(0.875em + 0.25 * (100vw - 80em) / 40); /* 1 */
font-size: -webkit-calc(87.5% + 0.25 * (100vw - 8000%) / 40); /* 2 */
font-size: -ms-calc(0.875em + 0.25 * (100vw - 80em) / 40); /* 3 */
}
}
@media screen and (min-width: 120em) {
html {
font-size: 1.125em;
}
}
body { width: 80%; margin: .5em auto; }
/*// h ////*/
h1, h2, h3, h4, h5, h6 {
font-family: arvo, serif;
font-weight: 400;
font-style: normal;
padding: 0;
margin: 0.5rem 0;
line-height: 1.5; }
/*// h ////*/
h1, h2, h3, h4, h5, h6 {
font-family: arvo, serif;
font-weight: 400;
font-style: normal;
padding: 0;
margin: 0.5rem 0;
line-height: 1.5; }
h1 { font-size: 1.2961572031rem; }
h2 { font-size: 1.214767763rem;}
h3 { font-size: 1.138489rem; }
h4 { font-size: 1.067rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9372071228rem; }
@media screen and (min-width: 37.5rem) {
h1 { font-size: calc(4.3792407416vw - 0.346058075rem); }
h2 { font-size: calc(2.7148829976vw + 0.1966866389rem); }
h3 { font-size: calc(1.5021176471vw + 0.5751948824rem); }
h4 { font-size: calc(0.6258823529vw + 0.8322941176rem); }
h5 { font-size: calc(0vw + 1rem); }
h6 { font-size: calc(-0.4400460609vw + 1.1022243956rem); }
} /*// 37.5 //*/
@media screen and (min-width: 80rem) {
h1 { font-size: 3.1573345183rem; }
h2 { font-size: 2.368593037rem; }
h3 { font-size: 1.776889rem; }
h4 { font-size: 1.333rem; }
h5 {font-size: 1rem; }
h6 { font-size: 0.7501875469rem; }
} /*/// 80em ///*/
/*/// blockquoe /////*/
blockquote {
float:left;
width: 25%;
background: #ffffff;
background: rgba(255,255,255,.45);
border-left: 10px solid rgba(255,153,0,.45);
margin: 0px 1.5em 10px 0px;
padding: 0.5em 10px;
quotes: "\201C""\201D""\2018""\2019"; }
blockquote:before {
color: #9900ff;
color: rgba(153,0,255,.45);
content: open-quote;
font-size: 3.85em;
line-height: .015px;
margin-bottom: 0px;
padding-bottom: 0px;
margin-right: 0.01em;
vertical-align: -0.5em; }
blockquote p {
font-family: bebas-neue-pro, sans-serif;
font-weight: 400;
font-style: italic;
color: #333333;
opacity:1;
display: inline; }
/*////// buttons /////*/
.button_cont {
width: 90%;
margin-top: 50px;
margin-bottom: 50px;
}
.button_spiffy {
border-radius: 5px;
/* background: linear-gradient(to right, #ffaa19, #b14713, #ffaa19) !important;*/
/*background-image: linear-gradient(to right bottom, #ff6600, #ff535e, #ff5d9c, #ea77cc, #bc91e7, #9da3f6, #7eb2fb, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1); */
/* background: #2c3e50;
background: -webkit-linear-gradient(to right,#2c3e50, #bdc3c7, #2c3e50);
background: linear-gradient(to right, #2c3e50, #bdc3c7, #2c3e50);
*/
/*
background: rgb(144,144,144);
background: linear-gradient(100deg, rgba(110,110,110,.85) 0%, rgba(82,82,82,.85) 37%, rgba(26, 10, 0, 0.5) 68%, rgba(110,110,110,.85) 83%, rgba(82,82,82,.85) 100%);
*/
background: rgb(144, 144, 144);
background: linear-gradient(100deg, rgba(201, 201, 201, 0.5) 0%, rgba(171, 171, 171, 0.5) 37%, rgba(57, 32, 16, 0.25) 68%, rgba(138, 138, 138, 0.5) 83%, rgba(143, 143, 143, 0.5) 100%);
border: 4px groove linear-gradient(100deg, rgba(201, 201, 201, 0.5) 0%, rgba(171, 171, 171, 0.5) 37%, rgba(57, 32, 16, 0.25) 68%, rgba(138, 138, 138, 0.5) 83%, rgba(143, 143, 143, 0.5) 100%);
color: #333333;
text-shadow: 0px 0px 0px #cbcbcb51;
text-align: center;
text-transform: uppercase;
font-variant: small-caps;
font-family: bebas-neue-pro, sans-serif;
/* font-family: proxima-nova, sans-serif;*/
font-weight: 600;
letter-spacing: 8px;
font-size: 1em;
padding: .35em 1.85em .35em 1.85em;
width: auto;
transition: all 0.4s;
cursor: pointer;
margin: .25em .25em .25em 0em;
}
.button_spiffy span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.4s;
}
.button_spiffy span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -.85em;
transition: 0.5s;
}
.button_spiffy:hover {
background: rgb(144, 144, 144);
background: linear-gradient(160deg, rgba(201, 201, 201, 0.5) 0%, rgba(171, 171, 171, 0.5) 37%, rgba(57, 32, 16, 0.25) 68%, rgba(138, 138, 138, 0.5) 83%, rgba(143, 143, 143, 0.5) 100%);
border: 2px groove #ff6600;
color: #000000;
text-shadow: 2px 2px 0px #efefef;
}
.button_spiffy:hover span {
padding-right: 1em;
}
.button_spiffy:hover span:after {
opacity: 1;
right: 0;
}
.myButton {
-moz-box-shadow: 0px 1px 0px 0px #fff6af;
-webkit-box-shadow: 0px 1px 0px 0px #fff6af;
box-shadow: 0px 1px 0px 0px #fff6af;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
background-color:#ffec64;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
border:1px solid #ffaa22;
display:inline-block;
cursor:pointer;
color:#333333;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffee66;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
background-color:#ffab23;
}
.myButton:active {
position:relative;
top:1px;
}
.DocuMainSorter a {
font-size: 150%;
letter-spacing: 2px;
line-height: .5; }
.tinydisplay {font-family: bebas-neue-pro, sans-serif; font-size:9px; font-weight: 400; color: #a2a2a2; display:inline-block; padding: 2px 6px; background-color: #f7f7f7; border-right: 1px solid #dedede; border-left: 1px solid #c5c5c5; margin: 5px 0; clear:both;}
/* hr */
hr {
border: 0;
height: 2px;
/* background: #ff6600;
background-image: -webkit-gradient(linear, left top, right top, from(#efefef), color-stop(#ff6600), to(#efefef));
background-image: -webkit-linear-gradient(left, #efefef, #ff6600, #efefef);
background-image: -o-linear-gradient(left, #efefef, #ff6600, #efefef);
background-image: linear-gradient(to right, #efefef, #ff6600, #efefef);*/
max-width: 75rem;
margin: .5rem auto;
clear: both;
}
hr.hrstyle1 {
border-top: 1px solid #66ff00;
background: #ffe63f;
}
hr.hrstyle2 {
border-top: 3px double #0066ff;
padding-bottom: 1px;
border-bottom: 3px dotted #ff0066;
}
hr.hrstyle3 {
border-top: 1px dashed #0066ff;
}
hr.hrstyle4 {
line-height: -1em;
border-top: 1px dotted #6600ff;
border-bottom: 3px double #ff6600;
}
hr.hrstyle5 {
background: rgb(102,0,255);
background: radial-gradient(circle, rgba(102,0,255,0) 0%, rgba(102,0,255,1) 26%, rgba(137,201,237,1) 50%, rgba(137,201,237,0) 69%, rgba(102,0,255,0.5788690476190477) 77%, rgba(137,201,237,0.8281687675070029) 85%, rgba(102,0,255,0) 100%);
border-top: 3px dotted #89c9ed;
padding: 4px 0px 0px 0px;
border-bottom: 1px dotted #6600ff;
margin: 0px 0 -5px 0; }
hr.hrstyle6 {
background-color: #9900ff;
border-top: 2px dotted #66ff00;
}
hr.hrstyle7 {
border-top: 1px solid #66ff00;
border-bottom: 1px solid #6600ff;
}
hr.hrstyle8 {
border-top: 1px dotted #813200;
border-bottom: 1px solid #eb430b;
}
hr.hrstyle8:after {
content: '';
display: block;
margin-top: 4px;
padding-top:2px;
border-top: 1px dashed #6600ff;
border-bottom: 1px solid #ff0066;
}
hr.hrstyle9 {
border-top: 1px dashed #ff260c;
border-bottom: 3px dotted #ff0066;
}
hr.hrstyle10:before {
content: '\2604';
display: inline-block;
position: absolute;
top: 16px;
z-index: 20;
margin-top:-20px;
overflow: visible;
left: 65%;
padding: 0 0px;
background: transparent;
color: #ff6600;
font-weight: 800;
font-size: 44px;
}
hr.hrstyle10 {
height: 30px;
position: relative;
line-height: 1;
margin-top: -5px;
border-bottom: 1px dashed #0066ff;
padding-top: 10px;
background: transparent;
}
/*
margin:0px;
padding: 20px;
font-weight: 400;
overflow: hidden;
width: 300px;
height: 300px;
background-position: -50px 0px;
background: #ff6600;
background: rgba(255,102,0,.85);
border-radius: 50%;
border-width: 8px;
border-style: dotted;
border-color: #9900ff;
box-shadow: 0 0px 0px rgba(0,0,0,.13);
*/
hr.hrstyle11:after {
content: '\2606';
display: inline-block;
position: absolute;
z-index: 20;
margin-top: -36px;
overflow: visible;
left: 35%;
padding: 5px;
background: #6600ff;
background: rgba(102,0,255,.85);
color: #ff6600;
border-radius: 50%;
border-width: 2px;
border-style: dotted;
font-weight: 800;
font-size: 34px;
}
hr.hrstyle11 {
padding-top: 6px;
background: url(https://shawneee.com/html-templates//img/hr-11.png) repeat-x 0 0;
border-top: 22px dotted #e8450c;
border-bottom: 2px dashed #6600ff;
background: rgb(0,102,255);
background: radial-gradient(circle, rgba(0,102,255,0.4920343137254902) 0%, rgba(9,93,255,0.5088410364145659) 2%, rgba(8,94,255,0) 50%, rgba(102,0,255,0.500437675070028) 66%, rgba(255,102,0,1) 76%, rgba(255,102,0,1) 100%);
}
hr.hrstyle12 {
height: 6px;
background: url(https://shawneee.com/html-templates//img/hr-12.png) repeat-x 0 0;
border: 2px dashed #6600ff;
background-color: #ff0066;
}
hr.hrstyle13:before {
display: block;
content: "";
height: 31px;
margin-top: -31px;
border-style: solid;
border-color: #6600ff;
border-width: 5px 0 5px 0;
border-radius: 10px;
}
hr.hrstyle13 {
height: 8px;
border: 0;
box-shadow: 0 10px 10px -10px #f20cff inset;
}
hr.hrstyle14 {
border: 0;
height: 2px;
background-image: -webkit-linear-gradient(left, rgba(239,239,239,0), #ff6600, rgba(239,239,239,0));
background-image: -moz-linear-gradient(left, rgba(239,239,239,0), #ff6600, rgba(239,239,239,0));
background-image: -ms-linear-gradient(left, rgba(239,239,239,0), #ff6600, rgba(239,239,239,0));
background-image: -o-linear-gradient(left, rgba(239,239,239,0), #ff6600, rgba(239,239,239,0));
}
hr.hrstyle15 {
border-bottom: 4px dotted #6600ff;
text-align: center;
height: 36px;
background: transparent;
}
hr.hrstyle15:before {
font-weight: 900;
content: url(https://shawneee.com/html-templates//img/unicorn-solid.svg);
width: 40px;
height: 32px;
overflow: visible;
display: inline-block;
}
hr.hrstyle16:before {
content: '\002702';
display: inline-block;
position: absolute;
top: 16px;
z-index: 20;
overflow: visible;
left: 70px;
padding: 0 3px;
background: transparent;
color: #ff6600;
font-size: 28px;
}
hr.hrstyle16 {
height: 30px;
position: relative;
line-height: 1;
margin-top: -25px;
border-bottom: 1px dashed #0066ff;
padding-top: 10px;
background: transparent;
}
/*
hr.hrstyle16:after {
content: '\002702';
display: inline-block;
position: relative;
top: 0px;
left: 40px;
padding: 0 3px;
background: transparent;
color: #3333333;
font-size: 28px;
}
*/
hr.hrstyle17 {
border-top: 1px solid #6600ff;
text-align: center;
height: 20px;
background: transparent;
}
hr.hrstyle17:after {
content: '§';
display: inline-block;
position: relative;
top: -12px;
padding: 0 0px;
background: transparent;
color: #6600ff;
font-size: 32px;
font-weight: 500;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(96deg);
}
hr.hrstyle18 {
height: 30px;
border-style: dashed double none;
border-color: #66ff00;
border-width: 2px 1px 1px 1px;
border-radius: 20px;
background: radial-gradient(#ff6600 5%, #6600ff 20%, #efefef 40%, #0066ff 50%, #efefef 80%,#6600ff 81%, #ff6600 95%);
}
hr.hrstyle18:before {
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: #ff6600;
border-width: 0 0 5px 0;
border-radius: 20px;
}
hr.hrstyle19 {
background: transparent;
height: 4px;
background-image: linear-gradient(90deg, transparent, transparent 50%, #efefef 50%, #efefef 100%), linear-gradient(90deg, #69d2e7, #a7dbd8, #e0e4cc, #f38630, #fa6900);
background-size: 20px 3px, 100% 3px;
border: none; }
/*//// hand build floats ////////////////*/
.LandingPageList { font-size: 75%; line-height: 1.15; }
.LandingPageList h3 { font-size: 1.80em; line-height: 1.25; }
.HalfPageLeft {float: left; width: 48%; margin-right: 2%; display: block;}
.HalfPageRight { float: left; width: 50%; display: block; }
.clsBreakLongWorks { word-wrap: break-word; }
/* simple 1/4 1/3 1/2 */
.clsWrap { width: 100%; display: inline-block; }
.clsWrapPad { width: 100%; display: inline-block; padding: 1em; box-sizing: border-box; }
.cls10 { width: 10%; float: left; }
.cls20 { width: 20%; float: left; }
.cls25 { width: 25%; float: left; }
.cls33 { width: 33%; float: left; }
.cls40 { width: 40%; float: left; }
.cls50 { width: 50%; float: left; }
.cls60 { width: 60%; float: left; }
.cls66 { width: 66%; float: left; }
.cls75 { width: 75%; float: left; }
.cls100 { width: 100%; float: left; }
.cls10padR { width: 9%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 1% 0 0; }
.cls20padR { width: 19%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 1% 0 0; }
.cls25padR { width: 23%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 2% 0 0; }
.cls33padR { width: 31%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 2% 0 0; }
.cls39padR { width: 37%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 2% 0 0; }
.cls40padR { width: 38%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 2% 0 0; }
.cls50padR { width: 48%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 2% 0 0; }
.cls60padR { width: 58%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 2% 0 0; }
.cls66padR { width: 64%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 2% 0 0; }
.cls75padR { width: 73%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 2% 0 0; }
/* ////////////////////////////////////////////////////////////////////////////////////////////
////////// Hand Entered BELOW 768 SETTINGS ///////////////////////////////////*/
@media screen and (max-width: 768px) {
.cls10 { width: 100%; float: left; }
.cls20 { width: 100%; float: left; }
.cls25 { width: 100%; float: left; }
.cls33 { width: 100%; float: left; }
.cls40 { width: 100%; float: left; }
.cls50 { width: 100%; float: left; }
.cls60 { width: 100%; float: left; }
.cls66 { width: 100%; float: left; }
.cls75 { width: 100%; float: left; }
.cls10padR { width: 100%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 0 0 0; }
.cls20padR { width: 100%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 0 0 0; }
.cls25padR { width: 100%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 0 0 0; }
.cls33padR { width: 100%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 0 0 0; }
.cls39padR { width: 100%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 0 0 0; }
.cls40padR { width: 100%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 0 0 0; }
.cls50padR { width: 100%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 0 0 0; }
.cls60padR { width: 100%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 0 0 0; }
.cls66padR { width: 100%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 0 0 0; }
.cls75padR { width: 100%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 0 0 0; }
}
/* special features */
.AlertFeatures { padding: 20px; background: rgba(200,200,200,.35); border: 1px solid #ff6600; border-radius: 6px 6px 6px 6px; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px 6px 6px 6px; }
@media (max-width: 1350px){
.NotesIcon {
position: absolute;
z-index: 100;
max-width: 100px;
right: 13%;
top: 2%;
padding: 5px;
filter: drop-shadow(10px 5px 4px rgba(51,51,51,.65));}
}
.NotesIcon {
position: absolute;
z-index: 100;
max-width: 100px;
right: 16%;
top: 2.5%;
padding: 5px;
filter: drop-shadow(10px 5px 4px rgba(51,51,51,.65));
}
/*
font-family: proxima-nova, sans-serif;
font-weight: 300;
font-style: normal;
font-family: proxima-nova, sans-serif;
font-weight: 400;
font-style: normal;
font-family: proxima-nova, sans-serif;
font-weight: 400;
font-style: italic;
font-family: proxima-nova, sans-serif;
font-weight: 600;
font-style: normal;
font-family: proxima-nova, sans-serif;
font-weight: 700;
font-style: normal;
font-family: proxima-nova, sans-serif;
font-weight: 700;
font-style: italic;
font-family: grad, serif;
font-weight: 400;
font-style: normal;
font-family: grad, serif;
font-weight: 400;
font-style: italic;
font-family: grad, serif;
font-weight: 700;
font-style: normal;
*/
/*//// gridzy min ////*/
.gridzy{display:block;will-change:width,height}.gridzy>.gridzyItem{will-change:left,top,width,height,opacity,transform}.gridzy>:not(.gridzyItem){visibility:hidden}.gridzyItemHidden{display:none}.gridzy .gridzyImage{vertical-align:middle;width:100%;height:100%}.gridzyAnimated{height:0;transition:height .4s}.gridzyAnimated .gridzyItem{transition:all .4s}.gridzyAnimated .gridzyItemInitialToVisible{animation-name:gridzyItemInitialToVisibleAnimation;animation-fill-mode:forwards;animation-duration:.4s}@keyframes gridzyItemInitialToVisibleAnimation{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}.gridzyAnimated .gridzyItemHiddenToVisible{animation-name:gridzyItemHiddenToVisibleAnimation;animation-fill-mode:forwards;animation-duration:.4s}@keyframes gridzyItemHiddenToVisibleAnimation{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}.gridzyAnimated .gridzyItemVisibleToHidden{animation-name:gridzyItemVisibleToHiddenAnimation;animation-fill-mode:forwards;animation-duration:.4s}@keyframes gridzyItemVisibleToHiddenAnimation{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9)}}.gridzyItem{opacity:1}.gridzyItemLoading{opacity:.3;box-shadow:inset 0 0 15px -5px #666}.gridzyItemLoading::before{content:" ";position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;padding:0;z-index:1;opacity:1;background:0 0;border:2px solid;border-color:transparent transparent #000 #000;border-radius:50%;outline:0;animation-duration:1s;animation-name:gridzyProgressIndicator;animation-iteration-count:infinite;animation-timing-function:linear}@keyframes gridzyProgressIndicator{0%{transform:rotate(0);left:50%}100%{transform:rotate(360deg);left:50%}}
/*/////// blank skin ///////*/
.gridzySkinBlank>.gridzyItem{overflow:hidden}.gridzySkinBlank .gridzyCaption{margin:0;padding:.5em;opacity:0;position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;box-sizing:border-box;transition:opacity .5s;overflow:auto;background:rgba(0,0,0,.7);color:#fff;display:flex;justify-content:center;align-items:center;text-align:center}.gridzySkinBlank>.gridzyItem:hover .gridzyCaption{opacity:1}
/*///// blur skin ////*/
/*//////// requires gridzy/gridzySkinBlur/script.min.js //////*/
.gridzySkinBlur>.gridzyItem,.gridzySkinBlurLight>.gridzyItem{overflow:hidden;position:relative}.gridzySkinBlur .gridzyImage,.gridzySkinBlurLight .gridzyImage{position:relative;vertical-align:middle;width:100%;height:100%}.gridzySkinBlur .gridzyImageBlur,.gridzySkinBlurLight .gridzyImageBlur{position:absolute;left:0;top:0;vertical-align:middle;width:100%;height:100%;filter:blur(4px);transition:opacity .6s;opacity:0}.gridzySkinBlur>.gridzyItem:hover .gridzyImageBlur,.gridzySkinBlurLight>.gridzyItem:hover .gridzyImageBlur{opacity:1}.gridzySkinBlur .gridzyCaption,.gridzySkinBlurLight .gridzyCaption{margin:0;padding:1em;position:absolute;z-index:1;bottom:0;left:0;width:100%;height:100%;overflow:auto;display:flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box;transition:opacity .6s;opacity:0}.gridzySkinBlur>.gridzyItem:hover .gridzyCaption,.gridzySkinBlurLight>.gridzyItem:hover .gridzyCaption{opacity:1}.gridzySkinBlur .gridzyCaption{background:rgba(0,0,0,.3);color:#fff;text-shadow:0 0 10px #000}.gridzySkinBlurLight .gridzyCaption{background:rgba(255,255,255,.3);color:#000;text-shadow:0 0 10px #fff}
/*///// card skin ////*/
/*//////// requires gridzy/gridzySkinCard/script.min.js //////*/
.gridzySkinCard>.gridzyItem,.gridzySkinCardLight>.gridzyItem{position:relative;perspective:900px}.gridzySkinCard .gridzyImage,.gridzySkinCardLight .gridzyImage{position:relative;vertical-align:middle;width:100%;height:100%;animation-duration:.4s;animation-fill-mode:both}.gridzySkinCard>.gridzyItemReady .gridzyImage,.gridzySkinCardLight>.gridzyItemReady .gridzyImage{position:absolute}.gridzySkinCard .gridzyCaption,.gridzySkinCardLight .gridzyCaption{position:absolute;left:0;top:0;width:100%;height:100%;transform:rotate3d(0,1,0,90deg);overflow:hidden;margin:0;display:flex;justify-content:center;align-items:center;text-align:center;animation-duration:.4s;animation-fill-mode:both;opacity:0}.gridzySkinCard .gridzyCaption{background:#000;color:#fff}.gridzySkinCardLight .gridzyCaption{background:#fff;color:#000}.gridzySkinCard>.gridzyItem.enterTop .gridzyImage,.gridzySkinCardLight>.gridzyItem.enterTop .gridzyImage{animation-name:flipBottomHide}.gridzySkinCard>.gridzyItem.enterTop .gridzyCaption,.gridzySkinCardLight>.gridzyItem.enterTop .gridzyCaption{animation-name:flipBottomShow}.gridzySkinCard>.gridzyItem.enterRight .gridzyImage,.gridzySkinCardLight>.gridzyItem.enterRight .gridzyImage{animation-name:flipLeftHide}.gridzySkinCard>.gridzyItem.enterRight .gridzyCaption,.gridzySkinCardLight>.gridzyItem.enterRight .gridzyCaption{animation-name:flipLeftShow}.gridzySkinCard>.gridzyItem.enterBottom .gridzyImage,.gridzySkinCardLight>.gridzyItem.enterBottom .gridzyImage{animation-name:flipTopHide}.gridzySkinCard>.gridzyItem.enterBottom .gridzyCaption,.gridzySkinCardLight>.gridzyItem.enterBottom .gridzyCaption{animation-name:flipTopShow}.gridzySkinCard>.gridzyItem.enterLeft .gridzyImage,.gridzySkinCardLight>.gridzyItem.enterLeft .gridzyImage{animation-name:flipRightHide}.gridzySkinCard>.gridzyItem.enterLeft .gridzyCaption,.gridzySkinCardLight>.gridzyItem.enterLeft .gridzyCaption{animation-name:flipRightShow}.gridzySkinCard>.gridzyItem.leaveTop .gridzyImage,.gridzySkinCardLight>.gridzyItem.leaveTop .gridzyImage{animation-name:flipTopShow}.gridzySkinCard>.gridzyItem.leaveTop .gridzyCaption,.gridzySkinCardLight>.gridzyItem.leaveTop .gridzyCaption{animation-name:flipTopHide}.gridzySkinCard>.gridzyItem.leaveRight .gridzyImage,.gridzySkinCardLight>.gridzyItem.leaveRight .gridzyImage{animation-name:flipRightShow}.gridzySkinCard>.gridzyItem.leaveRight .gridzyCaption,.gridzySkinCardLight>.gridzyItem.leaveRight .gridzyCaption{animation-name:flipRightHide}.gridzySkinCard>.gridzyItem.leaveBottom .gridzyImage,.gridzySkinCardLight>.gridzyItem.leaveBottom .gridzyImage{animation-name:flipBottomShow}.gridzySkinCard>.gridzyItem.leaveBottom .gridzyCaption,.gridzySkinCardLight>.gridzyItem.leaveBottom .gridzyCaption{animation-name:flipBottomHide}.gridzySkinCard>.gridzyItem.leaveLeft .gridzyImage,.gridzySkinCardLight>.gridzyItem.leaveLeft .gridzyImage{animation-name:flipLeftShow}.gridzySkinCard>.gridzyItem.leaveLeft .gridzyCaption,.gridzySkinCardLight>.gridzyItem.leaveLeft .gridzyCaption{animation-name:flipLeftHide}@keyframes flipBottomHide{0%{transform:rotateX(0);opacity:1}28%{opacity:1}29%{opacity:0}100%{transform:rotateX(-180deg);opacity:0}}@keyframes flipBottomShow{0%{transform:rotateX(180deg);opacity:0}28%{opacity:0}29%{opacity:1}100%{transform:rotateX(0);opacity:1}}@keyframes flipTopHide{0%{transform:rotateX(0);opacity:1}28%{opacity:1}29%{opacity:0}100%{transform:rotateX(180deg);opacity:0}}@keyframes flipTopShow{0%{transform:rotateX(-180deg);opacity:0}28%{opacity:0}29%{opacity:1}100%{transform:rotateX(0);opacity:1}}@keyframes flipLeftHide{0%{transform:rotateY(0);opacity:1}28%{opacity:1}29%{opacity:0}100%{transform:rotateY(-180deg);opacity:0}}@keyframes flipLeftShow{0%{transform:rotateY(180deg);opacity:0}28%{opacity:0}29%{opacity:1}100%{transform:rotateY(0);opacity:1}}@keyframes flipRightHide{0%{transform:rotateY(0);opacity:1}28%{opacity:1}29%{opacity:0}100%{transform:rotateY(180deg);opacity:0}}@keyframes flipRightShow{0%{transform:rotateY(-180deg);opacity:0}28%{opacity:0}29%{opacity:1}100%{transform:rotateY(0);opacity:1}}
/*///// classic skin ////*/
.gridzySkinClassic>.gridzyItem,.gridzySkinClassicLight>.gridzyItem{overflow:hidden}.gridzySkinClassic .gridzyImage,.gridzySkinClassicLight .gridzyImage{position:relative;vertical-align:middle;width:100%;height:100%}.gridzySkinClassic .gridzyCaption,.gridzySkinClassicLight .gridzyCaption{margin:0;padding:1em;position:absolute;z-index:1;bottom:0;left:0;width:100%;max-height:100%;overflow:auto;box-sizing:border-box;transition:transform .5s;transform:translateY(100%)}.gridzySkinClassic>.gridzyItem:hover .gridzyCaption,.gridzySkinClassicLight>.gridzyItem:hover .gridzyCaption{transform:translateY(0)}.gridzySkinClassic .gridzyCaption{background:rgba(0,0,0,.7);color:#fff}.gridzySkinClassicLight .gridzyCaption{background:rgba(255,255,255,.7);color:#000}
/*///// full overlay skin ////*/
.gridzySkinFullOverlay>.gridzyItem,.gridzySkinFullOverlayLight>.gridzyItem{overflow:hidden}.gridzySkinFullOverlay .gridzyImage,.gridzySkinFullOverlayLight .gridzyImage{vertical-align:middle;width:100%;height:100%}.gridzySkinFullOverlay .gridzyCaption,.gridzySkinFullOverlayLight .gridzyCaption{margin:0;padding:.5em;opacity:0;display:flex;justify-content:center;align-items:center;text-align:center;position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;box-sizing:border-box;transition:opacity .5s;overflow:auto}.gridzySkinFullOverlay .gridzyCaption{background:rgba(0,0,0,.7);color:#fff}.gridzySkinFullOverlayLight .gridzyCaption{background:rgba(255,255,255,.7);color:#000}.gridzySkinFullOverlay>.gridzyItem:hover .gridzyCaption,.gridzySkinFullOverlayLight>.gridzyItem:hover .gridzyCaption{opacity:1}
/*///// lift skin ////*/
.gridzySkinLift>.gridzyItem,.gridzySkinLiftLight>.gridzyItem{position:relative;animation-name:gridzySkinLiftOnMouseOut;animation-duration:.4s}@keyframes gridzySkinLiftOnMouseOut{0%,100%{z-index:1}}.gridzySkinLift>.gridzyItem:hover,.gridzySkinLiftLight>.gridzyItem:hover{z-index:2;animation-name:none}.gridzySkinLift>.gridzyItem::before,.gridzySkinLiftLight>.gridzyItem::before{content:" ";position:absolute;transition:transform .4s,box-shadow .4s;box-shadow:0 0 0 #000;left:1px;top:1px;width:calc(100% - 2px);height:calc(100% - 2px);transform:scale(1)}.gridzySkinLift>.gridzyItemInitializing::before,.gridzySkinLiftLight>.gridzyItemInitializing::before{box-shadow:0 0 0 -1px #000}.gridzySkinLift>.gridzyItem:hover::before,.gridzySkinLiftLight>.gridzyItem:hover::before{box-shadow:5px 5px 20px #000;transform:scale(1.05)}.gridzySkinLift .gridzyImage,.gridzySkinLiftLight .gridzyImage{vertical-align:middle;width:100%;height:100%;transition:transform .4s}.gridzySkinLift>.gridzyItem:hover .gridzyImage,.gridzySkinLiftLight>.gridzyItem:hover .gridzyImage{transform:scale(1.05)}.gridzySkinLift .gridzyCaption,.gridzySkinLiftLight .gridzyCaption{margin:0;padding:2em 1em 1em;position:absolute;z-index:1;bottom:0;left:0;width:100%;max-height:100%;overflow:auto;box-sizing:border-box;opacity:0;transition:transform .4s,opacity .4s}.gridzySkinLift>.gridzyItem:hover .gridzyCaption,.gridzySkinLiftLight>.gridzyItem:hover .gridzyCaption{opacity:1;transform:scale(1.05)}.gridzySkinLift .gridzyCaption{background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.3) 2em,rgba(0,0,0,.3) calc(100% - 1em),rgba(0,0,0,0) 100%);color:#fff;text-shadow:0 0 10px #000,0 0 20px #000}.gridzySkinLiftLight .gridzyCaption{background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.3) 2em);color:#000;text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff}
/*///// magnifiier skin ////*/
.gridzySkinMagnifier .gridzyCaption,.gridzySkinMagnifier>.gridzyItemLoading::after,.gridzySkinMagnifierLight .gridzyCaption,.gridzySkinMagnifierLight>.gridzyItemLoading::after{display:none}.gridzySkinMagnifier>.gridzyItem,.gridzySkinMagnifierLight>.gridzyItem{overflow:hidden}.gridzySkinMagnifier .gridzyImage,.gridzySkinMagnifierLight .gridzyImage{vertical-align:middle;width:100%;height:100%}.gridzySkinMagnifier>.gridzyItem::after,.gridzySkinMagnifierLight>.gridzyItem::after{content:" ";position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity .5s;z-index:2;background:center center no-repeat}.gridzySkinMagnifier>.gridzyItem::after{background-color:rgba(0,0,0,.7);background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30px' height='30px'%3E%3Cstyle type='text/css'%3Esvg%7B color: rgb(255, 255, 255) %7Dcircle%7Bfill:transparent;stroke:currentColor;stroke-width:3;%7Drect%7Bfill:currentColor;%7D%3C/style%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Crect x='7' y='11' width='10' height='2'/%3E%3Crect x='11' y='7' width='2' height='10'/%3E%3Crect x='22.5' y='10' width='13' height='4' transform='rotate(45,12,12)' rx='2' ry='2'/%3E%3C/svg%3E")}.gridzySkinMagnifierLight>.gridzyItem::after{background-color:rgba(255,255,255,.7);background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30px' height='30px'%3E%3Cstyle type='text/css'%3Esvg%7B color: rgb(0, 0, 0) %7Dcircle%7Bfill:transparent;stroke:currentColor;stroke-width:3;%7Drect%7Bfill:currentColor;%7D%3C/style%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Crect x='7' y='11' width='10' height='2'/%3E%3Crect x='11' y='7' width='2' height='10'/%3E%3Crect x='22.5' y='10' width='13' height='4' transform='rotate(45,12,12)' rx='2' ry='2'/%3E%3C/svg%3E")}.gridzySkinMagnifier>.gridzyItem:hover::after,.gridzySkinMagnifierLight>.gridzyItem:hover::after{opacity:1}
pre {
white-space: pre-wrap;
overflow: auto;
font-family: 'Courier New', Courier, monospace;
color:#333333;
width: 100%;
background: #efefef;
padding: 10px; }
.CodeDisplayTextArea { padding: 20px; }
</style>
<link rel="stylesheet" href="https://shawneee.com/html-templates/css/prism.css">
<script src="https://shawneee.com/html-templates/js/prism.js"></script>
</head>
<body>
<header>
<hgroup>
<div class="MainHeader"><img src="https://shawneee.com/html-templates/img/simple-useful-tools.svg" width="100%" height="auto"></div>
</hgroup>
</header>
<div class="clsWrap DocuMainSorter">
<div class="clsWrapPad">
<nav>
<div id="myFilterControlsDocuStatic">
<button class="button_spiffy" value="*">all ↓ </button>
<button class="button_spiffy" value=".generic">generic ⇣ </button>
<button class="button_spiffy" value=".simple">simple ⇓ </button>
<button class="button_spiffy" value=".basic">basic ↡ </button>
</div>
</nav>
<br>
<div class="gridzy" data-gridzy-spaceBetween="60" data-gridzy-layout="waterfall"
data-gridzy-filterControls="#myFilterControlsDocuStatic button">
<!-- item -->
<figure class="generic">
<a href="https://shawneee.com/html-templates/generic-htmltemplate_cssinc.html" target="_blank"><img
class="gridzyImage" src="https://shawneee.com/html-templates/img/generic.png" alt="generic" /></a>
<figcaption class="gridzyCaption">
<div class="mrkr">GENERIC:</div>
<div class="info">
<div class="tinydisplay"><a href="https://shawneee.com/html-templates/generic-htmltemplate.html" target="_blank">HTML - internal css
<div class="doctype"></div></a></div> <br><div class="tinydisplay"><a
href="https://shawneee.com/html-templates/generic-htmltemplate_cssinc.html" target="_blank">HTML -
external css<div class="doctype"></div></a></div>
</div>
</figcaption>
</figure>
<!-- item -->
<figure class="simple">
<a href="https://shawneee.com/html-templates/simple-htmltemplate_cssinc.html" target="_blank"><img
class="gridzyImage" src="https://shawneee.com/html-templates/img/simple.png" alt="simple" />
</a>
<figcaption class="gridzyCaption">
<div class="mrkr">SIMPLE:</div>
<div class="info">
<div class="tinydisplay"><a href="https://shawneee.com/html-templates/simple-htmltemplate.html" target="_blank">HTML - internal css
<div class="doctype"></div></a></div><br> <div class="tinydisplay"><a
href="https://shawneee.com/html-templates/simple-htmltemplate_cssinc.html" target="_blank">HTML - external
css<div class="doctype"></div></a></div>
</div>
</figcaption>
</figure>
<!-- item -->
<figure class="basic">
<a href="https://shawneee.com/html-templates/basic-htmltemplate_cssinc.html" target="_blank"><img
class="gridzyImage" src="https://shawneee.com/html-templates/img/basic.png" alt="basic" /></a>
<figcaption class="gridzyCaption">
<div class="mrkr">BASIC:</div>
<div class="info">
<div class="tinydisplay"><a href="https://shawneee.com/html-templates/basic-htmltemplate.html" target="_blank">HTML - internal css
<div class="doctype"></div></a></div><br> <div class="tinydisplay"><a
href="https://shawneee.com/html-templates/basic-htmltemplate_cssinc.html" target="_blank">HTML - external
css<div class="doctype"></div></a></div>
</div>
</figcaption>
</figure>
</div><!-- //Gridzy -->
</div><!-- //clsWrapPad -->
</div><!-- //clsWrap -->
<div class="clsWrap">
<div class="clsWrapPad">
<br><br><br><br>
<hr class="hrstyle5">
</div><!-- //clsWrapPad -->
</div><!-- //clsWrap -->
<div class="clsWrap">
<div class="clsWrapPad">
<section>
<article>
<header>
<h2>Responsive Font Sizing Tests</h2>
</header>
<div>
<p>
Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to
emphasise
design elements over content. It's also called placeholder (or filler) text. It's a <a href="#">convenient
tool</a> for mock-ups. It
helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem
ipsum is
mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been
changed by
addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or
comprehensible
<blockquote>
<p>
text copied from a newspaper or the internet. The are likely to focus on the text, disregarding the layout
and its elements.
</p>
</blockquote>
Latin anymore. While lorem ipsum's still resembles classical Latin, it actually has no meaning whatsoever. As
Cicero's
text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to
mimic the
typographic appearence of European languages, as are digraphs not to be found in the original. Lorem ipsum is a
pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise
design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for
mock-ups. It
helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum
is
mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been
changed by
addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or
comprehensible
</p>
<p><img src="https://shawneee.com/html-templates/img/fontsize_checker.png" width="1000" height="150"></p>
<p>
<div id="arrowAnim">
<div class="arrowSliding">
<div class="arrow"></div>
</div>
<div class="arrowSliding delay1">
<div class="arrow"></div>
</div>
<div class="arrowSliding delay2">
<div class="arrow"></div>
</div>
<div class="arrowSliding delay3">
<div class="arrow"></div>
</div>
</div>
In a professional context it often happens that private or corporate clients corder a publication to be made
and
presented with the actual content still not being ready. Think of a news blog that's filled with content
hourly on the
day of going live. However, reviewers tend to be distracted by comprehensible content, say, a random text
copied from a
newspaper or the internet. The are likely to focus on the text, disregarding the layout and its elements.
Besides,
random text risks to be unintendedly humorous or offensive, an unacceptable risk in corporate environments.
Lorem ipsum
and its many variants have been employed since the early 1960ies, and quite likely since the sixteenth
century.
</p>
</div>
<h1>Header Text Here</h1>
<h2>Header Text Here</h2>
<h3>Header Text Here</h3>
<h4>Header Text Here</h4>
<h5>Header Text Here</h5>
<h6>Header Text Here</h6>
</section>
</article>
</div><!-- //clsWrapPad -->
</div><!-- //clsWrap -->
<div class="clsWrap">
<div class="clsWrapPad">
<hr class="hrstyle2">
</div><!-- //clsWrapPad -->
</div><!-- //clsWrap -->
<div class="clsWrap">
<div class="clsWrapPad">
<section>
<article>
<header>
<h2>Gridzy Implementation Demo</h2>
</header>
<ul><li><a href="/gridzy/additional-skins-package/preview.html" target="_blank">Additional Gridzy Templates</a>
<li><a href="https://ehtmlu.com/blog/gridzy-js-2/?version=2.2.1" target="_blank">https://ehtmlu.com/blog/gridzy-js-2/?version=2.2.1 - Gridzy Info</a>
</ul>
<br><br>
<h3>Basic Usage:</h3>
<div class="gridzy">
<img src="/img/forms_icon.svg" alt="a random image" />
<img src="/img/javascript-notes.svg" alt="another random image" />
<img src="/img/local-8000.png" alt="yet another random image" />
<img src="/img/search-replace_icon.svg" alt="a random image again" />
<img src="/img/ExtScratch.svg" alt="one last random image" />
</div>
<h3>With Custom Configuration: Height - 400 / space between - 100</h3>
<div class="gridzy" data-gridzy-spaceBetween="100" data-gridzy-desiredHeight="400">
<img src="/img/SPIFextreme3-800px.png" alt="a random image" />
<img src="/img/website_icon.svg" alt="another random image" />
<img src="/img/colorize.svg" alt="yet another random image" />
<img src="/img/agenda.svg" alt="a random image again" />
<img src="/img/search-gallery_icon.svg" alt="one last random image" />
</div>
<h3>Semantic HTML: Using unordered list </h3>
<!--<style>
/* consider to reset browser default styles */
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>-->
<ul class="gridzy">
<li>
<img class="gridzyImage" src="/img/reference-nogradient_icon.svg" alt="a random image" />
</li>
<li>
<img class="gridzyImage" src="/img/google_cloud_frog_user.png" alt="another random image" />
</li>
<li>
<img class="gridzyImage" src="/img/credentials_icon.png" alt="yet another random image" />
</li>
<li>
<img class="gridzyImage" src="/img/spiffy_timemachine_icon.png" alt="a random image again" />
</li>
<li>
<img class="gridzyImage" src="/img/database_icon.svg" alt="one last random image" />
</li>
</ul>
<h3>Captions & Skins:</h3>
<!--<style>
/* consider to reset browser default styles */
figure {
margin: 0;
padding: 0;
}
</style>-->
<div class="gridzy gridzySkinClassic">
<figure>
<img class="gridzyImage" src="/img/gitignore_icon.svg" alt="a random image" />
<figcaption class="gridzyCaption">a caption text</figcaption>
</figure>
<figure>
<img class="gridzyImage" src="/img/neumorphic-fade-update_icon.png" alt="another random image" />
<figcaption class="gridzyCaption">another caption text</figcaption>
</figure>
<figure>
<img class="gridzyImage" src="/img/spiffy-a-gogo_icon.svg" alt="yet another random image" />
<figcaption class="gridzyCaption">yet another caption text</figcaption>
</figure>
<figure>
<img class="gridzyImage" src="/img/complaint-form_icon.svg" alt="a random image again" />
<figcaption class="gridzyCaption">a caption text again</figcaption>
</figure>
<figure>
<img class="gridzyImage" src="/img/copy-site-to-local_icon.svg" alt="one last random image" />
<figcaption class="gridzyCaption">one last caption text</figcaption>
</figure>
</div>
<h3>Optimize Loading: control load order</h3>
<div class="gridzy">
<img data-gridzylazysrc="/img/debugger_icon.svg" width="640" height="480" alt="a random image" />
<img data-gridzylazysrc="/img/figma-proto-typing.svg" width="640" height="480"
alt="another random image" />
<img data-gridzylazysrc="/img/system-fonts_icon.svg" width="640" height="480"
alt="yet another random image" />
<img data-gridzylazysrc="/img/debuggin_icon.svg" width="640" height="480"
alt="a random image again" />
<img data-gridzylazysrc="/img/herd-kittens.svg" width="640" height="480"
alt="one last random image" />
</div>
<h3>Filters: simple to implement sorting like https://isotope.metafizzy.co/</h3>
<div id="myFilterControls">
<button value="*">All</button>
<button value=".animals">Animals</button>
<button value=".tools">Tools</button>
<button value=".beginp">Begins w/ P</button>
</div>
<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
<img class="animals" src="/img/desktop_icon.svg" alt="a random animal image" />
<img class="tools" src="/img/developer-tools_icon.svg" alt="a random tool image" />
<img class="beginp" src="/img/publish_icon.png" alt="a random p image" />
<img class="animals" src="/img/developer-icon.svg" alt="another random animal image" />
<img class="tools" src="img/external_storage_icon.svg" alt="another random tool image" />
<img class="beginp" src="/img/posts_icon.svg" alt="another random p image" />
<img class="animals" src="/img/shawneee-froggie_icon-frog-only.svg" alt="yet another random animal image" />
</div>
</article>
</section>
</div><!-- //clsWrapPad -->
</div><!-- //clsWrap -->
<!--div class="clsWrap">
<div class="clsWrapPad">
<hr class="hrstyle3">-->
<!--/div>-->
<!-- //clsWrapPad -->
<!--/div-->
<!-- //clsWrap -->
<!--
<div class="clsWrap">
<div class="clsWrapPad">
<h2>JSVideo Embed Example</h2>
<div style="overflow:hidden; padding-bottom:56.25%; position:relative;height:0;"><iframe
style="left:0; top:0; height:100%; width:100%; position:absolute;" src="https://nakedsword.com/nsplay/nsplay-video1"
width="640" height="360" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
-->
<div class="clsWrap">
<div class="clsWrapPad">
<hr class="hrstyle4">
</div><!-- //clsWrapPad -->
</div><!-- //clsWrap -->
<div class="clsWrap">
<div class="clsWrapPad">
<div class="tinydisplay">hrstyle1</div>
<hr class="hrstyle1">
<br>
<div class="tinydisplay">hrstyle2</div>
<hr class="hrstyle2">
<br>
<div class="tinydisplay">hrstyle3</div>
<hr class="hrstyle3">
<br>
<div class="tinydisplay">hrstyle4</div>
<hr class="hrstyle4">
<br>
<div class="tinydisplay">hrstyle5</div>
<hr class="hrstyle5">
<br>
<div class="tinydisplay">hrstyle6</div>
<hr class="hrstyle6">
<br>
<div class="tinydisplay">hrstyle7</div>
<hr class="hrstyle7">
<br>
<div class="tinydisplay">hrstyle8</div>
<hr class="hrstyle8">
<br>
<div class="tinydisplay">hrstyle9</div>
<hr class="hrstyle9">
<br>
<div class="tinydisplay">hrstyle10</div>
<hr class="hrstyle10">
<br>
<div class="tinydisplay">hrstyle11</div>
<hr class="hrstyle11">
<br>
<div class="tinydisplay">hrstyle12</div>
<hr class="hrstyle12">
<br>
<div class="tinydisplay">hrstyle13</div>
<hr class="hrstyle13">
<br>
<div class="tinydisplay">hrstyle14</div>
<hr class="hrstyle14">
<br>
<div class="tinydisplay">hrstyle15</div>
<hr class="hrstyle15">
<br>
<div class="tinydisplay">hrstyle16</div>
<hr class="hrstyle16">
<br>
<div class="tinydisplay">hrstyle17</div>
<hr class="hrstyle17">
<br>
<div class="tinydisplay">hrstyle18</div>
<hr class="hrstyle18">
<br>
<div class="tinydisplay">hrstyle19</div>
<hr class="hrstyle19">
<br>
</div><!-- //clsWrapPad -->
</div><!-- //clsWrap -->
<div class="clsWrap">
<div class="clsWrapPad">
<hr class="hrstyle5">
</div><!-- //clsWrapPad -->
</div><!-- //clsWrap -->
<div class="clsWrap">
<div class="clsWrapPad">
<!-- css to use -->
<pre>
<code class="language-javascript">
<hr class="hrstyle1">
<hr class="hrstyle2">
<hr class="hrstyle3">
<hr class="hrstyle4">
<hr class="hrstyle5">
<hr class="hrstyle6">
<hr class="hrstyle7">
<hr class="hrstyle8">
<hr class="hrstyle9">
<hr class="hrstyle10">
<hr class="hrstyle11">
<hr class="hrstyle12">
<hr class="hrstyle13">
<hr class="hrstyle14">
<hr class="hrstyle15">
<hr class="hrstyle16">
<hr class="hrstyle17">
<hr class="hrstyle18">
<div class="clsWrap"></div>
<div class="clsWrapPad"></div>
breadpoint to 100% @media screen and (max-width: 768px)
<div class="HalfPageLeft"></div>
<div class="HalfPageRight"></div>
<div class="cls10"></div>
<div class="cls20"></div>
<div class="cls25"></div>
<div class="cls33"></div>
<div class="cls40"></div>
<div class="cls50"></div>
<div class="cls60"></div>
<div class="cls66"></div>
<div class="cls75"></div>
<div class="cls10padR"></div>
<div class="cls20padR"></div>
<div class="cls25padR"></div>
<div class="cls33padR"></div>
<div class="cls40padR"></div>
<div class="cls50padR"></div>
<div class="cls60padR"></div>
<div class="cls66padR"></div>
<div class="cls75padR"></div>
</code>
</pre>
<!-- // css to use -->
</div><!-- //clsWrapPad -->
</div><!-- //clsWrap -->
<div class="clsWrap">
<div class="clsWrapPad">
<hr class="hrstyle17">
</div><!-- //clsWrapPad -->
</div><!-- //clsWrap -->
<footer>
<div class="clsWrap">
<div class="clsWrapPad">
</div><!-- //clsWrapPad -->
</div><!-- //clsWrap -->
</footer>
<!-- Gridzy JS -->
<script src="https://shawneee.com/html-templates/js/gridzy.min.js"></script>
<!-- <script src="https://shawneee.com/html-templates/js/gridzy.js"></script> -->
<script src="https://shawneee.com/html-templates/js/gridzySkinBlur/script.min.js"></script>
<script src="https://shawneee.com/html-templates/js/gridzySkinCard/script.min.js"></script>
<script src="https://shawneee.com/html-templates/js/gridzyLinkFilterGallery.js"></script>
<!-- multiple galleries note in file -->
</body>
</html>
