I am absolutely struggling on how to use github. I think I know the basic of uploading an index.html and style.css file but having my images upload I am struggling. When I host my website from my local file on to google chrome it works perfectly fine but when I try to host my website from github the images do not load.
I do have the images saved in the same document as my index.html and style.css but in it's own folder. And the images are either png or jpeg.
I noticed some people say the caplocks do make a difference so I edited png and jpeg on github as PNG and JPEG. Still didn't make a difference.
Honestly I am very clueless in all this and find it hard in even asking a question that makes sense.
Could anyone please direct me to anywhere where I can learn github easily?
Thank you
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>The Ordinary</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<body>
<!--Navigation Bar-->
<nav class="navbar">
<div class="brand-title">
<img src="./Images/the-ordinary-logo.png" width="140px" height="50px"/>
</div>
<div class="navbar-links">
<ul>
<li><a href="#"><img class="location" src="./Images/location-icon.jpeg" title="Location" width="50px" height="50px"/></a></li>
<li><a href="#"><img class="log" src="./Images/log-in-icon.jpeg" title="Login" width="50px" height="50px"/></a></li>
<li><a href="#"><img src="./Images/search-icon.jpeg" width="50px" title="Search" height="50px"/></a></li>
<li><a href="#"><img src="./Images/shopping-basket-icon.jpeg" title="Cart" width="60px" height="50px"/></a></li>
</ul>
</div>
</nav>
<!--Banner-->
<div class="banner">
<a id="ordinary"><img class="banner-image" src="Images/hero-image.png" width="100%"/></a>
</div>
<!--Product Image-->
<ul class="breadcrumb">
<li>
<a href="#ordinary" href="ordinary">The Ordinary</a>
</li>
<li>
<a href="#products">Products</a>
</li>
</ul>
<div class="container">
<div class="main">
<div class="spacer">
<div class="cards">
<div class="col">
<img class="item" src="./Images/cleanser.png" alt="Cleanser"/>
<img class="item" src="./Images/toner.png" alt="Toner"/>
<img class="item" src="./Images/hyaluronic-acid.png" alt="Hyaluronic Acid"/>
</div>
<div class="col">
<img class="item" src="./Images/moisturiser.png" alt="Moisturiser"/>
<img class="item" src="./Images/eye-cream.png" alt="Caffiene Eye Serum"/>
<img class="item" src="./Images/chemical-exfoliant.png" alt="Chemical Exfoliant"/>
</div>
</div>
</div>
</div>
</div>
<!--Footer-->
<footer>
<div class="footer-container">
<div class="col-1">
<h3>COMPANY</h3>
<p>About Us</p>
<p>Founder & Co-Founder</p>
<p>Team</p>
<p>Join Us</p>
</div>
<div class="col-2">
<h3>CUSTOMER CARE</h3>
<p>Contact Us</p>
<p>FAQ</p>
<p>Disposal Instructions</p>
<p>Return Policy</p>
<p>Accessibility</p>
<p>Find Us</p>
</div>
</div>
<div class="social-media">
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-instagram"></a>
</div>
<br>
<div class="copyright">
<p>© THE ORDINARY INC. 2021. ALL RIGHTS RESERVED.</p>
</div>
</footer>
</body>
</html>
