-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathboot.html
114 lines (112 loc) · 3.64 KB
/
boot.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
<!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>Page Transitions</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="boot-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="boot">
<div class="image-container">
<img class="boot" src="./images/frontpage-boot.png" alt="" />
</div>
<div class="showcase-text">
<h2 class="showcase-title">These boots were made for walking.</h2>
<h3 class="showcase-subtitle">
And that's just what they'll do. There is no denying what a great pair of boots can do for your outfit. Treat your feet, explore our range now.
</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="./hat.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>