-
Notifications
You must be signed in to change notification settings - Fork 0
/
hat.html
122 lines (120 loc) · 3.01 KB
/
hat.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
<!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 - Clothing Shop Template with Page Transitions</title>
<link
rel="shortcut icon"
href="assets/images/favicon.jpg"
type="image/x-icon"
/>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body class="hat-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="hat"
>
<div class="image-container">
<img src="./assets/images/frontpage-hat.png" alt="hat" />
</div>
<div class="showcase-text">
<h2 class="showcase-title">
The perfect finishing touch.
</h2>
<h3 class="showcase-subtitle">
Missing that finishing touch? Top off your outfit with
our range of hats, from fedoras to flat caps. Cosy
never looked so good.
</h3>
<button class="showcase-button">
<a href="./product-page.html"> explore </a>
</button>
</div>
<a href="./index.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>