code for the website front
code for the website front
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="BIRLA INSTITUTE interactive scroll website" />
<title>BIRLA INSTITUTE</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=Inter:wght@400;700&display=swap" rel="stylesheet" />
<style>
:root {
--bg-color: #000;
--text-color: #fff;
--hover-color: #aaa;
--font-main: 'Inter', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
font-family: var(--font-main);
background-color: var(--bg-color);
color: var(--text-color);
scroll-behavior: smooth;
overflow-x: hidden;
}
nav {
position: fixed;
top: 0;
width: 100%;
padding: 1rem 2rem;
display: flex;
justify-content: flex-end;
gap: 2rem;
background: transparent;
z-index: 9999;
}
nav a {
color: var(--text-color);
text-decoration: none;
font-size: 1.2rem;
transition: 0.3s;
}
nav a:hover {
color: var(--hover-color);
}
.hero {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.hero video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
filter: brightness(1.05);
}
.intro-text {
font-size: 6vw;
font-weight: 700;
opacity: 0;
transform: scale(0.95);
text-align: center;
}
.final-section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.start-button {
font-size: 3vw;
padding: 1rem 2rem;
border: 1px solid white;
border-radius: 50px;
background: transparent;
color: white;
cursor: pointer;
opacity: 0;
transform: translateY(50px);
transition: 0.3s;
}
.start-button:hover {
background: white;
color: black;
}
<body>
<nav>
<a href="#home">Home</a>
<a href="#contact">Contact</a>
<a href="https://www.birlainstitute.co.in/" target="_blank" rel="noopener
noreferrer">Website</a>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></
script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></
script>
<script>
window.addEventListener("load", () => {
gsap.registerPlugin(ScrollTrigger);
gsap.to(".intro-text", {
opacity: 1,
scale: 1,
duration: 2,
ease: "power2.out"
});
gsap.to(".start-button", {
scrollTrigger: {
trigger: ".final-section",
start: "top 80%",
toggleActions: "play none none none"
},
opacity: 1,
y: 0,
duration: 1.5,
ease: "power2.out"
});
gsap.to("video", {
scale: 1.1,
filter: "brightness(1.15) blur(1px)",
scrollTrigger: {
trigger: ".hero",
start: "top top",
end: "bottom top",
scrub: true
}
});
});
</script>
</body>
</html>