From 2993bec8fa5895a5cfe8e133d38855f2322269a2 Mon Sep 17 00:00:00 2001 From: Karthikeya Aluru Date: Sun, 4 Aug 2024 23:50:16 +0530 Subject: [PATCH] width bugs --- index.html | 41 ++++++++--- script.js | 209 ++++++++++++++++++++++++++--------------------------- styles.css | 37 ++++++---- 3 files changed, 158 insertions(+), 129 deletions(-) diff --git a/index.html b/index.html index d710e9a..fe406b6 100644 --- a/index.html +++ b/index.html @@ -12,11 +12,13 @@ - -
-
+ +
+
+ +
+ +
+ +

Where Learning is made practical

@@ -64,13 +70,19 @@

Where Learning is made practicalSign in

no account? Sign up

-
-
Cloud
-
Cloud
-
+ +
+
Cloud
+
Cloud
+
+
+ + Tree Stone + +

Why Us?

cartoon @@ -79,6 +91,8 @@

Why Us?

Know More
+ +

What do we do?

cartoon @@ -87,6 +101,8 @@

What do we do?

Explore courses
+ +

Our Edu-Games

cartoon
@@ -95,6 +111,8 @@

Our Edu-Games

Coming soon!!
+ +

Our Courses


@@ -102,6 +120,8 @@

Our Courses


