Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

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

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,399 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

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,132 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.