-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
74 lines (63 loc) · 4.34 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home 🔷 CSS Transitions, Transformations & Animations</title>
<!--Favicon-->
<link rel="icon" type="image/png" href="favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="favicon/favicon.svg" />
<link rel="shortcut icon" href="favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="favicon\apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="CSS-TTA" />
<link rel="manifest" href="favicon\site.webmanifest"/>
<!--Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"rel="stylesheet">
<!--Styles-->
<link rel="stylesheet" href="css/normalize-fwd.css">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/index.css">
<script src="global.js" defer></script>
</head>
<body>
<!-- [1] Header & Navigation [DON'T TOUCH] -->
<header>
<nav>
<p class="logo">CSS-TTA</p>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="css-transitions.html">Transitions</a></li>
<li><a href="css-transformations.html">Transformations</a></li>
<li><a href="css-animations.html">Animations</a></li>
</ul>
<!-- [1.1] Hamburger Menu [DON'T TOUCH] -->
<svg id="hamburger-menu" class="ham ham3" viewBox="0 0 100 100" width="60" onclick="this.classList.toggle('active')">
<path class="line top" d="m 70,33 h -40 c -11.092231,0 11.883874,13.496726 -3.420361,12.956839 -0.962502,-2.089471 -2.222071,-3.282996 -4.545687,-3.282996 -2.323616,0 -5.113897,2.622752 -5.113897,7.071068 0,4.448316 2.080609,7.007933 5.555839,7.007933 2.401943,0 2.96769,-1.283974 4.166879,-3.282995 2.209342,0.273823 4.031294,1.642466 5.857227,-0.252538 v -13.005715 16.288404 h 7.653568" />
<path class="line middle" d="m 70,50 h -40 c -5.6862,0 -8.534259,5.373483 -8.534259,11.551069 0,7.187738 3.499166,10.922274 13.131984,10.922274 11.021777,0 7.022787,-15.773343 15.531095,-15.773343 3.268142,0 5.177031,-2.159429 5.177031,-6.7 0,-4.540571 -1.766442,-7.33533 -5.087851,-7.326157 -3.321409,0.0092 -5.771288,2.789632 -5.771288,7.326157 0,4.536525 2.478983,6.805271 5.771288,6.7" />
<path class="line bottom" d="m 70,67 h -40 c 0,0 -3.680675,0.737051 -3.660714,-3.517857 0.02541,-5.415597 3.391687,-10.357143 10.982142,-10.357143 4.048418,0 17.88928,0.178572 23.482143,0.178572 0,2.563604 2.451177,3.403635 4.642857,3.392857 2.19168,-0.01078 4.373905,-1.369814 4.375,-3.392857 0.0011,-2.023043 -1.924401,-2.589191 -4.553571,-4.107143 -2.62917,-1.517952 -4.196429,-1.799562 -4.196429,-3.660714 0,-1.861153 2.442181,-3.118811 4.196429,-3.035715 1.754248,0.0831 4.375,0.890841 4.375,3.125 2.628634,0 6.160714,0.267857 6.160714,0.267857 l -0.178571,-2.946428 10.178571,0 -10.178571,0 v 6.696428 l 8.928571,0 -8.928571,0 v 7.142858 l 10.178571,0 -10.178571,0" />
</svg>
</nav>
<!-- [1.2] Overlay (w/ Hamburger Onclick) [DON'T TOUCH] -->
<div class="overlay" id="menuOverlay">
<div class="overlay-content">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="css-transitions.html">Transitions</a></li>
<li><a href="css-transformations.html">Transformations</a></li>
<li><a href="css-animations.html">Animations</a></li>
</ul>
</div>
</div>
</header>
<!-- [2] Index Content - Home -->
<main>
<section class="landing-container">
<h1>Welcome to CSS Transitions, Transformations, and Animations!</h1>
<p>Click below to get started ↗</p>
<a href="css-transitions.html"><button class="start-button">Start!</button></a>
</section>
</main>
<footer>
</footer>
</body>
</html>