Hello I am new to HTML and CSS. I have a copy and pasted (don't hate) type writer at the top and I have a grid with my information below. In-between I have links to other pages I will have on my site but they aren't clickable presumably due to the items above and below.
I know the structure of my work is poor, I will improve
It is the Nav on lines 20 > 22 that aren't sending me to the href link.
:root {
--bg-color: hsl(49 37% 94%);
--typewriterSpeed: 4200ms;
--typewriterCharacters: 20;
}
body {
margin: 0;
font-family: "Inter", sans-serif;
min-height: 100vh;
display: grid;
place-content: center;
text-align: center;
background: var(--bg-color);
}
h1 {
font-size: clamp(1rem, 3vw 1rem, 4rem);
position: relative;
font-family: "Inter", monospace;
position: relative;
width: max-content;
}
h1::before,
h1::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
h1::before {
background: var(--bg-color);
animation: typewriter var(--typewriterSpeed)
steps(var(--typewriterCharacters)) 1s forwards;
}
h1::after {
width: 0.125em;
background: black;
animation: typewriter var(--typewriterSpeed)
steps(var(--typewriterCharacters)) 1s forwards,
blink 750ms steps(var(--typewriterCharacters)) infinite;
}
.subtitle {
color: hsl(0 0% 0% / 0.7);
font-weight: 400;
font-size: 2rem;
opacity: 0;
transform: translateY(3rem);
animation: fadeInUp 3s ease calc(var(--typewriterSpeed) 2s) forwards;
}
@keyframes typewriter {
to {
left: 100%;
}
}
@keyframes blink {
to {
background: transparent;
}
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.navigation {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 0.9fr 0.9fr 1.2fr;
gap: 1em 1em;
grid-auto-flow: row;
grid-template-areas:
"nav nav nav";
color: black;
margin-top: 40px;
}
.nav {
grid-area: nav;
color: black;
}
.container {
margin-top: -12rem;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 1em 1em;
grid-auto-flow: row;
grid-template-areas:
"about about goals"
"contact photo goals";
font-family: Inter, Serif;
padding: 10rem;
color: white;
}
.about {
grid-area: about;
border-radius: 1rem;
background-image: linear-gradient(to bottom right, #64e8de, #8a64eb);
padding: 2rem;
text-align: center;
box-shadow:0px 0px 45px rgba(198, 55, 211, 0.15);
}
.goals {
grid-area: goals;
border-radius: 1rem;
background-image: linear-gradient(to bottom right, #78f2e9, #b65eba);
padding: 2rem;
box-shadow:0px 0px 45px rgba(42, 160, 196, 0.15);
}
.contact {
grid-area: contact;
border-radius: 1rem;
background-image: linear-gradient(to bottom right, #6ee2f5, #6454f0);
padding: 2rem;
box-shadow:0px 0px 45px rgba(175, 26, 150, 0.15);
text-align: left;
}
.contact .contact-info {
list-style-type: none;
}
.photo {
grid-area: photo;
border-radius: 1rem;
background-image: linear-gradient(to bottom right, #3499ff, #3a3985);
padding: 2rem;
box-shadow:0px 0px 45px rgba(56, 149, 255, 0.15);
}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="style.css">
<link href="https://rsms.me/inter/inter.css" rel="stylesheet">
</head>
<body>
<div>
<header>
<center>
<h1>Hey, my name is Max.</h1>
</center>
<p >Check out my site!</p>
</header>
</div>
<div >
<div >
<nav>
<a href="index.html">home</a>
<a href="projects.html">projects</a>
<a href="updates.html">updates</a>
</nav>
</div>
</div>
<div >
<div >
<h2 align="center">About</h2>
<p>
I am a 19 year old who always has had a passion for technology. From a young age I was interested in digital
arts and that was my income as a 13 year old, as time went on I became very interested in Cyber Security.
While progressing through courses I felt that if I wanted to progress in Cyber Security I would want to know
how a program is developed (the code behind it) which has led me to start programming… which led me to falling
in love with writing code!
</p>
</div>
<div >
<h2 align="center">Goals</h2>
</div>
<div >
<h2>Contact</h2>
<div>
<ul >
<li>[email protected]</li>
<li> 44 7746523323</li>
</ul>
</div>
</div>
<div >
<h2>Image</h2>
</div>
</div>
</body>
</html>CodePudding user response：
You have a large negative margin on your container which is pulling the container up and over the links. E.g. margin-top: -12rem;. Simple solution would be to just set a z-index: 1; on .navigation so that it sits on top of the container
:root {
--bg-color: hsl(49 37% 94%);
--typewriterSpeed: 4200ms;
--typewriterCharacters: 20;
}
body {
margin: 0;
font-family: "Inter", sans-serif;
min-height: 100vh;
display: grid;
place-content: center;
text-align: center;
background: var(--bg-color);
}
h1 {
font-size: clamp(1rem, 3vw 1rem, 4rem);
position: relative;
font-family: "Inter", monospace;
position: relative;
width: max-content;
}
h1::before,
h1::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
h1::before {
background: var(--bg-color);
animation: typewriter var(--typewriterSpeed) steps(var(--typewriterCharacters)) 1s forwards;
}
h1::after {
width: 0.125em;
background: black;
animation: typewriter var(--typewriterSpeed) steps(var(--typewriterCharacters)) 1s forwards, blink 750ms steps(var(--typewriterCharacters)) infinite;
}
.subtitle {
color: hsl(0 0% 0% / 0.7);
font-weight: 400;
font-size: 2rem;
opacity: 0;
transform: translateY(3rem);
animation: fadeInUp 3s ease calc(var(--typewriterSpeed) 2s) forwards;
}
@keyframes typewriter {
to {
left: 100%;
}
}
@keyframes blink {
to {
background: transparent;
}
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.navigation {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 0.9fr 0.9fr 1.2fr;
gap: 1em 1em;
grid-auto-flow: row;
grid-template-areas: "nav nav nav";
color: black;
margin-top: 40px;
z-index:1;
}
.nav {
grid-area: nav;
color: black;
}
.container {
margin-top: -12rem;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 1em 1em;
grid-auto-flow: row;
grid-template-areas: "about about goals" "contact photo goals";
font-family: Inter, Serif;
padding: 10rem;
color: white;
}
.about {
grid-area: about;
border-radius: 1rem;
background-image: linear-gradient(to bottom right, #64e8de, #8a64eb);
padding: 2rem;
text-align: center;
box-shadow: 0px 0px 45px rgba(198, 55, 211, 0.15);
}
.goals {
grid-area: goals;
border-radius: 1rem;
background-image: linear-gradient(to bottom right, #78f2e9, #b65eba);
padding: 2rem;
box-shadow: 0px 0px 45px rgba(42, 160, 196, 0.15);
}
.contact {
grid-area: contact;
border-radius: 1rem;
background-image: linear-gradient(to bottom right, #6ee2f5, #6454f0);
padding: 2rem;
box-shadow: 0px 0px 45px rgba(175, 26, 150, 0.15);
text-align: left;
}
.contact .contact-info {
list-style-type: none;
}
.photo {
grid-area: photo;
border-radius: 1rem;
background-image: linear-gradient(to bottom right, #3499ff, #3a3985);
padding: 2rem;
box-shadow: 0px 0px 45px rgba(56, 149, 255, 0.15);
} <div>
<header>
<center>
<h1>Hey, my name is Max.</h1>
</center>
<p >Check out my site!</p>
</header>
</div>
<div >
<div >
<nav>
<a href="index.html">home</a>
<a href="projects.html">projects</a>
<a href="updates.html">updates</a>
</nav>
</div>
</div>
<div >
<div >
<h2 align="center">About</h2>
<p>
I am a 19 year old who always has had a passion for technology. From a young age I was interested in digital arts and that was my income as a 13 year old, as time went on I became very interested in Cyber Security. While progressing through courses I
felt that if I wanted to progress in Cyber Security I would want to know how a program is developed (the code behind it) which has led me to start programming… which led me to falling in love with writing code!
</p>
</div>
<div >
<h2 align="center">Goals</h2>
</div>
<div >
<h2>Contact</h2>
<div>
<ul >
<li>[email protected]</li>
<li> 44 7746523323</li>
</ul>
</div>
</div>
<div >
<h2>Image</h2>
</div>
</div>