Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mex - De Vloot #6

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Mex - De Vloot #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 94 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
body {
margin: 0;
padding: 0;
background-image: url("../img/bg.png");
background-repeat: repeat-x;
overflow-y: scroll;
}
main {
margin: 0 auto;
width: 800px;
}
header {
background-image: url("../img/header.jpg");
min-height: 268px;
}
header h1 {
margin: 0;
font-family: Verdana;
font-weight: bold;
padding-left: 15px;
padding-top: 15px;
}
header p {
margin: 0;
font-family: Verdana;
padding-left: 15px;
}
header .top-menu {
position: relative;
overflow: hidden;
list-style-type: none;
top: 150px;
right: 20px;
margin: 0;
}
header .top-menu li {
float: left;
padding-right: 20px;
font-family: Verdana;
font-size: 12px;
color: #fff;
}
header .top-menu .active {
color: #A6C3D2;
}
header .top-menu li:hover {
color: #A6C3D2;
}
header .top-menu li a:hover {
cursor: pointer;
}
section {
background: #fff;
min-height: 330px;
}
section h2 {
margin: 0;
padding-left: 15px;
padding-top: 15px;
font-family: Verdana;
}
section p {
padding: 15px;
font-family: Verdana;
line-height: 1.4;
}
.top-left {
float: left;
padding-right: 15px;
padding-bottom: 15px;
}
.top-right {
float: right;
padding-left: 15px;
padding-bottom: 15px;
}
.bottom-left {
float: left;
padding-right: 15px;
padding-top: 15px;
}
.bottom-right {
float: right;
padding-left: 15px;
padding-top: 15px;
}
.middle-right {
float: right;
padding: 15px;
padding-right: 0px;
}
.tabcontent {
display: none;
}
0 css/grfx/bg.png → img/bg.png
View file
Open in desktop
File renamed without changes
0 css/grfx/header.jpg → img/header.jpg
View file
Open in desktop
File renamed without changes
64 changes: 50 additions & 14 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,56 @@
<!DOCTYPE html>
<html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>De vloot</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>De Vloot</h1>
<p>Regeren over het water</p>
<ul class="top-menu">
<li>Start</li>
<li>Geschiedenis</li>
<li>Kruisers</li>
<li>Vliegdekschepen</li>
<li>Onderzeeërs</li>
</ul>
<h2>Wat drijft daar in het water?</h2>
<p><img src="img/vloot0.jpg" class="top-left">Nunc ac magna. Maecenas odio dolor, vulputate vel, auctor ac, accumsan id, felis. Pellentesque cursus sagittis felis. Pellentesque porttitor, velit lacinia egestas auctor, diam eros tempus arcu, nec vulputate augue magna vel risus. Cras non magna vel ante adipiscing rhoncus. Vivamus a mi. Morbi neque. Aliquam erat volutpat. Integer ultrices lobortis eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin semper, ante vitae sollicitudin posuere, metus quam iaculis nibh, vitae scelerisque nunc massa eget pede. Sed velit urna, interdum vel, ultricies vel, faucibus at, quam. Nunc ac magna. Maecenas odio dolor, vulputate vel, auctor ac, accumsan id, felis. Pellentesque cursus sagittis felis. Pellentesque porttitor, velit lacinia egestas auctor, diam eros tempus arcu, nec vulputate augue magna vel risus. Cras non magna vel ante adipiscing rhoncus. Vivamus a mi. Morbi neque. Aliquam erat volutpat. Integer ultrices lobortis eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin semper, ante vitae sollicitudin posuere, metus quam iaculis nibh, vitae scelerisque nunc massa eget pede. Sed velit urna, interdum vel, ultricies vel, faucibus at, quam.
</p>
<main>
<header>
<h1 id="header-title">De Vloot</h1>
<p id="header-subtitle">Regeren over het water</p>
<ul class="top-menu">
<li><a class="tablinks active" id="b-home" onclick="openPage(event, 'home', 'De Vloot', 'Regeren over het water')">Start</a></li>
<li><a class="tablinks" id="b-history" onclick="openPage(event, 'history', 'Geschiedenis', 'Uit de tijd dat Marco zijn polo aan had')">Geschiedenis</a></li>
<li><a class="tablinks" id="b-cruisers" onclick="openPage(event, 'cruisers', 'Kruisers' , 'Samen in een rechte lijn varen')">Kruisers</a></li>
<li><a class="tablinks" id="b-aircraftcarriers" onclick="openPage(event, 'aircraftcarriers', 'Vliegdekschepen', 'Vliegensvlug overal van start')">Vliegdekschepen</a></li>
<li><a class="tablinks" id="b-submarines" onclick="openPage(event, 'submarines', 'Onderzeeërs', 'Spetter pieter pater lekker in het water')">Onderzeeërs</a></li>
</ul>
</header>


