-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
151 lines (145 loc) · 6.73 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Layout</title>
<meta name="description" content="Shopping Layout">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/normalize.css" />
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=quicksand:300,400,500,600,700" rel="stylesheet" />
</head>
<body>
<main class="main">
<article class="main-article">
<section>
<figure class="figure">
<figcaption class="product-highlight">Free Shipping!</figcaption>
<img class="article-image" src="pictures/Asics.png" title="Asics" alt="Blaue Schuhe von Asics">
<figcaption class="image-author">Photo by: Maksim Larin</figcaption>
</figure>
</section>
<section class="product-info">
<h1>Asics</h1>
<p class="product-caption">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt
ut
labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea
rebum. </p>
</section>
<form class="buy-section">
<h2 class="price">$65 USD</h2>
<label class="size" for="size">Size:</label>
<select class="size-select" id="size" name="size">
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<label class="quantitiy" for="quantity">Quantity:</label>
<select class="quantity-select" id="quantity" name="quantitiy">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div class="color-section">
<p class="color">Color:</p>
<button class="color-select-1"></button>
<button class="color-select-2"></button>
<button class="color-select-3"></button>
</div>
<button class="button">Add to Cart</button>
</form>
</article>
<article class="main-article">
<section>
<figure class="figure">
<img class="article-image" src="pictures/Adidas.png" title="Adidas" alt="Weiße Schuhe von Adidas">
<figcaption class="image-author">Photo by: Daniel Storek</figcaption>
</figure>
</section>
<section class="product-info">
<h1>Adidas</h1>
<p class="product-caption">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt
ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores
et ea
rebum. </p>
</section>
<form class="buy-section">
<h2 class="price">$30 USD</h2>
<label class="size" for="size">Size:</label>
<select class="size-select" id="size" name="size">
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<label class="quantitiy" for="quantity">Quantity:</label>
<select class="quantity-select" id="quantity" name="quantitiy">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div class="color-section">
<p class="color">Color:</p>
<button class="color-select-4"></button>
<button class="color-select-5"></button>
<button class="color-select-6"></button>
</div>
<button class="button">Add to Cart</button>
</form>
</article>
<article class="main-article">
<section>
<figure class="figure">
<figcaption class="product-highlight">Just One Left!</figcaption>
<img class="article-image" src="pictures/New_Balance.png" title="New Balance"
alt="Khaki Schuhe von New Balance">
<figcaption class="image-author">Photo by: felipepelaquim</figcaption>
</figure>
</section>
<section class="product-info">
<h1>New Balance</h1>
<p class="product-caption">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt
ut
labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea
rebum.</p>
</section>
<form class="buy-section">
<h2 class="price">$45 USD</h2>
<label class="size" for="size">Size:</label>
<select class="size-select" id="size" name="size">
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<label class="quantitiy" for="quantity">Quantity:</label>
<select class="quantity-select" id="quantity" name="quantitiy">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div class="color-section">
<p class="color">Color:</p>
<button class="color-select-7"></button>
<button class="color-select-8"></button>
</div>
<button class="button">Add to Cart</button>
</form>
</article>
</main>
</body>
</html>