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