<section class="tabcontent" id="home" style="display: block;">
<h2>Wat drijft daar in het water?</h2>
<p><img src="img/vloot0.jpg" class="top-left">Nunc ac magna. Maecenas odio dolor, vulputate vel, auctor ac, accumsan id, felis. Pellentesque cursus sagittis felis. Pellentesque porttitor, velit lacinia egestas auctor, diam eros tempus arcu, nec vulputate augue magna vel risus. Cras non magna vel ante adipiscing rhoncus. Vivamus a mi. Morbi neque. Aliquam erat volutpat. Integer ultrices lobortis eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin semper, ante vitae sollicitudin posuere, metus quam iaculis nibh, vitae scelerisque nunc massa eget pede. Sed velit urna, interdum vel, ultricies vel, faucibus at, quam. Nunc ac magna. Maecenas odio dolor, vulputate vel, auctor ac, accumsan id, felis. Pellentesque cursus sagittis felis. Pellentesque porttitor, velit lacinia egestas auctor, diam eros tempus arcu, nec vulputate augue magna vel risus. Cras non magna vel ante adipiscing rhoncus. Vivamus a mi. Morbi neque. Aliquam erat volutpat. Integer ultrices lobortis eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin semper, ante vitae sollicitudin posuere, metus quam iaculis nibh, vitae scelerisque nunc massa eget pede. Sed velit urna, interdum vel, ultricies vel, faucibus at, quam.</p>
</section>


<section class="tabcontent" id="history">
<h2>Er is niet veel veranderd.</h2>
<p><img src="img/vloot1.jpg" class="top-left">Nunc ac magna. Maecenas odio dolor, vulputate vel, auctor ac, accumsan id, felis. Pellentesque cursus sagittis felis. Pellentesque porttitor, velit lacinia egestas auctor, diam eros tempus arcu, nec vulputate augue magna vel risus. Cras non magna vel ante adipiscing rhoncus. Vivamus a mi. Morbi neque. Aliquam erat volutpat. Integer ultrices lobortis eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin semper, ante vitae sollicitudin posuere, metus quam iaculis nibh, vitae scelerisque nunc massa eget pede. Sed velit urna, interdum vel, ultricies vel, faucibus at, quam. Nunc ac magna. Maecenas odio dolor, vulputate vel, auctor ac, accumsan id, felis. Pellentesque cursus sagittis felis. Pellentesque porttitor, velit lacinia egestas auctor, diam eros tempus arcu, nec vulputate augue magna vel risus. Cras non magna vel ante adipiscing rhoncus. Vivamus a mi. Morbi neque. Aliquam erat volutpat. Integer ultrices lobortis eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin semper, ante vitae sollicitudin posuere, metus quam iaculis nibh, vitae scelerisque nunc massa eget pede. Sed velit urna, interdum vel, ultricies vel, faucibus at, quam.<img src="img/vloot2.jpg" class="middle-right">Suspendisse sollicitudin neque ut nulla feugiat, ut sodales eros eleifend. Vivamus at lorem fermentum leo sodales consectetur et at magna. Vivamus auctor feugiat eros ac luctus. Nullam suscipit odio sed lorem ornare mattis. Ut fringilla mi vel nulla feugiat convallis. Vivamus rhoncus, eros laoreet facilisis bibendum, purus dolor finibus arcu, quis varius metus odio eu justo.<br><br>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pulvinar velit a metus euismod, sit amet posuere urna faucibus. Morbi eu risus a mauris commodo venenatis. Fusce feugiat sem vel metus fermentum, vel blandit leo placerat. Donec dapibus lacus non sem accumsan, malesuada fermentum dolor sagittis. Aenean dictum leo vitae turpis congue, quis porttitor turpis tempor. Donec eu dignissim orci. Ut sagittis suscipit porta. Pellentesque dui magna, suscipit ultricies ipsum dapibus, placerat suscipit arcu. Vestibulum tempus, purus quis rhoncus facilisis, lorem erat venenatis sapien, vel tempor velit ligula nec nisl. Donec vitae justo elementum, porta arcu eu, consectetur dolor. Fusce dignissim feugiat velit a cursus. <img src="img/vloot3.jpg" class="bottom-left">Maecenas ultrices non justo eu consectetur. Nam vel lectus ligula. Morbi fringilla nibh nec ullamcorper tincidunt. Suspendisse potenti. Donec non iaculis ipsum, commodo ultricies mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse posuere eros quis quam imperdiet aliquet. Vivamus in mi venenatis, rutrum ante at, finibus enim. Mauris suscipit est a congue pellentesque. Nam tincidunt nulla vel feugiat rhoncus. Proin ullamcorper lorem lectus, non dictum nisi mollis ac. Fusce sit amet mauris ac arcu aliquam maximus. Vestibulum eros nisi, ultrices id dui ut, scelerisque commodo ligula. Cras nec nibh ut sem finibus euismod. Proin congue, libero ac placerat sollicitudin, augue urna ullamcorper ipsum, ut ornare magna nibh in metus.</p>
</section>


