Build a Personal Portfolio Webpage - internal anchor doesn't work

Tell us what’s happening:
I can’t create an internal link on the right side if the words " Web Work" and let the page Jump to my div “Projects”

Your code so far
<!doctype html>

Personal Portfolio Page
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css?family=Krub|Montserrat" rel="stylesheet">

<style type="text/css">
    
   body {
        font-family: Montserrat, sans-serif; 

}

      h1 {
        
        font-size: 3em;   
        color: floralwhite; 
        z-index: 999;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        position: absolute;
        top: 25%;
        left: 40%;
        
    }
    
    
    @media only screen and (max-width: 855px) {
        h1 {
            font-size: 1.5em; 
            
        }
        
    }
    
    
    #welcome-section {
        display:flex; 
        flex-direction: row;
        
    }
    
    

    .split {
        height:100vh; 
        width: 50%;
        
        z-index: 1;
        top: 0;
        overflow-x: hidden;
        padding-top: 20px;
    }

    .left {
        left: 0;
        color: white; 
        background-color: #111;
    }

    .right {
        right: 0;
        background-color: yellow;
        color: black;
         
    }
    
   .center {
        
        z-index: 9999; 
        
    }
    
    
   .centered {
        position: absolute;
        top: 50%;
        left: 25%;
        transform: translate(-50%, -50%);
        text-align: center;
        
    }
    
    
   
    
    .centered-right {
        position: absolute;
        top: 50%;
        left: 75%;
        transform: translate(-50%, -50%);
        text-align: center;
        
    }
    
    

    .centered img {
        width: 40%; 
        border-radius: 50%;
         
        
    }
    
    .centered img:hover {
        transform: scale(1.2);
        
        
    }
    
    #projects {
        border: 2px white solid;
        margin: 0 auto; 
        text-align: center; 
        background-color: white;
        height: 2800px;
        width: 100%; 
        
    }
    
    /*a {
        text-decoration: none;
        color: black;   
    }*/
    
    a:hover {
        color: aqua; 
        
    }
  
    
</style>
    <section id="welcome-section">
        <h1 class="split center">WELCOME</h1>
        <div class="split left">
            <div class="centered">
            <img src="images/Untitled-2.png">
            <h2>Matthias Kobia</h2>
            <p>&ltp&gt Web-Developer &lt/p&gt</p>
          </div>
        </div>

        <div class="split right">
          <div class="centered-right">
             <a href="#projects">Web Work</a>
            
          </div>
        </div>

        </section>

<div id="projects">

    <h2 id="projects">Projects</h2>
        
    
</div>
**Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage

You need to address the href to the id projects.

1 Like

Hi, Thanks.
I did and posted the new code but it still doesn’t work.

Where’s your code, is it on codepen?

Yes…here!

You have two elements with the id ‘projects’

But it doesn’t make any changes if i delete one of them.

The link is working, but you can’t press it, that’s why it’s not taking you to the section.

This is because of the z-indices in your CSS. You are giving some element a position in the Z axis in front of the anchor tag and that’s blocking any clicks on the elements behind. Remove them and it will work.

Little tip here: check your code from top to bottom as you have many lines to change or delete. E.g.: the anchor tag belongs inside the h2 tag and not the other way around.

1 Like

Perfect…thanks… the problem was with the z-indexes.

1 Like