simple-note/index.html
2024-01-29 05:35:09 +07:00

37 lines
No EOL
2.7 KiB
HTML

<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="author" content="westtle">
<meta name="description" content="A very simple notepad that you can use.">
<meta name="keywords" content="notepad, note, notepad online, simple note, simple notepad">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Note</title>
<link rel="icon" type="image/x-icon" href="#">
<link rel="stylesheet" type="text/css" href="./assets/styles/style.css">
</head>
<body>
<main>
<h1 class="sr-only">Simple Note</h1>
<section class="simple-note">
<div class="simple-note__inputs">
<label class="simple-note__label simple-note__label--title sr-only" for="simple-note__input--title">Note title:</label>
<input id="simple-note__input--title" class="simple-note__input simple-note__input--title" type="text" placeholder="Your title" spellcheck="false">
<label class="simple-note__label simple-note__label--body sr-only" for="simple-note__input--body">Note content:</label>
<textarea id="simple-note__input--body" class="simple-note__input simple-note__input--body" spellcheck="false">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque amet veniam nulla quia harum explicabo.</textarea>
</div>
<div class="simple-note__buttons">
<button class="simple-note__button simple-note__button--download">
<svg class="simple-note__button-svg" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
</button>
<button class="simple-note__button simple-note__button--clear">
<svg class="simple-note__button-svg" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
</button>
</div>
</section>
</main>
<!-- <script type="text/javascript" src="assets/scripts/script.min.js"></script> -->
</body>
</html>