scss-reset
Version:
347 lines (274 loc) • 10.6 kB
HTML
<html>
<head>
<title>Reset Styles Test page</title>
<link rel="stylesheet" href="./css/total-reset.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
.offx {
overflow-x: hidden;
}
</style>
</head>
<body>
<div style="position: -webkit-sticky; position: sticky; top: 0;">
Sticky Test
</div>
<!-- Header Test-->
<div style="padding: 50px 0;">
<h3 style="font-size: 24px; padding: 20px 0;">Headers Test</h3>
<h1>H1 Title</h1>
<h2>H2 Title</h2>
<h3>H3 Title</h3>
<h4>H4 Title</h4>
<h5>H5 Title</h5>
</div>
<!-- Paragraph Test-->
<div style="padding: 50px 0;">
<h3 style="font-size: 24px; padding: 20px 0;">Paragraph Test</h3>
<p>Lorem ipsum dolor sit <a href="#">amet</a> consectetur adipisicing elit. Pariatur alias et necessitatibus amet, ut consequatur, minus dolorem ab inventore, soluta facilis nisi consequuntur velit similique quis nihil adipisci. Modi, odio.</p>
<p>Lorem <strong>ipsum</strong> dolor <b>sit</b> amet <em>consectetur</em> adipisicing <i>elit</i>. Pariatur alias et necessitatibus amet, ut consequatur, minus dolorem ab inventore, soluta facilis nisi consequuntur velit similique quis nihil adipisci. Modi, odio.</p>
</div>
<!-- List Test-->
<div style="padding: 50px 0;">
<h3 style="font-size: 24px; padding: 20px 0;">Lists</h3>
<ol>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ol>
<ul>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
</div>
<!-- Table Test-->
<div style="padding: 50px 0;">
<h3 style="font-size: 24px; padding: 20px 0;">Table Test</h3>
<table>
<thead>
<tr>
<th>header</th>
<th>header</th>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</tbody>
</table>
<h3 style="font-size: 24px; padding: 20px 0;">Table Test II</h3>
<table>
<thead>
<tr>
<th>header</th>
<th>header</th>
<th style="background: red;"></th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" style="background: paleturquoise;">cell</td>
<td style="background: red;"></td>
<td>cell</td>
</tr>
<tr>
<td colspan="2" style="background: thistle;">cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td></td>
</tr>
<tr>
<td></td>
<td>cell</td>
<td>cell</td>
</tr>
</tbody>
</table>
</div>
<!-- Form Test-->
<div style="padding: 50px 0;">
<h3 style="font-size: 24px; padding: 20px 0;">Form Elements</h3>
<form action="/" method="POST">
<fieldset>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" placeholder="Name">
</fieldset>
<fieldset>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" placeholder="Email">
</fieldset>
<fieldset>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" placeholder="Password">
</fieldset>
<fieldset>
<ul>
<li>
<input type="radio" id="water" name="element" value="water">
<label for="water">Radio: Water</label>
</li>
<li>
<input type="radio" id="air" name="element" value="air">
<label for="air">Radio: Air</label>
</li>
<li>
<input type="radio" id="fire" name="element" value="fire">
<label for="fire">Radio: Fire</label>
</li>
</ul>
</fieldset>
<fieldset>
<textarea placeholder="textarea"></textarea>
</fieldset>
<fieldset>
<label for="inputColor">Input: Color</label>
<input type="color" name="inputColor" id="inputColor">
</fieldset>
<fieldset>
<button type="submit">Submit Button</button>
</fieldset>
</form>
<h3 style="font-size: 24px; padding: 20px 0;">Form Elements II</h3>
<form action="" class="form-showcase">
<fieldset>
<legend>Personal</legend>
<label for="username">Username:</label>
<input id="username" type="text">
<label for="name">Full Name:</label>
<input id="name" type="text">
<label for="email">Email Address:</label>
<input id="email" type="email">
<label for="date">Date of Birth:</label>
<input id="date" type="date">
</fieldset>
<fieldset>
<legend>Contact</legend>
<label for="address">Address:</label>
<input id="address" type="text">
<label for="zip">Zip:</label>
<input id="zip" type="text">
<label for="phone">Phone:</label>
<input id="phone" type="tel">
</fieldset>
<button>Button Outline Focus Test</button>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</div>
<!-- Images Test-->
<div style="padding: 50px 0;">
<h3 style="font-size: 24px; padding: 20px 0;">Images. Test 1</h3>
<img src="https://picsum.photos/536/354?random=1" alt=""><img src="https://picsum.photos/536/354?random=2" alt="">
<h3 style="font-size: 24px; padding: 20px 0;">Images. Test 2. Centering</h3>
<div style="text-align: center;">
<img src="https://picsum.photos/536/354?random=3" alt="">
</div>
<h3 style="font-size: 24px; padding: 20px 0;">Picture. Test 1</h3>
<picture>
<source srcset="./images/146-536x354.webp">
<img src="./images/146-536x354.jpg" alt="">
</picture>
<h3 style="font-size: 24px; padding: 20px 0;">Picture. Test 2. Centering</h3>
<div style="display: flex; justify-content: center;">
<div>
<picture>
<source srcset="./images/146-536x354.webp">
<img src="./images/146-536x354.jpg" alt="">
</picture>
</div>
<div>
<picture>
<source srcset="./images/146-536x354.webp">
<img src="./images/146-536x354.jpg" alt="">
</picture>
</div>
</div>
<h3 style="font-size: 24px; padding: 20px 0;">Picture. Test 3. Figure</h3>
<figure>
<img src="https://picsum.photos/536/354?random=4" alt="Random Image">
<figcaption>A random Image</figcaption>
</figure>
</div>
<!-- Header Test-->
<div style="padding: 50px 0;">
<h3 style="font-size: 24px; padding: 20px 0;">SVG Test</h3>
<img src="./images/html5-logo-test.svg" alt="" width="512" height="512">
<h3 style="font-size: 24px; padding: 20px 0;">SVG Test. Test 2. Centering (+ @mixin offx)</h3>
<div class="offx" style="display: flex; justify-content: center;">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
<path d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6" />
<path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512" />
<path fill="#f16529" d="M256 480.5V131H404.3L376 447" />
<path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26" />
<path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8" />
</svg>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="386.916" height="546.133" viewBox="0 0 362.734 512">
<path d="m437.367 100.62-33.046 370.199L255.778 512l-148.134-41.123L74.633 100.62z" style="fill:#264de4" transform="translate(-74.633)" />
<path d="m376.03 447.246 28.24-316.352H256v349.629z" style="fill:#2965f1" transform="translate(-74.633)" />
<path d="m150.31 268.217 4.07 45.41H256v-45.41zM256 176.305H142.132l4.128 45.411H256zM256 433.399v-47.246l-.199.053-50.574-13.656-3.233-36.217h-45.585l6.362 71.301 93.02 25.823z" style="fill:#ebebeb" transform="translate(-74.633)" />
<path d="M85.367 0h55v23h-32v23h32v23h-55zM151.367 0h55v20h-32v4h32v46h-55V49h32v-4h-32zM217.367 0h55v20h-32v4h32v46h-55V49h32v-4h-32z" />
<path d="m311.761 313.627-5.271 58.894-50.647 13.67v47.244l93.094-25.801.683-7.672 10.671-119.551 1.108-12.194 8.198-91.912H255.843v45.411h63.988l-4.132 46.501h-59.856v45.41z" style="fill:#fff" transform="translate(-74.633)" />
</svg>
</div>
</div>
</div>
<!-- Details/Summary Test-->
<div style="padding: 50px 0;">
<h3 style="font-size: 24px; padding: 20px 0;">Details/Summary Test</h3>
<details>
<summary>Summary Title</summary>
<p>Lorem ipsum dolores Amplet!</p>
<p>Lorem ipsum dolores Amplet!</p>
</details>
</div>
<!-- Progress Test -->
<div style="padding: 50px 0;">
<h3 style="font-size: 24px; padding: 20px 0;">Progress Test</h3>
<progress id="file" max="100" value="70"> 70% </progress>
<p>
Reference: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress">The Progress Indicator element</a>
</p>
</div>
<!-- Meter Test -->
<div style="padding: 50px 0;">
<h3 style="font-size: 24px; padding: 20px 0;">Meter Test</h3>
<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">
at 50/100
</meter>
<p>
Reference: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter">The HTML Meter element</a>
</p>
</div>
<!-- Responsive Test-->
<div style="padding: 50px 0;">
<h3 style="font-size: 24px; padding: 20px 0;">Mobile Oversized Div Test (+ @mixin offx)</h3>
<div class="offx">
<div style="width: 110%; border: 1px solid blue;">
Div
</div>
</div>
</div>
<!-- Gigantic Image Test-->
<div style="padding: 50px 0;">
<h3 style="font-size: 24px; padding: 20px 0;">Mobile Oversized Div Test with Gigantic Image (+ @mixin offx)</h3>
<div class="offx">
<div style="width: 110%; border: 1px solid blue;">
<img src="https://picsum.photos/1536/1354?random=3" alt="" style="width:110%">
</div>
</div>
</div>
</body>
</html>