FULL FLAGED WEBSITE-1:
WEBSITE:
HTML-CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</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>CAFE</h4>
<h4>EVENTS</h4>
</div>
<div id="cursor"></div>
<div id="cursor-blur"></div>
<video autoplay loop muted src="hero.mp4"></video>
<div id="main">
<div id="page1">
<h1>EAT. DRINK. PLAY.</h1>
<h2>WELCOME TO SIDCUP FAMILY GOLF!</h2>
<p>Sidcup Family Golf is a multipurpose golf facility located in Sidcup, South East London. Passionate about
technology, player development and making golf fun and accessible to everyone.</p>
<div id="arrow">
<i class="ri-arrow-down-line"></i>
</div>
</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 id="scroller-in-2"></div>
</div>
<div id="about-us">
<img src="https://sidcup-golf-family.netlify.app/Assests/page2-left.avif" alt="">
<div id="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>
</div>
<img src="https://sidcup-golf-family.netlify.app/Assests/page2-right.avif" alt="">
</div>
<div id="cards-container">
<div class="card" id="card1">
<div class="overlay">
<h4>TopRacer Range</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla
quam molestias magni cupiditate architecto et enim quas facere
ipsum tempora?
</p>
</div>
</div>
<div class="card" id="card2">
<div class="overlay">
<h4>Adventure Golf</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla
quam molestias magni cupiditate architecto et enim quas facere
ipsum tempora?
</p>
</div>
</div>
<div class="card" id="card3">
<div class="overlay">
<h4>Golf Lessons</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla
quam molestias magni cupiditate architecto et enim quas facere
ipsum tempora?
</p>
</div>
</div>
</div>
<div id="green-div">
<img id="img1" 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 id="page4">
<h1>WHAT ARE YOU WAITING FOR?</h1>
<div class="elem">
<h2>TOPTRACER RANGE</h2>
<img src="https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/page-toptracer-1024x683.jpg?strip=all&lossy=1&sharp=1&ssl=1"
alt="" />
</div>
<div class="elem">
<h2>GOLF LESSION</h2>
<img src="https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/page-lessons-1024x683.jpg?strip=all&lossy=1&sharp=1&ssl=1"
alt="" />
</div>
<div class="elem">
<h2>ADVENTURE GOLF</h2>
<img src="https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/page-ag-1024x682.jpg?strip=all&lossy=1&sharp=1&ssl=1"
alt="" />
</div>
</div>
<div id="footer">
<img src="https://eiwgew27fhz.exactdn.com/wp-content/themes/puttosaurus/img/dots-footer.svg" alt="" />
<div id="f1">
<img src="https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/logo-white.svg" alt="" />
</div>
<div id="f2">
<h3>TOPTRACER Ranges</h3>
<h3>Golf Lessons</h3>
<h3>Adventure Golf</h3>
</div>
<div id="f3">
<h3>coffee shop</h3>
<h3>LEAGUES</h3>
<h3>Contact us</h3>
</div>
<div id="f4">
<h4>
A20, SIDCUP BYPASS <br />
CHISLEHURST <br />
KENT <br />
BR7 6RP <br />
TEL: 0208 309 0181 <br />
GET DIRECTIONS <br />
</h4>
</div>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet" />
<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>
<!-- Thank You -->
CSS-CODE:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
font-family: 'Montserrat-ExtraBold';
color: #fff;
}
*::selection {
background-color: #fff;
color: #95c11e;
}
body::-webkit-scrollbar {
display: block;
width: 8px;
background-color: #95C11E;
}
body::-webkit-scrollbar-thumb {
background-color: #fff;
border-radius: 50px;
}
#cursor {
height: 25px;
width: 25px;
background-color: #95C11E;
border-radius: 50%;
position: fixed;
z-index: 99;
}
#cursor-blur {
height: 400px;
width: 400px;
background-color: rgba(150, 193, 30, 0.3);
border-radius: 50%;
position: fixed;
filter: blur(40px);
z-index: 9;
}
#nav {
height: 145px;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 150px;
gap: 50px;
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: -1;
}
#main {
position: relative;
background-color: rgba(0, 0, 0, 0.37);
}
#page1 {
width: 100%;
height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
z-index: 10;
}
#page1 h1 {
font-size: 140px;
font-weight: 900;
position: relative;
}
#page1 h1::before {
content: "EAT. DRINK. PLAY.";
position: absolute;
color: black;
top: -6px;
left: -6px;
-webkit-text-stroke: 1px #95C11E;
z-index: -1;
}
#page1 h2 {
font-size: 33px;
font-weight: 800;
}
#page1 p {
font-size: 20px;
font-weight: 500;
width: 40%;
}
#page2 {
min-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: scroller;
animation-duration: 30s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#scroller h4 {
display: inline-block;
font-size: 140px;
font-weight: 900;
font-family: gilroy;
transition: all linear 0.5s;
margin-right: 10px;
color: transparent;
-webkit-text-stroke: 2px #95C11E;
}
#scroller h4:hover {
color: #95C11E;
}
@keyframes scroller {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
#about-us {
height: 30vh;
width: 100%;
/* background-color: red; */
display: flex;
padding: 0 50px;
align-items: center;
position: relative;
z-index: 10;
justify-content: space-around;
}
#about-us img {
height: 220px;
width: 220px;
border-radius: 20px;
object-fit: cover;
}
#about-us-in {
width: 40%;
text-align: center;
}
#about-us-in h3 {
font-size: 54px;
font-weight: 800;
margin-bottom: 30px;
}
#about-us-in p {
font-size: 20px;
line-height: 26 px;
}
#cards-container {
/* background-color: red; */
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
gap: 70px;
position: relative;
z-index: 10;
}
.card {
height: 80%;
width: 22%;
/* background-color: blue; */
border-radius: 20px;
background-size: cover;
background-position: center;
transition: all ease 0.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: #95c11e;
padding: 30px;
padding-top: 160px;
opacity: 0;
transition: all ease 0.6s;
border-radius: 20px;
}
.overlay h4 {
color: #000;
font-size: 30px;
text-transform: uppercase;
white-space: nowrap;
margin-bottom: 20px;
font-weight: 800;
}
.overlay p {
color: #000;
font-size: 18px;
}
.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-color: red; */
background: linear-gradient(to left bottom, #119f3a, #ace022);
}
#green-div h4 {
width: 45%;
line-height: 50px;
color: #000;
text-align: center;
font-weight: 800;
font-size: 27px;
text-transform: uppercase;
}
#green-div img {
height: 100%;
object-fit: cover;
width: 14%;
}
#green-div #img1 {
transform: rotate(180deg);
}
#page3 {
height: 100vh;
width: 100%;
background-color: #000;
display: flex;
align-items: center;
position: relative;
justify-content: center;
}
#page3>p {
font-size: 35px;
font-weight: 700;
width: 60%;
text-align: center;
line-height: 50px;
}
#page3 img {
position: absolute;
height: 60px;
}
#page3 #colon1 {
left: 15%;
top: 25%;
}
#page3 #colon2 {
bottom: 30%;
right: 15%;
}
#page4 {
height: 30vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 70px;
position: relative;
}
.elem {
height: 70%;
width: 26%;
overflow: hidden;
border-radius: 20px;
position: relative;
}
.elem h2 {
height: 100%;
width: 100%;
background-color: #95c11E;
display: flex;
align-items: center;
justify-content: center;
font-size: 35px;
color: #000;
font-weight: 800;
position: absolute;
z-index: 10;
white-space: nowrap;
transition: all ease 0.5s;
}
.elem img {
height: 100%;
width: 100%;
object-fit: cover;
transition: all ease 0.5s;
scale: 1.1;
}
.elem:hover h2 {
color: #fff;
background-color: transparent;
}
.elem:hover img {
scale: 1;
}
#page4 h1 {
font-size: 80px;
position: absolute;
top: -15%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 900;
color: #000;
-webkit-text-stroke: 2px #fff;
}
#footer {
height: 40vh;
width: 100%;
background: linear-gradient(to left bottom, #119f3a, #95C11E);
}
#page1 #arrow {
height: 250px;
width: 250px;
background-color: transparent;
border: 2px solid #95C11E;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
left: -2%;
bottom: -2%;
transition: all ease 0.5s;
}
#page1 #arrow i {
font-size: 50px;
font-weight: 100;
}
#page1 #arrow:hover {
scale: 0.4;
background-color: #95C11E;
}
#footer {
height: 40vh;
width: 100%;
background: linear-gradient(to left bottom, #119f3a 0%, #a3d421 80%);
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 6.5vw;
padding: 0 100px;
}
#footer>img {
position: absolute;
left: 0;
height: 100%;
z-index: 0;
}
#f1 img {
height: 100px;
}
#f1,
#f2,
#f3,
#f4 {
width: fit-content;
position: relative;
z-index: 99;
/* background-color: red; */
}
#f2 h3 {
font-size: 1.6vw;
white-space: nowrap;
text-transform: uppercase;
color: #000;
font-weight: 900;
margin-bottom: 8px;
}
#f3 h3 {
font-size: 1.6vw;
white-space: nowrap;
text-transform: uppercase;
color: #000;
font-weight: 800;
margin-bottom: 8px;
}
#f4 h4 {
font-size: 1vw;
white-space: nowrap;
text-transform: uppercase;
color: #000;
font-weight: 600;
line-height: 20px;
margin-bottom: 8px;
}
/* Thank You */
JS-CODE:
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";
});
var h4all = document.querySelectorAll("#nav h4");
h4all.forEach(function (elem) {
elem.addEventListener("mouseenter", function () {
crsr.style.scale = 3;
crsr.style.border = "1px solid #fff";
crsr.style.backgroundColor = "transparent";
});
elem.addEventListener("mouseleave", function () {
crsr.style.scale = 1;
crsr.style.border = "0px solid #95c11e";
crsr.style.backgroundColor = "#95c11e";
});
});
gsap.to("#nav", {
backgroundColor: "#000",
height: "110px",
duration: 0.5,
scrollTrigger: {
trigger: "#nav",
scrollar: "body",
marker: true,
start: "top -10%",
end: "top -11%",
scrub: 1,
},
});
gsap.to("#main", {
backgroundColor: "#000",
scrollTrigger: {
trigger: "#main",
scrollar: "body",
// markers:true,
start: "top -25%",
end: "top -70%",
scrub: 2,
},
});
gsap.from("#about-us img,#about-us-in", {
y: 90,
opacity: 0,
duration: 1,
// stagger:0.4,
scrollTrigger: {
trigger: "#about-us",
scroller: "body",
// markers:true,
start: "top 70%",
end: "top 65%",
scrub: 3,
},
});
gsap.from(".card", {
scale:0.8,
opacity: 0,
duration: 1,
// stagger:0.4,
scrollTrigger: {
trigger: ".card",
scroller: "body",
// markers:true,
start: "top 70%",
end: "top 65%",
scrub: 2,
},
});
gsap.from("#colon1",{
y:-70,
x:-70,
scrollTrigger:{
trigger:"#colon1",
scroller:"body",
// markers:"true",
start:"top 55%",
end:"top 45%",
scrub:4,
}
})
gsap.from("#colon2",{
y:70,
x:70,
scrollTrigger:{
trigger:"#colon1",
scroller:"body",
// markers:"true",
start:"top 55%",
end:"top 45%",
scrub:4,
}
})
gsap.from("#page4 h1",{
y:50,
scrollTrigger:{
trigger:"#page4 h1",
scroller:"body",
// markers:"true",
start:"top 75%",
end:"top 70%",
scrub:2,
}
})
// Thank You
Comments
Post a Comment