Problem with section in Portfoliopage

Problem with section in Portfoliopage
0

#1

Hello Coders!!

I just started making portfolio page with HTML5 and CSS but facing problem.As navigation bar and content are having same effect. I couldn’t find the mistake. Please guide me .

Thanks In Advance.


#2

Looks fine to me. Can you show your code?


#3
<html>
   <head>
     <meta charset="utf-8">
     <title>Priyanka | Developer</title>
     <link rel="stylesheet" href="css/normalize.css">
   <link href='https://fonts.googleapis.com/css?family=Changa+One' rel='stylesheet'> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i,800' rel='stylesheet'>
     <link rel="stylesheet" href="css/main.css">
     <link rel="stylesheet" href="css/responsive.css">
   
  </head>
    <body>
      <header>
      <a href="index.html" id="logo">
       <h1>Priyanka</h1>
       <h2>Developer</h2>
        </a>
          <nav>
        <ul>
          <li><a href="index.html" class="selected">Who I Am</a></li>
          <li><a href="about.html">Resume</a></li>
          <li><a href="contact.html">Contact</a></li>
		  <li><a href="
          </ul>
        </nav>
      </header>
      <div id="wrapper">
       
		
        <img src="image/priyankapic.png" alt="Photograph of Priyanka" class="profile-photo">
		
		<h3>Who I Am</h3>
 
         <p>Hi ! I'm Priyanka Rai. I'm learing coding, so in the begning stage of coding. This is my portfolio page where i'm trying to showcase my work.</p>
 
  
 <footer>
  <a href="><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social icon"></a>
  <a href=""><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social icon"></a>
    
   <p>&copy; 2016 Priyanka Rai.</p>
         </footer>  
    </div>
  </body>
</html>

#4

This does not show the problem. Can you describe the problem in more detail?

PS. Excuse me for correcting: I’m learning coding, so in the beginning stage.


#5

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#6

The code you have posted shows this error - the last <li> is not completed.


#7

Actually page is divided into header, navbarthen **content or body ** and lastly footer but problem what i’m facing is that my navbar(background:-green color), content(background color:-white )and footer(same as header) but they somehow have are found in same background color as navbar color


#8

Hi Priyanka,

If you want to change the navbar, You need to add .class on your nav element. And define the style on your css file. I'm a beginner myself, so I hope this is what you're looking for. btw I used bootstrap on mine, so maybe your classes will be different.

. It'll look something like this:

HTML

<nav class="nav navbar-light justify-content-end fixed-top">
<a class="nav-link blue-background active" href="#about">About</a>
<a class="nav-link leather-background active" href="#portofolio">Portofolio</a>
<a class="nav-link coral-background active" href="#contact">Contact</a>
 </nav>"

CSS

.blue-background{
  background: #0F1626;
}
.leather-background{
  background: #AB987A;
}
.coral-background{
  background: #FF533D; 
}
.nav-link {
  color: inherit;
  padding:20px;
  margin: 0;
}