Tijden veranderen
Website fixen opdracht
Ben al een eind maar sommige onderdelen kom ik nog niet uit.
Er moest eigen tekst en plaatsjes en kleuren gebruikt worden.
Dit is het voorbeeld.
https://dam-cdn.loi.nl/document-output/casloi.prd.08a87b8e-fe35-4209-ab98-cbcab5a0b940/originaldocument
Maak een responsive website die goed werkt op een smartphone, tablet en laptop.
Maak een volledige HTML-pagina die geschikt is voor:
• een smartphone met een venstergrootte vanaf 320px
• een tablet met een venstergrootte vanaf 768px
• een laptop/pc met een venstergrootte vanaf 1024px
• alles met een venstergrootte vanaf 1440px.
De site bestaat uit de volgende indeling:
• Een menu.
• Een kort artikel.
• Een aantal plaatjes.
• Een aantal letterblokjes.
Uw uitwerking moet aan de volgende voorwaarden voldoen:
• Het menu moet met flexbox worden gemaakt.
• 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.
• 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.
• Vanaf een venstergrootte van 1440px wordt de breedte van de content smaller gemaakt en de pagina gecentreerd weergegeven.
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>
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
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
/* Fonts */
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: #2ba363;
}
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'; /* Star symbol */
margin-right: 10px;
}
@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: auto;
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;
}
}
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: #2ba363;
}
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'; /* Star symbol */
margin-right: 10px;
}
@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: auto;
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;
}
}
Gewijzigd op 01/08/2024 10:19:39 door Alexander Tobe
Voor wie is deze opdracht, want dit neigt naar een huiswerk-topic.
Mocht je specifieke deelvragen hebben, laat die dan weten in een nieuw topic. Want het is zeker niet de bedoeling dat we alles voor jouw gaan bouwen en uitzoeken. Diverse dingen die je noemt hebben in je vorige topic overigens nog de revue gepasseerd.
Dit topic gaat dicht.
Gewijzigd op 01/08/2024 10:45:19 door - Ariën -
Dit topic is gesloten.