Invisible Text When adding new page to website

Question

I am following the tutorial for how to add a new page to a website. As instructed in the video, I start by creating a new file called “about.html”. Copied the code from index.html (home page) over to the new page. In the nav of the (index.html), I changed the selected class to the About list item, etc.

When I review the work in the Workspace, the paragraphs I now write in the "About" page are all white so can only be seen if I highlight the area. Why is this? I can not figure this out.

Answer 1 · 2014-06-13T14:57:42Z

June 13, 2014 2:57pm

seems odd, hard to see with out the code. Can just put an id or a class on your paragraphs in the about.html then in the style sheet just have something like this

.class  {    /* (class name you choose) */
       color: black;
}

Answer 2 · 2014-06-13T15:05:13Z

June 13, 2014 3:05pm

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Eliot Murton | Dude</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
   </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Eliot Murton</h1>
        <h2>Dude</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>  
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
        <h3>About</h3>
        <p>Hi, I'm Eliot Murton and this is me practicing making a website. This is fun.</p>
        <p>If you would like to follow me on Twitter, my user name is <a href="https://twitter.com/BatmansBestBud">@BatmansBestBud</a>.</p>
      </section>
      <footer>
        <a href="https://twitter.com/BatmansBestBud"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://www.facebook.com/emurton"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Eliot Murton.</p>
      </footer>
    </div>  
  </body>  
</html>

Answer 3 · 2014-06-13T15:05:29Z

June 13, 2014 3:05pm

ok you need to include the <html> tags and the <body> tags and probably the <head> tags for later. Something like this

<!DOCTYPE html>

<html>

<head>
<title> Eliot Murton | Dude Eliot Murton Dude Portfolio About Contact  </title>
</head>

<body>

<p> About Hi, I'm Eliot Murton and this is me practicing making a website. This is fun. I have a nice bum. If you would like to follow me on Twitter, my user name is @BatmansBestBud. © 2014 Eliot Murton. </p>


</body>
</html>

Answer 4 · 2014-06-13T15:07:29Z

June 13, 2014 3:07pm

Im trying to figure out how to display it as code on this post.

Answer 5 · 2014-06-13T15:08:55Z

June 13, 2014 3:08pm

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Eliot Murton | Dude</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Eliot Murton</h1> <h2>Dude</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html" class="selected">About</a></li> <li><a href="contact.html">Contact</a></li> </ul>
</nav> </header> <div id="wrapper"> <section> <img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Eliot Murton and this is me practicing making a website. This is fun.</p> <p>If you would like to follow me on Twitter, my user name is <a href="https://twitter.com/BatmansBestBud">@BatmansBestBud</a>.</p> </section> <footer> <a href="https://twitter.com/BatmansBestBud"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://www.facebook.com/emurton"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Eliot Murton.</p> </footer> </div>
</body>
</html>

Answer 6 · 2014-06-13T15:13:55Z

June 13, 2014 3:13pm

you need to use the ` button three times before and after the code, its near the top left of your keyboard

Answer 7 · 2014-06-13T15:16:08Z

June 13, 2014 3:16pm

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Eliot Murton | Dude</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
   </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Eliot Murton</h1>
        <h2>Dude</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>  
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
        <h3>About</h3>
        <p>Hi, I'm Eliot Murton and this is me practicing making a website. This is fun.</p>
        <p>If you would like to follow me on Twitter, my user name is <a href="https://twitter.com/BatmansBestBud">@BatmansBestBud</a>.</p>
      </section>
      <footer>
        <a href="https://twitter.com/BatmansBestBud"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://www.facebook.com/emurton"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Eliot Murton.</p>
      </footer>
    </div>  
  </body>  
</html>

Answer 8 · 2014-06-13T15:16:55Z

June 13, 2014 3:16pm

/*************************************
GENERAL
*************************************/

body {
 font-family: 'Open Sans', sans-serif; 
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
 max-width: 100%; 
}

h3 {
 margin: 0 0 lem 0; 
}

/*************************************
HEADING
*************************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
 }

#logo {
  text-align: center;
  margin: 0;
}


h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15 px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
 font-size: 0.75em;
  margin: -px 0 0;
  font-weight: normal;
}



/*************************************
NAVIGATION
*************************************/


nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
 list-style: none;
 margin: 0 10px;
 padding: 0;  
}

nav li {
  display: inline-block;
}

nav a {
 font-weight 800;
  padding: 15px 10px;
}


/*************************************
FOOTER
*************************************/


footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 20x;
  height: 20px;
  margin: 0 5px;
}

/*************************************
PORTFOLIO
*************************************/


#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}

/*************************************
PAGE: ABOUT
*************************************/


.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}



/*************************************
COLORS
*************************************/

/* site body */
body {
  background color: #fff;
  color: #fff;    
}

/* green header*/
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile devices */
nav {
 background: #599a68; 
}

/* logo text */
h1, h2 {
  color: #fff; 
}

/* links */
a {
 color: #6ab47b; 
}

/* nav link*/
nav a, nav a:visited {
 color: #fff; 
}

/* selected nav link */
nav a.selected, nav a:hover {
 color: #32673f; 
}

Answer 9 · 2014-06-13T15:19:00Z

June 13, 2014 3:19pm

could I see main.css?

Answer 10 · 2014-06-13T15:21:42Z

June 13, 2014 3:21pm

That is the second one.

Answer 11 · 2014-06-13T15:25:47Z

June 13, 2014 3:25pm

in the body you have color set to #fff which is white

/*************************************
COLORS
*************************************/

/* site body */
body {
  background color: #fff;
  color: #fff;    
}

/* green header*/
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile devices */
nav {
 background: #599a68; 
}

/* logo text */
h1, h2 {
  color: #fff; 
}

Answer 12 · 2014-06-13T15:30:29Z

June 13, 2014 3:30pm

Oh man. I can't believe it was as simple as that. Because the word "text" or something similar was not by a colour I dismissed it as that. Today you are my hero. I feel a bit of a fool now. Thanks for your help.

Answer 13 · 2014-06-13T15:32:12Z

June 13, 2014 3:32pm

No problem, it does take a while to get used to all the attributes

Welcome to the Treehouse Community

Looking to learn something new?

Eliot Murton

Eliot Murton

Invisible Text When adding new page to website

13 Answers

David Jarrin

David Jarrin

Eliot Murton

Eliot Murton

Eliot Murton

Eliot Murton

David Jarrin

David Jarrin

David Jarrin

David Jarrin

Eliot Murton

Eliot Murton

Eliot Murton

Eliot Murton

David Jarrin

David Jarrin

Eliot Murton

Eliot Murton

Eliot Murton

Eliot Murton

David Jarrin

David Jarrin

Eliot Murton

Eliot Murton

David Jarrin

David Jarrin

Eliot Murton

Eliot Murton

David Jarrin

David Jarrin