-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
157 lines (151 loc) · 6.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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sidcup Family Golf</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="assets/images/favicon.png" type="image/x-icon" />
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet" />
</head>
<body>
<div class="nav">
<img src="assets/images/logo.svg" alt="logo">
<li><a href="#">Toptracer Range</a></li>
<li><a href="#">Golf Lessons</a></li>
<li><a href="#">Adventure Golf</a></li>
<li><a href="#">Café</a></li>
<li><a href="#">Events</a></li>
</div>
<div class="cursor"></div>
<div class="cursor-blur"></div>
<video autoplay loop muted src="assets/video/video1.mp4"></video>
<div class="main">
<div class="page1">
<h1>EAT. DRINK. PLAY.</h1>
<h2>WELCOME TO SIDCUP FAMILY GOLF!</h2>
<p>Sidcup Family Golf is a Toptracer driving range and crazy golf venue in Sidcup, South East London.
Passionate about technology, player development and making golf fun and accessible to everyone.</p>
<div class="down-arrow">
<img src="assets/images/down-arrow.svg" alt="down-arrow">
</div>
</div>
<div class="page2">
<div class="scroller">
<div class="scroller-in">
<h4>TOPTRACER RANGE</h4>
<h4>GOLF LESSONS</h4>
<h4>CRAZY GOLF</h4>
<h4>COFFEE SHOP</h4>
</div>
<div class="scroller-in">
<h4>TOPTRACER RANGE</h4>
<h4>GOLF LESSONS</h4>
<h4>CRAZY GOLF</h4>
<h4>COFFEE SHOP</h4>
</div>
</div>
<div class="about-us">
<img src="assets/images/image1.webp" alt="image1">
<div class="about-us-in">
<h3>ABOUT US</h3>
<p>Home to a 46-bay, multi-tier, floodlit driving range, powered by Toptracer Range technology.
Complimented by a practice green and bunker, coffee shop and American Golf Store. There truly is
something for everyone as we also boast two outdoor 18-hole dinosaur themed crazy golf courses.
</p>
<p>Please note: we are a cashless venue. The range closes at 10pm with last balls at 9pm.</p>
</div>
<img src="assets/images/image2.webp" alt="image2">
</div>
</div>
<div class="page3">
<div class="cards-container">
<div class="card card1">
<div class="overlay">
<h4>TOPTRACER RANGE</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis vel eaque ullam quasi
nemo, asperiores laboriosam enim quia inventore illo.</p>
</div>
</div>
<div class="card card2">
<div class="overlay">
<h4>ADVENTURE GOLF</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis vel eaque ullam quasi
nemo, asperiores laboriosam enim quia inventore illo.</p>
</div>
</div>
<div class="card card3">
<div class="overlay">
<h4>GOLF LESSON</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis vel eaque ullam quasi
nemo, asperiores laboriosam enim quia inventore illo.</p>
</div>
</div>
</div>
</div>
<div class="page4">
<div class="green-div">
<img src="assets/images/dots-1.svg" alt="dots">
<div class="green-div-text">
<h4>Sign up for Sidcup News and Special Offers</h4>
<h4>Straight to Your Inbox</h4>
</div>
<img src="assets/images/dots-2.svg" alt="dots">
</div>
</div>
<div class="page5">
<img id="quote-left" src="assets/images/quote-left.svg" alt="quote-left">
<p>Absolutely loved the experience! The staff looked after me ensured I was enjoying the range and gave me
helpful tips to get the best out of my game. Digital screens to see my progress. I’ll be back 😁 🏌🏽♀️
</p>
<img id="quote-right" src="assets/images/quote-right.svg" alt="quote-right">
</div>
<div class="page6">
<h1>WHAT ARE YOU WAITING FOR?</h1>
<div class="box">
<h2>TOPTRACER RANGE</h2>
<img src="assets/images/box-1.webp" alt="box-1">
</div>
<div class="box">
<h2>GOLF LESSON</h2>
<img src="assets/images/box-2.webp" alt="box-2">
</div>
<div class="box">
<h2>ADVENTURE GOLF</h2>
<img src="assets/images/box-3.webp" alt="box-3">
</div>
</div>
<div class="footer">
<img src="assets/images/dots-footer.svg" alt="dots-footer">
<div class="foot foot-1">
<img src="assets/images/logo.svg" alt="logo">
</div>
<div class="foot foot-2">
<li><a href="#">TOPTRACER RANGES</a></li>
<li><a href="#">GOLF LESSONS</a></li>
<li><a href="#">ADVENTURE GOLF</a></li>
</div>
<div class="foot foot-3">
<li><a href="#">COFFEE SHOP</a></li>
<li><a href="#">LEAGUES</a></li>
<li><a href="#">CONTACT US</a></li>
</div>
<div class="foot foot-4">
<h4>A20, SIDCUP BYPASS</h4>
<h4>CHISLEHURST</h4>
<h4>KENT</h4>
<h4>BR7 6RP</h4>
<h4>TEL: 0208 309 0181</h4>
<li><a href="#">GET DIRECTIONS</a></li>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"
integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="script.js"></script>
</body>
</html>