I am currently learning HTML and I ran into a problem. Currently I have my navigation bar in my header.html page and I am trying to embed that into my main index.html, however it does not seem to be working.
This is my code:
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="styles.css"/>
<header>
<nav>
<a href="#">Home</a>
<a href="#">Projects</a>
<a href="#">Certifications</a>
<a href="#">Experience</a>
<a href="#">Others</a>
<div class="animation start-home"></div>
</nav>
</header>
</html>
This is the main page:
<!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'>
<title>Homepage</title>
</head>
<body>
<div w3-include-html="header.html"></div>
<div class="background">
<div>
<div class="Page_Title">
<h1>RITHVIK VADDADI</h1>
</div>
<div class="arrow-wrap">
<div class="arrow-down arrow"></div>
<div class="arrow-down arrow"></div>
</div>
</div>
</div>
<div class="About">
<h2>About Me</h2>
<div class="ABT">
<img src="Images/My PFP.jpg" alt="Avatar" class="Avatar">
<p class="desciption">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>
<h3>Looking</h3>
</div>
</body>
</html>
This is the CSS code:
nav{
position: relative;
margin: 27px auto 0;
width: 590px;
height: 50px;
background: black;
border-radius: 8px;
font-size: 0;
box-shadow: 0 2px 3px 0 rgba(0,0,0,.1);
}
nav a{
font-size: 15px;
text-transform: uppercase;
color: whitesmoke;
text-decoration: none;
line-height: 50px;
position: relative;
z-index: 1;
display: inline-block;
text-align: center;
}
nav .animation{
position: absolute;
height: 5px;
bottom: 0;
z-index: 0;
background: darkred;
width: 100px;
border-radius: 8px;
transition: all .5s ease 0s;
}
a:nth-child(1){
width: 100px;
}
nav .start-home,a:nth-child(1):hover~.animation{
width: 100px;
left: 0;
}
a:nth-child(2){
width: 100px;
}
nav .start-projects,a:nth-child(2):hover~.animation{
width: 100px;
left: 100px;
}
a:nth-child(3){
width: 150px;
}
nav .start-certifications,a:nth-child(3):hover~.animation{
width: 150px;
left: 200px;
}
a:nth-child(4){
width: 100px;
}
nav .start-others,a:nth-child(4):hover~.animation{
width: 100px;
left: 350px;
}
a:nth-child(5){
width: 100px;
}
nav .start-others,a:nth-child(5):hover~.animation{
width: 100px;
left: 450px;
}
.background{
background-image: url(Images/CardistryBGD2.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100vh;
padding-top: 5px;
margin: -8px;
}
.Page_Title{
text-align: center;
overflow: auto;
height: 500px;
width: auto;
line-height: 320px;
position: relative;
margin-bottom: 8px;
}
.arrow-wrap {
position: relative;
bottom: 0px;
-webkit-animation: arrow 0.5s 1s infinite ease-out alternate;
-moz-animation: arrow 0.5s 1s infinite ease-out alternate;
-o-animation: arrow 0.5s 1s infinite ease-out alternate;
animation: arrow 0.5s 1s infinite ease-out alternate;
width: 56px;
margin-left: 600px;
}
.arrow-wrap:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
.arrow {
padding: 15px;
border-left: solid 5px red;
border-bottom: solid 5px whitesmoke;
position: relative;
display: inline-block;
}
.arrow-down {
transform: rotate(-45deg);
bottom:200px;
margin-top: -50px;
position: relative;
}
@-webkit-keyframes arrow {
0% {
bottom: 0px;
}
100% {
bottom: 10px;
}
}
@-moz-keyframes arrow {
0% {
bottom: 0px;
}
100% {
bottom: 10px;
}
}
@keyframes arrow {
0% {
bottom: -100px;
}
100% {
bottom: -90px;
}
}
h1{
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 9vw;
color: white;
}
h2{
text-align: center;
color: white;
font-size: 3vw;
margin: 8px;
padding: 30px;
}
.Avatar{
vertical-align: middle;
width: 145px;
height: 140px;
border-radius: 50%;
margin-left: 75px;
}
.About{
margin: -9px;
background-image: url(Images/CardBG.jpg);
background-size: 100%;
}
.ABT{
display: flex;
max-width: 1150px;
align-items: center;
color: white;
margin-top: -20px;
font-family: 'Montserrat';
}
.desciption{
margin-left: 50px;
}
Initially, everything was on index.html, until I separated the navigation bar into a separate html page, and I can’t figure out what is wrong.
1
In order to dynamically include a HTML partial, you could place this JavaScript inside a page right before the closing </body> tag:
index.html
<script>
document.querySelectorAll("[data-include]").forEach(async (el) => {
try {
const [file, selector] = el.dataset.include.split(/ +/);
const res = await fetch(file);
const html = await res.text();
const domp = new DOMParser();
const doc = domp.parseFromString(html, "text/html");
el.append(selector ? doc.querySelector(selector) : doc.documentElement);
} catch (err) { console.error(err) };
});
</script>
<!-- </body> goes here! -->
Then, you can use that script like:
<div data-include="header.html"></div>
header.html
<header>
<nav>
<a href="#">Home</a>
<a href="#">Projects</a>
<a href="#">Other</a>
</nav>
</header>
or by a specific ID selector:
<div data-include="header.html #header"></div>
header.html
<!DOCTYPE html>
<html>
<body>
<header id="header">
<nav >
<a href="#">Home</a>
<a href="#">Projects</a>
<a href="#">Other</a>
</nav>
</header>
<!-- other partials with ID -->
</body>
</html>
Keep in mind that it’s always best to Server Side Render your pages in their entirety in order to prevent flash-of-content or even missing/broken partials.
4
You forgot to include the script w3.js
Add this script to index.html:
<script src="https://www.w3schools.com/lib/w3.js"></script>
5