-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
158 lines (156 loc) · 6.76 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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=Italiana&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/2b7fa2d572.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="innerContainer headerContainer">
<h4 class="logo"><a href="index.html">HauteHats</h4></a>
<ul class="headerMenu">
<li class="headerLinks paddingRight"><a href="#about-us">About Us</a></li>
<li class="headerLinks paddingRight"><a href="#">Contact</a></li>
<li class="headerLinks"><a href="#products">Shop</a></li>
</ul>
<ul class="headerMenu">
<li class="headerSocials"><a href="#"><i class="fa-brands fa-pinterest-p purple icon"></i></a></li>
<li class="headerSocials"><a href="#"><i class="fa-brands fa-instagram purple icon"></i></a></li>
<li class="headerSocials cart"><a href="#"><i class="fa-solid fa-bag-shopping white icon"></i></a></li>
<i class="fa-solid fa-bars" id="menuIcon"></i>
</ul>
</div>
</header>
<div >
<section>
<div class="twoColGrid hero">
<div class="contentBox">
<h1>Haute Hats for every occasion</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis voluptas sunt ratione, molestiae quis aliquam impedit porro consequatur quae asperiores tenetur facere aut, reiciendis saepe amet quidem rem quaerat voluptatum.</p>
<a href="#" class="primaryCTA">View Collection</a>
</div>
<div class="imgBoxRight homePageHero"></div>
</div>
<div class="mobileHero homePageHero">
<div class="textColumn">
<h1>Haute Hats for every occasion</h1>
<a href="#" class="primaryCTA">View Collection</a>
</div>
</div>
</section>
<section>
<div class="innerContainer">
<h2 class="center" id="products">Our Collection</h2>
<div class="productGrid">
<article class="productColumn fadeIn">
<div class="product" id="product1"></div>
<div class="productTextColumn">
<h3>Beatrice</h3>
<span class="price">$130.00</span>
<a href="#" class="primaryCTA">View Product</a>
</div>
</article>
<article class="productColumn">
<div class="product" id="product2"></div>
<div class="productTextColumn">
<h3>Amina</h3>
<span class="price">$110.00</span>
<a href="#" class="primaryCTA">View Product</a>
</div>
</article>
<article class="productColumn">
<div class="product" id="product3"></div>
<div class="productTextColumn">
<h3>Victoria</h3>
<span class="price">$650.00</span>
<a href="#" class="primaryCTA">View Product</a>
</div>
</article>
<article class="productColumn">
<div class="product" id="product4"></div>
<div class="productTextColumn">
<h3>Camilla</h3>
<span class="price">$575.00</span>
<a href="#" class="primaryCTA">View Product</a>
</div>
</article>
<article class="productColumn">
<div class="product" id="product5"></div>
<div class="productTextColumn">
<h3>Diana</h3>
<span class="price">$350.00</span>
<a href="#" class="primaryCTA">View Product</a>
</div>
</article>
<article class="productColumn">
<div class="product" id="product6"></div>
<div class="productTextColumn">
<h3>Elizabeth</h3>
<span class="price">$425.00</span>
<a href="#" class="primaryCTA">View Product</a>
</div>
</article>
<article class="productColumn">
<div class="product" id="product7"></div>
<div class="productTextColumn">
<h3>Catherine</h3>
<span class="price">$250.00</span>
<a href="#" class="primaryCTA">View Product</a>
</div>
</article>
<article class="productColumn">
<div class="product" id="product8"></div>
<div class="productTextColumn">
<h3>Alice</h3>
<span class="price">$150.00</span>
<a href="#" class="primaryCTA">View Product</a>
</div>
</article>
</div>
</div>
</section>
<section class="brown contentPadding">
<div class="innerContainer">
<div class="twoColGrid">
<div class="imgBoxLeft" id="aboutUs"></div>
<div class="contentBox">
<h2 id="about-us">Our Story</h2>
<h3>This is why we make hats.</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint, modi? Sint corrupti error doloremque accusantium. Repellat, est! Consequuntur vero minus nemo voluptatum accusamus magnam quia ea quaerat assumenda, perspiciatis ullam.</p>
</div>
</div>
</div>
</section>
<footer>
<div class="innerContainer">
<div class="footerContainer">
<div class="footerColumn">
<h4 class="white">Follow us</h4>
<ul class="footerSocialMenu">
<li class="footerSocials"><a href="#"></a><i class="fa-brands fa-pinterest-p"></i></a></li>
<li class="footerSocials"><a href="#"><i class="fa-brands fa-instagram lightPurple"></i></a></li>
</ul>
<h4 class="white">Links</h4>
<ul class="footerMenu">
<li><a href="#" class="lightPurple">About Us</a></li>
<li><a href="#" class="lightPurple">Contact</a></li>
</ul>
</div>
<div class="footerColumn">
<h4 class="white">Haute Hats</h4>
<p>123 Fake Street<br>
chicago, IL, 60608</p>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>