-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
116 lines (113 loc) · 3.66 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
<!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>Leather store</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=Poppins:wght@400;500&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./style.css" />
</head>
<body class="handbag-body" data-barba="wrapper">
<nav>
<img src="./images/burger.svg" alt="burger-menu" />
<a class="logo" href="./index.html">Bags.</a>
<img class="shopping-bag" src="./images/shopping-cart.svg" alt="Cart" />
</nav>
<section class="showcase" data-barba="container" data-barba-namespace="handbag">
<div class="image-container">
<img class="bag" src="./images/frontpage-handbag.png" alt="" />
</div>
<div class="showcase-text">
<h2 class="showcase-title">Going places.<br class="br"> With bags of beauty</h2>
<h3 class="showcase-subtitle">
On everyone's wish list this seaseon? Timeless presents they'll
treasure forever, including our must have Leisara handbag.
</h3>
<a class="showcase-a desktop" href="./product-page.html">
<button class="showcase-button">Explore</button>
</a>
<a class="showcase-a mobile" href="./product-page.html">
<button class="showcase-button">Explore</button>
</a>
</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>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"
integrity="sha512-eP6ippJojIKXKO8EPLtsUMS+/sAGHGo1UN/38swqZa1ypfcD4I0V/ac5G3VzaHfDaklFmQLEs51lhkkVaqg60Q=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<!-- unpkg -->
<script src="https://unpkg.com/@barba/core"></script>
<script src="./app.js"></script>
</body>
</html>