Hello,this is my first post here.My name is Gints and I just picked up coding courses and am on first week.I have encountered an issue with my coursework and would like some help.I am supposed to make a page based on page construct from “spacey kappa vercel app”.I made a html and css parts but am unable to get my images to be displayed and cant get them to change as I scroll down,any help would be very much appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RaceY</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">
<h1>RACEY</h1>
</div>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
<main>
<div id="yourCustomDiv"> <!-- Add your custom ID here -->
<!-- Add your content inside this div -->
<section id="post1" class="feature">
<div class="title">
<h2>Featured Post</h2>
<h1>How to make a splash page</h1>
<a href="#">Read more</a>
</div>
</section>
</div>
<!-- Add more sections or content as needed -->
</main>
<script src="script.js"></script>
</body>
</html>
body {
margin: 0;
font-family: 'Helvetica', sans-serif;
background-image: url("https://plus.unsplash.com/premium_photo-1683134242640-fe6baaf4d5fc?q=80&w=1895&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
background-size: cover;
background-position: center center;
background-attachment: fixed; /* Fixed background */
height: 100vh; /* Set the height to full viewport height */
display: flex;
flex-direction: column;
}
header {
padding: 500px; /* Add padding to header if needed */
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
}
.logo h1 {
margin-right: 20px;
color: #ff0000/* Adjust the margin as needed */
}
nav {
display: flex;
align-items: center;
}
nav a {
color: #fb0404; /* Set text color to black */
margin: 50px;
margin-left: 50px;
text-decoration: none;
}
.feature {
text-align: center;
color: #f70808; /* Set text color to white */
}
.feature h2 {
font-size: 2em;
padding: 500px;
margin-bottom: 20px; /* Adjust margin as needed */
}
.feature h1 {
font-size: 3em;
margin-bottom: 20px; /* Adjust margin as needed */
}
a {
color: #f20707;
text-decoration: none;
}
````document.addEventListener('DOMContentLoaded', function () {
const headers = document.querySelectorAll('header');
const headerImages = [
'url(https://plus.unsplash.com/premium_photo-1683134242640-fe6baaf4d5fc?q=80&w=1895&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)',
'url(https://images.unsplash.com/photo-1546768292-fb12f6c92568?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)',
'url(https://images.unsplash.com/photo-1610905376670-5e7e0e8a3cfb?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)'
];
function changeHeader() {
const scrollPosition = window.scrollY;
const sectionHeight = document.querySelector('.feature').offsetHeight;
const headerIndex = Math.floor(scrollPosition / sectionHeight);
headers.forEach((header, index) => {
header.style.backgroundImage = index === headerIndex ? headerImages[index] : 'none';
});
}
document.addEventListener('scroll', changeHeader);
});
`