+ + + +
- - - \ No newline at end of file + + \ No newline at end of file diff --git a/script.js b/script.js index 02d2096..f61d23e 100644 --- a/script.js +++ b/script.js @@ -1,121 +1,120 @@ document.addEventListener('DOMContentLoaded', () => { - const menuIcon = document.getElementById('menu-icon'); - const menuItems = document.getElementById('menu-items'); - const bodyElement = document.getElementById('body'); + const menuIcon = document.getElementById('menu-icon'); + const menuItems = document.getElementById('menu-items'); + const bodyElement = document.getElementById('body'); - function toggleMode() { - const body = document.body; - const sun = document.getElementById("sun"); - const moon = document.getElementById("moon"); - - if (body.classList.contains("night")) { - body.classList.remove("night"); - body.classList.add("day"); - sun.style.display = "block"; - moon.style.display = "none"; - } else { - body.classList.remove("day"); - body.classList.add("night"); - sun.style.display = "none"; - moon.style.display = "block"; + function toggleMode() { + const body = document.body; + const sun = document.getElementById("sun"); + const moon = document.getElementById("moon"); + + if (body.classList.contains("night")) { + body.classList.remove("night"); + body.classList.add("day"); + sun.style.display = "block"; + moon.style.display = "none"; + } else { + body.classList.remove("day"); + body.classList.add("night"); + sun.style.display = "none"; + moon.style.display = "block"; + } +} + +document.getElementById("sun").addEventListener("click", toggleMode); +document.getElementById("moon").addEventListener("click", toggleMode); + + menuIcon.addEventListener('click', (event) => { + event.stopPropagation(); + menuItems.classList.toggle('active'); + }); + + document.addEventListener('click', (event) => { + if (menuItems.classList.contains('active')) { + menuItems.classList.remove('active'); } - } - - document.getElementById("sun").addEventListener("click", toggleMode); - document.getElementById("moon").addEventListener("click", toggleMode); - - menuIcon.addEventListener('click', (event) => { - event.stopPropagation(); - menuItems.classList.toggle('active'); - }); - - document.addEventListener('click', (event) => { - if (menuItems.classList.contains('active')) { - menuItems.classList.remove('active'); - } - }); + }); - menuItems.addEventListener('click', (event) => { - event.stopPropagation(); - }); + menuItems.addEventListener('click', (event) => { + event.stopPropagation(); + }); - const cursorDot = document.querySelector("[data-cursor-dot]"); - const cursorOutline = document.querySelector("[data-cursor-outline]"); - - window.addEventListener("mousemove", (e) => { - const posX = e.clientX; - const posY = e.clientY; - - cursorDot.style.left = `${posX}px`; - cursorDot.style.top = `${posY}px`; - - cursorOutline.style.left = `${posX}px`; // Adjust position to center outline around dot - cursorOutline.style.top = `${posY}px`; - - cursorOutline.animate({ - left: `${posX}px`, - top: `${posY}px` - }, { duration: 500, fill: "forwards" }); - }); - - // Hide the default cursor - document.body.style.cursor = 'none'; - + const cursorDot = document.querySelector("[data-cursor-dot]"); + const cursorOutline = document.querySelector("[data-cursor-outline]"); + + window.addEventListener("mousemove", (e) => { + const posX = e.clientX; + const posY = e.clientY; + + cursorDot.style.left = `${posX}px`; + cursorDot.style.top = `${posY}px`; + + cursorOutline.style.left = `${posX}px`; // Adjust position to center outline around dot + cursorOutline.style.top = `${posY}px`; + + cursorOutline.animate({ + left: `${posX}px`, + top: `${posY}px` + }, { duration: 500, fill: "forwards" }); + }); + + // Hide the default cursor + document.body.style.cursor = 'none'; + }); document.addEventListener("DOMContentLoaded", function() { - gsap.registerPlugin(ScrollTrigger); +gsap.registerPlugin(ScrollTrigger); - gsap.utils.toArray('.fade-in-up-target').forEach(el => { - gsap.fromTo(el, - { opacity: 0, y: 100 }, // Start state - { - opacity: 1, - y: 0, // End state - duration: 2, - scrollTrigger: { - trigger: el, - start: 'top 80%', // Animation starts when element is 80% from the top of the viewport - end: 'bottom 20%', // Animation ends when element is 20% from the bottom of the viewport - scrub: true // Smoothly animates while scrolling - } +gsap.utils.toArray('.fade-in-up-target').forEach(el => { + gsap.fromTo(el, + { opacity: 0, y: 100 }, // Start state + { + opacity: 1, + y: 0, // End state + duration: 2, + scrollTrigger: { + trigger: el, + start: 'top 80%', // Animation starts when element is 80% from the top of the viewport + end: 'bottom 20%', // Animation ends when element is 20% from the bottom of the viewport + scrub: true // Smoothly animates while scrolling } - ); - }); + } + ); +}); - gsap.utils.toArray('.fade-in-left-target').forEach(el => { - gsap.fromTo(el, - { opacity: 0, x: -100 }, // Start state - { - opacity: 1, - x: 0, // End state - duration: 2, - scrollTrigger: { - trigger: el, - start: 'top 80%', - end: 'bottom 20%', - scrub: true - } +gsap.utils.toArray('.fade-in-left-target').forEach(el => { + gsap.fromTo(el, + { opacity: 0, x: -100 }, // Start state + { + opacity: 1, + x: 0, // End state + duration: 2, + scrollTrigger: { + trigger: el, + start: 'top 80%', + end: 'bottom 20%', + scrub: true } - ); - }); + } + ); +}); - gsap.utils.toArray('.fade-in-right-target').forEach(el => { - gsap.fromTo(el, - { opacity: 0, x: 100 }, // Start state - { - opacity: 1, - x: 0, // End state - duration: 2, - scrollTrigger: { - trigger: el, - start: 'top 80%', - end: 'bottom 20%', - scrub: true - } +gsap.utils.toArray('.fade-in-right-target').forEach(el => { + gsap.fromTo(el, + { opacity: 0, x: 100 }, // Start state + { + opacity: 1, + x: 0, // End state + duration: 2, + scrollTrigger: { + trigger: el, + start: 'top 80%', + end: 'bottom 20%', + scrub: true } - ); - }); + } + ); +}); }); - diff --git a/styles.css b/styles.css index 2b4b146..1508b6d 100644 --- a/styles.css +++ b/styles.css @@ -32,20 +32,31 @@ body.day { } header { + position: sticky; + position: -webkit-sticky; + top: 0; + width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px; background-color: rgba(44,62,80,0.2); border-bottom: 2px solid var(--main-white); - position: sticky; - top: 0; z-index: 100; } +body.day, body.night header { + position: sticky; +} + +html, body { + overflow-x: hidden; +} + body.night header { background-color: rgba(44,62,80,0.9); top: 0; + position: sticky; } body.day header { @@ -81,7 +92,7 @@ body.day .logo span { } nav { - position: relative; + position: sticky; margin-top: 10px; } @@ -127,7 +138,6 @@ nav ul.active { } .hero-content { - font-family: "Architects Daughter", sans-serif; font-size: 3vh; margin-top: 35vh; position: relative; @@ -238,16 +248,15 @@ body.day .hero-content > p { } @keyframes fadeInUp { - 0% { - transform: translateY(100%); - opacity: 0; + from { + transform: translate3d(0, 40px, 0); + opacity: 0; } - 100% { - transform: translateY(0%); - opacity: 1; - filter: blur(0); + to { + transform: translate3d(0, 0, 0); + opacity: 1; } - } +} @keyframes fadeInLeft { @@ -369,8 +378,9 @@ body.day .moon { } .hehe { - font-family: "Architects Daughter", sans-serif; font-size: 2.5vh; + font-family: "Architects Daughter", sans-serif; + font-weight: 400; } body.day .hehe { @@ -937,4 +947,3 @@ body.day .sign-in:hover { position: relative; left: 50%; } -