-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
41 lines (38 loc) · 2.1 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
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Colors Cards | Guedes</title>
<link href="https://rsms.me/inter/inter.css" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
<div class="centered">
<div class="title" style="text-align: center; font-size: larger;">WELCOME TO THESE AMAAAAZING COLORS CARDS!</br> PICK ONE, FOLK ;)</div>
</div>
</head>
<body>
<div class="container" data-wrap>
</div>
<menu aria-label="controls">
<li>
<button data-toggleslant aria-label="toggle slant"></button>
</li>
<li>
<button data-togglelight aria-label="toggle lightmode"></button>
</li>
</menu>
<div class="logo">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="logo" viewBox="0 0 180 180">
<defs><path id="crest-feather" d="M70 70H20a30 30 0 0 0 30 30h20a10 10 0 0 1 9.22 6.13A40 40 0 0 1 110 110a40 40 0 0 0-40-40z"></path></defs>
<path fill="#19F" d="M70 140a40 40 0 0 1 80 0z" class="top-beak"></path> <use xlink:href="#crest-feather" fill="#ED0" class="crest crest__gold"></use> <use xlink:href="#crest-feather" fill="#6C6" transform="rotate(30 110 110)" class="crest crest__green"></use> <use xlink:href="#crest-feather" fill="#19F" transform="rotate(60 110 110)" class="crest crest__blue"></use> <use xlink:href="#crest-feather" fill="#F69" transform="rotate(90 110 110)" class="crest crest__pink"></use> <path fill="#F69" d="M30 170h80v-60a39.8 39.8 0 0 0-5.25-19.81A80 80 0 0 0 30 170z" class="head"></path> <circle fill="#FFF" cx="87.5" cy="127.25" r="7.5" class="eye"></circle> <path fill="#ED0" d="M120 140a10 10 0 0 1-10-10v40a30 30 0 0 0 30-30z" class="top-beak"></path>
</svg>
</symbol>
</defs>
</div>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<script src="./script.js"></script>
</body>
</html>