Files
website/enl/index.html
2016-09-17 09:38:18 +01:00

189 lines
8.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<link href='../css/main.css' rel='stylesheet'>
<link rel="stylesheet" href="../css/animate.min.css">
<!--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>
<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" />
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<!---TODO This should be being inherited from the stylesheet. Why isn't it?--->
<style>
body {
background-image: url(http://orig08.deviantart.net/19de/f/2008/260/d/1/matrix_by_el_sobreviviente.jpg);
font-family: 'Arvo', serif !important;
color: limegreen !important;
}
h4 {
text-align: left;
text-decoration: underline;
}
h5 {
text-align: left;
}
ol {
text-align: left;
font-size: 15px;
}
a {
color: greenyellow;
}
#smurf {
color: deepskyblue;
}
.typewriter {
overflow: hidden;
/* Ensures the content is not revealed until the animation */
border-right: .15em solid greenyellow;
/* The typwriter cursor */
white-space: nowrap;
margin: 0 auto;
/* Gives that scrolling effect as the typing happens */
letter-spacing: .15em;
/* Adjust as needed */
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}
/* The typing effect */
@keyframes typing {
from {
width: 0
}
to {
width: 100%
}
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from,
to {
border-color: transparent
}
50% {
border-color: greenyellow;
}
}
</style>
<title>ENL-EH</title>
</head>
<body>
<main>
<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">
<!--TODO switch to margins rather than <br> tags--->
<div class="grey darken-3">
<br>
<img src="/images/enl/logo.png" style="height: 150px;" class="animated zoomIn">
<br>
<h3 style="margin-top: -5px;" class="animated fadeIn">Enlightened East Hertfordshire</h3>
<hr>
<br>
</div>
<!---TODO Animated code intro--->
<div class="grey darken-4">
<h4>Information: </h4>
<p>For too long, the Resistance have considered this area a stronghold, standing unopposed. But they have grown complacent. Soft and arrogant. A storm is coming. A viridescent, emerald storm. Be prepared.
<br>
<br>Enlightened East Hertfordshire are fun loving, yet dedicated. No longer content with being the underdogs. And our bite is much worse than our bark. Join us, or stand against us, the choice is yours. Choose wisely.
<br>
<br> Ensuring the skies stay green, for your protection.</p>
</div>
<div class="grey darken-3">
<h4>Nemeses:</h4>
<h5>Most Wanted:</h5>
<h5 style="text-align: left;"> <span id="smurf" style="text-align: left;">mormor1971</span></h5>
<h5>Watchlist:</h5>
<ol>
<li>
<span id="smurf">thurlingdrome</span>
</li>
<li>
<span id="smurf">ALGAE</span></li>
</ol>
<h5>No Threat:</h5>
<ol>
<li>
<span id="smurf">grawlfang</span>
</li>
</ol>
</div>
<div class="grey darken-4">
<h4>Target Area:</h4>
<h5 style="color: red" class="animated flash">&lt;ACCESS DENIED. USER UNAUTHORISED.&gt;</h5>
</div>
<div class="grey darken-3">
<h4>Comms:</h4>
<h5 style="color: red" class="animated flash">&lt;ACCESS DENIED. USER UNAUTHORISED.&gt;</h5>
</div>
<div class="grey darken-4">
<h4>Dossier:</h4>
<ul>
<li>
<h5 style="text-align: left;"><a href="https://www.ingress.com/intel">- Intel Map</a></h5></li>
<li>
<h5 style="text-align: left;"><a href="https://p5.zdassets.com/hc/theme_assets/764160/200122727/ENL_QuickGuideKit.pdf">- Starter Guide</a></h5></li>
<li>
<h5 style="text-align: left;"><a href="http://ingressfieldguide.com/">- Field Guide [Old]</a></h5></li>
<li>
<h5 style="text-align: left;"><a href="https://docs.google.com/spreadsheets/d/1TVVADLiGJ7vN8xiDXQNEcjcn1Gp-bkcjd0qj_dn9ak4/edit#gid=0">- Per-Level Strategy Guide [Old]</a></h5></li>
<li>
<h5 style="text-align: left;"><a href="https://itunes.apple.com/gb/app/glyph-mastery/id903701519?mt=8">- iOS Glyph Trainer</a></h5></li>
<li>
<h5 style="text-align: left;"><a href="https://play.google.com/store/apps/details?id=com.dmidroid.ingress.glyphs&hl=en_GB">- Android Glyph Trainer</a></h5></li>
<li>
<h5 style="text-align: left;"><a href="https://plus.google.com/113100485564146114272">- Enlightened G+</a></h5></li>
</ul>
</div>
<div class="grey darken-3">
<br>
<div class="center">
<a href="http://materializecss.com/">Materialize CSS by Google</a>
<br>
<a href="https://daneden.github.io/animate.css/">Animate.css</a>
<br>
<a href="http://cr0ybot.github.io/ingress-logos/">Logo</a>
<br>
<a href="http://orig08.deviantart.net/19de/f/2008/260/d/1/matrix_by_el_sobreviviente.jpg">Image</a>
<br>
</div>
Handcoded by Arona Jones. Kindly hosted by Github.
<br>
<br>
</div>
</div>
</div>
</div>
<br>
</div>
</main>
</body>
</html>