-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
290 lines (277 loc) · 10.3 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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ProTech</title>
<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=IBM+Plex+Sans:wght@400;500;600;700&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="hero flex column">
<div class="top-items flex column">
<nav class="flex flex-row">
<div class="hamburger pointer">
<img class="hamburgerSVG" src="images/hamburger.svg" alt="" />
</div>
<!-- <a href="index.html"> -->
<!-- <h1>ProTech</h1> -->
<img class="protech-typo-logo" src="images/Protech_logo_maroon.svg" alt="ProTech logotype">
<!-- </a> -->
<div class="shopping-bag pointer">
<img class="shoppingSVG" src="images/shopping-bag.svg" alt="" />
</div>
</nav>
<div class="drop-menu flex">
<div class="title-language-container flex desktop-only">
<div class="language navlang">
<button class="language-button pointer">
<span class="pointer">Språk</span>
<img class="pointer" src="images/arrow-down.svg" alt="" />
</button>
<ul class="language-menu pointer flex column">
<li class="swedish selected">Svenska</li>
<li class="english">English</li>
</ul>
</div>
</div>
<div class="flex column">
<h3>Produkter</h3>
<span>Herr</span>
<span>Dam</span>
<span>Utrustning</span>
</div>
<div class="flex column">
<h3>Kollektioner</h3>
<span>Trailblazer</span>
<span>Sarek X4</span>
<span>Voyager</span>
</div>
<div class="flex column">
<h3>SoMe</h3>
<span>Facebook</span>
<span>Instagram</span>
<span>Youtube</span>
</div>
<div class="flex column">
<h3>Info</h3>
<span>Om oss</span>
<span>Jobba här</span>
<span>Leverans</span>
</div>
</div>
</div>
<div class="card">
<h2>Tävla med oss och vinn produkter från Sarek X4 Series</h2>
<p>
För att fira lanseringen av vår nya kollektion lottar ut produkter till ett värde av 50 000 kr. Ta chansen att
bli utrustad för dina utmaningar.
</p>
<button class="btn to-competition">Till tävlingen</button>
</div>
</header>
<section class="products small flex column">
<h2>Sarek X4 Series</h2>
<div class="products-container flex row">
<div class="product flex column">
<div class="img-container">
<img class="primary" src="/images/m-watch_pro_1.jpg" alt="">
<img class="secondary" src="/images/m-watch_pro_2.jpg" alt="">
</div>
<div class="product-info flex row">
<p>Klocka Pro</p>
<p>2790 kr</p>
</div>
</div>
<div class="product flex column">
<div class="img-container">
<img class="primary" src="/images/m-powerbank_1.jpg" alt="">
<img class="secondary" src="images/m-powerbank_2.jpg" alt="">
</div>
<div class="product-info flex row">
<p>Powerbank</p>
<p>1890 kr</p>
</div>
</div>
<div class="product flex column desktop-only">
<div class="img-container">
<img class="primary" src="" alt="">
<img class="secondary" src="" alt="">
</div>
<div class="product-info flex row">
<p>Jacka</p>
<p>1400 kr</p>
</div>
</div>
</div>
</div>
<button class="btn more pointer">Se hela kollektionen</button>
</section>
<section class="once-upon-container flex row">
<div class="once-upon-text">
<div class="story flex column" onclick="showOnceUponText()">
<h2>Utrustad för utmaning</h2>
<p>Utforska vildmarken med ProTechs senaste tillskott - Sarek X4 Series Jacket. Utrustad med avancerad
teknologi, inklusive elslingor som ger långvarig värme, och ett 100% vattentätt yttre, håller denna jacka dig
bekväm och skyddad oavsett väder. Dess mångsidiga design passar perfekt för alla utomhusaktiviteter, med fokus
på både funktionalitet och stil.
<p>Utforska vildmarken med ProTechs senaste tillskott – Sarek X4 Series Jacket. Utrustad med avancerad
teknologi, inklusive elslingor som ger långvarig värme, och ett 100% vattentätt yttre, håller denna jacka dig
bekväm och skyddad oavsett väder. Dess mångsidiga design passar perfekt för alla utomhusaktiviteter, med fokus
på både funktionalitet och stil.
Hög kvalitet och hållbarhet är kännetecken för denna jacka, vilket gör den till det ultimata valet för
äventyrsentusiaster. Upptäck naturen med självsäkerhet i ProTechs Sarek X4 Series Jacket.</p>
</div>
</div>
<div class="once-upon-img-top"><img src="/images/jacket_layers.jpg" alt=""></div>
<div class="once-upon-img-container">
<div class="img-container-campaign"></div>
</div>
</section>
<section class="campaign flex column">
<div class="campaign-copy">
<h2>
Vinn produkter från Sarek X4 Series
</h2>
<p>
Vi lottar ut produkter från vår nya kollektion till ett värde av 50 000 kr
</p>
<button type="submit" class="btn to-competition">Till tävlingen</button>
</div>
<div class="campaign-media">
<video autoplay loop muted>
<source src="videos/Jacket_turntable_v2.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
</section>
<div class="campaign-img">
<!-- <img src="/images/m-hiker-hd.jpg" alt=""> -->
</div>
<section class="competition flex column">
<div class="campaign-copy">
<h2>
Få ett Protech tändstål
</h2>
<p>I samband med lanseringen av Sarek X4 ger vi bort tändstål i våra butiker! Ange din epostadress för att få din
personliga kod.</p>
<form autocomplete="on" action="/" method="post" class="flex column">
<label for="competition-email">E-post</label>
<input type="text" name="email" id="competition-email" placeholder="namn.namnsson@gmail.com" autocomplete="on">
<button type="submit" class="btn send">Skicka</button>
</form>
</div>
<div class="campaign-media"><img src="images/tandstal.jpg" alt="Tändstål"></div>
</section>
<section class="products large flex column">
<h2>Sarek X4 Series</h2>
<div class="products-container flex row">
<div class="product flex column">
<div class="img-container">
<img class="primary" src="/images/m-powerbank_pro_1.jpg" alt="">
<img class="secondary" src="/images/m-powerbank_pro_2.jpg" alt="">
</div>
<div class="product-info flex row">
<p>Powerbank Pro</p>
<p>950 kr</p>
</div>
</div>
<div class="product flex column">
<div class="img-container">
<img class="primary" src="/images/m-watch_pro_1.jpg" alt="">
<img class="secondary" src="/images/m-watch_pro_2.jpg" alt="">
</div>
<div class="product-info flex row">
<p>Klocka Pro</p>
<p>2790 kr</p>
</div>
</div>
<div class="product desktop-only flex column">
<div class="img-container">
<img class="primary" src="/images/m-jacket_pro_1.jpg" alt="">
<img class="secondary" src="/images/m-jacket_pro_2.jpg" alt="">
</div>
<div class="product-info flex row">
<p>Jacka Pro</p>
<p>1490 kr</p>
</div>
</div>
</div>
<div class="products-container flex row">
<div class="product flex column">
<div class="img-container">
<img class="primary" src="/images/m-watch_basic_1.jpg" alt="">
<img class="secondary" src="/images/m-watch_basic_2.jpg" alt="">
</div>
<div class="product-info flex row">
<p>Klocka</p>
<p>2390 kr</p>
</div>
</div>
<div class="product flex column">
<div class="img-container">
<img class="primary" src="/images/m-jacket_basic_1.jpg" alt="">
<img class="secondary" src="/images/m-jacket_basic_2.jpg" alt="">
</div>
<div class="product-info flex row">
<p>Jacka</p>
<p>890 kr</p>
</div>
</div>
<div class="product desktop-only column">
<div class="img-container">
<img class="primary" src="/images/m-powerbank_1.jpg" alt="">
<img class="secondary" src="images/m-powerbank_2.jpg" alt="">
</div>
<div class="product-info flex row">
<p>Powerbank</p>
<p>650 kr</p>
</div>
</div>
</div>
<button class="btn more pointer">Se hela kollektionen</button>
</section>
<footer class="flex">
<div class="title-language-container flex column">
<img class="protech-icon" src="images/Protech_icon_maroon.svg" alt="Protech icon">
<div class="language">
<button class="language-button pointer">
<span class="pointer">Språk</span>
<img class="pointer" src="images/arrow-down.svg" alt="" />
</button>
<ul class="language-menu pointer flex column">
<li class="swedish selected">Svenska</li>
<li class="english">English</li>
</ul>
</div>
</div>
<div class="grid">
<div class="flex column">
<h3>SoMe</h3>
<span>Facebook</span>
<span>Instagram</span>
<span>YouTube</span>
</div>
<div class="flex column">
<h3>Kontakt</h3>
<span>007-09 23 44</span>
<span> info@protech.se</span>
</div>
<div class="flex column">
<h3>Info</h3>
<span>Om oss</span>
<span>Jobba här</span>
<span>Leverans</span>
</div>
<div class="flex column">
<h3>Adress</h3>
<span>Södra vägen 23</span>
<span>445 32 Göteborg</span>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>