154 lines
3.3 KiB
HTML
154 lines
3.3 KiB
HTML
<!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;
|
||
}
|
||
|
||
.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 die leefde rond 1800.
|
||
Hij gebruikte propaganda om zichzelf te laten zien als een sterke
|
||
en heldhaftige leider van Frankrijk.
|
||
</p>
|
||
<img src="napoleon1.jpg" alt="Napoleon schilderij">
|
||
|
||
<h2>Nationalisme</h2>
|
||
<p>
|
||
Nationalisme betekent dat mensen zich sterk verbonden voelen met hun land.
|
||
Napoleon stimuleerde dit door Frankrijk af te beelden als machtig en superieur.
|
||
Soldaten vochten niet alleen voor hem, maar voor Frankrijk zelf.
|
||
</p>
|
||
<img src="nationalisme.jpg" alt="Napoleontisch nationalisme">
|
||
|
||
<h2>Propaganda</h2>
|
||
<p>
|
||
Propaganda werd gebruikt om Napoleon groter, sterker en slimmer af te beelden
|
||
dan hij in werkelijkheid was. Op schilderijen werd hij vaak afgebeeld
|
||
als een held of bijna als een mythisch figuur.
|
||
</p>
|
||
<img src="propaganda.jpg" alt="Napoleontische propaganda">
|
||
|
||
<h2>Waarom werkte dit?</h2>
|
||
<p>
|
||
Veel mensen konden niet lezen, dus beelden waren heel belangrijk.
|
||
Door deze afbeeldingen gingen mensen Napoleon bewonderen en steunen.
|
||
</p>
|
||
|
||
<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>
|
||
let stemmen = {
|
||
like: 0,
|
||
dislike: 0
|
||
};
|
||
|
||
function stem(keuze) {
|
||
stemmen[keuze]++;
|
||
updateGrafiek();
|
||
}
|
||
|
||
function updateGrafiek() {
|
||
let totaal = stemmen.like + stemmen.dislike;
|
||
let likeBar = document.getElementById("likeBar");
|
||
let dislikeBar = document.getElementById("dislikeBar");
|
||
|
||
// hoogte in pixels (max 150px)
|
||
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;
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|