-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
154 lines (150 loc) · 7.02 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Metadata -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hex Music Theory</title>
<meta name="description" content="Music theory made accessible.">
<meta name="author" content="Hex">
<!-- Favicons and Touch Icons -->
<link rel="icon" href="images/favicon.ico">
<link rel="icon" href="images/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<!-- Stylesheets and Scripts -->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans:400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source Code Pro">
</head>
<body>
<div id="tinter" onclick="toggleMenu()"></div>
<nav class="navbar" id="nav-mobile">
<div id="menu-icon" onclick="toggleMenu()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<a href="#"><img src="images/logo.svg" class="logo" /></a>
</nav>
<nav class="navbar" id="nav-desktop">
<a href="#"><img src="images/logo.svg" class="logo" /></a>
<a href="#" onclick="closeMenu()">
<span class="current">Home</span>
</a>
<a href="blog.html" onclick="closeMenu()">Blog</a>
<div class="dropdown">
<div class="dropdown-toggle">
<a href="javascript:;">Resources
<!-- dropdown caret (desktop display) -->
<svg width="12" height="6" version="1.1" viewBox="0 0 12 6" xmlns="http://www.w3.org/2000/svg"
class="caret">
<path d="m0 0 6 6 6-6z" fill="currentColor" />
</svg>
</a>
<!-- dropdown chevron (mobile display) -->
<svg 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"
class="chevron">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</div>
<div class="dropdown-content">
<div class="dropdown-guard"></div>
<div class="dropdown-links">
<a href="javascript:;" onclick="closeMenu()">Books</a>
<a href="javascript:;" onclick="closeMenu()">Roadmap</a>
<a href="javascript:;" onclick="closeMenu()">Reading List</a>
<a href="javascript:;" onclick="closeMenu()">Melody, Voice Leading</a>
<a href="javascript:;" onclick="closeMenu()">Form in Popular Music</a>
<a href="javascript:;" onclick="closeMenu()">Musical Analyses</a>
<a href="javascript:;" onclick="closeMenu()">Complex Counterpoint</a>
</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-toggle">
<a href="javascript:;">Tools
<!-- dropdown caret (desktop display) -->
<svg width="12" height="6" version="1.1" viewBox="0 0 12 6" xmlns="http://www.w3.org/2000/svg"
class="caret">
<path d="m0 0 6 6 6-6z" fill="currentColor" />
</svg>
</a>
<!-- dropdown chevron (mobile display) -->
<svg 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"
class="chevron">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</div>
<div class="dropdown-content">
<div class="dropdown-guard"></div>
<div class="dropdown-links">
<a href="javascript:;" onclick="closeMenu()">Shifting Counterpoint Calculator</a>
<a href="2x2.html" onclick="closeMenu()">2x2 Canons App <span class="new-icon">NEW</span></a>
</div>
</div>
</div>
<a href="javascript:;" onclick="closeMenu()">Store</a>
<a href="contact.html" onclick="closeMenu()">Contact</a>
</nav>
<header>
<h1 id="page-title">
Music Theory
<p class="subtitle">made accessible.</p>
</h1>
</header>
<main>
<!-- Further subdivide into sections -->
<section id="home">
<h2 class="section-title">Stuff About Gusic</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum, nisi eget venenatis varius,
turpis eros suscipit elit, eget vestibulum libero lacus id ex. Ut sollicitudin tempor turpis sit amet
cursus. Curabitur ac enim et ante pharetra finibus et quis metus. Suspendisse potenti. Proin
sollicitudin ullamcorper viverra. Sed lacinia eget mauris nec facilisis. Quisque augue ligula,
condimentum sed tellus sed, ullamcorper pharetra lorem. Sed hendrerit, sapien in varius aliquet, arcu
sapien rhoncus ipsum, vel condimentum velit felis eget ipsum. Vestibulum fringilla dolor in tortor
consectetur, nec pharetra neque interdum. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Pellentesque viverra molestie felis vel consectetur. Ut sit amet ex
vitae purus facilisis sodales.
</p>
</section>
<section id="about">
<h2 class="section-title">More Gusic Stuff</h2>
<p>Sed at justo elit. Mauris ultricies a nisl facilisis efficitur. Nullam venenatis, dui ac scelerisque
semper, tortor massa egestas lorem, vitae dictum ipsum lorem a turpis. Morbi sagittis elementum neque
non consectetur. Maecenas eu pellentesque ante. Integer efficitur elit vel sem auctor efficitur. Etiam
aliquam urna in fringilla accumsan. Mauris ut aliquam magna. Aenean at nulla quis sapien consequat
faucibus. Curabitur tristique ornare eros sed consequat. Aenean id lorem est. Curabitur quis tristique
urna. Donec condimentum vehicula felis vitae mattis. In risus ligula, pulvinar eget massa id, cursus
ornare nibh. Donec consectetur urna consequat ipsum cursus, nec gravida purus convallis. Sed tellus
ligula, facilisis vitae rhoncus sit amet, efficitur tincidunt nulla.
</p>
</section>
<section id="learning">
<h2 class="section-title">93% Of Experts Agree: Gusic</h2>
<p>Etiam et velit id erat tempus congue. Pellentesque mattis ac mauris vel tristique. Sed luctus consectetur
dui, vitae rhoncus urna. Ut sagittis viverra lectus, ac convallis tellus iaculis ac. Phasellus placerat
augue laoreet, varius turpis at, finibus ante. Phasellus felis ante, vulputate eget sollicitudin
pharetra, tempor in libero. Cras ante mauris, maximus sed lorem nec, lobortis venenatis turpis. Praesent
magna libero, malesuada sed elit sed, placerat aliquam tortor. Nulla efficitur, magna nec auctor
laoreet, justo est tristique lectus, at facilisis nisl justo eu ligula. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Etiam dapibus eu ex vitae fermentum.
Nullam sagittis dapibus risus. Aenean consectetur bibendum feugiat.
</p>
</section>
<section id="projects">
<h2 class="section-title">Gusic</h2>
<p>Suspendisse potenti. In commodo lectus rhoncus porta finibus. Ut urna tortor, luctus a blandit et, mattis
vitae felis. Curabitur quis semper mauris, sed luctus dolor. Donec ut felis nibh. Curabitur eu dictum
sapien. Pellentesque et elit augue. Aliquam a volutpat ligula. Pellentesque cursus aliquam risus in
mollis.
</p>
</section>
</main>
<footer>
<p>Gusic 🤓</p>
</footer>
<script src="js/scripts.js"></script>
</body>
</html>