<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>simple.html.template.SPIFFYdesign•com</title>
<meta name="description" content="spiffydesign.com slick">
<meta name="author" content="smp">
<link rel="stylesheet" href="https://use.typekit.net/ybo2kox.css">
<style>
* {
box-sizing: border-box;
}
html{ font-size: 0.875em; }
body {
font-family: proxima-nova, sans-serif;
font-weight: 300;
line-height: 1.15;
letter-spacing: .5px;
}
/**
<!--
* 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;
}
.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;
}
pre {
white-space: pre-wrap;
overflow: auto;
font-family: 'Courier New', Courier, monospace;
color:#333333;
width: 100%;
background: #efefef;
padding: 10px; }
.CodeDisplayTextArea { padding: 20px; }
@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;
*/
</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>
<div class="clsWrap">
<div class="clsWrapPad">
<hr class="hrstyle18">
</div><!-- //clsWrapPad -->
</div><!-- //clsWrap -->
<div class="clsWrap">
<div class="clsWrapPad">
<h2>Responsive Font Sizing Tests</h2>
<p>
<button class="button_spiffy" value="*">basic- button_spiffy</button>
</p>
<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="/img/fontsize_checker.png" width="1000" height="150"></p>
<p>
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>
</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="hrstyle17">
</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>
</div><!-- //clsWrapPad -->
</div><!-- //clsWrap -->
</body>
</html>
