mirror of
https://github.com/nicolas-cusan/destyle.css.git
synced 2025-08-30 00:10:21 +02:00
add test & compare pages
This commit is contained in:
Nicolas Cusan
59
compare.html
Normal file
59
compare.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>Destyle.css - Compare to other resets</title>
|
||||
<link rel="stylesheet" href="destyle.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<a class="header-back" href="index.html">👈 Back</a>
|
||||
<h1 class="header-title">Compare resets</h1>
|
||||
|
||||
<p class="header-note">⬅️ Use a larger screen to view side-by-side ➡️</p>
|
||||
</header>
|
||||
|
||||
<div class="compare">
|
||||
<div class="compare-item">
|
||||
<h2 class="compare-title"><a href="index.html">Destyle.css</a></h2>
|
||||
|
||||
<iframe class="compare-frame" src="test.html" frameborder="0"></iframe>
|
||||
|
||||
<a class="compare-btn" href="test.css">View destyle.css test page 🔴</a>
|
||||
</div>
|
||||
|
||||
<div class="compare-item">
|
||||
<h2 class="compare-title">
|
||||
<a href="http://necolas.github.io/normalize.css/">Normalize.css</a>
|
||||
</h2>
|
||||
|
||||
<a class="compare-btn" href="normalize.css">
|
||||
View normalize.css test page ⬛️
|
||||
</a>
|
||||
|
||||
<iframe
|
||||
class="compare-frame"
|
||||
src="normalize.html"
|
||||
frameborder="0"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
<div class="compare-item">
|
||||
<h2 class="compare-title">
|
||||
<a href="https://meyerweb.com/eric/tools/css/reset/">
|
||||
Eric Meyer's reset
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<a class="compare-btn" href="reset.css">
|
||||
View Eric Meyer's resettest page 🔴
|
||||
</a>
|
||||
|
||||
<iframe class="compare-frame" src="reset.html" frameborder="0"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
16
index.html
16
index.html
@@ -7,19 +7,21 @@
|
||||
<title>
|
||||
Destyle.css - a clean slate for writing CSS without user agent styles
|
||||
</title>
|
||||
<link rel="stylesheet" href="destyle.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Destyle.css</h1>
|
||||
<h2>
|
||||
<main class="container">
|
||||
<h1 class="main-title">Destyle.css</h1>
|
||||
<h2 class="sub-title">
|
||||
Opinionated reset stylesheet that provides a clean slate for styling
|
||||
your html.
|
||||
</h2>
|
||||
|
||||
<a class="btn" href="https://github.com/nicolas-cusan/destyle.css"
|
||||
>Docs / Github</a
|
||||
>
|
||||
<a class="btn" href="test.html">Test page</a>
|
||||
<a class="btn" href="https://github.com/nicolas-cusan/destyle.css">
|
||||
Docs / Github
|
||||
</a>
|
||||
<a class="btn" href="compare.html">Test & Compare</a>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
438
normalize.html
Normal file
438
normalize.html
Normal file
@@ -0,0 +1,438 @@
|
||||
<!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>
|
||||
<link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css">
|
||||
</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__address">Address</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>
|
||||
</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__paragraphs">
|
||||
<header><h1>Address</h1></header>
|
||||
<div>
|
||||
<address>
|
||||
Contact the Author here<br>
|
||||
<a href="mailto:test@test.com">test@test.com</a>
|
||||
</address>
|
||||
</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><div>code</div></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
|
||||
! " # $ % & ' ( ) * + , - . /
|
||||
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
|
||||
@ 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><figure></code> element</h3>
|
||||
<p><img src="http://placekitten.com/480/480" alt="Image alt text"></p>
|
||||
<h3>Wrapped in a <code><figure></code> element, no <code><figcaption></code></h3>
|
||||
<figure><img src="http://placekitten.com/420/420" alt="Image alt text"></figure>
|
||||
<h3>Wrapped in a <code><figure></code> element, with a <code><figcaption></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="test.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"><button type=submit></button>
|
||||
<button type="button"><button type=button></button>
|
||||
<button type="reset"><button type=reset></button>
|
||||
<button type="button" disabled><button disabled></button>
|
||||
</p>
|
||||
</fieldset>
|
||||
<p><a href="#top">[Top]</a></p>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<footer role="contentinfo">
|
||||
<p>Made by <a href="http://twitter.com/cbracco">@cbracco</a>. Code on <a href="http://github.com/cbracco/html5-test-page">GitHub</a>.</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
438
reset.html
Normal file
438
reset.html
Normal file
@@ -0,0 +1,438 @@
|
||||
<!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>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
|
||||
</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__address">Address</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>
|
||||
</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__paragraphs">
|
||||
<header><h1>Address</h1></header>
|
||||
<div>
|
||||
<address>
|
||||
Contact the Author here<br>
|
||||
<a href="mailto:test@test.com">test@test.com</a>
|
||||
</address>
|
||||
</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><div>code</div></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
|
||||
! " # $ % & ' ( ) * + , - . /
|
||||
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
|
||||
@ 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><figure></code> element</h3>
|
||||
<p><img src="http://placekitten.com/480/480" alt="Image alt text"></p>
|
||||
<h3>Wrapped in a <code><figure></code> element, no <code><figcaption></code></h3>
|
||||
<figure><img src="http://placekitten.com/420/420" alt="Image alt text"></figure>
|
||||
<h3>Wrapped in a <code><figure></code> element, with a <code><figcaption></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="test.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"><button type=submit></button>
|
||||
<button type="button"><button type=button></button>
|
||||
<button type="reset"><button type=reset></button>
|
||||
<button type="button" disabled><button disabled></button>
|
||||
</p>
|
||||
</fieldset>
|
||||
<p><a href="#top">[Top]</a></p>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<footer role="contentinfo">
|
||||
<p>Made by <a href="http://twitter.com/cbracco">@cbracco</a>. Code on <a href="http://github.com/cbracco/html5-test-page">GitHub</a>.</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
127
style.css
127
style.css
@@ -0,0 +1,127 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,600');
|
||||
|
||||
body {
|
||||
font: 16px/1.4 'Fira Sans', sans-serif;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* General
|
||||
========================================================== */
|
||||
|
||||
.container {
|
||||
padding: 30px 20px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 400px) {
|
||||
.container {
|
||||
padding: 50px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 2em;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: dodgerblue;
|
||||
color: #fff;
|
||||
padding: 0.8em 1.4em;
|
||||
font-weight: 600;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
}
|
||||
|
||||
/* Compare
|
||||
========================================================== */
|
||||
|
||||
.header {
|
||||
margin: 20px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-weight: 600;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.header-back {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding-top: 0.4em;
|
||||
}
|
||||
|
||||
.header-back:active,
|
||||
.header-back:focus,
|
||||
.header-back:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.header-note {
|
||||
padding-top: 30px;
|
||||
font-size: 95%;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
@media (min-width: 750px) {
|
||||
.header-note {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Compare */
|
||||
|
||||
.compare {
|
||||
}
|
||||
|
||||
.compare-item {
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 750px) {
|
||||
.compare-item {
|
||||
float: left;
|
||||
width: 33.33333%;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.compare-title {
|
||||
font-weight: 600;
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.compare-btn {
|
||||
}
|
||||
|
||||
@media (min-width: 750px) {
|
||||
.compare-btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.compare-frame {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 750px) {
|
||||
.compare-frame {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user