My Portfolio needs some help

Good morning,

I was struggling with my Portfolio, so I started again. Now it seems to go better, but there are a few things I cannot get together. I’m referring to hover code around the portfolio project text. It keeps moving when I hover over it, and I cannot find the solution to keep it still.

Furthermore, when I hover over the “Let’s work together…” text, my mouse starts to change in a hand as if it’s a link or something. I did not give the comment in my code and have no solution to remove it.

Any help would be welcome, so I can move on with my project.

Thanks in advance,

<!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 class="text1">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">
  <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"/>
     <div class="visible">
     <p class="title1"><span class="hidden1"><strong> < </strong></span>Tribute Page<span class="hidden1"><strong> /></strong></span>
     </p></div>




</div>
   </section>
  
  
 <section class="profile-info">
   <h1 class="lets">Let's work together...</h1>
   <p class="coffee"><i>How do you take your coffee?</i></p>

   </section> 
  
  
    

</div>  
 



































</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;
  }

#navbar{
  position: fixed;
  top: 0px;
  width: 100%;
}

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: 1000px;
  overflow: hidden;
  box-sizing: border-box;
  float: right;
  margin: -10px 0 0 0;
  }


#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: -50px;
  text-align: center;
  font-size: 60px;
  word-spacing: 5px;
}

.text1{
  color: purple;
  text-align: center;
  margin-top: -40px;
  word-spacing: 5px;
}



.project-section{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-left: -350px;
  margin-top:-400px; 
  background-color: #5141a4;
  width: 100vw;
  height: 120vh;
  box-sizing: border-box;
  color: white;
    
}



.project-title{
margin-top: -90px;  
margin-bottom: 30px;
text-align: center;
font-size: 45px;
text-decoration: underline;
text-decoration-thickness: 3px;
word-spacing: 5px;
}



.project-grid {
 display: grid;
 grid-template-columns: repeat(1, 2fr);
 grid-template-rows: repeat(1, -40vw);
 grid-gap: 5px;
 width: 100%;
 max-width: 1280px;
 margin-top: -50px;
 
}

.project-tile{
  width: 95%;
  height: 400px;
}



.project-image1{
  width: 250px;
  height:350px;
  border-radius: 5%;
  padding: 5px 5px 60px 5px;
  box-shadow: 0 0 0 5px;
  background-color: #14141a;
  margin-left: 250px;
  margin-top: 75px;
  margin-right: 50px;
  margin-bottom: 200px;
  grid-gap: 15px;
  
}

.visible{
  position: relative;
  color: white;
  font-size: 25px;
  bottom: 270px;
  margin-left: 290px;
}





 .title1{
   font-size: 25px;
   font-family: Poppins;
   word-spacing: 2px;
   margin-left: 17px;
  
}

.hidden1{
  color:  #c93c20;
  display: none;
  letter-spacing: 2px;
  }

.visible:hover .hidden1{
  display: inline-block;
  
}



.profile-info{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-left: -450px;
  margin-top: -350px;
  margin-bottom: 370px; 
  background-color: transparent;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  color: white;
  }

.lets{
  color: white;
  margin-top: 190px;
  margin-bottom: 90px;
  margin-left: 200px;
  text-align: center;
  font-size: 60px;
  font-style: bold;
  word-spacing: 5px;
}


.coffee{
  font-style: lighter;
  color: grey;
  font-weight: 400;
  font-size: 22px;
  margin-left: 760px;
  margin-top: -90px;
  word-spacing: 5px;
}


1 Like

Good morning!

About the mouse hover code. I think the text keeps changing because you insert an element on the line which pushes the text to the side. One idea is, instead of changing the display of the element, change the element color to equal of background color. When mouse over the color changes to what you want showing the element and the text remains still.

About the mouse you can use the CSS cursor Property to set the mouse cursor.

Hope it helps you!

Thank you for your reply. I’m trying to use the advice you have given to me. I’m not there yet, but doing my best. Furthermore, I hope to have some progress on the matter soon.

It’s part of the process, just to try you will progress.
One thing that helps me a lot to understand what’s happening with my code at the browser is the DevTools, maybe it helps you too!

Do you have a CodePen for this project? It would definitely help for many of us viewing this thread to be able to see your live code.

Thank you for your advice. I will look into it.

I have CodePen but it is not working properly. The Portfolio is not displayed in the right manner. It looks and works better in the freeCodeCamp environment

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