Delete hamels/index.html
This commit is contained in:
@@ -1,122 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="nl">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Napoleon, Nationalisme en Propaganda</title>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
text-align: center;
|
|
||||||
padding: 30px;
|
|
||||||
background-image: url("sovjet.png");
|
|
||||||
background-repeat: repeat;
|
|
||||||
background-size: 300px;
|
|
||||||
background-color: #ffffff;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
h1, h2, p, footer { color: black; }
|
|
||||||
p { font-size: 18px; max-width: 700px; margin: 0 auto; }
|
|
||||||
img { width: 300px; margin: 20px; border: 3px solid black; background-color: white; }
|
|
||||||
video { margin: 20px auto; width: 600px; max-width: 100%; border: 2px solid black; }
|
|
||||||
.buttons { margin: 20px; }
|
|
||||||
button {
|
|
||||||
font-size: 18px;
|
|
||||||
padding: 10px 20px;
|
|
||||||
margin: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 2px solid black;
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
button:hover { background-color: #ddd; }
|
|
||||||
#grafiek {
|
|
||||||
width: 300px;
|
|
||||||
margin: 20px auto;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-end;
|
|
||||||
height: 150px;
|
|
||||||
}
|
|
||||||
.bar {
|
|
||||||
width: 100px;
|
|
||||||
background-color: #4CAF50;
|
|
||||||
text-align: center;
|
|
||||||
color: white;
|
|
||||||
font-weight: bold;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
.bar.negative { background-color: #f44336; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<h1>Napoleon, Nationalisme en Propaganda</h1>
|
|
||||||
|
|
||||||
<h2>Wie was Napoleon?</h2>
|
|
||||||
<p>
|
|
||||||
Napoleon Bonaparte was een Franse leider rond 1800.
|
|
||||||
Hij gebruikte propaganda om zichzelf te laten zien als sterke en heldhaftige leider.
|
|
||||||
</p>
|
|
||||||
<img src="napoleon1.jpg" alt="Napoleon schilderij">
|
|
||||||
|
|
||||||
<h2>Nationalisme</h2>
|
|
||||||
<p>
|
|
||||||
Nationalisme betekent dat mensen zich verbonden voelen met hun land.
|
|
||||||
Napoleon stimuleerde dit door Frankrijk af te beelden als machtig.
|
|
||||||
</p>
|
|
||||||
<img src="nationalisme.jpg" alt="Napoleontisch nationalisme">
|
|
||||||
|
|
||||||
<h2>Propaganda</h2>
|
|
||||||
<p>
|
|
||||||
Propaganda werd gebruikt om Napoleon groter, sterker en slimmer af te beelden.
|
|
||||||
Op schilderijen werd hij vaak als held weergegeven.
|
|
||||||
</p>
|
|
||||||
<img src="propaganda.jpg" alt="Napoleontische propaganda">
|
|
||||||
|
|
||||||
<h2>Bekijk video</h2>
|
|
||||||
<video controls>
|
|
||||||
<source src="https://git.de-roo.org/ben/ben.de-roo.org/raw/branch/main/hamels/Dire%20Straits%20-%20Money%20For%20Nothing%20%28Official%20Music%20Video%29.webm" type="video/webm">
|
|
||||||
Je browser ondersteunt deze video niet.
|
|
||||||
</video>
|
|
||||||
|
|
||||||
<h2>Vond je deze site leuk?</h2>
|
|
||||||
<div class="buttons">
|
|
||||||
<button onclick="stem('like')">👍 Duimpje omhoog</button>
|
|
||||||
<button onclick="stem('dislike')">👎 Duimpje omlaag</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="grafiek">
|
|
||||||
<div class="bar" id="likeBar">0</div>
|
|
||||||
<div class="bar negative" id="dislikeBar">0</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<p>Gemaakt door Tristan – schoolproject</p>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// laadt stemmen uit localStorage of start bij 0
|
|
||||||
let stemmen = JSON.parse(localStorage.getItem('stemmen')) || {like:0, dislike:0};
|
|
||||||
|
|
||||||
function stem(keuze) {
|
|
||||||
stemmen[keuze]++;
|
|
||||||
localStorage.setItem('stemmen', JSON.stringify(stemmen));
|
|
||||||
updateGrafiek();
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateGrafiek() {
|
|
||||||
let totaal = stemmen.like + stemmen.dislike;
|
|
||||||
let likeBar = document.getElementById("likeBar");
|
|
||||||
let dislikeBar = document.getElementById("dislikeBar");
|
|
||||||
let likeHeight = (stemmen.like / Math.max(totaal,1)) * 150;
|
|
||||||
let dislikeHeight = (stemmen.dislike / Math.max(totaal,1)) * 150;
|
|
||||||
likeBar.style.height = likeHeight + "px";
|
|
||||||
likeBar.innerText = stemmen.like;
|
|
||||||
dislikeBar.style.height = dislikeHeight + "px";
|
|
||||||
dislikeBar.innerText = stemmen.dislike;
|
|
||||||
}
|
|
||||||
|
|
||||||
updateGrafiek();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Reference in New Issue
Block a user