<section class="tabcontent" id="cruisers">
<h2>Patrouilleren bij Afrika</h2>
<p><img src="img/vloot4.jpg" class="top-left"><img src="img/vloot11.jpg" class="top-left">Aliquam erat volutpat. Integer in erat est. Sed id vestibulum velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus condimentum velit a nunc feugiat fermentum. Nunc at neque eros. Curabitur non risus porttitor, imperdiet justo non, ultrices elit. Donec eget varius sem, ac ullamcorper dui. Quisque dignissim diam id volutpat lacinia. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis elementum, lorem nec aliquet elementum, ante libero sollicitudin purus, ut rutrum tortor tellus nec justo. Quisque nec rhoncus lacus. Donec et convallis nisl, et hendrerit neque. Quisque tristique ipsum tortor, sed blandit ante efficitur quis. Duis mollis eros mi, iaculis porta ante fringilla non. Aenean at turpis tortor. Phasellus pellentesque bibendum nisl a pulvinar. In auctor, orci et mollis posuere, purus odio laoreet eros, ac viverra lacus lectus a magna. Duis eget gravida urna. Sed imperdiet felis cursus nisl dapibus tempus. Maecenas tincidunt nec sapien id sodales. Fusce mollis, metus id placerat mollis, magna est faucibus dolor, at ultricies augue mauris convallis lorem. Quisque porttitor facilisis urna. Cras condimentum mauris a elit varius convallis. Vivamus lorem massa, egestas ac rutrum at, feugiat scelerisque felis. Proin non est sed quam tincidunt porta facilisis nec dolor.<br><br>Morbi finibus aliquam cursus. Phasellus sagittis condimentum diam, a imperdiet mauris luctus vel. Phasellus consectetur eget mauris non aliquet. Morbi urna lectus, ullamcorper ac finibus at, eleifend at arcu. Praesent imperdiet, nibh quis elementum pretium, arcu enim condimentum massa, a faucibus est est ac magna. Integer vel bibendum leo, id elementum nibh.<img src="img/vloot12.jpg" class="bottom-right">Sed fermentum sapien erat, in elementum tortor posuere sed. Nullam quis vulputate orci. Morbi iaculis erat a eleifend placerat. Nunc scelerisque ut dolor sed consequat. Donec molestie risus in libero dapibus lobortis. Maecenas nec metus id mi molestie eleifend. Aliquam erat volutpat. Sed fermentum facilisis nibh quis molestie. Nulla lectus risus, congue lobortis sem eu, malesuada ultricies ligula..</p>
</section>


