The files work perfectly on my PC but when I view it on Github Pages, both the images and Javascript do not seem to work at all.
The page link is: https://lupe-fiasnow.github.io/Industrious-Website/
The code is here: https://github.com/Lupe-FiaSnow/Industrious-Website
I'd appreciate any help as I just can't figure this problem out.
The base path of your site is /Industrious-Website, in your index.html you referenced:
<script src="/main.js"></script>
which will load https://lupe-fiasnow.github.io/main.js instead of https://lupe-fiasnow.github.io/Industrious-Website/main.js.
It should be (without the slash):
<script src="main.js"></script>
The same apply for the img tag source :
<img src="/img/person-3.jpg" alt="">
should be :
<img src="img/person-3.jpg" alt="">
Also in your css file, you have :
/* Showcase */
.showcase {
background-color: #000;
height: 55vh;
background: linear-gradient(rgba(244, 56, 56, 0.5), rgba(0, 0, 0, .8)),
url(/img/skyline.jpg) center no-repeat; <================== this line
background-size: cover;
}
.info-mid{
background: linear-gradient(rgba(244, 56, 56, 0.5), rgba(0, 0, 0, .8)),
url(/img/skyline.jpg) center no-repeat fixed; <================== this line
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
/img/skyline.jpg will load https://lupe-fiasnow.github.io/img/skyline.jpg which doesn't exist, you want https://lupe-fiasnow.github.io/Industrious-Website/img/skyline.jpg. Update with url(img/skyline.jpg) would work
