-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
93 lines (89 loc) · 3.27 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fauxica</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=Playfair+Display&family=Poppins:wght@200;400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div class="overlay"></div>
<div class="wrapper">
<header>
<a href="#"><img src="/images/logo.svg" alt="Fauxica Logo" /></a>
<nav>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<div class="left-col">
<h1>Quality apparel without the price tag</h1>
<p class="subhead">
No need to spend $xxx on apparel just for the name’s sake. Our
premium apparel is made from the same stuff.
</p>
<div class="cta-btns">
<a href="#" class="primary-cta">Browse our collection</a>
<a href="#" class="secondary-cta">
<span>Spring '23 Collection</span>
<svg viewBox="0 0 19 8" fill="none">
<path
d="M18.3536 4.35355C18.5488 4.15829 18.5488 3.84171 18.3536 3.64645L15.1716 0.464466C14.9763 0.269204 14.6597 0.269204 14.4645 0.464466C14.2692 0.659728 14.2692 0.976311 14.4645 1.17157L17.2929 4L14.4645 6.82843C14.2692 7.02369 14.2692 7.34027 14.4645 7.53553C14.6597 7.7308 14.9763 7.7308 15.1716 7.53553L18.3536 4.35355ZM0 4.5H18V3.5H0V4.5Z"
fill="black"
/>
</svg>
</a>
</div>
<div class="news">
<p class="employees">50K</p>
<p class="details">
We’re proud to announce that we now employ a workforce of over
<strong>50,000</strong>. It’s all possible because of you.
</p>
</div>
</div>
<div class="right-col">
<div class="card card1">
<div class="card-details">
<div>
<a href="#" class="product-title">Fauxica Sport</a>
<p>Running shoes</p>
</div>
<p class="product-price">$49</p>
</div>
</div>
<div class="card card2">
<div class="card-details">
<div>
<a href="#" class="product-title">Fauxica Sport</a>
<p>Running shoes</p>
</div>
<p class="product-price">$49</p>
</div>
</div>
<div class="card card3">
<div class="card-details">
<div>
<a href="#" class="product-title">Fauxica Sport</a>
<p>Running shoes</p>
</div>
<p class="product-price">$49</p>
</div>
</div>
</div>
</main>
</div>
</body>
</html>