-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
30 lines (26 loc) · 1.28 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="a simple color generator application">
<link rel="shortcut icon" href="./img/genetics-icon.svg" type="image/x-icon">
<title>color generator app</title>
<link rel="stylesheet" href="style.css">
<script defer src="app.js"></script>
</head>
<body>
<h1 class="visually-hidden">color generator app</h1>
<div id="toast" class="toast hidden">
<img id="toast-icon" class="toast-icon" src="./img/check.svg" alt="toast icon">
<p id="toast-msg" class="toast-msg"></p>
</div>
<main id="color-container" class="color-container">
<p class="color-hex-container">
<span id="colorHex"></span>
<svg id="copy-icon" class="copy-icon" tabindex="1" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/></svg>
</p>
<button id="generate-color-btn" class="generate-color-btn" >generator</button>
</main>
</body>
</html>