-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
92 lines (83 loc) · 3.81 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<title>The Law of Music</title>
<link rel='stylesheet' type='text/css' media='screen' href='resources/style/main.css'>
<link rel='stylesheet' type='text/css' media='print' href='resources/style/print.css'>
<link rel="icon" href="resources/favicon.ico" type="image/x-icon" sizes="16x16" />
</head>
<body>
<header class="container cfx main-header">
<h1 class="logo">
<a href="./index.html">The Law<br> of Music</a>
</h1>
<h3 class="subtitle">A personal site about the long lost objectivity of music</h3>
<nav class="main-nav nav">
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./introduction.html">Introduction</a></li>
<li><a href="./harmony.html">Harmony</a></li>
<li><a href="./form.html">Form</a></li>
<li><a href="./counterpoint.html">Counterpoint</a></li>
</ul>
</nav>
</header>
<section class="banner container">
<h2>The Law of Music</h2>
<p>
Music has it's own laws and rules, just like there are laws and axioms in math or physics. To learn these rules means to be in control, to create your own way. Because only when we understand the past can we make way for the future.
</p>
<p>
<em>„Let your heart guide you, but your mind must know where.”</em>
</p>
<a class="btn btn-big" href="./introduction.html">Get started</a>
</section>
<div class="flex">
<section class="col preview">
<h5>Introduction</h5>
<a href="./introduction.html">
<img src="resources/img/introduction.jpg" alt="Musical clefs, alto, bass, treble">
<h3>The purpose, the goal, the tools</h3>
</a>
<p>Without understanding why and what, it can be difficult to focus on the right things.</p>
</section>
<section class="col preview">
<h5>Harmony</h5>
<a href="./harmony.html">
<img src="resources/img/harmony.png" alt="Chord - a triad of C major">
<h3>The art of joining chords</h3>
</a>
<p>No composer in the history has ever avoided the rigorous study of the rules of harmony, and it is the most salient part of so called primitive music, e.g. pop.</p>
</section>
<section class="col preview">
<h5>Form</h5>
<a href="./form.html">
<img src="resources/img/form.png" alt="Formal analysis of a simple melody">
<h3>The art of punctuation</h3>
</a>
<p>Music is the most abstract form of language, and every language needs proper punctuation.</p>
</section>
<section class="col preview">
<h5>Counterpoint</h5>
<a href="./counterpoint.html">
<img src="resources/img/counterpoint.png" alt="Example of a contrapuntal composition">
<h3>The art of voice leading</h3>
</a>
<p>If you're bored of triads in the root position and bass only jumping in fourths or fifths, try treating every voice in the chord like a unique melody on it's own.</p>
</section>
</div>
<footer class="container main-footer cfx">
<small>© Jiří Mareš 2019</small>
<nav class="nav">
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./introduction.html">Introduction</a></li>
<li><a href="./harmony.html">Harmony</a></li>
<li><a href="./form.html">Form</a></li>
<li><a href="./counterpoint.html">Counterpoint</a></li>
</ul>
</nav>
</footer>
</body>
</html>