Can someone help me with fixing the grid layout of my learning project? I have created a part of a website, but when I try to link images and captions using anchor tags, the entire layout gets broken. Below is the code without the anchors. How can I integrate them while maintaining the design of the website?
body {
margin:0px;
display:flex;
flex-direction:column;
}
nav {
position:fixed;
background:rgb(195, 44, 82);
width:100%;
top:0;
left:0;
box-shadow:0px 2px 2px;
display:flex;
justify-content:flex-end;
}
.nav-list {
list-style-type:none;
display:flex;
margin:0;
}
li:hover {
background:#45567d;
}
li {
padding:1.5rem;
font-family:helvetica;
font-size:1.5rem;
}
a {
text-decoration:none;
color:white;
}
header {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
font-size:18px;
width:100%;
color:rgb(195, 44, 82);
background:repeating-linear-gradient(
60deg, #383838, #404040 20%, #383838 60%);
height:100vh;
}
header > h1 {
font-style:normal;
color:white;
font-size:50px;
font-family:helvetica;
}
header > h2 {
font-weight:200;
font-family:sans-serif;
font-style:italic;
font-size:30px;
}
.projects {
background:#45567d;
display:grid;
grid-template-rows:auto auto auto;
grid-template-columns:25vw 25vw 25vw;
justify-content:space-around;
padding-right:5vw;
padding-left:5vw;
}
#projects-text {
width:100%;
font-size:2rem;
font-family:helvetica;
color:white;
text-decoration:underline;
padding-top:3rem;
padding-bottom:2rem;
text-align:center;
grid-column-start:1;
grid-column-end:4;
}
img {
width:100%;
height:25vw;
object-fit:cover;
grid-row-start:2;
grid-row-end:3;
}
#projects > p {
background:#303841;
color:white;
grid-row-start:3;
margin-top:0;
padding:1.5rem; /* Fixed issue in the original code where padding was missing */
font-size:1.3em;
font-family:helvetica;
text-align:center;
}
<body>
<nav id="navbar">
<ul class="nav-list">
<li>
<a href="about">About</a>
</li>
<li>
<a href="work">Work</a>
</li>
<li>
<a href="contact">Contact</a>
</li>
</ul>
</nav>
<header id="welcome-section">
<h1 id="hi">Hey I am XXXXX</h1>
<h2>a web developer</h2>
</header>
<section class="projects">
<h1>These are some of my projects</h1>
<a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank"><img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="1"><p>Tribute Page</p></a>
<a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank"><img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/map.jpg" alt="2"><p>Map Data Across the Globe</p></a>
<a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank"><img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/wiki.png" alt="3"><p>Wikipedia Viewer</p></a>
</section>
</body>I would appreciate any assistance.
@EDIT Ok, here is my code in its broken version. It seems like I might need to rewrite the entire code, but I want to understand why. Why is this tag breaking the code? I initially thought it was just something minor that I could add at the end of my work :/.