-
Notifications
You must be signed in to change notification settings - Fork 0
/
shop.html
99 lines (99 loc) · 6.07 KB
/
shop.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rainy Days Shop Jackets</title>
<meta name="description" content="Shop for Rainy Days jackets at mid range prices." />
<link href="styles.css" rel="stylesheet">
<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=Inter:wght@100..900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<img class="logo" src="images/RainyDays_Logo.png" alt="Rainy Days Logo">
<nav>
<ul>
<li class="hover-nav"><a href="index.html">Home</a></li>
<li class="active-nav"><a href="shop.html">Jackets</a></li>
</ul>
</nav>
<div class="icons">
<svg class="header-icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5q0-2.725 1.888-4.612T9.5 3q2.725 0 4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5q0-1.875-1.312-3.187T9.5 5Q7.625 5 6.313 6.313T5 9.5q0 1.875 1.313 3.188T9.5 14"/></svg>
<a href="checkout.html"><svg class="header-icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M7 22q-.825 0-1.412-.587T5 20q0-.825.588-1.412T7 18q.825 0 1.413.588T9 20q0 .825-.587 1.413T7 22m10 0q-.825 0-1.412-.587T15 20q0-.825.588-1.412T17 18q.825 0 1.413.588T19 20q0 .825-.587 1.413T17 22M5.2 4h14.75q.575 0 .875.513t.025 1.037l-3.55 6.4q-.275.5-.737.775T15.55 13H8.1L7 15h12v2H7q-1.125 0-1.7-.987t-.05-1.963L6.6 11.6L3 4H1V2h3.25z"/></svg></a>
</div>
</header>
<main>
<section class="grid-container-shop">
<div>
<a href="product.html"><img class="product-img-shop" src="images/RainyDays_Jacket1.jpg" alt="product image of a flex rain jacket"></a>
<h1 class="product-name-shop">Flex Rain Jacket</h1>
<p class="product-price-shop">$99.00</p>
<button class="cta-shop">Add to cart</button>
</div>
<div>
<a href="product.html"><img class="product-img-shop" src="images/RainyDays_Jacket2.jpg" alt="product image of a watertight rain jacket"></a>
<h2 class="product-name-shop">Watertight Rain Jacket</h2>
<p class="product-price-shop">$39.00</p>
<button class="cta-shop">Add to cart</button>
</div>
<div>
<a href="product.html"><img class="product-img-shop" src="images/RainyDays_Jacket3.jpg" alt="product image of a urban lab rain jacket"></a>
<h2 class="product-name-shop">Urban Lab Rain Jacket</h2>
<p class="product-price-shop">$49.00</p>
<button class="cta-shop">Add to cart</button>
</div>
<div>
<a href="product.html"><img class="product-img-shop" src="images/RainyDays_Jacket4.jpg" alt="product image of a t4 utility rain jacket"></a>
<h2 class="product-name-shop">T4 Utility Rain Jacket</h2>
<p class="product-price-shop">$79.00</p>
<button class="cta-shop">Add to cart</button>
</div>
<div>
<a href="product.html"><img class="product-img-shop" src="images/RainyDays_Jacket5.jpg" alt="product image of a flex modul rain jacket"></a>
<h2 class="product-name-shop">Flex Modul Rain Jacket</h2>
<p class="product-price-shop">$79.00</p>
<button class="cta-shop">Add to cart</button>
</div>
<div>
<a href="product.html"><img class="product-img-shop" src="images/RainyDays_Jacket6.jpg" alt="product image of a vancouver rain jacket"></a>
<h2 class="product-name-shop">Vancouver Rain Jacket</h2>
<p class="product-price-shop">$89.00</p>
<button class="cta-shop">Add to cart</button>
</div>
<div>
<a href="product.html"><img class="product-img-shop" src="images/RainyDays_Jacket7.jpg" alt="product image of a fast rain jacket"></a>
<h2 class="product-name-shop">Fast Rain Jacket</h2>
<p class="product-price-shop">$49.00</p>
<button class="cta-shop">Add to cart</button>
</div>
</section>
</main>
<footer>
<img class="logo" src="images/RainyDays_Logo.png" alt="Rainy Days Logo">
<ul>
<li class="footer-li hover-nav"><a href="about.html">About Us</a></li>
<li class="hover-nav">Heritage</li>
<li class="hover-nav">Product technology</li>
<li class="hover-nav">Reviews</li>
<li class="hover-nav">Journal</li>
</ul>
<ul>
<li class="footer-li hover-nav">Customer service</li>
<li class="hover-nav">FAQ</li>
<li class="hover-nav"><a href="contact.html">Contact Us</a></li>
<li class="hover-nav">Delivery</li>
<li class="hover-nav">Returns</li>
</ul>
<div class="social-media">
<h3>Get social with us</h3>
<div>
<img class="social-media-icon" src="images/youtube-icon.png" alt="Youtube icon">
<img class="social-media-icon" src="images/facebook-icon.png" alt="Facebook icon">
<img class="social-media-icon" src="images/instagram-icon.png" alt="Instagram icon">
</div>
</div>
</footer>
</body>
</html>