After starting the Freecodecamp course, I encountered a roadblock while working on one of the projects. Here is the current status of my project: https://codepen.io/otapadar/full/JjRaoex (I am aiming to replicate this website: https://codepen.io/freeCodeCamp/full/zNBOYG). The issue lies within the second section where I have images arranged in a grid format. My goal is to resize these images so that each covers around 80-90% of the parent element, similar to the original site.
Upon inspection of my website, you'll notice that the images are not resizing properly. To address this, I attempted using the object-fit: cover property on my images but unfortunately, it did not resolve the issue.
I would greatly appreciate any assistance in resolving this matter. Thank you 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>
And so on...
</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;
}
Rest of the CSS code goes here...