-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.php
More file actions
166 lines (162 loc) · 7.23 KB
/
Copy pathindex.php
File metadata and controls
166 lines (162 loc) · 7.23 KB
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
<?php
require __DIR__ . '/header.php';
?>
<main>
<section class="heroNavbar">
<section class="heroVideoText">
<h1 id="siteTitle">KIN/FORMA</h1>
<p id="headerText">Framtidens mode, idag</p>
</section>
<article class="hero">
<video class="video" autoplay muted loop src="assets/videos/grass.mp4"></video>
<button class="pauseButton" id="button1"><img src="assets/icons/pause.png"></button>
</article>
</section>
<article class="catigoryContainer">
<h1 id="categoriesHeading">Utforska våra produkter</h1>
<section class="productPictures">
<div>
<h3>Kläder</h3>
<img src="assets/images/clothes.png">
</div>
<div>
<h3>Accessoarer</h3>
</div>
<div>
<h3>Beauty</h3>
</div>
<div>
<h3>Merch</h3>
</div>
</section>
</article>
<section class="materialInfo">
<h1>VI VÄVER FRAMTIDEN</h1>
<p>Kin tech/material är utvecklad med fem lager som skyddar och håller. Med våra epd-noder kan du lätt bevara din saker </p>
</section>
<article class="materialVideo">
<video class="video" autoplay muted loop src="assets/videos/drillAnimation.mov"></video>
<button class="pauseButton"><img src="assets/icons/pause.png"></button>
</article>
<!-- <div class="video-container">
<video id="myVideo">
<source src="Drillanimation0001-0250.mov">
</video>
Your custom button (use your symbol here instead of ► or ❚❚) -->
<!-- <button id="pauseBtn" class="video-btn">❚❚</button>
</div> -->
<!-- configurator -->
<article class="configurator">
<div id="productTypeSelection">
<h1 id="dinStilHeading">Din stil, Ditt val</h1>
<p>Designa dina egna KIN/FORM saker. Skapa det som du gillar bäst.</p>
<div id="productsToConfigurate">
<div>
<img id="bagImage" src="assets/images/backpack-small.png">
<h4>TECH VÄSKA</h4>
</div>
<div class="">
<!-- resize img for jacket -->
<img src="assets/images/grayJacket.png" alt="A front-facing gray jacket with two large pockets on the left side.">
<h4>TECH JACKA</h4>
</div>
</div>
</div>
<div id="config">
<div class="variantHolder">
<img id="productVariant" src="assets/images/circle-red.png" /><br />
<p id="productInfo">KIN/FORM BAG är omsorgsfyllt utvecklad med KIN Tech/material</p>
</div>
<section class="pockets">
<div><img id="model1" class="modelButton" src="assets/images/switchable-item.png" data-model="rectangle"></div>
<div><img id="model2" class="modelButton" src="assets/images/switchable-item(1).png" data-model="circle"></div>
<div><img id="model3" class="modelButton" src="assets/images/switchable-item(2).png" data-model="star"></div>
<div><img id="model4" class="modelbutton" src="assets/images/switchable-item(3).png"></div>
</section>
<!-- Color buttons -->
<div id="colors">
<div id="redButton" class="colorButton" data-color="red"></div>
<div id="greenButton" class="colorButton" data-color="green"></div>
<div id="greyButton" class="colorButton" data-color="grey"></div>
</div>
</div>
<div id="config">
<div class="variantHolder">
<img id="productVariant" src="assets/images/circle-red.png" /><br />
<p id="productInfo">KIN/FORM BAG är omsorgsfullt utvecklad med KIN Tech/ material</p>
</div>
</article>
<form class="customizeContainer" action="">
<b>
Namnge din KINF/FORM design
</b>
<input type="text" name="text" placeholder="ex. Min KIN/FORM väska*" id="">
<b>
E-post
</b>
<input type="email" name="email" placeholder="E-postadress*" id="">
<button class="Sparabutton"> Spara ditt design </button>
</form>
<section class="fullScreenImage-marquee-container">
<section class="fullScreenImage">
<img class="backpackersImage" src="assets/images/hikers.png">
</section>
<section class="marquee-wrapper">
<button class="marquee-pauseButton"></button>
<div class="marquee-text">
<div class="marquee-text-track">
<p>MISSA INTE CHANSEN LÄMNA DIN E-POST ADRESS</p>
<p aria-hidden="true">MISSA INTE CHANSEN LÄMNA DIN E-POST ADRESS</p>
<p aria-hidden="true">MISSA INTE CHANSEN LÄMNA DIN E-POST ADRESS</p>
<p aria-hidden="true">MISSA INTE CHANSEN LÄMNA DIN E-POST ADRESS</p>
</div>
</div>
<button class="marquee-close-button"></button>
</section>
</section>
</div>
</article>
<article id="emailForm">
<form class="customizeContainer" action="">
<b>
Namnge din KIN/FORM design:
</b>
<input type="text" name="text" placeholder="ex. Min KIN/FORM väska*" id="">
<b>
E-post:
</b>
<input type="email" name="email" placeholder="E-postadress*" id="">
<button class="Sparabutton"> Spara din design </button>
</form>
</article>
<section class="fullScreenImage-marquee-container">
<section class="fullScreenImage">
<img class="backpackersImage" src="assets/images/hikers.png">
</section>
<section class="marquee-wrapper">
<button class="marquee-pauseButton"></button>
<div class="marquee-text">
<div class="marquee-text-track">
<p>MISSA INTE CHANSEN LÄMNA DIN E-POST ADRESS</p>
<p aria-hidden="true">MISSA INTE CHANSEN LÄMNA DIN E-POST ADRESS</p>
<p aria-hidden="true">MISSA INTE CHANSEN LÄMNA DIN E-POST ADRESS</p>
<p aria-hidden="true">MISSA INTE CHANSEN LÄMNA DIN E-POST ADRESS</p>
</div>
</div>
<button class="marquee-close-button"></button>
</section>
</section>
</div>
<div class="dividedSection">
<div class="inputContainer">
<div class="inputMessage">
<b>
Gå aldrig miste om en uppdatering
</b>
<p>
Var först att uttrycka dig själv och visa din unika stil med KIN/FORMA.
</p>
</div>
</main>
<?php
require __DIR__ . '/footer.php';