Lettertypes werken niet en lay-out klopt niet.
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!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 regios 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/Rppells-vulture-sunbathing.jpg" alt="Rppells 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>
<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 regios 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/Rppells-vulture-sunbathing.jpg" alt="Rppells 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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
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;
}
}
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;
}
}
- Ariën - op 12/08/2024 10:18:34:
Als ik in de developer-tool kijk, dan worden je fonts gewoon gebruikt.
De lettertypes moeten worden gewijzigd en van die er nu staan naar een andere via google fonts maar als ik de link verander gebeurd er niks.
Het is ook een hele andere link in het bestand dan als ik er 1 uitzoeken.
Nu staat er https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap maar als ik naar Google fonts ga kan ik nergens vinden waar ik de link van een andere lettertype kan kopiëren.
In het boek staat dat als je een lettertype hebt geselecteerd er rechtsboven een knop moet staan (blokjes met een plusje).
Als ik bijvoorbeeld naar het font Lobster kijk, dan zie ik rechtsboven een grote knop met 'Get Font', warana je op 'Embed code' drukt.
De stappen wijzen zich dan vanzelf.
Weer een voorbeeld waarom het boek waardeloos is.
En heb de Embed code knop helemaal over het hoofd gezien terwijl ik aan het zoeken was.
Dat lost dat probleem op.
Hopelijk is er nog iemand die mij met het venstergrootte probleem kan helpen want wat ik ook probeer ik krijg ze niet in lijn zoals ze het willen.
Ik zag trouwens wel dat ik per ongeluk de 320px-sectie heb verwijderd toen ik aan het proberen was.
Heb dat nog even aangepast bij jsfiddle: https://jsfiddle.net/7qhxkn1L/
Gewijzigd op 14/08/2024 09:59:38 door Alexander Tobe
Gewijzigd op 14/08/2024 10:05:28 door - Ariën -
Adoptive Solution op 14/08/2024 10:26:36:
Testen is geen probleem. Dat kan met inspecteren en bovenaan de venstergrootte aanklikken.
De lay-out bij de verschillende venstergrootte is het probleem.
De code klopt niet.
Kan trouwens zonder url niet testen op die website en de bestanden staan natuurlijk op mijn pc zelf.
Adoptive Solution op 14/08/2024 11:42:43:
Wil niet sarcastisch klinken maar ik zie precies dezelfde problemen als bij inspecteren die nog steeds moeten worden opgelost maar kan ze nu ook in venstergrootte zien die niet gevraagd worden.
Kom met deze suggestie duss niks verder.
Adoptive Solution op 15/08/2024 11:38:43:
Zet de webpagina op de server zodat iedereen zelf kan zien hoe het eruit ziet.
Ik kan er niet meer bij op die free hosting website.
Nergens een inlog te vinden en nieuwe aanmaken gaat ook niet, krijg geen e-mail.
Code (php)
1
2
3
4
5
6
2
3
4
5
6
@media screen and (min-width: 1024px) {
.blokjes-grid {
flex-direction: row;
justify-content: space-around;
}
}
.blokjes-grid {
flex-direction: row;
justify-content: space-around;
}
}
Adoptive Solution op 16/08/2024 10:36:21:
Ik weet niet wat ik verkeerd heb gedaan maar hij zegt nu dat het niet bestaat.
Ik heb een andere gevonden die volgens mij werkt ga het zo uitproberen.
Jan Koehoorn op 16/08/2024 14:23:50:
Op regel 158 van je CSS staat per ongeluk een spatie in het woord 'media', tussen de 'i' en de 'a'. Maak daar eens dit van:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
@media screen and (min-width: 1024px) {
.blokjes-grid {
flex-direction: row;
justify-content: space-around;
}
}
.blokjes-grid {
flex-direction: row;
justify-content: space-around;
}
}
Media is alleen in de jsfiddle-versie, in de versie in de eerste post en in mijn bestand is het niet, heb wel 'screen and' toegevoegd maar ze blijven klein en niet schermvullend.
Toevoeging op 17/08/2024 18:24:28:
Hier is de link naar de site, de Responsive design checker doet het niet omdat het geen HTTPS is maar je kan nog steeds met inspecteren van de site de verschillende venstergrootte bekijken.
http://alext.free.nf/
Dit topic is gesloten.