Boeken | His Dark Materials

5 maart 2021

by EvanlynnNT

HTML

<div style="position: relative; width: 940px; height: 650px; background: url(https://i.imgur.com/6ALJhEG.jpg)">
	<div style="position: absolute; overflow: auto; width: 245px; height: 165px; left: 30px; top: 420px; text-align: justify; padding-right: 5px; box-sizing: border-box; color: #beac9b;">
		His Dark Materials is een driedelige boekenreeks geschreven door Philip Pullman. Het eerste boek, Het Gouden Kompas, werd gepubliceerd in 1995. De Nederlandse vertaling volgde een jaar later.<br><br>

		Het verhaal volgt de twaalfjarige Lyra Belacqua in een wereld met zeppelins, gepantserde beren, heksen en daemons. In Lyra's wereld leven zielen buiten het lichaam in de vorm van een gezelschapsdier, een daemon. Een mens en hun daemon kunnen nooit verder dan enkele meters uit elkaar. Daemons van kinderen kunnen nog vrij van gedaante veranderen tot ze in de puberteit een vaste vorm aannemen.<br><br>

		Lyra en haar daemon Pantalaimon zijn opgegroeid in het Jordan College, waar oude geleerden haar hebben opgevoed sinds de dag dat haar ouders stierven. Haar oom, lord Asriel, bezoekt het college zo nu en dan. Hij komt met verhalen van verre reizen en andere culturen. Als Lyra de rector van haar college een poging ziet doen lord Asriel te vergiftigen, steekt ze hier een stokje voor. Omdat ze snel weer weg moet zijn voordat de rector terugkomt, verstopt ze zich in een kast en kan ze luisteren naar het verhaal van Lord Asriel. Hij heeft een ontdekking gedaan, vreemde deeltjes die te zien zijn bij volwassenen, maar niet bij kinderen, op een bepaald soort fotogram. Hij noemt het Stof en Lyra is ontzettend geïnteresseerd.<br><br>

		Ze smeekt haar oom haar mee te nemen op zijn expeditie naar het noorden, maar hij wil er niets van weten. Dus hij laat Lyra achter in het college in Oxford. Maar in Oxford gebeuren rare dingen, kinderen raken vermist en al snel ontstaat de legende van de lokkers. Lyra, die de mooiste verhalen kan verzinnen en vertellen, plaagt de kinderen in de buurt...

CSS

* {
	font-family: 'Arial', sans-serif;
	font-size: 12px;
}

hr {
	border: 1px solid #beac9b;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
 
::-webkit-scrollbar-track {
    background: #e6e6e6;
}
 
::-webkit-scrollbar-thumb {
    background: #1a232c;
}
 
::-webkit-scrollbar-thumb:hover {
    background: #11181f;
}

.buttonContainer {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	line-height: 20px;
}

.button {
	text-align: center;
	background: #beac9b;
	border-radius: 5px;
	transition: all 0.7s ease;
}

.button:hover {
	cursor: pointer;
	background: #a28f7d;
}

JavaScript

$( '.button' ).click(function () {
    var textBox = this.className.split(' ')[1];
    $( '.trailer' ).hide();
    $( '.' + textBox ).show();
});