I’m currently building my website using HTML, CSS and JS. I am trying to separate my header and footer from my index.html, but it doesn’t seem to be working as it would be if they were in the same file, index.html. Can someone please help me? I understand the problem might be because my app.js isn’t fetched before my header and footer pages are loaded. How does one fetch a app.js file?
This is how it is supposed to look like (this is what happens when I merge them all into index.html) 
This is how the webpage appears when I separate the header and footer from the index.html (the header no longer freezes at the top of the screen and animation for the footer stops working):
Here is my HTML code:
<header class="header">
<div class="header-content">
<div class="logo">RV</div>
<div class="menu-icon" id="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<nav class="nav" id="navMenu">
<ul class="nav-list">
<li class="nav-link"> <a href="index.html">HOME</a></li>
<li class="nav-link"> <a href="projects.html">PROJECTS</a></li>
<li class="nav-link"> <a href="experience.html">EXPERIENCE</a></li>
<li class="nav-link"> <a href="others.html">OTHERS</a></li>
</ul>
</nav>
</div>
</header>
This is my Footer.html
<div class="page-wrapper">
<div id="waterdrop"></div>
<footer>
<div class="footer-top">
<div class="footer-container">
<div class="footer-icons">
<a href="https://www.linkedin.com/in/rithvik-vaddadi-8469471a9/"> <img class="linkedin" src="Images/linkedin.png" alt="linkedin"></a>
<a href="https://www.linkedin.com/in/rithvik-vaddadi-8469471a9/"> <img class="telegram" src="Images/telegram.png" alt="telegram"></a>
<a href="https://www.instagram.com/rithvik_amars/"><img class="insta" src="Images/instagram.png" alt="instagram"></a>
</div>
</div>
<div class="copyright">
<p style="color: black;">
2024 © by Rithvik Amar
</p>
</div>
</div>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
</script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://daniellaharel.com/raindrops/js/raindrops.js"></script>
<script> jQuery('#waterdrop').raindrops({color:'#989090',canvasHeight:150, density: 0.1, frequency: 10});</script>
This is my index.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="./styles.css"/>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
<title>HomePage</title>
<script>
// Function to include an external file
function includeHTML() {
const elements = document.querySelectorAll("[data-include]");
elements.forEach(el => {
const file = el.getAttribute("data-include");
if (file) {
fetch(file)
.then(response => {
if (response.ok) return response.text();
throw new Error("Network response was not ok.");
})
.then(html => {
el.innerHTML = html;
})
.catch(err => console.error("There was a problem including the HTML file:", err));
}
});
}
document.addEventListener("DOMContentLoaded", includeHTML);
</script>
</head>
<body>
<div class="page">
<div data-include="header.html"></div>
<div class="about">
<div class="about-text">
<h1 class="title">RITHVIK VADDADI</h1>
<span class="Intro">Cyber Security Enthusiast | Toastmasters | Cardistry</span>
</div>
<div class="arrow-wrap">
<div class="arrow-down arrow"></div>
<div class="arrow-down arrow"></div>
</div>
</div>
<div class="overview">
<h2>About me</h2>
<div class="OV">
<img src="Images/My PFP.jpg" alt="Avatar" class="Avatar">
<div class="text-buttons">
<p class="description">Hello, I am Rithvik Vaddadi, a current NSF with a diploma in Cyber Security and Digital Forensics. Drawn to the world of computers, I aspire to make people's lives easier and protect them from cyber attacks with the help of technology around us. As a problem solver, I am known to use my creative and critical thinking skills when providing solutions in my past leadership roles and projects. When involved in projects, I tend to notice people's strengths and weaknesses and assign them to roles where their potential would be fully maximized in the project. When my mind is fixed on a goal, I dedicate my energy and focus to achieving the goal.</p>
<div class="buttons">
<a href="https://docs.google.com/document/d/1ZjzHjOgWy2RH1Lz27aZAih7ZEqYFOU-0mNnstJ93LtU/edit?usp=sharing" target="_blank"></a>
<button>View My Resume</button>
</a>
<a href="https://www.linkedin.com/in/rithvik-vaddadi-8469471a9/" target="_blank">
<button>View My LinkedIn</button>
</a>
</div>
</div>
</div>
<section class="education-section">
<h2>My Education Journey</h2>
<div class="cards-container">
<div class="card" id="army-card">
<div class="card-inner">
<div class="card-front">
<h3>Army</h3>
</div>
<div class="card-back">
<h3>SAF Singapore Armed Forces</h3>
<p>Vocation: 5SIR Infantry Soldier as a General Purpose Machine Gun (GPMG) Gunner and Platoon 2ic <br>
Rank: Corporal <br>
ORD Date: 2nd May 2025<br>
Overseas involvement: Brunei, Malaysia, Australia. <br>
Achievements: Due to my exceptional combat fitness and leadership, I was chosen to represent my battalion in a Joint Adventure Training (JAT) with the Malaysian Army Rangers. <br>
Skills: Proficient in handling GPMG, SAR21, and LMG. Trained in drone flying. (DJI Mavick Pro, Vesper, Cetus)
</p>
<div class="gallery-wrap">
<img src="Images/back.png" class="backBtn">
<div class="gallery">
<div>
<span><img src="Images/Army1.jpg"></span>
<span><img src="Images/Army2.jpg"></span>
<span><img src="Images/Army4.jpg"></span>
</div>
<div>
<span><img src="Images/Army3.jpg"></span>
<span><img src="Images/Army5.jpg"></span>
<span><img src="Images/My PFP.jpg"></span>
</div>
</div>
<img src="Images/front.png" class="nextBtn">
</div>
<span class="close-btn"><img src="Images/X.png" alt="close"></span>
</div>
</div>
</div>
<div class="card" id="poly-card">
<div class="card-inner">
<div class="card-front">
<h3>Polytechnic</h3>
</div>
<div class="card-back">
<h3>Ngee Ann Polytechnic</h3>
<p>Course: Cyber Security and Digital Forensics<br>
CCAs: Vice-President and Student Advisor of NP's Toastmasters Club, Head of Logistics for NP's ICTSociety, Tchoukball<br>
Achievements: I led a 2-hour group focus session with the Minister of Education, Mr Chan Chun Sing, about the future of Singapore's education, housing, etc.
Showcased my capstone project at Singapore International Cyber Week X Govware (SICW 2022).
Spearheaded a YEP-GO overseas cross-cultural program with a school in Ladakh, India for a week.
</p>
<div class="gallery-wrap">
<img src="Images/back.png" class="backBtn">
<div class="gallery">
<div>
<span><img src="Images/Dip2.jpg"></span>
<span><img src="Images/Dip5.jpg"></span>
<span><img src="Images/Dip6.jpg"></span>
</div>
<div>
<span><img src="Images/Dip3.jpg"></span>
<span><img src="Images/Dip1.jpg"></span>
<span><img src="Images/Dip7.jpg"></span>
</div>
</div>
<img src="Images/front.png" class="nextBtn">
</div>
<span class="close-btn"><img src="Images/X.png" alt="close"></span>
</div>
</div>
</div>
<div class="card" id="school-card">
<div class="card-inner">
<div class="card-front">
<h3>Secondary School</h3>
</div>
<div class="card-back">
<h3>Bukit Batok Secondary School</h3>
<p>Stream: Express double science (Physics and Chemistry)<br>
O-Level L1R5: 10 L1R4: 7<br>
CCAs: Badminton (Vice-Captain), Student Council (Vice President), Lewis House Captain
Achievements: I attended a photoshoot with my school's principle for our school website and magazine. This event was a testament to the contributions and impact I made in the school's community. Involved in many volunteer programs such as donating rice, beach clean-ups, etc.
</p>
<div class="gallery-wrap">
<img src="Images/back.png" class="backBtn">
<div class="gallery">
<div>
<span><img src="Images/Secondary1.jpg"></span>
<span><img src="Images/Secondary2.jpg"></span>
<span><img src="Images/Secondary3.jpg"></span>
</div>
<div>
<span><img src="Images/Secondary4.jpg"></span>
<span><img src="Images/Secondary5.jpg"></span>
<span><img src="Images/Secondary6.jpg"></span>
</div>
</div>
<img src="Images/front.png" class="nextBtn">
</div>
<span class="close-btn"><img src="Images/X.png" alt="close"></span>
</div>
</div>
</div>
</div>
</section>
<div data-include="footer.html"></div>
</div>
<script src="app.js"></script>
</body>
</html>
This is my styles.CSS code:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page{
position: relative;
background: #e2e2e2;
height: 300vh;
}
.logo{
font-size: 22px;
}
.header{
color: white;
background: transparent;
position: sticky;
z-index: 2;
top: 0;
transition: 0.3s ease-in-out;
height: 80px;
}
.scrolled{
height: 50px;
background: black;
transition: .3s ease-in-out;
}
.header-content{
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1100px;
margin: 0 auto;
height: 100%;
padding: 0 40px;
}
.nav{
display: flex;
width: 40%;
}
.nav-list{
list-style: none;
display: flex;
justify-content: space-between;
width: 100%;
flex-wrap: wrap;
gap: 20px;
}
.nav-link a{
color: white;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: 0.3s;
}
.nav-link a:hover{
border-bottom: 2px solid white;
transition: 0.3s;
}
.menu-icon{
display: none;
flex-direction: column;
cursor: pointer;
}
.menu-icon .bar{
width: 25px;
height: 3px;
background-color: red;
margin: 4px 0;
transition: 0.4s;
}
@media (max-width:768px){
.nav{
display: none;
flex-direction: column;
background-color: black;
width: 100%;
position: relative;
top: 80px;
left: 0;
text-align: center;
}
.nav-list{
flex-direction: column;
width: 100%;
}
.nav-link a{
padding: 12px;
border-bottom: 1px solid white;
width: 100%;
display: block;
}
.menu-icon{
display: flex;
}
.nav.show{
display:flex;
}
}
.about{
background-image: url(Images/CardistryBGD2.jpg);
background-size: cover;
height: 100vh;
position: relative;
top: -80px;
z-index: 1;
display: flex;
justify-content: center;
align-items:center;
flex-direction: column;
}
.about-text{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.title{
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color:white;
font-size: 9vw;
}
.Intro{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 1.5vw;
color: white;
margin-top: 10px;
}
.arrow-wrap {
position: absolute;
bottom: 30%;
left: 50%;
transform: translate(-50%, -25px);
-webkit-animation: arrow 0.5s 1s infinite ease-out alternate;
animation: arrow 0.5s 1s infinite ease-out alternate;
text-align: center;
}
.arrow {
position: relative;
padding: 15px;
border-left: solid 5px red;
border-bottom: solid 5px whitesmoke;
display: block;
}
.arrow-down {
transform: rotate(-45deg);
position: relative;
margin-top: -15px;
}
@keyframes arrow {
0% {
bottom: 0px;
}
100% {
bottom: 10px;
}
}
/* Hover effect */
.arrow-wrap:hover {
animation-play-state: paused;
}
/* Responsive styling for mobile screens */
@media (max-width: 768px) {
/* Place arrow differently on mobile */
.arrow-wrap {
bottom: 30px;
}
}
h2{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: white;
font-size: 3vw;
margin: 8px;
padding: 30px;
}
.Avatar{
vertical-align: middle;
width: 145px;
height: 140px;
border-radius: 50%;
margin-left: 15px;
}
.text-buttons{
display: flex;
flex-direction: column;
}
.overview{
background-image: url(Images/CardBG.jpg);
background-size: cover;
margin: -80px 0 0 0;
padding:0;
height: auto;
display: flex;
justify-content: center;
align-items:center;
flex-direction: column;
}
.OV{
display: flex;
align-items: flex-start;
max-width: 1150px;
color: white;
font-family: 'Montserrat';
text-align: left;
}
.description{
margin-left: 25px;
font-size: 1.2em;
}
.buttons{
display: flex;
gap: 20px;
margin-top: 20px;
}
button{
background: rgb(165, 1, 1);
color: #fff;
font-weight: 600;
border: none;
border-radius: 12px;
/* height: 50px;
width: 200px; */
padding: 10px 20px;
font-size: 18px;
font-family: 'Montserrat';
margin-top: 20px;
box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
transition: background-color 0.3s ease, transform 0.2s ease;
cursor: pointer;
}
button:hover{
background-color: #8a0000;
transform: translateY(-2px);
box-shadow: 0px 6px 8px rgba(0,0,0,0.2);
}
@media (max-width: 768px) {
.overview {
padding: 0px;
}
.OV {
flex-direction: column;
text-align: center;
align-items: center;
}
.content{
flex-direction: column;
}
.Avatar {
margin-left: 0;
margin-bottom: 20px;
width: 120px;
height: 120px;
}
.description {
margin-left: 0;
font-size: 4vw;
}
.buttons{
flex-direction: column;
align-items: center;
}
button{
width: 150px;
height: auto;
}
}
@media (max-width: 480px) {
.OV{
align-items: center;
}
h2 {
font-size: 6vw;
}
.description {
font-size: 5vw;
}
.Avatar {
margin: 0;
width: 100px;
height: 100px;
}
button{
width: 100%;
height: 16px;
padding: 10px;
}
.buttons{
align-items: center;
}
}
/* Section Styles */
.education-section {
padding: 20px 20px;
color: white;
text-align: center;
}
.cards-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-top: 20px;
margin-bottom: 0;
}
/* Card Styles */
.card {
width: 300px;
height: 400px;
perspective: 1000px;
margin: 20px;
transition: transform 0.3s ease box-shadow 0.3s ease;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
position: relative;
}
/* Hover Animation */
.card:hover {
transform: scale(1.05); /* Slight jump effect */
box-shadow: 0px 12px 24px rgba(255, 255, 255, 0.3);
}
/* Card Flip Animation */
.card-inner {
position: relative;
width: 100%;
height: 100%;
max-width: 1000px;
margin: 0 auto;
transform-style: preserve-3d;
transition: transform 0.8s ease;
cursor: pointer;
border-radius: 15px;
box-shadow: none;
font-family: Arial, sans-serif;
line-height: 1.6;
letter-spacing: 0.5px;
color: #f1f1f1;
}
.card-front, .card-back {
box-shadow: none;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; /* Hide the back while flipping */
border-radius: 10px;
background-color: #1e1e1e;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Roboto', sans-serif;
}
.card-front {
background: linear-gradient(135deg, #ac0101 0%, #941616 100%); /* Gradient */
color: white;
font-size: 1.5em;
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
/* Back Card Design with Image Background */
.card-back {
background-image: url('your-image-back.jpg'); /* Replace with your image */
background-size: cover;
background-position: center;
transform: rotateY(180deg);
padding: 30px;
font-size: 1em;
color: #ddd;
backface-visibility: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start; /* Align items from the top */
align-items: center; /* Center the items horizontally */
border-radius: 15px;
position: relative;
transition: background 0.5s ease;
}
.card-inner h1{
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
text-align: center;
}
/* Style for the h3 element (Title) */
.card-back h3 {
font-size: 1.8em;
color: #ffffff;
margin-bottom: 20px;
text-align: center;
width: 100%; /* Ensure it takes up full width */
position: absolute;
top: 30px; /* Adjust this value to control the top spacing */
left: 50%;
transform: translateX(-50%); /* Center horizontally */
}
/* Style for paragraph or other content */
.card-back p {
font-size: 1.2em;
text-align: left;
margin-top: 80px; /* Ensure it's below the h3 title */
z-index: 1;
width: 100%;
padding: 0 20px;
}
.card-inner.flip {
transform: rotateY(180deg);
}
/* Expand animation */
.card.expand {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
background-color: transparent;
transform: none;
transition: width 0.5s ease, height 0.5s ease;
box-shadow: none;
}
.card-back .close-btn {
position: absolute;
top: 15px;
right: 15px;
background-color: transparent;
border: none;
color: white;
font-size: 0.5em;
cursor: pointer;
font-weight: bold;
z-index: 1;
}
/* Media Queries for responsiveness */
@media (max-width: 768px) {
.cards-container {
flex-direction: column;
align-items: center;
}
.card {
width: 80%;
height: auto;
}
}
.gallery{
width:600px;
display:flex;
overflow-x: scroll;
}
.gallery div{
width: 100%;
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 30px;
padding: 10px;
flex:none;
}
.gallery div img{
width:100%;
/* filter:grayscale(100%); */
transition: tranform 0.5s;
}
.gallery::-webkit-scrollbar{
display:none;
}
.gallery-wrap{
display:flex;
align-items:center;
justify-content: center;
margin: 2% auto;
}
.backBtn, .nextBtn{
width:50px;
cursor: pointer;
margin: 40px;
}
.gallery div img:hover{
transform: scale(1.1);
}
.footer-top {
text-align: center;
background-size: cover;
background-position: center;
padding: 30px 0px;
font-family: rubik;
margin-top: 0;
}
.page-wrapper
{
position: relative;
bottom: 0;
width: 100%;
z-index: 11111;
}
.footer-top, .footer-bottom {
background-color: #989090;
}
footer p, footer strong, footer b, footer {
color: #ffffff;
}
#waterdrop {
height: 80px;
}
#waterdrop canvas {
bottom: -70px !important;
}
.footer-site-info
{
padding-top: 10px;
}
footer {
text-align: center;
}
.footer-container {
justify-content: center;
display: flex;
align-items: center;
width: 100%;
}
.footer-container a {
padding: 0px 16px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: medium;
}
.fa:hover {
color: #45405F;
}
.footer-icons {
display: flex;
justify-content: center;
gap:20px;
padding-bottom: 10px;
}
.copyright {
color:#f2f2f2;
overflow: hidden;
margin-bottom: -30px;
}
.telegram{
padding: 0px;
width: 30px;
text-decoration: none;
}
.telegram:hover{
opacity: 0.7;
}
.linkedin{
padding: 0px;
width: 30px;
text-decoration: none;
}
.linkedin:hover{
opacity: 0.7;
}
.insta{
padding: 0px;
width: 30px;
text-decoration: none;
}
.insta:hover{
opacity: 0.7;
}
This is my Javascript code:
const header = document.querySelector('.header');
window.addEventListener("scroll", () => {
if(window.scrollY >= 150){
header.classList.add("scrolled");
} else if(window.scrollY <=100) {
header.classList.remove("scrolled");
}
});
//Hamburger Toggle for mobile
const menuIcon = document.getElementById('menu-icon');
const navMenu = document.getElementById('navMenu');
menuIcon.addEventListener('click', () => {
navMenu.classList.toggle('show');
});
window.addEventListener('load', function(){
this.document.querySelector('.arrow-wrap').computedStyleMap.display = 'block';
});
// Select all cards
const cards = document.querySelectorAll('.card');
// Add event listeners to each card
cards.forEach(card => {
const cardInner = card.querySelector('.card-inner');
// Only flip when you click the card front
const cardFront = card.querySelector('.card-front');
cardFront.addEventListener('click', function (e) {
e.stopPropagation(); // Prevent the event from propagating to the document
cardInner.classList.toggle('flip'); // Flip the card
card.classList.toggle('expand'); // Expand the card
});
// Close button logic (for collapsing and un-flipping)
const closeButton = card.querySelector('.close-btn');
closeButton.addEventListener('click', function (e) {
e.stopPropagation(); // Prevent clicking the card behind the button
cardInner.classList.remove('flip'); // Remove the flip effect
card.classList.remove('expand'); // Collapse the card
});
});
const nextButtons = document.querySelectorAll('.nextBtn');
const backButtons = document.querySelectorAll('.backBtn');
const galleries = document.querySelectorAll('.gallery');
// Function to scroll the gallery
function scrollGallery(direction, gallery) {
const scrollAmount = gallery.clientWidth;
gallery.scrollBy({ left: direction * scrollAmount, behavior: 'smooth' });
}
// Adding event listeners to each pair of buttons
nextButtons.forEach((btn, index) => {
btn.addEventListener('click', () => scrollGallery(1, galleries[index]));
});
backButtons.forEach((btn, index) => {
btn.addEventListener('click', () => scrollGallery(-1, galleries[index]));
});
window.addEventListener('scroll', function() {
const footer = document.querySelector('.footer');
const scrollable = document.documentElement.scrollHeight - window.innerHeight;
const scrolled = window.scrollY;
if (Math.ceil(scrolled) >= scrollable) {
footer.classList.add('expanded'); // Expand footer when at the bottom
} else {
footer.classList.remove('expanded'); // Hide footer when not at the bottom
}
});
I understand the problem might be because my app.js isn’t fetched before my header and footer pages are loaded. How does one fetch a app.js file?
