93 lines
2.7 KiB
HTML
93 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Sign in example • Pico.css</title>
|
|
<meta name="description" content="A minimalist layout for Login pages. Built with Pico CSS." />
|
|
<link rel="shortcut icon" href="https://picocss.com/favicon.ico" />
|
|
<link rel="canonical" href="https://picocss.com/examples/sign-in/" />
|
|
|
|
<!-- Pico.css -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" />
|
|
|
|
<!-- Custom styles for this example -->
|
|
<link rel="stylesheet" href="custom.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Nav -->
|
|
<nav class="container-fluid">
|
|
<ul>
|
|
<li>
|
|
<a href="./" class="contrast" onclick="event.preventDefault()"><strong>Brand</strong></a>
|
|
</li>
|
|
</ul>
|
|
<ul>
|
|
<li>
|
|
<details role="list" dir="rtl">
|
|
<summary aria-haspopup="listbox" role="link" class="secondary">Theme</summary>
|
|
<ul role="listbox">
|
|
<li><a href="#" data-theme-switcher="auto">Auto</a></li>
|
|
<li><a href="#" data-theme-switcher="light">Light</a></li>
|
|
<li><a href="#" data-theme-switcher="dark">Dark</a></li>
|
|
</ul>
|
|
</details>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<!-- ./ Nav -->
|
|
|
|
<!-- Main -->
|
|
<main class="container">
|
|
<article class="grid">
|
|
<div>
|
|
<hgroup>
|
|
<h1>Sign in</h1>
|
|
<h2>A minimalist layout for Login pages</h2>
|
|
</hgroup>
|
|
<form>
|
|
<input
|
|
type="text"
|
|
name="login"
|
|
placeholder="Login"
|
|
aria-label="Login"
|
|
autocomplete="nickname"
|
|
required
|
|
/>
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
placeholder="Password"
|
|
aria-label="Password"
|
|
autocomplete="current-password"
|
|
required
|
|
/>
|
|
<fieldset>
|
|
<label for="remember">
|
|
<input type="checkbox" role="switch" id="remember" name="remember" />
|
|
Remember me
|
|
</label>
|
|
</fieldset>
|
|
<button type="submit" class="contrast" onclick="event.preventDefault()">Login</button>
|
|
</form>
|
|
</div>
|
|
<div></div>
|
|
</article>
|
|
</main>
|
|
<!-- ./ Main -->
|
|
|
|
<!-- Footer -->
|
|
<footer class="container-fluid">
|
|
<small>
|
|
yt-mdl
|
|
</small>
|
|
</footer>
|
|
<!-- ./ Footer -->
|
|
|
|
<!-- Minimal theme switcher -->
|
|
<script src="js/minimal-theme-switcher.js"></script>
|
|
</body>
|
|
</html>
|
|
|