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

HTML-CSS
1

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:

2

You need to address the href to the id projects.

1 Like
3

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

4

Where’s your code, is it on codepen?

5

Yes…here!

6

You have two elements with the id ‘projects’

7

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

8

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
9

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

1 Like