I am currently doing the Freecodecamp course, but I got a little stuck on one of the projects. This is the current state of my project: https://codepen.io/otapadar/full/JjRaoex (I am trying to copy this website: https://codepen.io/freeCodeCamp/full/zNBOYG). The second section (My Projects) has images within a grid. I am trying to resize the images, such that each image covers about 80-90% of the parent element, just like the site I am trying to copy.
When you look at my website, you see that the images are not resizing. I have tried fixing this by using the following property on my images: object-fit: cover. This doesn't fix it, sadly.
Any help on fixing this would be greatly appreciated. Thanks in advance!
HTML:
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<nav id="navbar">
<ul>
<li><a class="nav-link" href="#welcome-section">About</a></li>
<li><a class="nav-link" href="#projects">Work</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="welcome-section">
<h1>Hey, I am Brad</h1>
<p>Web Developer</p>
</section>
<section id="projects">
<h2 class="projects-header">My Projects</h2>
<container class="project-grid">
<a class="project-tile" target="_blank">
<img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg">
<p class="project-title">Tribute Page</p>
</a>
<a class="project-tile" target="_blank">
<img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/random-quote-machine.png">
<p class="project-title">Random Quote Machine</p>
</a>
<a class="project-tile" target="_blank">
<img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/calc.png">
<p class="project-title">JavaScript Calculator</p>
</a>
<a class="project-tile" target="_blank">
<img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/map.jpg">
<p class="project-title">Map Data</p>
</a>
<a class="project-tile" target="_blank">
<img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/wiki.png">
<p class="project-title">Wikipedia Viewer</p>
</a>
<a class="project-tile" target="_blank">
<img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tic-tac-toe.png">
<p class="project-title">Tic Tac Toe</p>
</a>
</container>
<a class="button" href="https://codepen.io/otapadar" target="_blank">Show All</a>
</section>
<section id="contact">
<h1>Let's Work Together</h1>
<p>How do you take your coffee?</p>
<container class="social-icons">
<a class="profile-link" target="_blank"></a>
<a class="profile-link" target="_blank"></a>
<a class="profile-link" target="_blank"></a>
<a class="profile-link" target="_blank"></a>
<a class="profile-link" target="_blank"></a>
</container>
</section>
</main>
CSS
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
font-family: 'Raleway';
scroll-behavior: smooth;
}
#navbar {
position: fixed;
display: flex;
justify-content: flex-end;
top: 0;
left: 0;
right: 0;
width: 100%;
background-color: #be3144;
}
#navbar ul {
display: flex;
list-style: none;
margin-right: 2rem;
}
a {
text-decoration: none;
color: #f0f0f0;
}
.nav-link {
display: block;
padding: 1.5rem;
font-size: 1.3rem;
font-weight: bold;
}
#welcome-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%)
}
#welcome-section > h1 {
font-size: 4rem;
color: #f0f0f0;
font-weight: 700;
margin-bottom: 1.5rem;
}
#welcome-section > p {
color: #be3144;
font-size: 2rem;
}
#projects {
background-color: #45567d;
padding: 6rem 2rem;
text-align: center;
}
.projects-header {
font-size: 3rem;
color: #f0f0f0;
margin: 0 auto 2rem auto;
}
.project-grid {
display: grid;
width: 100%;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
margin-bottom: 4rem;
}
.project-tile {
background-color: #303841;
}
.project-image {
height: calc(100%-6rem);
width: 100%;
object-fit: cover;
}
.project-title {
font-size: 1.5rem;
padding: 1.5rem 0.5rem;
font-weight: bold;
}
.button {
padding: 0.5rem 1rem;
font-size: 1.5rem;
background-color: #303841;
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…