Scribd
Upload
10 views4 pages

code for the website front

The document is an HTML template for the BIRLA INSTITUTE's interactive scroll website, featuring a video background and a navigation bar. It includes sections for a hero image with an introductory text and a final section with a button to start a tour. The design utilizes CSS for styling and GSAP for animations and scroll-triggered effects.

Uploaded by

aadiwsn123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views4 pages

code for the website front

The document is an HTML template for the BIRLA INSTITUTE's interactive scroll website, featuring a video background and a navigation bar. It includes sections for a hero image with an introductory text and a final section with a button to start a tour. The design utilizes CSS for styling and GSAP for animations and scroll-triggered effects.

Uploaded by

aadiwsn123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

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;
}

@media screen and (max-width: 768px) {


.intro-text {
font-size: 10vw;
}
.start-button {
font-size: 5vw;
}
}
</style>
</head>

<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>

<section class="hero" id="home">


<video autoplay muted loop playsinline>
<source src="birla_intro.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<h1 class="intro-text">BIRLA INSTITUTE</h1>
</section>

<section class="final-section" id="contact">


<button class="start-button">Start the Tour</button>
</section>

<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>

You might also like