Footer
People seem to like the material design footer in UGWA so I made it easier for people to steal.
You need to link some stuff to your HTML file. Copypaste this into the <head> of your HTML:
<link rel="stylesheet" href="https://sheeptester.github.io/javascripts/footer.css"/>
<script src="https://sheeptester.github.io/javascripts/footer.js" charset="utf-8"></script>If you haven't already, you should probably make your website not be ultra-zoomed out on mobile devices by putting this into the <head> as well:
<meta name="viewport" content="width=device-width, initial-scale=1"/>To add the actual footer, put this into the <body> of your HTML:
<div id="footer">
<ul>
</ul>
</div>Between the <ul> tags, you can add each item you'd like to have in your footer. Replace the text in all caps (ID, MATERIAL_ICON_NAME, and LABEL_TEXT) with whatever you want. You can find material icons here:
<li id="ID" tabindex="0"><i class="material-icons">MATERIAL_ICON_NAME</i><span>LABEL_TEXT</span></li>Also, add this into the <body> for each footer item with the same ID. The CONTENT can be whatever HTML you'd like to have for each section:
<div class="section ID">
CONTENT
</div>You can add a few attributes to the <body> tag:
<body data-theme="#9C27B0" class="light" data-default="ID">There's a light/dark theme which is determined by the <body>'s class: light or dark. data-theme specifies the theme colour (for links and selected tab colour), which is by default UGWA red. data-default specifies which section to show initially.
<!DOCTYPE html>
<html>
<head>
<title>Footer example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://sheeptester.github.io/javascripts/footer.css"/>
<script src="https://sheeptester.github.io/javascripts/footer.js" charset="utf-8"></script>
</head>
<body data-theme="#3F51B5" class="light" data-default="home">
<div class="section portfolio">
<h2>My work</h2>
<p>I made a <a href="https://www.youtube.com/results?search_query=lemonade+stand">lemonade stand</a> in 2004 and made $13.</p>
</div>
<div class="section home">
<h2>Welcome to my site!</h2>
<p>Here you can find some of my work and videos.</p>
</div>
<div class="section videos">
<h2>My videos</h2>
<p>You can find my YouTube channel, which features make-up tutorials and Dragonvale Let's Plays, <a href="https://www.youtube.com/user/jacksepticeye">here</a>.</p>
</div>
<div id="footer">
<ul>
<li id="portfolio" tabindex="0"><i class="material-icons">folder</i><span>Portfolio</span></li>
<li id="home" tabindex="0"><i class="material-icons">home</i><span>Home</span></li>
<li id="videos" tabindex="0"><i class="material-icons">video_library</i><span>Videos</span></li>
</ul>
</div>
</body>
</html>