-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
76 lines (60 loc) · 3.98 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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="/output.css">
<!-- Custom Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
<!-- javascript -->
<script src="./script.js" defer></script>
<title>My Frontend Mentor Challenge Solutions </title>
</head>
<body class="text-brown-900">
<header>
<div class="w-full h-4 bg-yellow-400"></div>
<div class="py-8 w-5/6 m-auto flex justify-between place-items-center border-b-2 border-brown-900">
<h1 class="text-2xl font-bold">Frontend Mentor Challenges</h1>
<nav><a href="#about" class="underline hover:no-underline focus:outline-dotted hover:opacity-75">About</a></nav>
</div>
</header>
<main class="flex flex-col">
<h1 class="text-center p-8 text-lg uppercase">Selected Solutions</h1>
<ul class="w-5/6 grid gap-9 place-items-center m-auto xl:grid-cols-3 lg:grid-cols-2" id="inner_wrapper"></ul>
<div class="h-max block text-center my-14">
<a href="https://github.com/vimode/frontend-mentor-challenges"
class="p-4 text-xl font-bold border-4 border-brown-900 h-max bg-yellow-400 shadow shadow-brown-900 transition hover:bg-yellow-200 hover:opacity-75 hover:shadow-none focus:outline-dotted">Checkout all the projects</a>
</div>
<section class="w-full m-auto bg-yellow-400" id="about">
<div class="w-5/6 m-auto">
<h1 class="mt-12 text-3xl font-bold ">About</h1>
<p class="text-xl py-12">Frontend Mentor challenges help you improve your coding skills by building
realistic projects. <br /><br />
If done correctly, you can learn something new every challenge. I tried to document
everything I learn from each challenge in the README of each challenge. <a href="https://github.com/vimode/frontend-mentor-challenges"
class="underline hover:no-underline hover:opacity-75 focus:outline-dotted">The
repo</a> currently holds 57 completed challenges. <br /><br />
But this site showcases a select few challenges, the fun ones or the ones I feel I learned a lot from.</p>
</div>
</section>
<footer class="bg-brown-900">
<div class="py-8 w-5/6 m-auto flex justify-between justify-items-center">
<p class="text-amber-50">Made with TailwindCSS by <a href="#">vimo</a></p>
<a href="https://github.com/vimode" class="focus:outline-dotted" aria-label="Github Profile">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
role="img" class="iconify iconify--ion w-6 fill-amber-50 hover:fill-yellow-400 transition-all" width="32"
height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512">
<path
d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9a17.56 17.56 0 0 0 3.8.4c8.3 0 11.5-6.1 11.5-11.4c0-5.5-.2-19.9-.3-39.1a102.4 102.4 0 0 1-22.6 2.7c-43.1 0-52.9-33.5-52.9-33.5c-10.2-26.5-24.9-33.6-24.9-33.6c-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8c11.2 19.6 26.2 25.1 39.6 25.1a63 63 0 0 0 25.6-6c2-14.8 7.8-24.9 14.2-30.7c-49.7-5.8-102-25.5-102-113.5c0-25.1 8.7-45.6 23-61.6c-2.3-5.8-10-29.2 2.2-60.8a18.64 18.64 0 0 1 5-.5c8.1 0 26.4 3.1 56.6 24.1a208.21 208.21 0 0 1 112.2 0c30.2-21 48.5-24.1 56.6-24.1a18.64 18.64 0 0 1 5 .5c12.2 31.6 4.5 55 2.2 60.8c14.3 16.1 23 36.6 23 61.6c0 88.2-52.4 107.6-102.3 113.3c8 7.1 15.2 21.1 15.2 42.5c0 30.7-.3 55.5-.3 63c0 5.4 3.1 11.5 11.4 11.5a19.35 19.35 0 0 0 4-.4C415.9 449.2 480 363.1 480 261.7C480 134.9 379.7 32 256 32Z">
</path>
</svg>
</a>
</div>
</footer>
</main>
</body>
</html>