Zac Clark Web Design 
Music Release 
Quickstart Guide

The following are instructions about how to customize index.html & where/how to save your media.


Add a Title, Description, & Keywords

(These are used by Google and other search engines.)

<title>Your Title Here</title>
Suggestion: Artist Name - Release Title

<meta name="description" content="Your Description Here">
Suggestion: A short (less than 120 character) description of your release.

<meta name="keywords" content="Artist Name,Release Title,Genre,Year”>
Suggestion placeholders are given.
Keywords should be separated by commas.


Add Your Artwork

Save your artwork as a 200x200px PNG as artwork.png under the path:
“resources/images/artwork.png”

The artwork file is referenced in these places:
<link rel="icon" type="image/png" href="resources/images/artwork.png">
<img id="artwork" src="resources/images/artwork.png">


Animate Your Artwork

Spin (Horizontal) <link rel="stylesheet" type="text/css" href="resources/stylesheets/animations/spinh.css">
Spin (Vertical) <link rel="stylesheet" type="text/css" href="resources/stylesheets/animations/spinv.css">
Float <link rel="stylesheet" type="text/css" href="resources/stylesheets/animations/float.css">
Swivel <link rel="stylesheet" type="text/css" href="resources/stylesheets/animations/swivel.css">
Spinning Vinyl <link rel="stylesheet" type="text/css" href="resources/stylesheets/animations/vinyl.css">


Customize Your Page Style

Dark Mode: <link rel="stylesheet" type="text/css" href="resources/stylesheets/dark.css">
Light Mode: <link rel="stylesheet" type="text/css" href="resources/stylesheets/light.css">
Background Video Mode (Dark): <link rel="stylesheet" type="text/css" href="resources/stylesheets/bgviddark.css">
Background Video Mode (Light): <link rel="stylesheet" type="text/css" href="resources/stylesheets/bgvidlight.css">


Add Your Background Video

Once your stylesheet is changed to bgviddark.css or bgvidlight.css, save your background video as a 1080p MP4 as bgvid.mp4 under the path:
“resources/videos/bgvid.mp4”

<video autoplay muted loop>
<source src="resources/videos/bgvid.mp4" type="video/mp4">
This browser does not support HTML5 video.
</video>

The template also comes with sample videos that can be used under:
“resources/videos/bgviddark.mp4”
“resources/videos/bgvidlight.mp4”


Add & Customize Your Links

Links are given in this format:
<a href="ALINKspotify"><div class="link">Spotify</div></a>

All URL placeholders begin with “ALINK”. For example, “ALINKspotify” shown above should be replaced with a valid Spotify URL.

Links can be added, edited, or deleted as long as they are in the same format as above.