<section class="tabcontent" id="aircraftcarriers">
<h2>Wat vliegt daar boven de wolken?</h2>
<p><img src="img/vloot5.jpg" class="top-right">Maecenas pellentesque massa diam, quis finibus eros sagittis vel. Sed consectetur blandit mattis. Sed aliquam sem nec euismod ultricies. Nunc id purus egestas, porta lectus id, elementum ex. Integer consectetur mauris eget ante feugiat, ac sollicitudin elit dignissim. Donec in nulla congue justo facilisis ultrices. Duis facilisis elit id nibh viverra, vitae laoreet diam scelerisque. Fusce auctor ex quis nisl dapibus, sit amet iaculis leo rhoncus. Suspendisse elementum ac nulla sed suscipit. Ut enim velit, euismod id tortor in, accumsan maximus est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed et arcu in neque viverra condimentum non eget tortor. Nullam ultricies quam purus, ut rutrum odio tempus quis.<br><br>In condimentum libero eu orci laoreet, eget porta risus dapibus. Maecenas scelerisque leo dolor. Maecenas magna mi, gravida ut ex et, interdum dapibus sapien. Aenean maximus augue vel sagittis pharetra. Quisque et urna a risus elementum varius. Donec id nunc vitae justo ultrices elementum sed nec odio. Ut et tristique tellus. Nullam magna neque, maximus in est quis, dignissim auctor lacus. Nunc vel euismod urna. Nunc sed facilisis nisl, sit amet rhoncus massa. Nam pellentesque elementum ante. Vestibulum venenatis eros sollicitudin massa elementum facilisis. Curabitur vitae dapibus nisl. Praesent tempor at neque at suscipit. Praesent sit amet laoreet ipsum, eget porta augue. Suspendisse eleifend ornare elit et blandit. Nam scelerisque odio sit amet pretium ultricies. <img src="img/vloot6.gif" class="bottom-left"><img src="img/vloot7.gif" class="bottom-left"> Cras interdum, nibh et mollis euismod, odio enim dignissim ex, a sodales odio purus ut mauris. Maecenas efficitur magna et tellus molestie, non bibendum velit pharetra. Suspendisse potenti. Fusce sit amet ligula non nibh aliquet efficitur.</p>
</section>


<section class="tabcontent" id="submarines">
<h2><s>Herman van Veen</s> Onderzeeërs</h2>
<p><img src="img/vloot8.jpg" class="top-right">Praesent ut congue felis. Pellentesque ultricies risus mauris, id laoreet odio commodo vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean vel quam facilisis, convallis dolor sit amet, luctus ipsum. Suspendisse ultricies, arcu ac malesuada venenatis, elit nulla egestas justo, in ultricies est turpis quis nibh. Suspendisse bibendum nunc vitae diam imperdiet molestie. Etiam vel ante vel mi tristique dignissim vel et nibh. Duis orci libero, eleifend vel aliquam nec, mattis quis sem. Integer finibus mi non efficitur bibendum. Suspendisse sit amet enim sodales, tristique elit mollis, condimentum augue. Donec in elementum velit, placerat interdum neque. Phasellus et ultrices dolor. Integer quis mauris vitae tortor porta placerat. Phasellus ut maximus quam. Sed hendrerit consequat libero, ut maximus velit congue sit amet. Proin eu est consequat, elementum risus sed, tristique enim.<br><br>Fusce eu feugiat quam, sit amet rutrum augue. Morbi semper semper enim sed suscipit. Aenean vitae sem mi. Phasellus dapibus convallis erat sed varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at sem tempor, ultricies sem eu, tincidunt metus. Donec maximus mi commodo tellus sollicitudin condimentum.<img src="img/vloot10.jpg" class="middle-right">Nullam pretium ut diam id luctus. Sed mattis dolor sit amet augue interdum bibendum. Cras quis finibus nunc. Fusce erat risus, viverra vel ex quis, imperdiet finibus urna. Ut ac mi vitae nisi faucibus fringilla. Vestibulum eleifend velit a mattis auctor. Nulla pulvinar est in lacinia dictum. Sed sodales justo ex, vitae laoreet metus egestas ac. Vestibulum tempus facilisis dolor, sed consequat lorem ullamcorper nec. Aenean sagittis id eros vitae consequat. Donec eu massa sed sapien posuere mollis. Sed lobortis ac dui eget ullamcorper.<img src="img/vloot9.jpg" class="bottom-left">Cras interdum, nibh et mollis euismod, odio enim dignissim ex, a sodales odio purus ut mauris. Maecenas efficitur magna et tellus molestie, non bibendum velit pharetra. Suspendisse potenti. Fusce sit amet ligula non nibh aliquet efficitur.</p>
</section>


</main>
<script src="js/script.js"></script>
</body>
</html>
</html>
29 changes: 29 additions & 0 deletions js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
if (typeof(Storage) !== "undefined") {
var page = localStorage.getItem("page");
if(page != null) {
document.getElementById("b-" + page).click();
} else {
localStorage.setItem("page", "home");
}
}

function openPage(evt, page, title, subtitle) {
var i, tabcontent, tablinks
tabcontent = document.getElementsByClassName("tabcontent")
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none"
}
tablinks = document.getElementsByClassName("tablinks")
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "")
}
document.getElementById(page).style.display = "block"
evt.currentTarget.className += " active"

document.getElementById("header-title").innerHTML = title;
document.getElementById("header-subtitle").innerHTML = subtitle;

if (typeof(Storage) !== "undefined") {
localStorage.setItem("page", page);
}
}