Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Adama Ibrahim
Adama Ibrahim
517 Points
Posted by Adama Ibrahim
Adama Ibrahim
517 Points

is my code wrong

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Linkme game</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="styles.css" type="text/css" rel="stylesheet"> </head> <body> <div class="header-logo"> <a href ="#">logo2.png</a> </div>

 <div class="main-navigation">
    <ul class="navigation">
      <li><a href="#">Home</a></li>
      <li><a href="#">Game</a></li>
      <li><a href="#">About us</a></li>
      <li><a href="#">Login/Sign up</a></li>
       <li><a href="#">Ranking</a></li>
    </ul>
</div>

<header>
    <div class="background-picture">
        <img src="background.jpeg" alt="a word linking background image" class=background-image>


</header>

<main class="main">
  <div class="main-text">
    <h2>Description about the game</h2>
    <p>Word-linking game is a classic game puzzle game where you are to compose as many words as you can by joining the letters. These letters seem to challenge your vocabulary skills and finding long words create individual tiles for you to use. Start linking</p>

  </div> 

</main>
<footer>
  <ul>
    <li><a href="#" class="social snapchat">Snapchat</a></li>
    <li><a href="#" class="social instagram">Instagram</a></li>
  </ul>
  <p class="copyright">Copyright 2018, Aisha Sheriff</p>
</footer>

</body>

</html>

CSS

  • { box-sizing: border-box; }

body { margin: 0; padding: 0; text-align: center; font-family: 'Arial', sans-serif; color: #white; background: #red; }

.logo2.png img{ float:left; width:auto; height:auto; }

header{ background-image: url(background.jpeg) no-repeat center center fixed; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size: contain; }

/* Section Styles */

.main-navigation { width: 100%; background:ash;

} .navigation{ display:inline-block; text-align: right; margin-left: 30px height:60px; padding:0;

}

.navigation li { float:right; height:40px; text-align: right; background: #3498db; list-style:none; font-weight:bold;

}

.navigation a:hover { color: orange }

.main { margin: 30px; padding: 20px 40px 40px; max-width: 500px; text-align: right; background: #fff; border-bottom: 4px solid #ccc; border-radius: 6px; } .main:hover { border-color: #red; }

footer { width: 100%; min-height: 30px; padding: 20px 0 40px 20px; }

footer .copyright { top: -8px; margin-right: 20px; font-size: .75em; }

footer ul { list-style-type: none; margin: 0; padding: 0; }

footer ul li { display: inline-block; }

footer { font-size: 1.3em; max-width: 1200px; margin: 40px auto; }

.header-logo{ float:left; }

Heidi Vasterling-Ford
Heidi Vasterling-Ford
7,806 Points
Heidi Vasterling-Ford
Heidi Vasterling-Ford
7,806 Points

Any way you can be more specific with your question? One thing I noticed is that here you need to add "" around the class:

<img src="background.jpeg" alt="a word linking background image" class=background-image>

2 Answers

clion
clion
6,614 Points
clion
clion
6,614 Points

Normally the class would be directly after the img tag but I think the real problem is the missing quotes around the class name. If you are not seeing your image, based on your code the images need to be in the same folder as your html file.

Also, you listed a lot of classes correctly, but I don't see any link to a css page that would tell the browser how to render each of those classes.

Adama Ibrahim
Adama Ibrahim
517 Points
Adama Ibrahim
Adama Ibrahim
517 Points

please how can i put another type of box on my background image to write some texts. i also want to make a login or sign up page. can you help me please

volhaka
volhaka
9,875 Points
volhaka
volhaka
9,875 Points

you logo now is not image with link. your code : <div class="header-logo"> <a href ="#">logo2.png</a> </div> if you want your logo looks like image as a link you need to put instead of "logo2.png" image tag with image src attribute.