I’ve tried moving the JS code out in to a separate JS file, moved my heading into the div id=main and also made the image responsive but it’s still stuck on 20%. I coded it locally and pushed it to github via git.
Here’s the link: marccodez.github.io/Kobe-Bryant-tribute-page/
Is it because I used Git rather than CodePen? A Youtuber used the github link and it worked just fine.
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" />
</head>
<body>
<div id="main">
<h1 id="title">Kobe Bryant</h1>
<div id="img-div" class="w3-content w3-section">
<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 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."
</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">
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="_bank"
href="https://www.basketball-reference.com/players/b/bryanko01.html"
>Click here for Kobe's NBA career statistics</a
>
</div>
</div>
</body>
</html>
CSS code:
/* #image {
max-width: 100;
height: auto;
} */
/* .imageBorder {
border-width: 10px;
border-style: solid;
border-color: purple;
} */
#img-caption {
font-style: italic;
font-weight: bold;
color: white;
text-align: center;
}
#img-div {
text-align: center;
/* padding: 10px; */
background-color: black;
}
body {
background-color: black;
font-family: Arial, Helvetica, sans-serif;
}
#main {
background-color: white;
}
#title {
color: black;
text-align: center;
padding: 0.5px;
font-weight: 700;
}
#tribute-info {
margin: auto;
text-align: center;
background-color: black;
color: white;
width: 800px;
}
#tribute-link {
margin: auto;
text-align: center;
font-weight: bold;
}
.center {
margin: auto;
width: 30%;
padding: 10px;
}
.responsive {
width: 100%;
height: auto;
}
