viddl/templates/index-pico.html

91 lines
2.6 KiB
HTML
Raw Permalink Normal View History

2023-09-10 22:18:30 +02:00
<!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 -->
2023-09-11 01:46:14 +02:00
<!-- <link rel="stylesheet" href="custom.css" />-->
2023-09-10 22:18:30 +02:00
</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 -->
</body>
</html>