Ik heb inmiddels 28 punten opgelost maar 2 punten kom ik niet uit.
Gebruik van grid, tabellen en Java(script) mag niet.
Namelijk de lettertypes veranderen werkt niet en de website lay-out bij andere venstergrootte klopt niet.
Er stonden 3 lettertypes ingesteld en deze moet worden gewijzigd maar welke google-link van een lettertype ik ook pak ze veranderen niet.
In de code hieronder staat het nog zoals het was.
Dit staat erin de opdracht;
Gebruik drie verschillende lettertypes die u van Google haalt. De drie verschillende lettertypes gebruikt u voor:
- menu, lettertype 1
- letter in de cirkel, lettertype 2
- de rest, lettertype 3.
De website moet goed werken op een smartphone, tablet en laptop maar de uitlijning klopt niet.
Dit is het voorbeeld.
https://dam-cdn.loi.nl/document-output/casloi.prd.08a87b8e-fe35-4209-ab98-cbcab5a0b940/originaldocument
Dit staat erin de opdracht;
Venstergrootte: 320px, 768px, 1024px, 1440px.
• Het menu moet met flexbox worden gemaakt. (Heb ik gedaan als het goed is.)
• Vanaf 768px moet het artikel worden getoond in drie kolommen, gescheiden door een dunne rode lijn met de kop over de drie kolommen heen.
• Vanaf 768px worden de foto's in rijen van twee getoond, waarbij de gehele breedte wordt gebruikt en een kleine marge tussen de foto's.
• Vanaf 1024px worden de foto's in één rij van vier getoond, waarbij de gehele breedte wordt gebruikt en een kleine marge tussen de foto's.
• Onder de lijn staan letterblokjes die zijn voorzien van een kopje met een schaduweffect.
• Er zijn drie rijen van twee letterblokjes (gebruik de gehele breedte van het scherm) met een kleine ruimte tussen de blokjes. Op de eerste rij moet de letter L staan in de cirkel. Op de tweede rij de letter O en op de derde rij de letter I.
• Vanaf 1024px worden de letterblokjes in twee rijen getoond (gebruik de gehele breedte van het scherm) met een kleine ruimte tussen de blokjes, waarbij de drie blokjes horizontaal op één rij de tekst LOI tonen.
• Vanaf een venstergrootte van 1440px wordt de breedte van de content smaller gemaakt en de pagina gecentreerd weergegeven.
HTML:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opdracht Overgangen en animaties, attr() en CSS-variabelen</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="layout.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#artikel">Masterplan 2050</a></li>
<li><a href="#foto">bedreigde diersoorten</a></li>
<li><a href="#letterblokjes">Letterblokjes</a></li>
</ul>
</nav>
</header>
<main>
<section id="artikel">
<h1>Van dierentuin naar natuurherstel</h1>
<div class="artikel-content">
<p>★ Blijdorp biedt de bezoekers de natuurlijke leefomgeving van de diersoorten en geeft informatie over het behoud van de biodiversiteit.
Als we niets doen, verdwijnen diersoorten en daarom zet Diergaarde Blijdorp zich in voor natuurherstel.
De urgentie en de oplossingsrichting omschreven wij in vier guiding principles: Stop the Loss, Reverse the Red, Brighten the Blue en Expand the Green.</p>
<p>★ Soortbehoud en natuurherstel gaan hand in hand, dus vormen deze twee samen onze strategie. ‘Together we bring nature back to life’.
Veel natuurgebieden hebben het zwaar te verduren. Allemaal op hun eigen manier.
Natuurherstel in deze regio’s is essentieel om bedreigde dier- en plantsoorten te behouden.
</p>
</div>
</section>
<section id="foto">
<h2>Foto's van bedreigde diersoorten</h2>
<div class="foto-grid">
<figure>
<img src="Media/Elephants.jpg" alt="Elephants">
</figure>
<figure>
<img class="transparent" src="Media/Redpanda.jpg" alt="Red Panda">
</figure>
<figure>
<img class="transparent" src="Media/Rüppells-vulture-sunbathing.jpg" alt="Rüppells vulture sunbathing">
</figure>
<figure>
<img src="Media/Pygmy-Hippo-baby.jpg" alt="Pygmy Hippo Baby">
</figure>
</div>
</section>
<hr class="gradient-line">
<section id="letterblokjes">
<h2>Letterblokjes</h2>
<div class="blokjes-grid">
<div class="blokje">
<div class="cirkel">L</div>
</div>
<div class="blokje">
<div class="cirkel">O</div>
</div>
<div class="blokje">
<div class="cirkel">I</div>
</div>
</div>
<div class="blokjes-grid">
<div class="blokje">
<div class="cirkel">L</div>
</div>
<div class="blokje">
<div class="cirkel">O</div>
</div>
<div class="blokje">
<div class="cirkel">I</div>
</div>
</div>
</section>
</main>
</body>
</html>
CSS:
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
}
header {
background-color: #33af6d;
width: 100%;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-between;
padding: 10px;
margin: 0;
}
nav ul li {
flex: 1;
text-align: center;
position: relative;
}
nav ul li:not(:last-child)::after {
content: '|';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
color: #e5f1f8;
}
nav ul li a {
color: #e5f1f8;
text-decoration: none;
text-transform: uppercase;
font-family: 'Roboto', sans-serif;
padding: 10px;
display: block;
transition: background 0.3s;
}
nav ul li a:hover {
background-color: #299b5e;
}
main {
width: 100%;
max-width: 1440px;
padding: 20px;
}
section {
margin: 20px 0;
}
h1, h2 {
text-align: center;
font-family: 'Montserrat', sans-serif;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}
.artikel-content {
column-count: 1;
column-gap: 20px;
}
.artikel-content p::before {
content: '\2605';
}
@media(min-width: 768px) {
.artikel-content {
column-count: 3;
column-gap: 20px;
border-left: 1px solid red;
border-right: 1px solid red;
padding: 0 10px;
}
}
.foto-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
.foto-grid img {
width: 100%;
height: 100%;
margin: 0;
}
.foto-grid img.transparent {
opacity: 0.7;
}
@media(min-width: 768px) {
.foto-grid {
flex-direction: row;
flex-wrap: wrap;
}
.foto-grid figure {
width: calc(50% - 10px);
}
}
@media(min-width: 1024px) {
.foto-grid figure {
width: calc(25% - 10px);
}
}
.gradient-line {
border: 0;
height: 2px;
background: linear-gradient(to right, black, white, black);
margin: 20px 0;
}
.blokjes-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
.blokje {
background-color: #33af6d;
border: 1px solid #df5200;
border-radius: 10px;
padding: 20px;
text-align: center;
}
.cirkel {
width: 50px;
height: 50px;
background-color: #e5f1f8;
border: 2px solid #df5200;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 24px;
}
@media(min-width: 1024px) {
.blokjes-grid {
flex-direction: row;
justify-content: space-around;
}
}
