-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (123 loc) · 2.87 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
<!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>Maxer</title>
<link
rel="shortcut icon"
href="assets/images/favicon.jpg"
type="image/x-icon"
/>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body class="handbag-body" data-barba="wrapper">
<nav>
<img src="./assets/svg/burger.svg" alt="burger-menu" />
<a class="logo" href="./index.html">Maxer.</a>
<img
src="./assets/svg/shopping-cart.svg"
class="shopping-bag"
alt="shopping-bag"
/>
</nav>
<!-- Showcase Section -->
<section
class="showcase"
data-barba="container"
data-barba-namespace="handbag"
>
<div class="image-container">
<img
src="./assets/images/frontpage-handbag.png"
alt="handbag"
/>
</div>
<div class="showcase-text">
<h2 class="showcase-title">
Going places. With bags of beauty
</h2>
<h3 class="showcase-subtitle">
On everyone's wish list this season? Timeless presents
they'll treasure forever, including our must-have
Leisara handbag.
</h3>
<button class="showcase-button">
<a href="./product-page.html"> explore</a>
</button>
</div>
<a href="./boot.html">
<svg
class="showcase-arrow"
width="26"
height="46"
viewBox="0 0 26 46"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M25.1213 25.1213C26.2929 23.9497 26.2929 22.0503 25.1213 20.8787L6.02944 1.7868C4.85786 0.615224 2.95837 0.615224 1.7868 1.7868C0.615224 2.95837 0.615224 4.85786 1.7868 6.02944L18.7574 23L1.7868 39.9706C0.615224 41.1421 0.615224 43.0416 1.7868 44.2132C2.95837 45.3848 4.85786 45.3848 6.02944 44.2132L25.1213 25.1213ZM19 26H23V20H19V26Z"
fill="white"
/>
</svg>
</a>
<svg
class="circle circle-1"
width="243"
height="243"
viewBox="0 0 243 243"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="121.5"
cy="121.5"
r="121.5"
fill="white"
fill-opacity="0.25"
/>
</svg>
<svg
class="circle circle-2"
width="243"
height="243"
viewBox="0 0 243 243"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="121.5"
cy="121.5"
r="121.5"
fill="white"
fill-opacity="0.25"
/>
</svg>
<svg
class="circle circle-3"
width="243"
height="243"
viewBox="0 0 243 243"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="121.5"
cy="121.5"
r="121.5"
fill="white"
fill-opacity="0.25"
/>
</svg>
</section>
<!-- GSAP JS -->
<script src="js/gsap.min.js"></script>
<!-- unpkg - Barba JS -->
<script src="https://unpkg.com/@barba/core"></script>
<script src="js/script.js"></script>
</body>
</html>