Skip to content

Instantly share code, notes, and snippets.

@markandey

markandey/htmlcsstestpage.html

Created November 22, 2019 06:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save markandey/7020f551f6938a49d61bbd4eac53e2b5 to your computer and use it in GitHub Desktop.
Save markandey/7020f551f6938a49d61bbd4eac53e2b5 to your computer and use it in GitHub Desktop.
Download ZIP
Html5 and css3 test page
Raw
htmlcsstestpage.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Test Page</title>
</head>
<body>
<div id="top" class="page" role="document">
<header role="banner">
<h1>HTML5 Test Page</h1>
<p>This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS systems and frameworks.</p>
</header>
<nav role="navigation">
<ul>
<li>
<a href="#text">Text</a>
<ul>
<li><a href="#text__headings">Headings</a></li>
<li><a href="#text__paragraphs">Paragraphs</a></li>
<li><a href="#text__blockquotes">Blockquotes</a></li>
<li><a href="#text__lists">Lists</a></li>
<li><a href="#text__hr">Horizontal rules</a></li>
<li><a href="#text__tables">Tabular data</a></li>
<li><a href="#text__code">Code</a></li>
<li><a href="#text__inline">Inline elements</a></li>
<li><a href="#text__comments">HTML Comments</a></li>
</ul>
</li>
<li>
<a href="#embedded">Embedded content</a>
<ul>
<li><a href="#embedded__images">Images</a></li>
<li><a href="#embedded__audio">Audio</a></li>
<li><a href="#embedded__video">Video</a></li>
<li><a href="#embedded__canvas">Canvas</a></li>
<li><a href="#embedded__meter">Meter</a></li>
<li><a href="#embedded__progress">Progress</a></li>
<li><a href="#embedded__svg">Inline SVG</a></li>
<li><a href="#embedded__iframe">IFrames</a></li>
</ul>
</li>
<li>
<a href="#forms">Form elements</a>
<ul>
<li><a href="#forms__input">Input fields</a></li>
<li><a href="#forms__select">Select menus</a></li>
<li><a href="#forms__checkbox">Checkboxes</a></li>
<li><a href="#forms__radio">Radio buttons</a></li>
<li><a href="#forms__textareas">Textareas</a></li>
<li><a href="#forms__html5">HTML5 inputs</a></li>
<li><a href="#forms__action">Action buttons</a></li>
</ul>
</li>
<li>
<a href="#css">CSS</a>
<ul>
<li><a href="#forms__test1">Test1</a></li>
</ul>
</li>
</ul>
</nav>
<main role="main">
<section id="text">
<header>
<h1>Text</h1>
</header>
<article id="text__headings">
<header>
<h1>Headings</h1>
</header>
<div>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div>
<footer>
<p><a href="#top">[Top]</a></p>
</footer>
</article>
<article id="text__paragraphs">
<header>
<h1>Paragraphs</h1>
</header>
<div>
<p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
</div>
<footer>
<p><a href="#top">[Top]</a></p>
</footer>
</article>
<article id="text__blockquotes">
<header>
<h1>Blockquotes</h1>
</header>
<div>
<blockquote>
<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
<cite><a href="#!">Said no one, ever.</a></cite>
</blockquote>
</div>
<footer>
<p><a href="#top">[Top]</a></p>
</footer>
</article>
<article id="text__lists">
<header>
<h1>Lists</h1>
</header>
<div>
<h3>Definition list</h3>
<dl>
<dt>Definition List Title</dt>
<dd>This is a definition list division.</dd>
</dl>
<h3>Ordered List</h3>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
<h3>Unordered List</h3>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
<footer>
<p><a href="#top">[Top]</a></p>
</footer>
</article>
<article id="text__hr">
<header>
<h1>Horizontal rules</h1>
</header>
<div>
<hr>
</div>
<footer>
<p><a href="#top">[Top]</a></p>
</footer>
</article>
<article id="text__tables">
<header>
<h1>Tabular data</h1>
</header>
<table>
<caption>Table Caption</caption>
<thead>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
<th>Table Heading 4</th>
<th>Table Heading 5</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Table Footer 1</th>
<th>Table Footer 2</th>
<th>Table Footer 3</th>
<th>Table Footer 4</th>
<th>Table Footer 5</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
</tbody>
</table>
<footer>
<p><a href="#top">[Top]</a></p>
</footer>
</article>
<article id="text__code">
<header>
<h1>Code</h1>
</header>
<div>
<p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
<p><strong>Inline code:</strong> <code>&lt;div&gt;code&lt;/div&gt;</code></p>
<p><strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp></p>
<h2>Pre-formatted text</h2>
<pre>P R E F O R M A T T E D T E X T
! " # $ % &amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ </pre>
</div>
<footer>
<p><a href="#top">[Top]</a></p>
</footer>
</article>
<article id="text__inline">
<header>
<h1>Inline elements</h1>
</header>
<div>
<p><a href="#!">This is a text link</a>.</p>
<p><strong>Strong is used to indicate strong importance.</strong></p>
<p><em>This text has added emphasis.</em></p>
<p>The <b>b element</b> is stylistically different text from normal text, without any special importance.</p>
<p>The <i>i element</i> is text that is offset from the normal text.</p>
<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.</p>
<p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>
<p><s>This text has a strikethrough</s>.</p>
<p>Superscript<sup>®</sup>.</p>
<p>Subscript for things like H<sub>2</sub>O.</p>
<p><small>This small text is small for for fine print, etc.</small></p>
<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p>
<p><cite>This is a citation.</cite></p>
<p>The <dfn>dfn element</dfn> indicates a definition.</p>
<p>The <mark>mark element</mark> indicates a highlight.</p>
<p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
<p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>
</div>
<footer>
<p><a href="#top">[Top]</a></p>
</footer>
</article>
<article id="text__comments">
<header>
<h1>HTML Comments</h1>
</header>
<div>
<p>
There is comment here: <!--This comment should not be displayed-->
</p>
<p>There is a comment spanning multiple tags and lines below here.</p>
<!--<p><a href="#!">This is a text link. But it should not be displayed in a comment</a>.</p>
<p><strong>Strong is used to indicate strong importance. But, it should not be displayed in a comment</strong></p>
<p><em>This text has added emphasis. But, it should not be displayed in a comment</em></p>-->
</div>
<footer>
<p><a href="#top">[Top]</a></p>
</footer>
</article>
</section>
<section id="embedded">
<header>
<h1>Embedded content</h1>
</header>
<article id="embedded__images">
<header>
<h2>Images</h2>
</header>
<div>
<h3>No <code>&lt;figure&gt;</code> element</h3>
<p><img src="http://placekitten.com/480/480" alt="Image alt text"></p>
<h3>Wrapped in a <code>&lt;figure&gt;</code> element, no <code>&lt;figcaption&gt;</code></h3>
<figure><img src="http://placekitten.com/420/420" alt="Image alt text"></figure>
<h3>Wrapped in a <code>&lt;figure&gt;</code> element, with a <code>&lt;figcaption&gt;</code></h3>
<figure>
<img src="http://placekitten.com/420/420" alt="Image alt text">
<figcaption>Here is a caption for this image.</figcaption>
</figure>
</div>
<footer>
<p><a href="#top">[Top]</a></p>
</footer>
</article>
<article id="embedded__audio">
<header>
<h2>Audio</h2>
</header>
<div>
<audio controls="">audio</audio>
</div>
<footer>
<p><a href="#top">[Top]</a></p>
</footer>
</article>
<article id="embedded__video">
<header>
<h2>Video</h2>
</header>
<div>
<video controls="">video</video>
</div>
<footer>
<p><a href="#top">[Top]</a></p>
</footer>
</article>
<article id="embedded__canvas">
<header>
<h2>Canvas</h2>
</header>
<div>
<canvas>canvas</canvas>
</div>
<footer>
<p><a href="#top">[Top]</a></p>
</footer>
</article>
<article id="embedded__meter">
<header>
<h2>Meter</h2>
</header>
<div><meter value="2" min="0" max="10">2 out of 10</meter></div>
<footer>
<p><a href="#top">[Top]</a></p>
</footer>
</article>
<article id="embedded__progress">
<header>
<h2>Progress</h2>
</header>
<div><progress>progress</progress></div>
<footer>
<p><a href="#top">[Top]</a></p>
</footer>
</article>
<article id="embedded__svg">
<header>
<h2>Inline SVG</h2>
</header>
<div>
<svg width="100px" height="100px">
<circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle>
</svg>
</div>
<footer>
<p><a href="#top">[Top]</a></p>
</footer>
</article>
<article id="embedded__iframe">
<header>
<h2>IFrame</h2>
</header>
<div><iframe src="index.html" height="300"></iframe></div>
<footer>
<p><a href="#top">[Top]</a></p>
</footer>
</article>
</section>
<section id="forms">
<header>
<h1>Form elements</h1>
</header>
<form>
<fieldset id="forms__input">
<legend>Input fields</legend>
<p>
<label for="input__text">Text Input</label>
<input id="input__text" type="text" placeholder="Text Input">
</p>
<p>
<label for="input__password">Password</label>
<input id="input__password" type="password" placeholder="Type your Password">
</p>
<p>
<label for="input__webaddress">Web Address</label>
<input id="input__webaddress" type="url" placeholder="http://yoursite.com">
</p>
<p>
<label for="input__emailaddress">Email Address</label>
<input id="input__emailaddress" type="email" placeholder="name@email.com">
</p>
<p>
<label for="input__phone">Phone Number</label>
<input id="input__phone" type="tel" placeholder="(999) 999-9999">
</p>
<p>
<label for="input__search">Search</label>
<input id="input__search" type="search" placeholder="Enter Search Term">
</p>
<p>
<label for="input__text2">Number Input</label>
<input id="input__text2" type="number" placeholder="Enter a Number">
</p>
<p>
<label for="input__text3" class="error">Error</label>
<input id="input__text3" class="is-error" type="text" placeholder="Text Input">
</p>
<p>
<label for="input__text4" class="valid">Valid</label>
<input id="input__text4" class="is-valid" type="text" placeholder="Text Input">
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__select">
<legend>Select menus</legend>
<p>
<label for="select">Select</label>
<select id="select">
<optgroup label="Option Group">
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</optgroup>
</select>
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__checkbox">
<legend>Checkboxes</legend>
<ul class="list list--bare">
<li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
<li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
<li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
</ul>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__radio">
<legend>Radio buttons</legend>
<ul class="list list--bare">
<li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
<li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
<li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
</ul>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__textareas">
<legend>Textareas</legend>
<p>
<label for="textarea">Textarea</label>
<textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__html5">
<legend>HTML5 inputs</legend>
<p>
<label for="ic">Color input</label>
<input type="color" id="ic" value="#000000">
</p>
<p>
<label for="in">Number input</label>
<input type="number" id="in" min="0" max="10" value="5">
</p>
<p>
<label for="ir">Range input</label>
<input type="range" id="ir" value="10">
</p>
<p>
<label for="idd">Date input</label>
<input type="date" id="idd" value="1970-01-01">
</p>
<p>
<label for="idm">Month input</label>
<input type="month" id="idm" value="1970-01">
</p>
<p>
<label for="idw">Week input</label>
<input type="week" id="idw" value="1970-W01">
</p>
<p>
<label for="idt">Datetime input</label>
<input type="datetime" id="idt" value="1970-01-01T00:00:00Z">
</p>
<p>
<label for="idtl">Datetime-local input</label>
<input type="datetime-local" id="idtl" value="1970-01-01T00:00">
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__action">
<legend>Action buttons</legend>
<p>
<input type="submit" value="<input type=submit>">
<input type="button" value="<input type=button>">
<input type="reset" value="<input type=reset>">
<input type="submit" value="<input disabled>" disabled>
</p>
<p>
<button type="submit">&lt;button type=submit&gt;</button>
<button type="button">&lt;button type=button&gt;</button>
<button type="reset">&lt;button type=reset&gt;</button>
<button type="button" disabled>&lt;button disabled&gt;</button>
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
</form>
</section>
<section id="css">
<header>
<h1>CSS Test 1</h1>
</header>
<style>
#css__test1 { height: 100%; width: 100%; }
#css__test1 {
display: -moz-box;
display: -webkit-box;
display: box;
-moz-box-orient: horizontaerl; /* the default, so not really necessary here */
-webkit-box-orient: horizontal;
box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
-webkit-box-pack: center;
-webkit-box-align: center;
box-pack: center;
box-align: center;
}
#css__test1 .box {
background: #e3e3e3;
border: 1px dashed #666;
margin: auto;
width: 400px;
height: 200px;
cursor: pointer;
position: relative;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
#css__test1 .box::after {
content: '';
position: absolute;
width: 70%;
height: 10px;
bottom: 0;
left: 15%;
z-index: -1;
-webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4);
-moz-box-shadow: 0 9px 20px rgba(0,0,0,.4);
box-shadow: 0 9px 20px rgba(0,0,0,.4);
}
#css__test1 .box > div {
position: absolute;
width: 100%; height: 100%;
top: 0; left: 0;
background: #e3e3e3;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
font: 45px/200px bold helvetica, arial, sans-serif;
text-align: center;
text-shadow: 0 1px 0 white;
}
/* Make sure we see the front side first */
#css__test1 .box > div:first-child {
position: relative;
z-index: 2;
}
#css__test1 .box:hover {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#css__test1 .box:hover > div:first-child {
opacity: 0;
}
#css__test1 .box:hover div:last-child {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
<div id="css__test1">
<div class="box">
<div>Hello</div>
<div> World </div>
</div>
</div>
<header>
<h1>CSS Test 2</h1>
</header>
<style>
#css__test2 .hi {
width: 50px;
height: 72px;
background-image: url("http://s.cdpn.io/79/sprite-steps.png");
-webkit-animation: css__test2_play .8s steps(10) infinite;
-moz-animation: css__test2_play .8s steps(10) infinite;
-ms-animation: css__test2_play .8s steps(10) infinite;
-o-animation: css__test2_play .8s steps(10) infinite;
animation: css__test2_play .8s steps(10) infinite;
}
@-webkit-keyframes css__test2_play {
from { background-position: 0px; }
to { background-position: -500px; }
}
@-moz-keyframes css__test2_play {
from { background-position: 0px; }
to { background-position: -500px; }
}
@-ms-keyframes css__test2_play {
from { background-position: 0px; }
to { background-position: -500px; }
}
@-o-keyframes css__test2_play {
from { background-position: 0px; }
to { background-position: -500px; }
}
@keyframes css__test2_play {
from { background-position: 0px; }
to { background-position: -500px; }
}
</style>
<div id="css__test2">
<img src="http://s.cdpn.io/79/sprite-steps.png" />
<div class="hi"></div>
</div>
<header>
<h1>CSS Test 3</h1>
</header>
<style>
#css__test3 .-fill {
width: inherit;
height: inherit;
object-fit: fill;
}
#css__test3 .-cover {
width: inherit;
height: inherit;
object-fit: cover;
}
#css__test3 .-contain {
width: inherit;
height: inherit;
object-fit: contain;
}
#css__test3 .element {
width: 300px;
height: 200px;
background-color: #333;
}
#css__test3 .holder {
font-size: 20px;
line-height: 1.5em;
margin-bottom: 1em;
}
#css__test3 {
height: auto;
}
</style>
<div id="css__test3">
<div class="container -column">
<div class="holder">
<div>object-fit: fill</div>
<div class="element">
<img src="https://unsplash.it/600/900?random" class="-fill">
</div>
</div>
<div class="holder">
<div>object-fit: contain</div>
<div class="element">
<img src="https://unsplash.it/600/900?random" class="-contain">
</div>
</div>
<div class="holder">
<div>object-fit: cover</div>
<div class="element">
<img src="https://unsplash.it/600/900?random" class="-cover">
</div>
</div>
</div>
</div>
<header>
<h1>CSS Test list-style-image</h1>
</header>
<style>
#css__test4 ul {
list-style-image: url('https://unsplash.it/30/30?random');
}
</style>
<div id="css__test4">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</div>
<header>
<h1>CSS Media Query</h1>
</header>
<style>
#css__test5 {
background-color: #a3d5d3;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
#css__test5{
background: red;
}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
#css__test5{
background-color: #ddd;
}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
#css__test5{
background-color: #eee;
}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
#css__test5{
background-color: #ccc;
}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
#css__test5{
background-color: #999;
}
}
</style>
<div id="css__test5">
<h1>Hello World! Media Query</h1>
</div>
<header>
<h1>CSS: Grids, Flexbox and @support</h1>
</header>
<style>
@supports (display: grid) {
#css__gridflex .grid {
display: grid;
grid-gap: 1.5vw;
min-height: 100vh;
padding: 1.5vw;
}
#css__gridflex .grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 50vh 30vh repeat(7, minmax(20vh, 1fr));
grid-template-areas:
"hero hero"
"big1 big1"
"med1 med1"
"med2 med2"
"small1 small2"
"small3 small4"
"small5 small6"
"small7 small8"
"small9 small10";
}
@media screen and (min-width: 750px) {
#css__gridflex .grid {
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 25vh);
grid-template-areas:
"hero hero hero med1 med1"
"hero hero hero med2 med2"
"big1 big1 big1 big1 big1"
"small1 small2 small3 small4 small5"
"small6 small7 small8 small9 small10";
}
}
@media screen and (min-width: 1400px) {
#css__gridflex .grid {
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto;
grid-template-areas:
"small1 hero hero hero med1 med1"
"small2 hero hero hero med2 med2"
"small3 small5 big1 big1 small7 small8"
"small4 small6 big1 big1 small9 small10";
}
}
#css__gridflex .grid .item:nth-child(1) { grid-area: hero; }
#css__gridflex .grid .item:nth-child(2) { grid-area: big1; }
#css__gridflex .grid .item:nth-child(3) { grid-area: med1; }
#css__gridflex .grid .item:nth-child(4) { grid-area: med2; }
#css__gridflex .grid .item:nth-child(5) { grid-area: small1; }
#css__gridflex .grid .item:nth-child(6) { grid-area: small2; }
#css__gridflex .grid .item:nth-child(7) { grid-area: small3; }
#css__gridflex .grid .item:nth-child(8) { grid-area: small4; }
#css__gridflex .grid .item:nth-child(9) { grid-area: small5; }
#css__gridflex .grid .item:nth-child(10) { grid-area: small6; }
#css__gridflex .grid .item:nth-child(11) { grid-area: small7; }
#css__gridflex .grid .item:nth-child(12) { grid-area: small8; }
#css__gridflex .grid .item:nth-child(13) { grid-area: small9; }
#css__gridflex .grid .item:nth-child(14) { grid-area: small10; }
}
/* flexbox fallback is the browser does not support display:grid */
@supports not (display: grid) {
#css__gridflex .grid {
display: flex;
flex-flow: row wrap;
min-height: 100vh;
padding: 0.75vw;
}
#css__gridflex .grid .item {
min-height: 20vh;
margin: 0.75vw;
}
#css__gridflex .grid .item:nth-child(1) { flex: 0 1 calc(100% - 1.5vw); height: 50vh; }
#css__gridflex .grid .item:nth-child(2) { flex: 0 1 calc(100% - 1.5vw); height: 30vh; }
#css__gridflex .grid .item:nth-child(3) { flex: 0 1 calc(100% - 1.5vw); }
#css__gridflex .grid .item:nth-child(4) { flex: 0 1 calc(100% - 1.5vw); }
#css__gridflex .grid .item:nth-child(5) { flex: 0 1 calc(50% - 1.5vw); }
#css__gridflex .grid .item:nth-child(6) { flex: 0 1 calc(50% - 1.5vw); }
#css__gridflex .grid .item:nth-child(7) { flex: 0 1 calc(50% - 1.5vw); }
#css__gridflex .grid .item:nth-child(8) { flex: 0 1 calc(50% - 1.5vw); }
#css__gridflex .grid .item:nth-child(9) { flex: 0 1 calc(50% - 1.5vw); }
#css__gridflex .grid .item:nth-child(10) { flex: 0 1 calc(50% - 1.5vw); }
#css__gridflex .grid .item:nth-child(11) { flex: 0 1 calc(50% - 1.5vw); }
#css__gridflex .grid .item:nth-child(12) { flex: 0 1 calc(50% - 1.5vw); }
#css__gridflex .grid .item:nth-child(13) { flex: 0 1 calc(50% - 1.5vw); }
#css__gridflex .grid .item:nth-child(14) { flex: 0 1 calc(50% - 1.5vw); }
@media screen and (min-width: 750px) {
#css__gridflex .grid .item:nth-child(1) { flex: 0 1 calc(60% - 1.5vw); }
#css__gridflex .grid .item:nth-child(2) { flex: 0 1 calc(40% - 1.5vw); height: 50vh; }
}
@media screen and (min-width: 1400px) {
#css__gridflex .grid .item:nth-child(1) { flex: 0 1 calc(60% - 1.5vw); }
#css__gridflex .grid .item:nth-child(2) { flex: 0 1 calc(40% - 1.5vw); }
#css__gridflex .grid .item:nth-child(3) { flex: 0 1 calc(50% - 1.5vw); }
#css__gridflex .grid .item:nth-child(4) { flex: 0 1 calc(50% - 1.5vw); }
#css__gridflex .grid .item:nth-child(5) { flex: 0 1 calc(25% - 1.5vw); }
#css__gridflex .grid .item:nth-child(6) { flex: 0 1 calc(25% - 1.5vw); }
#css__gridflex .grid .item:nth-child(7) { flex: 0 1 calc(25% - 1.5vw); }
#css__gridflex .grid .item:nth-child(8) { flex: 0 1 calc(25% - 1.5vw); }
#css__gridflex .grid .item:nth-child(9) { flex: 0 1 calc(25% - 1.5vw); }
#css__gridflex .grid .item:nth-child(10) { flex: 0 1 calc(25% - 1.5vw); }
#css__gridflex .grid .item:nth-child(11) { flex: 0 1 calc(25% - 1.5vw); }
#css__gridflex .grid .item:nth-child(12) { flex: 0 1 calc(25% - 1.5vw); }
#css__gridflex .grid .item:nth-child(13) { flex: 0 1 calc(25% - 1.5vw); }
#css__gridflex .grid .item:nth-child(14) { flex: 0 1 calc(25% - 1.5vw); }
}
}
/* Styles, just for fun */
#css__gridflex *,#css__gridflex *:before, #css__gridflex *:after {
box-sizing: border-box;
}
#css__gridflex {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: #fff;
}
@supports not (display: grid) {
#css__gridflex:before {
content: 'Sorry, seems like your browser doesn\'t support display: grid. Below is the flexbox fallback.';
display: block;
padding: 2rem 2rem 0;
color: #ffffff;
text-align: center;
}
}
#css__gridflex .header {
margin: 10vh 1.5vw;
text-align: center;
color: #cedfe9;
}
#css__gridflex .header h1,
#css__gridflex .header h2 {
margin: 0;
text-transform: uppercase;
letter-spacing: 0.2em;
line-height: 1;
}
#css__gridflex .header h1 {
position: relative;
padding-bottom: 0.5em;
color: #ffffff;
font-size: 2rem;
}
#css__gridflex .header h2 {
font-weight: normal;
font-size: 0.875rem;
}
@media screen and (min-width: 750px) {
#css__gridflex .header h1 {
font-size: 3.75rem;
}
#css__gridflex .header h2 {
font-weight: normal;
font-size: 1.125rem;
letter-spacing: 0.5em;
}
}
@media screen and (min-width: 1400px) {
#css__gridflex .header h1 {
font-size: 6rem;
}
#css__gridflex .header h2 {
font-weight: normal;
font-size: 1.5rem;
}
}
#css__gridflex .box {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
#css__gridflex .diamond {
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 2;
width: 50px;
height: 50px;
border-radius: 5px;
border: 1px solid #ffffff;
box-shadow: 1px 1px 0px rgba(0,0,0,0.2);
background-image: linear-gradient(to top left, #ddd 0%, #fff 100%);
text-align: center;
transform-origin: center;
transform: rotateZ(45deg);
transition: box-shadow 250ms, transform 250ms;
}
#css__gridflex .diamond span {
font-weight: bold;
transform: rotateZ(-45deg)
}
#css__gridflex .grid .item:hover .diamond,
#css__gridflex .grid .item:focus .diamond {
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
transform: rotateZ(45deg) scale(1.2);
}
#css__gridflex .tooltip {
position: absolute;
z-index: 1;
padding: 0.25rem 1rem;
border-radius: 5px;
background: #29343d;
opacity: 0;
color: #cedfe9;
font-size: 0.875rem;
transition: opacity 500ms, transform 500ms;
}
#css__gridflex .tooltip:before {
content: '';
position: absolute;
top: -9px;
left: calc(50% - 10px);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #29343d;
}
#css__gridflex .grid .item:hover .tooltip,
#css__gridflex .grid .item:focus .tooltip {
opacity: 1;
transform: translateY(70px);
}
#css__gridflex .grid .item {
position: relative;
padding: 1vw;
background-position: left bottom;
background-size: 150% 100%;
transition: background 500ms, outline 500ms;
background-position: top left;
outline: transparent;
}
#css__gridflex .grid .item:hover,
#css__gridflex .grid .item:focus {
background-position: top right;
}
#css__gridflex .grid .item:focus {
outline: 2px solid #3eabfa;
}
#css__gridflex .grid .item:nth-child(1) { background-image: linear-gradient(45deg, #ddd 0%, #ccc 60%); }
#css__gridflex .grid .item:nth-child(2) { background-image: linear-gradient(45deg, #eee 0%, #fff 60%); }
#css__gridflex .grid .item:nth-child(3) { background-image: linear-gradient(45deg, #888 0%, #999 60%); }
#css__gridflex .grid .item:nth-child(4) { background-image: linear-gradient(45deg, #555 0%, #777 60%); }
#css__gridflex .grid .item:nth-child(5),
#css__gridflex .grid .item:nth-child(6),
#css__gridflex .grid .item:nth-child(7),
#css__gridflex .grid .item:nth-child(8),
#css__gridflex .grid .item:nth-child(9),
#css__gridflex .grid .item:nth-child(10),
#css__gridflex .grid .item:nth-child(11),
#css__gridflex .grid .item:nth-child(12),
#css__gridflex .grid .item:nth-child(13),
#css__gridflex .grid .item:nth-child(14) { background-image: linear-gradient(45deg, #888 0%, #aaa 60%); }
</style>
<div id="css__gridflex">
<header class="header"></header>
<div class="grid">
<div class="item" tabindex="1">
<div class="box">
<div class="diamond"><span>1</span></div>
<div class="tooltip">grid-area: hero</div>
</div>
</div>
<div class="item" tabindex="2">
<div class="box">
<div class="diamond"><span>2</span></div>
<div class="tooltip">grid-area: big</div>
</div>
</div>
<div class="item" tabindex="3">
<div class="box">
<div class="diamond"><span>3</span></div>
<div class="tooltip">grid-area: medium</div>
</div>
</div>
<div class="item" tabindex="4">
<div class="box">
<div class="diamond"><span>4</span></div>
<div class="tooltip">grid-area: medium</div>
</div>
</div>
<div class="item" tabindex="5">
<div class="box">
<div class="diamond"><span>5</span></div>
<div class="tooltip">grid-area: small</div>
</div>
</div>
<div class="item" tabindex="6">
<div class="box">
<div class="diamond"><span>6</span></div>
<div class="tooltip">grid-area: small</div>
</div>
</div>
<div class="item" tabindex="7">
<div class="box">
<div class="diamond"><span>7</span></div>
<div class="tooltip">grid-area: small</div>
</div>
</div>
<div class="item" tabindex="8">
<div class="box">
<div class="diamond"><span>8</span></div>
<div class="tooltip">grid-area: small</div>
</div>
</div>
<div class="item" tabindex="9">
<div class="box">
<div class="diamond"><span>9</span></div>
<div class="tooltip">grid-area: small</div>
</div>
</div>
<div class="item" tabindex="10">
<div class="box">
<div class="diamond"><span>10</span></div>
<div class="tooltip">grid-area: small</div>
</div>
</div>
<div class="item" tabindex="11">
<div class="box">
<div class="diamond"><span>11</span></div>
<div class="tooltip">grid-area: small</div>
</div>
</div>
<div class="item" tabindex="12">
<div class="box">
<div class="diamond"><span>12</span></div>
<div class="tooltip">grid-area: small</div>
</div>
</div>
<div class="item" tabindex="13">
<div class="box">
<div class="diamond"><span>13</span></div>
<div class="tooltip">grid-area: small</div>
</div>
</div>
<div class="item" tabindex="14">
<div class="box">
<div class="diamond"><span>14</span></div>
<div class="tooltip">grid-area: small</div>
</div>
</div>
</div>
</div>
</section>
</main>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment