This repository has been archived by the owner on Mar 30, 2022. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 32
/
Copy pathweb.html
187 lines (135 loc) · 6.98 KB
/
web.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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Music Website Template</title>
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Music website coded in HTML, CSS, and JQuery" />
<meta name="keywords" content="msuic, website, template, responsive" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" type="text/css" title="style" />
</head>
<body>
<header>
<div id="logo">
<h1><a href="index.html">Music Template</a></h1>
<h2><a href="index.html">Simple. Lightweight. Responsive.</a></h2>
</div>
</header>
<nav class="container">
<ul class="clearfix" id="cfix">
<li class="icon" id="icon">
<a href="javascript:void(0);" onclick="myMenu()">☰ Menu</a>
</li>
<li>
<ul class="scroll" id="scroll">
<li><a href="index.html#home">Home</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="index.html#merch">Merch</a></li>
<li><a href="index.html#subscribe">Subscribe</a></li>
<li><a href="index.html#music">Music</a></li>
<li><a href="index.html#news">News</a></li>
<li><a href="index.html#press">Press</a></li>
<li><a href="index.html#videos">Videos</a></li>
<li><a href="index.html#shows">Shows</a></li>
<li><a href="index.html#photos">Photos</a></li>
<li><a href="index.html#contact">Contact</a></li>
</ul>
</li>
</ul>
</nav>
<div class="spacer"></div>
<div class="site_content">
<div id="content">
<h3 class="lines">Website Development</h3>
<h4>Matthew Waldron</h4>
<h6>waldronmatthew.com</h6>
<p>This website is developed by Matthew Waldron. The code of this website is under the MIT license.
If you decide to use the website as your own, you may do so providing:</p>
<p>►You keep the footer link "Website Credits" in any and all pages of this website.</p>
<p>►You retain the text of this page to properly credit Matthew Waldron and the developers credited below.</p>
<p>►You acknoledge and agree to the Website's Terms of Use.</p>
<h3 class="lines">Navigation</h3>
<h4>Andor Nagy</h4>
<p>Codepen by Andor Nagy that allows for navigation between web pages. Parts of CSS used. Codepen under the MIT license.</p>
<h3 class="lines">Menu Scroll Highlighting</h3>
<h4>Joxmar</h4>
<p>Codepen by Joxmar that allows for naviagation highlighting for index.html id tags on scroll. Javascript used from Codepen.
Codepen under the MIT license.</p>
<h3 class="lines">Sticky Navigation</h3>
<h4>Guil H</h4>
<p>Codepen by Guil H that allows the naviagation bar to stick to the top while hiding title on scroll. Parts of CSS and Javascript used
from Codepen. Coden under the MIT license.</p>
<h3 class="lines">Smooth Scroll</h3>
<h4>Chris Coyier</h4>
<p>Codepen by Chris Coyier that allows for smooth scrolling of internal links when clicked. Parts of Javascript used
from Codepen. Coden under the MIT license.</p>
<h3 class="lines">Video Thumbnails</h3>
<h4>Amit Agarwal</h4>
<p>Code by Amit Agarwal that embedds YouTube videos by using the video thumbnail. The player loads when the user clicks the play button.
This approach decreases page load time. Javascript, CSS, and parts of HTML used from source code.
<h3 class="lines">HTML5 Audio Player</h3>
<h4>Alex Katz</h4>
<p>Codepen by Alex Katz. This allows for multiple music players with start, stop, and timeline capabilities.
Javascript and parts of CSS used. Modified to allow for music titles and responsive design. Codepen under the MIT license.</p>
<h3 class="lines">Lightbox2</h3>
<h4>Lokesh Dhakar</h4>
<p>Lightbox photo viewer by Lokesh Dhakar. Allows for modal photo viewing when the picture thumbnail is clicked.
Code under the MIT license.</p>
<h3 class="lines">Responsive Tiles</h3>
<h4>Ronny Siikaluoma</h4>
<p>Codepen by Ronny Siikaluoma that allows for squares that resize according to screen size. Parts of HTML and CSS used. Updated for
even tile size and picture replacement and dynamic resizing. Codepen under the MIT license.</p>
<h3 class="lines">Mailing List</h3>
<h4>David McCoy</h4>
<p>Gist that allows posting from an HTML from to Google Sheets. Google Script and Javascript used.</p>
<h3 class="lines">Modal Viewer for Mailing List</h3>
<h4>W3Schools Tutorials</h4>
<p>Tutorial that allows for a modal to display when clicked. Added functionality to clear contents after click.
HTML, CSS, and Javascript used.</p>
<h3 class="lines">HTML Form</h3>
<h4>www.freecontactform.com</h4>
<p>Basic html form with user input validation. HTML and PHP used.</p>
<h3 class="lines">Photos</h3>
<h4>Unsplash</h4>
<p>Royalty free photos from unsplash.com except where noted. Images resized / compressed to increase load time.</p>
<h3 class="lines">Social Media Icons</h3>
<h4>Iconfinder</h4>
<p>Royalty free social media icons from iconfinder.com. Colors edited to match the website theme.</p>
<h3 class="lines">Github Contributors</h3>
<p>►Logo Design: Mirza Zulfan</p>
<p>►Sticky Navigation Bug #1 Issue Fix: Abel Chen</p>
</div>
</div>
<footer>
<ul id="social_media">
<li><a href="index.html">
<img src="pictures/icons/facebook.png" alt="Facebook" /></a></li>
<li><a href="index.html">
<img src="pictures/icons/instagram.png" alt="Instagram" /></a></li>
<li><a href="index.html">
<img src="pictures/icons/youtube.png" alt="YouTube" /></a></li>
<li><a href="index.html">
<img src="pictures/icons/twitter.png" alt="Twitter" /></a></li>
<li><a href="index.html">
<img src="pictures/icons/itunes.png" alt="iTunes" /></a></li>
<li><a href="index.html">
<img src="pictures/icons/spotify.png" alt="Spotify" /></a></li>
<li><a href="index.html">
<img src="pictures/icons/amazon.png" alt="Amazon" /></a></li>
<li><a href="index.html">
<img src="pictures/icons/play.png" alt="Google Play" /></a></li>
<li><a href="index.html">
<img src="pictures/icons/shop.png" alt="Store" /></a></li>
<li><a href="index.html#mail">
<img src="pictures/icons/mail.png" alt="Subscribe" /></a></li>
</ul>
<ul id="btmtext">
<li><h6><a href="terms.html">Copyright © 2018 Your Artist / Band Name. All Rights Reserved.</a></h6></li>
<li><h6><a href="web.html">Website Credits</a></h6></li>
</ul>
</footer>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/fixedNavMenu.js"></script>
</body>
</html>