-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
225 lines (214 loc) · 7.24 KB
/
index.html
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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!doctype html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="author" content="Pip Harsveld">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home | Plant Rebelz</title>
<link href="styles/style.css" rel="stylesheet">
<link rel="icon" type="image/svg+xml" href="images/plant-rebelz-logo.svg">
<!--geïmporteerde fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300&family=Ubuntu:wght@300&display=swap" rel="stylesheet">
</head>
<body id="homepagina">
<header>
<!-- logo -->
<a href="index.html" ><img src="images/plant-rebelz-logo.png" alt="Logo van Plant Rebelz"></a>
<!-- winkelwagen -->
<a href="#"><img src="images/bag.svg" alt="Winkelwagen icon" class="icon"></a>
<!-- button om hamburgermenu te openen -->
<button>menu</button>
<nav>
<a href="#"><img src="images/search.svg" alt="Zoeken"></a>
<button aria-label="menu sluiten"></button>
<!-- menu -->
<ul>
<li><a href="">Home</a></li>
<li><a href="">Kamerplanten</a></li>
<li><a href="stekjes.html">Stekjes</a></li>
<li><a href="">Terrariums</a></li>
<li><a href="">Potten & Manden</a></li>
<li><a href="">Giftcard</a></li>
<li><a href="">Goodies</a></li>
</ul>
</nav>
</header>
<main>
<!-- Eerste section (met achtergrondfoto) -->
<section>
<p>
Shop de tofste Stekkies, kakeltje <strong>vers</strong> uit eigen kas.
Zo hatseflats in je brievenbus.
</p>
<p>
Shop de tofste Stekkies, kakeltje <strong>vers</strong> uit eigen kas.
Je ontvangt ze via de post, gewoon door de brievenbus, hatseflats op
je deurmat.
</p>
<p>
★★★★★
<em>
<a href="https://www.google.com/search?q=plant+rebelz&oq=plant+rebelz&aqs=chrome.0.69i59l2j35i39j0j69i60l3j69i65.1705j1j9&sourceid=chrome&ie=UTF-8#lrd=0x47c5ad0383d03d87:0x5d7f5fc093c32b20,1,,," target="_blank" rel="noopener">250+ reviews</a>
</em>
</p>
<nav>
<a href="stekjes.html">Ontdek stekjes</a>
<a href="stekjes.html">StekkieBox</a>
</nav>
</section>
<!-- Tweede section (roze balk) -->
<section>
<section>
<img src="images/check.svg" alt="Check icon">
<p>Toffe & exclusieve planten</p>
</section>
<section>
<img src="images/check.svg" alt="Check icon">
<p>Gratis gift bij order vanaf € 59,-</p>
</section>
<section>
<img src="images/check.svg" alt="Check icon">
<p>Gratis thuisbezorgd vanaf € 69,-(NL)</p>
</section>
</section>
<!-- Derde section (grote afbeeldingen) -->
<section>
<h2>Vind jouw rebel</h2>
<nav>
<ul>
<li>
<a href=""><img src="images/alle-planten-link.png" alt="afbeelding met de tekst: alle planten"></a>
</li>
<li>
<a href=""><img src="images/terrariums-link.png" alt="afbeelding met de tekst: terrariums"></a>
</li>
<li>
<a href=""><img src="images/unieke-planten-link.png" alt="afbeelding met de tekst: unieke planten"></a>
</li>
</ul>
</nav>
</section>
<!-- Vierde section (grijze achtergrond) -->
<section>
<h2>Verzorgingsvraag?</h2>
<p>
Speciaal voor de groentjes onder ons. Spit eens door onze verzorgingstips.
Van natuurlijke voeding tot voldoende daglicht en style je urban jungle
af met serieus goed stylingadvies.
</p>
<a href="stekjes.html" >Verzorgingstips</a>
<p>Gevalletje s.o.s. of snelle vraag?</p>
<a href="">Stuur een WhatsApp</a>
<img src="images/denkende-man.png" alt="denkende man met schort die een plant vast houdt.">
</section>
<!-- Niet zichtbaar op klein formaat -->
<section>
<article>
<h2>Stekkie surprise</h2>
<p>
Ben jij het type: ik laat me graag verrassen? Dan word je heel erg blij
van onze Stekkie Surprise: een box met vier stekjes én confetti om het
surprise-effect compleet te maken. Dé perfecte gift voor plantenfanaten.
</p>
<a href="stekjes.html" >Shop nu</a>
<img src="images/stekkie-surprise-homepagina.png" alt="vrouw in een woonkamer die een brievenbusdoosje met stekjes vasthoudt">
</article>
<article>
<img src="images/stekkie-box-homepagina.png" alt="brievenbusdoosje met stekjes in een boekenkast">
<h2>Stekkie box</h2>
<p>
Met Stekkie Box ontvang je elke maand een box vol toffe stekjes. Ontdek
nieuwe soorten en misschien zelfs nieuwe fav’s. Stekkie Box is op elk
moment opzegbaar. Wacht niet langer, unbox plant-iness!
</p>
<a href="stekjes.html" >Shop nu</a>
</article>
</section>
<!-- Vijfde section (reviews met roze achtergrond) -->
<section>
<h3>We scoren een 5/5</h3>
<div>
<article>
<p>★★★★★</p>
<p>
Wow, Plant Rebelz is echt een verrijking voor alle plantenliefhebbers.
Het assortiment is top, ze zijn erg professioneel.. Keep up the good work!
</p>
<p>Rianne</p>
</article>
<article>
<p>★★★★★</p>
<p>
Ik raad dit bedrijf aan! Wat een goede service & mijn planten staan prachtig.
Snelle levering en heel vriendelijk personeel. Ik ben echt tevreden!
</p>
<p>Maura</p>
</article>
<article>
<p>★★★★★</p>
<p>
Echt super om je planten online te kunnen bestellen! Ik wil echt alles hebben.
Snel geleverd & fijne service. Hoe leuk is die Insta pagina ook!
</p>
<p>Roseanne</p>
</article>
</div>
<a href="https://www.google.com/search?q=plant+rebelz&oq=plant+rebelz&aqs=chrome.0.69i59l2j35i39j0j69i60l3j69i65.1705j1j9&sourceid=chrome&ie=UTF-8#lrd=0x47c5ad0383d03d87:0x5d7f5fc093c32b20,1,,," target="_blank" rel="noopener">Alle google reviews</a>
</section>
<!-- Zesde section (balkje) -->
<section>
<img src="images/check.svg" alt="Check icon">
<p>Gratis thuisbezorgd vanaf € 69,- (NL)</p>
</section>
</main>
<footer>
<section>
<!-- Aanmelden voor nieuwsbrief -->
<form action="index.html">
<p>Schrijf je in voor onze newsletter en ontvang een tof welkomstcadeautje!</p>
<input type="email" required placeholder="E-mailadres">
<input type="submit" value="Inschrijven!">
</form>
<!-- Navigatie -->
<nav>
<ul>
<li><h4>Service</h4></li>
<li><a href="">Vraag & Antwoord</a></li>
<li><a href="">Verzorgingstips</a></li>
<li><a href="">Algemene voorwaarden</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Cookiebeleid (EU)</a></li>
</ul>
</nav>
<nav>
<ul>
<li><h4>About</h4></li>
<li><a href="">Onze Roots</a></li>
<li><a href="">Nieuwsbrief</a></li>
<li><a href="">Vacatures (3)</a></li>
</ul>
</nav>
<nav>
<ul>
<li><h4>Social</h4></li>
<li><a href="">Contact</a></li>
<li><a href="">Influencers</a></li>
</ul>
</nav>
</section>
<!-- Reviews en social media -->
<section>
<h3>We scoren een 5/5 125+ reviews</h3>
<div>
<img src="images/facebook.svg" alt="logo van facebook">
<img src="images/instagram.svg" alt="logo van instagram">
<img src="images/pinterest.svg" alt="logo van pinterest">
<img src="images/whatsapp.svg" alt="logo van whatsapp">
</div>
</section>
</footer>
<script src="scripts/script.js"></script>
</body>
</html>