About Personal Portfolio

Good afternoon Folks,

Maybe someone can help me with a problem in my coding.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width", initial-scale=1.0/>
<link rel="stylesheet" href="styles.css">
 <link
      href="https://fonts.googleapis.com/css?family=Acme:400&display=swap"
      rel="stylesheet"
    />
</head>
<body>

  <div id="pagewrapper">
    <header id="header">
  <nav id="navbar" class="nav wrapper">
  <ul class="horizontal-list">
   <li>
    <a href="#about" class="nav-link">About</a></li>

  <li>
    <a href="#work" class="nav-link">Work</a></li>

  <li>
    <a href="#contact" class="nav-link">Contact</a></li>   
</ul>
  </nav>
  </header>
  
 <section id="welcome-section">
    <h1>Hey I am Mimic</h1>
    <p>a web developer</p>
 </section>

 <section id="projects" class="project-section">
   <h2 class="project-title">These are some of my projects</h2>
   
<div class="project-grid">
  
   <div class="grid-item visible">
     <a class="project-tile" href="https://codepen.io/JadeOverload/pen/OJzMQeq" target="_blank">
    <img class="project-image1" src="https://upload.wikimedia.org/wikipedia/commons/5/5e/Bob-Marley.jpg" alt="project"/>
     <p class="title1"><span class="code1 hidden"><</span>Tribute Page<span class="code1 hidden">/></span>
     </p></div>

<div class="grid-item visible">
  <a class="project-tile" href="https://codepen.io/JadeOverload/pen/rNpLorv" target="_blank">
  <img class="project-image2" src="https://www.techwriter.org/wp-content/uploads/2020/08/2153407d-9cb9-48c7-ad2f-ba9d389be7c3-1000x420.jpg" alt="project"/>
  <p class="title2 hidden"><span class="code2"><</span>Survey Form<span class="code2 hidden">/></span></div>




</div>
  
  
  
  
  
  
  </div>    
 </section>




































</div>
  </body>
  </html>


@media only screen and (max-width: 600px) {
  body {
    background-color: #14141a;
  }
}

body{
  background: #14141a;
  font-family: Acme;
  font-size: 30px; 
  word-spacing: 20px;
  min-width:600px;
  max-width:2000px;
}

header{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
}


#pagewrapper{
  width: 900px;
  position: relative;
  margin: auto;
  padding: 20px;
 
  }


nav{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  font-family: Acme, sans-serif;
  padding: 3px 50px;
  background-color: #e83033;
  border: 3px solid darkred;
  min-width: 2000px;
  overflow: hidden;
  box-sizing: border-box;
  float: right;
  margin-top: -20px;
  
  }


#navbar a {
  color: white;
  margin-left: 40px;
  padding-bottom: 27px;
  padding-top: 40px;
  font-size: 30px;
 
  }

ul.horizontal-list{
  list-style: none;
 }

  ul.horizontal-list li{
    display: inline-block;
    }

    li {
     float: left;
     margin: -2px 0 -12px 0; 
    }

a{
  text-decoration: none;
  
}

li a{
  padding: 25px;
  margin-right: -28px;
  
}

li a:hover
{
  background-color: #2b3288;
  
}

 

#welcome-section{
  margin-left: -500px;
  margin-right: -500px;
  display: block;
  align-items: center;
  background-color: #14141a;
  height: 100vh;
  margin-top: 420px;
  
 }
 

h1{
  color: white;
  margin-top: 200px;
  text-align: center;
  font-size: 60px;
}

p{
  color: purple;
  text-align: center;
  margin-top: -40px;
}

#projects{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #5141a4;
    height: 100%;
    margin-left: -500px;
    margin-right: -500px;
    margin-top: -320px;
    color: white;
    
    
    
}

.project-title{
  margin-top: -100px;
  border-bottom: 2px solid white; 
  border-width: 3px;
  padding: 0 20px 0;
   
}

.project-grid {
  display: grid;
  grid-template-columns: auto auto auto auto;
  height: 30vh;
  margin: 2rem;
  grid-template-rows: 80px 200px;
  box-sizing: border-box;
  grid-gap: 10px;
}

.visible{
font-size: 25px;
background: transparent;
text-align: center;
color: white;

}

.hidden{
color:darkred;
display: none;


}

.visible:hover .hidden{
display: block;
}


