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