<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/css/style.css">
<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=Montserrat:ital,wght@0,200;0,400;0,700;0,800;1,700&family=Oswald:wght@300;400;500;600;700&family=Poppins:wght@200&family=Roboto:wght@300;500&display=swap"
rel="stylesheet">
</head>
<body>
<div id="nav">
<img src="https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/logo-white.svg" alt="">
<h4>TOPTRACER RANGE</h4>
<h4>Golf Lessons</h4>
<h4>Adventure Golf</h4>
<h4>coffee shop</h4>
<h4>leagues</h4>
</div>
<div id="cursor"></div>
<div id="cursor-blur"></div>
<video autoplay loop muted src="https://sidcupfamilygolf.com/wp-content/uploads/2023/02/hero.mp4"></video>
<div id="main">
<div id="page1">
<h1>EAT. DRINK. PLAY.</h1>
<h2>WELCOME TO SIDCUP FAMILY GOLF</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis iusto dignissimos saepe, beatae
dicta aut veritatis odit, quam culpa, tenetur perferendis !</p>
</div>
<div id="page2">
<div id="scroller">
<div id="scroller-in">
<h4>TOPTRACER RANGE</h4>
<h4>GOLF LESSONS</h4>
<h4>ADVENTURE GOLF</h4>
<h4>COFFEE SHOP</h4>
<h4>LEAGUES</h4>
</div>
<div id="scroller-in">
<h4>TOPTRACER RANGE</h4>
<h4>GOLF LESSONS</h4>
<h4>ADVENTURE GOLF</h4>
<h4>COFFEE SHOP</h4>
<h4>LEAGUES</h4>
</div>
</div>
<div id="about-us">
<img src="https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/home-about-1-300x200.jpg?strip=all&lossy=1&sharp=1&ssl=1"
alt="" />
<div id="about-us-in">
<h3>ABOUT US</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel accusantium blanditiis,
reprehenderit nulla dicta qui ullam asperiores. Consectetur, itaque nobis. Officiis hic ipsum ea
eaque facere tempore quae amet perspiciatis!</p>
</div>
<img src="https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/home-about-2-300x200.jpg?strip=all&lossy=1&sharp=1&ssl=1"
alt="" />
</div>
<div id="cards-container">
<div class="card" id="card1">
<div class="overlay">
<h4>Top Racer Range</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio nulla inventore deserunt,
culpa dicta nihil numquam quasi voluptates assumenda dolorum veniam cupiditate ut incidunt
</p>
</div>
</div>
<div class="card" id="card2">
<div class="overlay">
<h4>Aventure Golf</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio nulla inventore deserunt,
culpa dicta nihil numquam quasi voluptates assumenda dolorum veniam cupiditate ut incidunt
</p>
</div>
</div>
<div class="card" id="card3">
<div class="overlay">
<h4>Golf Lessons</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio nulla inventore deserunt,
culpa dicta nihil numquam quasi voluptates assumenda dolorum veniam cupiditate ut incidunt
</p>
</div>
</div>
</div>
<div id="green-div">
<img src="https://eiwgew27fhz.exactdn.com/wp-content/themes/puttosaurus/img/dots-side.svg" alt="">
<h4>SIGN UP FOR SIDCUP NEWS AND SPECIAL OFFERS STRAIGHT TO YOUR INBOX</h4>
<img src="https://eiwgew27fhz.exactdn.com/wp-content/themes/puttosaurus/img/dots-side.svg" alt="">
</div>
</div>
<div id="page3">
<p>
Excellent couple of hours, relax and enjoy in the fun. Staff were
accommodating, friendly and very helpful. Café on site for
refreshments etc. Will keep children enterntained during the holidays.
Worth a visit if you haven’t been.
</p>
<img
id="colon1"
src="https://eiwgew27fhz.exactdn.com/wp-content/themes/puttosaurus/img/quote-left.svg"
alt=""
/>
<img
id="colon2"
src="https://eiwgew27fhz.exactdn.com/wp-content/themes/puttosaurus/img/quote-right.svg"
alt=""
/>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"
integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"
integrity="sha512-Ic9xkERjyZ1xgJ5svx3y0u3xrvfT/uPkV99LBwe68xjy/mGtO+4eURHZBW2xW4SZbFrF1Tf090XqB+EVgXnVjw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="script.js"></script>
</body>
</html>*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'montserrat';
color: white;
}
html, body{
height: 100%;
width: 100%;
perspective: 800px;
background-color: black;
}
#cursor{
height: 20px;
width: 20px;
background-color: greenyellow;
border-radius: 50%;
position: fixed;
z-index: 99;
}
#cursor-blur{
height: 400px;
width: 400px;
background-color: rgba(172, 255, 47, 0.26);
border-radius: 50%;
position: fixed;
filter: blur(50px);
z-index: 9;
}
#nav{
height: 145px;
width: 100%;
/* background-color: red; */
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 100px;
gap:30px;
top: 0;
position: fixed;
z-index: 99;
}
#nav img{
height: 75px;
}
#nav h4{
text-transform:uppercase ;
font-weight: 500;
}
video{
height: 100%;
width: 100%;
object-fit: cover;
position: fixed;
z-index: -6;
}
#main{
position: relative;
/* background-color: black; */
}
#page1{
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
flex-direction: column;
text-align: center;
z-index: 10;
}
#page1 h1{
font-size: 120px;
font-weight: 800;
position: relative;
}
#page1 h1::before{
content: "EAT. DRINK. PLAY.";
position: absolute;
color: black;
top: -6px;
left: -6px;
-webkit-text-stroke: 2px rgb(108, 235, 112);
z-index: -1;
}
#page1 h2{
font-size: 33px;
font-weight: 900;
margin-top: 10px;
margin-bottom: 20px;
}
#page1 p{
font-size: 15px;
font-weight: 500;
width: 50%;
}
#page2{
height: 100vh;
width: 100%;
z-index: 10;
}
#scroller{
/* background-color: red; */
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
position: relative;
z-index: 10;
}
#scroller::-webkit-scrollbar{
display: none;
}
#scroller-in{
display: inline-block;
white-space: nowrap;
animation-name: scroll;
animation-duration: 30s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#scroller h4{
display: inline-block;
font-size: 120px;
font-weight: 900;
margin-right: 10px;
-webkit-text-stroke: 2px #78b171;
color: transparent;
transition: all linear 0.8s;
}
#scroller h4:hover{
color:#78b171 ;
}
@keyframes scroll {
from{
transform: translate(0);
}
to{
transform: translate(-100%);
}
}
#about-us{
height: 40vh;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 50px;
}
#about-us img{
height: 220px;
width: 220px;
border-radius: 20px;
object-fit: cover;
}
#about-us-in{
width: 50%;
text-align: center;
}
#about-us-in h3{
font-size: 50px;
font-weight: 800;
margin-bottom: 40px;
}
#about-us-in p{
font-size: 20px;
line-height: 20px;
}
#cards-container{
height: 60vh;
display: flex;
align-items: center;
justify-content: space-around;
gap: 70px;
position: relative;
}
.card{
height: 80%;
width: 24%;
border-radius: 20px;
background-size: cover;
background-position: center;
overflow: hidden;
transition: all ease .6s;
}
#card1{
background-image: url('https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/home-toptracer-1024x682.jpg?strip=all&lossy=1&sharp=1&ssl=1');
}
#card2 {
background-image: url('https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/hero-4-1024x1024.jpg?strip=all&lossy=1&sharp=1&ssl=1');
}
#card3 {
background-image: url('https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/home-lessons-1024x682.jpg?strip=all&lossy=1&sharp=1&ssl=1');
}
.overlay{
height: 100%;
width: 100%;
background-color: green;
padding-top: 160px;
padding: 50px;
opacity: 0;
transition: all ease .6s;
}
.overlay h4{
color: black;
font-size: 22px;
text-transform: uppercase;
white-space: nowrap;
font-weight: 800;
margin-bottom: 20px;
}
.overlay p{
color: black;
font-size: 19px;
}
.card:hover .overlay{
opacity: 1;
}
.card:hover{
transform: rotate3d(1,1,0,20deg);
}
#green-div{
height: 30vh;
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(to left bottom,green, rgb(50, 255, 50));
}
#green-div h4{
width: 50%;
font-size: 23px;
text-transform: uppercase;
text-align: center;
color: black;
}
#green-div img{
height: 100%;
object-fit: cover;
width: 14%;
}
#page3{
height: 100vh;
width: 100%;
/* background-color: black; */
display: flex;
align-items: center;
justify-content: center;
margin-top: 300px;
}
#page3>p{
font-size: 30px;
width: 50%;
text-align: center;
line-height: 40px;
}
#page3 img{
position: absolute;
height: 60px;
}
#page3 #colon1{
left: 15%;
bottom: 20%;
}
#page3 #colon2{
right: 15%;
bottom: 5%;
}var crsr = document.querySelector('#cursor')
var blur = document.querySelector('#cursor-blur')
document.addEventListener('mousemove',function(dets){
crsr.style.left =dets.x+"px"
crsr.style.top =dets.y+"px"
blur.style.left =dets.x-200+"px"
blur.style.top =dets.y-200 +"px"
})
gsap.to('#nav',{
backgroundColor: "#000",
height:"120px",
duration:4,
scrollTrigger:{
trigger:'#nav',
scroller:'body',
// markers:true,
start:"top -10%",
end:"top -11%",
scrub:1
}
})
gsap.to("#main",{
backgroundColor:"#000",
scrollTrigger:{
trigger:"#main",
scroller:"body",
markers:true,
start:"top -50%",
end:"top -100%",
scrub:3
}
})
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.