Begin seperated credits page

This commit is contained in:
warlordjones
2016-09-17 10:16:18 +01:00
parent ef8336d381
commit 33b31dd485
2 changed files with 106 additions and 0 deletions

105
credits.html Normal file
View File

@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<link rel='stylesheet' href='/css/main.css'>
<link rel="stylesheet" href="/css/animate.min.css">
<script src="http://code.jquery.com/jquery-2.2.1.min.js" integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=" crossorigin="anonymous"></script>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body {
background-image: url(https://www.nasa.gov/sites/default/files/styles/full_width_feature/public/flame.jpg?itok=pPD--dxy);
}
</style>
<script>
$('#modal1').openModal();
$(document).ready(function () {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
</script>
<title>Credits</title>
</head>
<body>
<div id="overlay">
<div class="center" style="width: 100%; text-align: center;">
<div class="center" style="height: 100%;
padding-top: 50px;
padding-bottom: 50px;">
<div class="container">
<div class="grey darken-4">
<h3>Credits</h3>
<ul class="collection with-header">
<li class="collection-header grey darken-1">
<h4>Main</h4>
</li>
<li class="collection-item avatar grey darken-3">
<i class="material-icons circle red accent-4">mode_edit</i>
<span class="flow-text">
Materialize CSS by Google</span>
<br>
<span class="flow-text"><a href="http://materializecss.com/">http://materializecss.com/</a></span>
</li>
<li class="collection-item avatar grey darken-2">
<i class="material-icons circle red accent-4">mode_edit</i>
<span class="flow-text">
Animate.css by Dan Eden</span>
<br>
<span class="flow-text"><a href="https://daneden.github.io/animate.css/">https://daneden.github.io/animate.css/</a></span>
</li>
<li class="collection-item avatar grey darken-3">
<i class="material-icons circle red accent-4">perm_media</i>
<span class="flow-text">
Background Image from NASA IOTD</span>
<br>
<span class="flow-text"><a href="https://www.nasa.gov/sites/default/files/styles/full_width_feature/public/flame.jpg?itok=pPD--dxy">https://www.nasa.gov/multimedia/imagegallery/iotd.html</a></span>
</li>
<li class="collection-item avatar grey darken-3">
<i class="material-icons circle red accent-4">perm_media</i>
<span class="flow-text">
Logo from Game-Icons.net</span>
<br>
<span class="flow-text"><a href="http://game-icons.net">http://game-icons.net</a></span>
<a class="waves-effect waves-light btn secondary-content grey modal-trigger" href="#modal1">More info</a>
</li>
<li class="collection-header grey darken-1">
<h4>ENL</h4>
</li>
</ul>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Dismiss</a>
</div>
</div>
Handcoded by Arona Jones. Kindly hosted by Github.
</div>
</div>
</div>
</div>
<br>
</div>
</body>
</html>

View File

@@ -24,6 +24,7 @@ div {
#overlay {
background-color: rgba(0, 0, 0, 0.4);
background-size: cover;
}
h4 {