You need to change your img
src
attributes in your index.html
file, I added <!-- Edit Line Below -->
comments before lines you should edit
<!DOCTYPE>
<html>
<head>
<title>Google Homepage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="topnav">
<ul>
<li><a href="https://about.google/?fg=1&utm_source=google-US&utm_medium=referral&utm_campaign=hp-header">About</a></li>
<li><a href="">Store</a></li>
<div class="topnavright">
<li><a href="">Gmail</a></li>
<li><a href="">Images</a></li>
<!-- Edit Line Below -->
<li><img src="./googleappsicon.png" width="20" height="20" alt="Google Apps Icon"></li>
<li><input type="submit" value="Sign in"></li>
</div>
</ul>
</div>
<div class="logosearch">
<p>
<!-- Edit Line Below -->
<img src="./googlelogo-color.png" width="272" height="92" alt="Google Logo"><br>
<input>
<p>
<input type="submit" value="Google Search">
<input type="submit" value="I'm Feeling Lucky">
</p>
</p>
</div>
<div class="bottomnav">
<ul>
<li><a href="">Advertising</a></li>
<li><a href="">Business</a></li>
<li><a href="">How Search works</a></li>
<div class="bottomnavright">
<li><a href="">Privacy</a></li>
<li><a href="">Terms</a></li>
<li><a href="">Settings</a></li>
</div>
</ul>
</div>
</body>
</html>
For the html i first had written
and the site wouldnt load the picture, but after some head scracthing i found that the problem was the first 2 dots and the slash, after i rewrote the code it looked something like so and when i uploaded it to github after about 2 minutes it loaded the picture. I also had the same problem with my css background image and i did the same thing and aparentlly it worked as well but i had to wait about 5 minutes to reload the site. I hope this helped!
I am currently working on the Google Homepage assignment with the Odin Project. I finished the code and committed all of the files to my google-homepage GitHub repository and then uploaded to the GitHub pages to make a website through GitHub. Everything is working fine but the images are not loading onto the website.
I have searched through the stack overflow forums and Odin Project but could not find an answer to my problem. One forum said that GitHub is case sensitive so I checked to make sure my code was right for my images and even changed the googlelogo_color_.png
to googlelogo-color.png
and recommit it to get rid of the underscores and nothing changed. I am still new to all of this so I really have no idea how to work with GitHub except for the bit that the Odin Project has taught me and through forums. Here is my repository.
Here is a snippet of my code with the image sources:
`<div class ="topnavright">
<li><a href="">Gmail</a></li>
<li><a href="">Images</a></li>
<li><img src="/home/ranico/Projects/the_odin_project/google-
homepage/googleappsicon.png" width="20" height="20" alt="Google Apps
Icon"></li>
<li><input type="submit" value="Sign in"></li>
</div>
</ul>
</div>
<div class="logosearch">
<p>
<img src="/home/ranico/Projects/the_odin_project/google-
homepage/googlelogo-color.png" width="272" height="92" alt="Google Logo">
<br>
<input>
<p>
<input type="submit" value="Google Search">
<input type="submit" value="I'm Feeling Lucky">
</p></p>
</div>`
Just linking to your repo is offtopic for stack overflow. Please put the code