-
Notifications
You must be signed in to change notification settings - Fork 0
/
rainjackets.html
157 lines (157 loc) · 8.09 KB
/
rainjackets.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Our collection of rainjackets for the nordic environment.">
<title>Webshop Rainjackets</title>
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="css/styles.css">
<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=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
<script src="https://kit.fontawesome.com/7f993fe397.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="top-nav">
<div class="logo">
<a href="index.html" aria-label="Home">
<img src="images/logo/small_logo.png" alt="RainyDays Logo, dark blue-green. Image of a mountain, with the text 'Pushing the comfort zone.'" class="logo" title="Go to Home page">
</a>
</div>
<span class="material-symbols-outlined">
<a href="index.html">search</a>
<a href="index.html">favorite</a>
<a href="checkout.html">shopping_basket</a>
</span>
<nav class="navigation">
<input type="checkbox" id="toggle-menu" class="toggle-menu" aria-label="Toggle Menu">
<span id="toggle-menu-label" class="visually-hidden">Toggle Menu</span>
<div class="hamburger"></div>
<ul class="menu">
<li><a href="rainjackets.html" aria-label="Rainjackets">Rainjackets</a></li>
<li><a href="softshell.html" aria-label="Softshell Jackets">Softshell Jackets</a></li>
<li><a href="sale.html" aria-label="Sale">Sale</a></li>
</ul>
</nav>
</div>
<div class="banner-text">
<p>Enrich your outdoor adventures with our high standard jackets</p>
</div>
</header>
<main>
<div class="info-part">
<p class="info-desk"><a href="index.html">Home</a> / Rainjackets</p> <!-- Hide on mobile-->
<h1>Rainjackets</h1>
</div>
<div class="shop-container">
<div class="rainjacket-img"></div>
<p class="shop-text">Here you will find our collection of rainjackets, that is both practical and stylish. Our rainjackets is made with PVC-free waterproof material, keeping you dry and comfortable in any weather condition. Pushing the comfort zone - so that you may focus on what’s important - exploring new adventures! Jackets of high quality made sustainable.</p>
</div>
<div class="product-img-container">
<div class="product-img-wrapper">
<a href="product.html">
<img src="images/product-images_ai/raincoats/yellowrain.jpg" alt="Yellow Woman's long raincoat with a hoodie, pockets, buttons, and a belt.">
</a>
<div class="textAndIcon">
<div class="productText">
<p class="productname">Classic Raincoat Women</p>
<p class="productprice">$56
<span class="before-price">$80</span>
</p>
</div>
<div class="favoriteIcon">
<span class="material-symbols-outlined">favorite</span>
</div>
</div>
</div>
<div class="product-img-wrapper">
<img src="images/product-images_ai/raincoats/multirain.jpg" alt="Blue and red sailor rainjacket for men, with zipper, a hoodie, and pockets.">
<div class="textAndIcon">
<div class="productText">
<p class="productname">Westcoast Sailor Jacket Men</p>
<p class="productprice">$130</p>
</div>
<div class="favoriteIcon">
<span class="material-symbols-outlined">favorite</span>
</div>
</div>
</div>
<div class="product-img-wrapper">
<img src="images/product-images_ai/raincoats/redrain.jpg" alt="Red rainjacket, discreet black under arms, unisex. It has a hoodie, no pockets.">
<div class="textAndIcon">
<div class="productText">
<p class="productname">Milo Lightweight Rainjacket Unisex</p>
<p class="productprice">$85</p>
</div>
<div class="favoriteIcon">
<span class="material-symbols-outlined">favorite</span>
</div>
</div>
</div>
<div class="product-img-wrapper">
<img src="images/product-images_ai/raincoats/blackrain.jpg" alt="Black rainjacket, men. With red hoodie and red line down the zipper, no pockets.">
<div class="textAndIcon">
<div class="productText">
<p class="productname">William Shell Rainjacket Men</p>
<p class="productprice">$70
<span class="before-price">$100</span>
</p>
</div>
<div class="favoriteIcon">
<span class="material-symbols-outlined">favorite</span>
</div>
</div>
</div>
<div class="product-img-wrapper">
<img src="images/product-images_ai/raincoats/burgundyrain.jpg" alt="Burgundy rainjacket with hoodie and a white zipper, women.">
<div class="textAndIcon">
<div class="productText">
<p class="productname">Anna Rainjacket Women</p>
<p class="productprice">$60</p>
</div>
<div class="favoriteIcon">
<span class="material-symbols-outlined">favorite</span>
</div>
</div>
</div>
<div class="product-img-wrapper">
<img src="images/product-images_ai/raincoats/bluerain.jpg" alt="Blue padded rainparka, women.">
<div class="textAndIcon">
<div class="productText">
<p class="productname">Polar Extreme Rain Parka Women</p>
<p class="productprice">$150</p>
</div>
<div class="favoriteIcon">
<span class="material-symbols-outlined">favorite</span>
</div>
</div>
</div>
</div>
</main>
<footer>
<nav class="footer-navigation">
<ul class="contactinfo">
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<ul class="termsinfo">
<li><a href="privacy.html">Privacy Policy</a></li>
<li><a href="terms.html">Terms and Conditions</a></li>
</ul>
</nav>
<div class="followUs">
<h2>Follow us</h2>
<ul class="icons" aria-label="Three social media icons: First: Facebook, Second: Instagram, Third: Twitter">
<li><i class="fa-brands fa-facebook"></i></li>
<li><i class="fa-brands fa-instagram"></i></li>
<li><i class="fa-brands fa-x-twitter"></i></li>
</ul>
</div>
<img class="image" src="images/logo/small_logo-footer.png" alt="RainyDays Logo, white. Image of a mountain, with the text 'Pushing the comfort zone.'">
</footer>
</body>
</html>