Skip to content

Navbar bug (major) solved #51

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Chet-69 merged 1 commit into from
Apr 22, 2025
Merged

Navbar bug (major) solved #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,13 @@
<link rel="stylesheet" href="about.css">
<link rel="stylesheet" href="navbar.css">
<link rel="stylesheet" href="footer.css">

<link rel="icon" href="pictures/Fitness.png" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
</head>
<body>
<div id="nav"></div>
<header>
<script src="dark_about.js"></script>
<div class="header-content">
Expand Down Expand Up @@ -130,9 +132,20 @@ <h2>Ready to Transform Your Life?</h2>
document.getElementById('footer').innerHTML = data;
});
</script>
<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>

<!-- make sure to put gsap link before linking script.js -->
<!--gsap cdn is a js library for scrolling animations-->
<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> <!-- plugin for gsap-->


<script src="about.js"></script>
<script src="chatbot.js"></script>
<script src="navbar.js"></script>

</body>
</html>
2 changes: 1 addition & 1 deletion cart.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ header {
color: #333;
transition: color 0.3s ease;
margin: 0;
overflow: hidden;
/* overflow: hidden; */
text-overflow: ellipsis;
white-space: nowrap;
max-width:120px;
Expand Down
12 changes: 12 additions & 0 deletions cart.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
<link rel="shortcut icon" href="pictures/Fitness.png" type="image/x-icon">
</head>
<body class="">
<div id="nav"></div>

<div class="container">
<header>
Expand Down Expand Up @@ -112,8 +113,19 @@ <h1 class="s">Shopping Cart</h1>
document.getElementById('footer').innerHTML = data;
});
</script>
<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>

<!-- make sure to put gsap link before linking script.js -->
<!--gsap cdn is a js library for scrolling animations-->
<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> <!-- plugin for gsap-->


<script src="cart.js"></script>
<script src="chatbot.js"></script>
<script src="navbar.js"></script>
</body>
</html>
54 changes: 31 additions & 23 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
<body>
<video autoplay loop muted src="pictures/bg_video.mp4"></video>
<div>
<div id="nav"></div>

<div id="main">
<!-- page1 -->
Expand Down Expand Up @@ -99,47 +100,54 @@ <h2>BMI Calculator</h2>
</div>
</div>

<!-- <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js">
</script> -->
<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>

<!-- make sure to put gsap link before linking script.js -->
<!-- make sure to put gsap link before linking script.js -->
<!--gsap cdn is a js library for scrolling animations-->
<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> <!-- plugin for gsap-->

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js">
</script>

<script src="script.js"></script>
<!-- emailjs -->
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js">
</script>

<script src="bmi.js"></script>
<script src="bmi.js"></script>

<script src="https://cdn.emailjs.com/dist/email.min.js"></script>
<script src="https://cdn.emailjs.com/dist/email.min.js"></script>

<!-- index.html -->
<div id="navbar"></div>
<div id="footer"></div>
<!-- index.html -->
<div id="navbar"></div>
<div id="footer"></div>

<script>
fetch('navbar.html')
.then(response => response.text())
.then(data => {
document.getElementById('navbar').innerHTML = data;
});
</script>
<script>
fetch('navbar.html')
.then(response => response.text())
.then(data => {
document.getElementById('navbar').innerHTML = data;
});
</script>

<script>
fetch('footer.html')
.then(response => response.text())
.then(data => {
document.getElementById('footer').innerHTML = data;
});
.then(response => response.text())
.then(data => {
document.getElementById('footer').innerHTML = data;
});
</script>

<script src="chatbot.js"></script>
<script src="chatbot.js"></script>

<script src="script.js"></script>
</body>

</html>
2 changes: 2 additions & 0 deletions navbar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,8 @@
cursor: pointer;
}



@media (max-width: 480px) {
.chatbox {
width: 90%;
Expand Down
20 changes: 19 additions & 1 deletion navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<link rel="stylesheet" href="navbar.css">
</head>
<body>

<div id="nav">
<a href="index.html"><img src="pictures/image_transparent.png" alt="logo"></a>
<div class="navb">
Expand All @@ -18,6 +19,23 @@ <h4 class="navbar"><a href="signin.html">Sign In</a></h4>
<img class="navbar chatboticon" src="pictures/chatbot.svg" alt="chatbot-png">
</div>
</div>
<!-- Add GSAP core -->
<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>

</body>
<!-- make sure to put gsap link before linking script.js -->
<!--gsap cdn is a js library for scrolling animations-->
<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> <!-- plugin for gsap-->

<!-- emailjs -->
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js">
</script>
<!-- Your JS -->
<script src="navbar.js"></script>

</html>
27 changes: 27 additions & 0 deletions navbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
gsap.to("#nav", {
backgroundColor: "#000", // we can access any css property here but we use Camel case here that is instead of - use a capital letter
height: "90px",
duration: 0.5,
scrollTrigger: {
trigger: "#nav",
scroller: "body",
// markers:true,
start: "top -10%",
end: "top -11%",
scrub: 1 // for this it will repeat when we scroll otherwise it won't


}

})
gsap.to("#main", {
backgroundColor: "#000",
scrollTrigger: {
trigger: "main",
scroller: "body",
// markers:true
start: "top -25%",
end: "top -75%",
scrub: 2
}
})
37 changes: 26 additions & 11 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,29 @@
gsap.to("#nav", {
backgroundColor: "#000", // we can access any css property here but we use Camel case here that is instead of - use a capital letter
height: "90px",
duration: 0.5,
scrollTrigger: {
trigger: "#nav",
scroller: "body",
// markers:true,
start: "top -10%",
end: "top -11%",
scrub: 1 // for this it will repeat when we scroll otherwise it won't


}

})
gsap.to("#main", {
backgroundColor: "#000",
scrollTrigger: {
trigger: "main",
scroller: "body",
// markers:true
start: "top -25%",
end: "top -75%",
scrub: 2
}
backgroundColor: "#000",
scrollTrigger: {
trigger: "main",
scroller: "body",
// markers:true
start: "top -25%",
end: "top -75%",
scrub: 2
}
})

// page 2
Expand Down Expand Up @@ -194,6 +210,5 @@ prompt.addEventListener("keypress", function(event) {
});





12 changes: 12 additions & 0 deletions signin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
<link rel="shortcut icon" href="pictures/Fitness.png" type="image/x-icon" sizes="160*160">
</head>
<body>
<div id="nav"></div>
<div class="container">
<div class="form-box login">
<form action="">
Expand Down Expand Up @@ -114,9 +115,20 @@ <h1>Welcome Back!</h1><br><br>
document.getElementById('footer').innerHTML = data;
});
</script>
<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>

<!-- make sure to put gsap link before linking script.js -->
<!--gsap cdn is a js library for scrolling animations-->
<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> <!-- plugin for gsap-->


<script src="signin.js"></script>
<script src="chatbot.js"></script>
<script src="navbar.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
</body>
</html>