Build a tribute page - Issue regarding running the tests, goes from 10/10 to 8/10 tests passed?!

Website link: https://marccodez.github.io/Kobe-Bryant-tribute-page/

HTML code

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style_sheet.css" />
		<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
		<link
			href="https://fonts.googleapis.com/css?family=Crimson+Text|Work+Sans:400,700"
			rel="stylesheet"
		/>
	</head>

	<body>
		<script
			type="text/javascript"
			src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"
		></script>
		<h1 id="title">Kobe Bryant</h1>

		<div id="main">
			<div id="img-div" class="w3-content w3-section">
				<p id="img-caption">
					"The most important thing is to try and inspire people so that they
					can be great in whatever they want to do." - Kobe
					<img
						id="image"
						class="mySlides w3-animate-fading responsive"
						src="kobe1.jpeg"
					/>
					<img
						id="image"
						class="mySlides w3-animate-fading responsive"
						src="kobe2.jpg"
					/>
					<img
						id="image"
						class="mySlides w3-animate-fading responsive"
						src="kobe3.jpg"
					/>
					<img
						id="image"
						class="mySlides w3-animate-fading responsive"
						src="kobe4.jpg"
					/>
				</p>
			</div>

			<script>
				//slow mo images script
				var myIndex = 0;
				carousel();

				function carousel() {
					var i;
					var x = document.getElementsByClassName("mySlides");
					for (i = 0; i < x.length; i++) {
						x[i].style.display = "none";
					}
					myIndex++;
					if (myIndex > x.length) {
						myIndex = 1;
					}
					x[myIndex - 1].style.display = "block";
					setTimeout(carousel, 4000);
				}
			</script>

			<div id="tribute-info">
				<h2>Dear Basketball - A Passion project by Kobe Bryant</h2>
				Dear Basketball,

				<p>From the moment</p>
				<p>I started rolling my dad’s tube socks</p>
				<p>And shooting imaginary</p>
				<p>Game-winning shots</p>
				<p>In the Great Western Forum</p>
				<p>I knew one thing was real:</p>
				<br />
				<p>I fell in love with you.</p>
				<br />
				<p>A love so deep I gave you my all —</p>
				<p>From my mind & body</p>
				<p>To my spirit & soul.</p>
				<br />
				<p>As a six-year-old boy</p>
				<p>Deeply in love with you</p>
				<p>I never saw the end of the tunnel.</p>
				<p>I only saw myself</p>
				<p>Running out of one.</p>
				<br />
				<p>And so I ran.</p>
				<p>I ran up and down every court</p>
				<p>After every loose ball for you.</p>
				<p>You asked for my hustle</p>
				<p>I gave you my heart</p>
				<p>Because it came with so much more.</p>
				<br />
				<p>I played through the sweat and hurt</p>
				<p>Not because challenge called me</p>
				<p>But because YOU called me.</p>
				<p>I did everything for YOU</p>
				<p>Because that’s what you do</p>
				<p>When someone makes you feel as</p>
				<p>Alive as you’ve made me feel.</p>
				<br />
				<p>You gave a six-year-old boy his Laker dream</p>
				<p>And I’ll always love you for it.</p>
				<p>But I can’t love you obsessively for much longer.</p>
				<p>This season is all I have left to give.</p>
				<p>My heart can take the pounding</p>
				<p>My mind can handle the grind</p>
				<p>But my body knows it’s time to say goodbye.</p>
				<br />
				<p>And that’s OK.</p>
				<p>I’m ready to let you go.</p>
				<p>I want you to know now</p>
				<p>So we both can savor every moment we have left together.</p>
				<p>The good and the bad.</p>
				<p>We have given each other</p>
				<p>All that we have.</p>
				<br />
				<p>And we both know, no matter what I do next</p>
				<p>I’ll always be that kid</p>
				<p>With the rolled up socks</p>
				<p>Garbage can in the corner</p>
				<p>:05 seconds on the clock</p>
				<p>Ball in my hands.</p>
				<p>5 … 4 … 3 … 2 … 1</p>
				<br />
				<p>Love you always,</p>
				<p>Kobe</p>
			</div>

			<div class="center">
				<a
					id="tribute-link"
					target="_blank"
					href="https://www.youtube.com/watch?v=oogOLnk5eg8"
					>Click here for Kobe's Full Memorial</a
				>
			</div>
		</div>
	</body>
</html>

CSS code

img {
	width: 100%;
	max-width: 800px;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* .imageBorder {
	border-width: 10px;
	border-style: solid;
	border-color: purple;
} */

#img-caption {
	font-style: italic;

	color: white;
	text-align: center;
}
#img-div {
	text-align: center;
	/* padding: 10px; */
	background-color: black;
	margin-bottom: 0;
	font-family: "Work Sans", sans-serif;
	max-width: 900px;
}

body {
	background-color: black;
	font-family: "Work Sans", sans-serif;
	margin: 0;
}

#main {
	background-color: #bebebe;
}

#title {
	color: white;
	text-align: center;
	padding: 0.5px;
	font-weight: 700;
}

#tribute-info {
	margin: auto;
	text-align: center;
	background-color: black;
	color: white;
	width: 800px;
	font-family: "Work Sans", sans-serif;
	margin-top: 0;
}

#tribute-link {
	margin: auto;
	text-align: center;
	font-weight: bold;
}

.center {
	margin: auto;
	width: 30%;
	padding: 10px;
	text-align: center;
}

look below the failing tests to see why they are failing and try using what’s written there to fix it

It fails as it cycles through the images. You are using an id more than once. An id must be unique in the document.

Hi. Just want to ask how did you come up with this code. I get confused and blank on what code to use based on what I learned from the modules. I didnt see these codes in the modules. Thank you. PS. I am just starting the same project as yours.

Hi Roma I changed the id for each image to make it unique, but im still getting the same issue

Most of it was in the modules, but the other components like the JavaScript picture sideshow, I searched it up on google how to implement it. For the CSS styling I watched some youtube videos to get inspiration and ideas.

It will only pass the test when the first image with the id image is visible and has display: block on it. When it is hidden and has display: none the test will fail.

I would suggest using visibility instead of display, that is also an animatable property so it will look better.

<script>
	//slow mo images script
	var myIndex = 0;
	carousel();

	function carousel() {
		var i;
		var x = document.getElementsByClassName("mySlides");
		for (i = 0; i < x.length; i++) {
			x[i].style.visibility = "hidden";
		}
		myIndex++;
		if (myIndex > x.length) {
			myIndex = 1;
		}
		x[myIndex - 1].style.visibility = "visible";
		setTimeout(carousel, 4000);
	}
</script>

Edit: you will need to adjust the CSS for the images so they are on top of each other and position correctly.

Here is kind of what I mean, it will likely need some adjustments.

#img-div {
  position: relative;
  height: 470px;
  overflow: hidden;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Thanks for the help, I appreciate it! I will probably just make a grid of images