Uitlijning werkt niet.
Ik heb inmiddels 29 punten opgelost maar 1 punt kom ik niet uit.
Gebruik van grid, tabellen en Java(script) mag niet.
De website moet goed werken op een smartphone (320px), tablet (768px) en laptop (1024px, 1440px) maar de uitlijning klopt niet.
Dit is het voorbeeld.
https://dam-cdn.loi.nl/document-output/casloi.prd.08a87b8e-fe35-4209-ab98-cbcab5a0b940/originaldocument
De volgende onderdelen kloppen nog niet;
• Vanaf 320px moet de uitlijning gecentreerd zijn, menu passend.
• 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.
• 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.
• 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.
Hier is de link naar de site, de Responsive design checker doet het niet omdat het geen HTTPS is maar je kan nog met inspecteren van de site de verschillende venstergrootte bekijken.
http://alext.free.nf/
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=Orbitron:[email protected]&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=Orbitron:[email protected]&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
162
163
164
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
162
163
164
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: left;
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: 320px){
}
@media(min-width: 768px) {
.artikel-content {
column-count: 3;
column-gap: 20px;
border-left: 1px solid red;
border-right: 1px solid red;
padding: 0px 10px;
}
}
.foto-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
.foto-grid img {
width: 100%;
height: 100%;
margin: 0;
align-items: center;
}
.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: "Orbitron", sans-serif;
font-size: 24px;
}
@media screen and (min-width: 1024px) {
.blokjes-grid {
flex-direction: row;
justify-content: space-around;
}
}
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: left;
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: 320px){
}
@media(min-width: 768px) {
.artikel-content {
column-count: 3;
column-gap: 20px;
border-left: 1px solid red;
border-right: 1px solid red;
padding: 0px 10px;
}
}
.foto-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
.foto-grid img {
width: 100%;
height: 100%;
margin: 0;
align-items: center;
}
.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: "Orbitron", sans-serif;
font-size: 24px;
}
@media screen and (min-width: 1024px) {
.blokjes-grid {
flex-direction: row;
justify-content: space-around;
}
}
Gewijzigd op 03/09/2024 09:59:27 door Alexander Tobe
Maar als het een hele eisenlijst is. Dan geef ik zo'n topic weinig tot geen enkele kans.
Gewijzigd op 09/09/2024 10:55:08 door - Ariën -
- Ariën - op 09/09/2024 10:54:02:
En daarnaast kan ik mij indenken dat je na zes dagen wel een oplossing hebt kunnen vinden. Ik zie hier niet echt wat zelfonderzoek voorbij komen. Een klein issue kunnen we vrijwillig naar kijken, maar het siert wel als je zelf ook met oplossingen komt.
Maar als het een hele eisenlijst is. Dan geef ik zo'n topic weinig tot geen enkele kans.
Maar als het een hele eisenlijst is. Dan geef ik zo'n topic weinig tot geen enkele kans.
Duss je laat mijn op 6 augustus geopende topic een maand lopen en als ik dan vraag op 2 september of het goed is als ik een nieuw topic openen die specifieker is zeg je zelf
Quote:
Als je een nieuw topic wilt openen die wat beperkter is dan je vorige topic, van vind ik het prima.
En nu zeg je na een week dat ik het zelf in die 6 dagen wel had kunnen vinden?
De suggestie dat ik zelf niks doe om het op te lossen slaat nergens op ik heb elke werkdag 2 uur voor deze studie en heb voor ik het topic op 6 augustus openen die 2 uur gebruikt elke dag om deze problemen oplossen.
Dat ik sindsdien bij opstarten van de pc iets probeer en als dat niets oplevert ik naar een andere module ga waarmee ik in ieder geval niet stil staat in de complete studie lijkt mij niet onlogisch.
Ik kreeg dit forum zelfs als tip als ik er niet uitkwam...
Terug naar het topic;
Al word maar geholpen bij de 320px-versie en de blokjes.