.project-image1{
  width: 250px;
  height:350px;
  border-radius: 5%;
  padding: 5px 5px 60px 5px;
  box-shadow: 0 0 0 5px;
  background-color: #14141a;
}

.title1{
  color: white;
  font-size: 25px;
  text-align: center;
  margin-top: -55px;
}


.project-image2{
  width: 400px;
  height: 350px;
  border-radius: 5%;
  padding: 5px 5px 60px 5px;
  box-shadow: 0 0 0 5px;
  background-color:  #14141a;
}

.title2{
  color: white;
  font-size: 25px;
  text-align: center;
  margin-top: -55px;
}





The error is in my hover element. The text and the hover are moving around when I hover over the text in my project section. I failed to find a solution, so I hope someone can help me.

Thanks in advance.

Greetz,

Jackie

Hello:

May be you can do something like below:

a{
  text-decoration: transparent;
  
}

li a{
  padding: 25px;
  margin-right: -28px;
  
}

li a:hover
{
  background-color: #2b3288;
text-decoration-color: #2b3288;
  
}

Give it a shot, it may work out.

Hi @Zjade

If this is a personal project, I suggest you host it on an online text editor like Codepen and provide a link to it so that we can take a look at your HTML, CSS, and JS.

Thank you for your reply. I’m so sorry that I was not very clear to you. I see that there are more elements with hover. Furthermore, I’m revering to the following code:

#projects{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #5141a4;
    height: 100%;
    margin-left: -500px;
    margin-right: -500px;
    margin-top: -320px;
    color: white;
    
    
    
}

.project-title{
  margin-top: -100px;
  border-bottom: 2px solid white; 
  border-width: 3px;
  padding: 0 20px 0;
   
}

.project-grid {
  display: grid;
  grid-template-columns: auto auto auto auto;
  height: 30vh;
  margin: 2rem;
  grid-template-rows: 80px 200px;
  box-sizing: border-box;
  grid-gap: 10px;
}

.visible{
font-size: 25px;
background: transparent;
text-align: center;
color: white;

}

.hidden{
color:darkred;
display: none;


}

.visible:hover .hidden{
display: block;
}


.project-image1{
  width: 250px;
  height:350px;
  border-radius: 5%;
  padding: 5px 5px 60px 5px;
  box-shadow: 0 0 0 5px;
  background-color: #14141a;
}

.title1{
  color: white;
  font-size: 25px;
  text-align: center;
  margin-top: -55px;
}


.project-image2{
  width: 400px;
  height: 350px;
  border-radius: 5%;
  padding: 5px 5px 60px 5px;
  box-shadow: 0 0 0 5px;
  background-color:  #14141a;
}

.title2{
  color: white;
  font-size: 25px;
  text-align: center;
  margin-top: -55px;
}

.project-image3{
  width: 400px;
  
}



<section id="projects" class="project-section">
   <h2 class="project-title">These are some of my projects</h2>
   
<div class="project-grid">
  
   <div class="grid-item visible">
     <a class="project-tile" href="https://codepen.io/JadeOverload/pen/OJzMQeq" target="_blank">
    <img class="project-image1" src="https://upload.wikimedia.org/wikipedia/commons/5/5e/Bob-Marley.jpg" alt="project"/>
     <p class="title1"><span class="code1 hidden"><</span>Tribute Page<span class="code1 hidden">/></span>
     </p></div>

<div class="grid-item visible">
<a class="project-tile"           href="https://codepen.io/JadeOverload/pen/rNpLorv" target="_blank">
  <img class="project-image2" src="https://www.techwriter.org/wp-content/uploads/2020/08/2153407d-9cb9-48c7-ad2f-ba9d389be7c3-1000x420.jpg" alt="project"/>
  <p class="title2 hidden"><span class="code2 hidden"><</span>Survey Form<span class="code2 hidden">/></span></div>

<div class="grid-item visible">
<a class="project-tile"
  href="https://codepen.io/JadeOverload/pen/KKZeOQJ"
  target="_blank">
 <img class="project-image3"
 src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="project"/>
 <p class="title3 hidden"><span class="code3 hidden"><</span>Product Landing Page<span class="code3 hidden">/></span></div>




</div>
  
  
  
  
  
  
  </div>    
 </section>
































I hope it is more clear now.

Thank you.

Thank you for your reply.

I was not clear about the hover section, I was having a problem with. I altered my question below. I think this is more clear.

Thank you.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.