Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening: My tiles/images are overlapping and I can’t figure out why.

I’m trying to make each .project-tile the same width and height so they fit into a grid neatly, but so far no matter what I do the tiles/images keep overlapping.

I hope I’ve copied over all the relevant info!

Your code so far

/* CSS: */
#projects {
  height: 150vh;
  padding-top: 100px;
  background: var(--thistle);
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}

#projects h1 {
  color: var(--thistle);
  font-size: 3em;
  background-color: white;
  border-radius: 15px;
  width: 90%;
  padding: 25px;
  margin-bottom: 50px;
}

#projects-grid {
  width: 80%;
  display: inherit;
  flex-direction: row;
  flex-wrap: wrap;

}

.project-tile {
  width: 250px;
  height: 250px;
  display: block;
  background-color: white;
  border-radius: 15px;
}

/* HTML: */
<div id="projects">
      <h1>Let me show you some of my projects so far</h1>
      <div id="projects-grid">
        <a href="https://www.google.com/" class="project-tile" target="_blank"><img src="https://images.pexels.com/photos/18978811/pexels-photo-18978811/free-photo-of-zonnebril.png?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="project_photo"><p class="project-title">Fake Project</p></a>
        <a href="https://www.google.com/" class="project-tile" target="_blank"><img src="https://images.pexels.com/photos/11363358/pexels-photo-11363358.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="project_photo"><p class="project-title">Fake Project</p></a>
        <a href="https://www.google.com/" class="project-tile" target="_blank"><img src="https://images.pexels.com/photos/18867786/pexels-photo-18867786/free-photo-of-man-model-herfst-gezicht.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="project_photo"><p class="project-title">Fake Project</p></a>
        <a href="https://www.google.com/" class="project-tile" target="_blank"><img src="https://images.pexels.com/photos/17884001/pexels-photo-17884001/free-photo-of-voedsel-stad-landschap-mode.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="project_photo"><p class="project-title">Fake Project</p></a>
        <a href="https://www.google.com/" class="project-tile" target="_blank"><img src="https://images.pexels.com/photos/18968266/pexels-photo-18968266/free-photo-of-natuur-mode-man-mensen.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="project_photo"><p class="project-title">Fake Project</p></a>
        <a href="https://www.google.com/" class="project-tile" target="_blank"><img src="https://images.pexels.com/photos/18955891/pexels-photo-18955891/free-photo-of-vrouw-veld-gras-jong.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="project_photo"><p class="project-title">Fake Project</p></a>
        <a href="https://www.google.com/" class="project-tile" target="_blank"><img src="https://images.pexels.com/photos/18530729/pexels-photo-18530729/free-photo-of-roodharig-meisje-in-een-zwarte-vintage-jurk-met-fruit.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="project_photo"><p class="project-title">Fake Project</p></a>
        <a href="https://www.google.com/" class="project-tile" target="_blank"><img src="https://images.pexels.com/photos/10049345/pexels-photo-10049345.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="project_photo"><p class="project-title">Fake Project</p></a>
      </div>
    </div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

2

Welcome to the community @niko-niko-nom !

First thing that I noticed is the basic boiler plate is missing from the html.
This affects the whole code.

Are you attempting to have the photos side by side, like the gallery?

Happy coding!

2 Likes
3

hello and welcome to fcc forum :slight_smile:

  • but i dont see any over lapping rather “images” are of “different sizes”

or maybe say more about what is your expected layout for that “project grids”, happy coding :slight_smile:

1 Like
4

Hiya, thanks!

No, I do have the boiler plate, at least I think I’ve got it! I just didn’t include it in the code above because I assumed it would become a bit crowded. Below is my full code now :slight_smile:

Also, to answer your question: I’m trying to get the images to form themselves into a suitable grid based on the parent width and their own max width. But I can’t figure out how to stop them from overlapping. Here’s what I see:

Knipsel.PNG
Knipsel.PNG1786×1840 211 KB

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="styles.css" />
    <title>Portfolio</title>
  </head>
  <body>
    <header id="navbar">
      <a href="#welcome-section"><div class="nav-link">About</div></a>
      <a href="#projects"><div class="nav-link">Projects</div></a>
      <a href="#contact"><div class="nav-link">Contact</div></a>
    </header>
    <div id="welcome-section">
      <div id="welcome-card">
        <h1>Hey, I'm Nicole,</h1>
        <h2><i>let's work together.</i></h2>
      </div>
    </div>
    <div id="projects">
      <h1>Let me show you some of my projects so far</h1>
      <div id="projects-grid">
        <a href="https://www.google.com/" class="project-tile" target="_blank"><img src="https://images.pexels.com/photos/18978811/pexels-photo-18978811/free-photo-of-zonnebril.png?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="project_photo"><p class="project-title">Fake Project</p></a>
        <a href="https://www.google.com/" class="project-tile" target="_blank"><img src="https://images.pexels.com/photos/11363358/pexels-photo-11363358.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="project_photo"><p class="project-title">Fake Project</p></a>
        <a href="https://www.google.com/" class="project-tile" target="_blank"><img src="https://images.pexels.com/photos/18867786/pexels-photo-18867786/free-photo-of-man-model-herfst-gezicht.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="project_photo"><p class="project-title">Fake Project</p></a>
        <a href="https://www.google.com/" class="project-tile" target="_blank"><img src="https://images.pexels.com/photos/17884001/pexels-photo-17884001/free-photo-of-voedsel-stad-landschap-mode.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="project_photo"><p class="project-title">Fake Project</p></a>
        <a href="https://www.google.com/" class="project-tile" target="_blank"><img src="https://images.pexels.com/photos/18968266/pexels-photo-18968266/free-photo-of-natuur-mode-man-mensen.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="project_photo"><p class="project-title">Fake Project</p></a>
        <a href="https://www.google.com/" class="project-tile" target="_blank"><img src="https://images.pexels.com/photos/18955891/pexels-photo-18955891/free-photo-of-vrouw-veld-gras-jong.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="project_photo"><p class="project-title">Fake Project</p></a>
        <a href="https://www.google.com/" class="project-tile" target="_blank"><img src="https://images.pexels.com/photos/18530729/pexels-photo-18530729/free-photo-of-roodharig-meisje-in-een-zwarte-vintage-jurk-met-fruit.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="project_photo"><p class="project-title">Fake Project</p></a>
        <a href="https://www.google.com/" class="project-tile" target="_blank"><img src="https://images.pexels.com/photos/10049345/pexels-photo-10049345.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="project_photo"><p class="project-title">Fake Project</p></a>
      </div>
    </div>
    <div id="contact">
      <h1>Find more of me and my work below</h1>
      <div id="website-links">
        <a href="https://github.com/niko-niko-nom" target="_blank"><img src="https://pngimg.com/d/github_PNG58.png" alt="GitHub"></a>
        <a href="https://www.frontendmentor.io/profile/niko-niko-nom" target="_blank"><img src="https://cdn.worldvectorlogo.com/logos/frontendmentor-logo.svg" alt="FrontendMentor"></a>
        <a href="https://www.freecodecamp.org/niko-niko-nom" id="profile-link" target="_blank"><img src="https://design-style-guide.freecodecamp.org/downloads/fcc_secondary_small.svg" alt="freeCodeCamp"></a>
      </div>
    </div>
  </body>
</html>

CSS:

:root {
  --moonstone: #64A6BD;
  --powder-blue: #90A8C3;
  --rose-quartz: #ADA7C9;
  --thistle: #D7B9D5;
  --fairy-tale: #F4CAE0;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  width: 100%;
  font-family: Helvetica, sans-serif;
  /* scroll-behavior: smooth; */
}

#navbar {
  height: 50px;
  width: 100%;
  background: linear-gradient(90deg, var(--moonstone), var(--rose-quartz));
  position: fixed;
  top: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;

}

.nav-link {
  width: 125px;
  height: 75%;
  text-align: center;
  font-weight: bold;
  color: white;
  border-radius: 15px;
  text-transform: uppercase;
  padding-top: 10px;
}

.nav-link:hover {
  background-color: white;
  color: var(--moonstone);
}

a {
  text-decoration: none;
}

#welcome-section {
  height: 100vh;
  padding-top: 50px;
}

#welcome-card {
  height: 80%;
  width: 80%;
  background: linear-gradient(-60deg, var(--rose-quartz), var(--fairy-tale));
  border-radius: 10%;
  margin: 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

#welcome-section h1 {
  color: white;
  font-size: 5em;
  margin-bottom: 30px;
}

#welcome-section h2 {
  color: white;
  font-size: 1.8em;
}

#projects {
  height: 150vh;
  padding-top: 100px;
  background: var(--thistle);
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}

#projects h1 {
  color: var(--thistle);
  font-size: 3em;
  background-color: white;
  border-radius: 15px;
  width: 90%;
  padding: 25px;
  margin-bottom: 50px;
}

#projects-grid {
  width: 80%;
  display: inherit;
  flex-direction: row;
  flex-wrap: wrap;

}

.project-tile {
  width: 250px;
  height: 250px;
  display: block;
  background-color: white;
  border-radius: 15px;
}
5

Thank you for including the complete code and the image so we have a better idea on how to guide you.
I thought you were attempting to do something like the following.

image
image788×761 54.4 KB

Sorry!

6

That’s pretty much what I am trying to do :slight_smile:
Only I didn’t really understand the way they did it in that lesson so instead I’m trying to do it with flexbox.

2 Likes
7

Update: I think I got the grid working (using css grids, not flexbox), but my project tiles still aren’t tiles, nor do my images scale according to the height and width I set for them. I feel like I’m missing something obvious but I’m just not seeing it.

Any help would be majorly appreciated!

Here’s my (updated) code again:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="styles.css" />
    <title>Portfolio</title>
  </head>
  <body>
    <header id="navbar">
      <a href="#welcome-section"><div class="nav-link">About</div></a>
      <a href="#projects"><div class="nav-link">Projects</div></a>
      <a href="#contact"><div class="nav-link">Contact</div></a>
    </header>
    <div id="welcome-section">
      <div id="welcome-card">
        <h1>Hey, I'm Nicole</h1>
        <h2><i>let's work together</i></h2>
      </div>
    </div>
    <div id="projects">
      <h1>Let me show you some of my projects so far</h1>
      <div id="projects-grid">
        <a href="https://www.google.com/" class="project-tile" target="_blank"><img src="https://images.pexels.com/photos/18978811/pexels-photo-18978811/free-photo-of-zonnebril.png?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="project_photo"><p class="project-title">Fake Project</p></a>
        <a href="https://www.google.com/" class="project-tile" target="_blank"><img src="https://images.pexels.com/photos/11363358/pexels-photo-11363358.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="project_photo"><p class="project-title">Fake Project</p></a>
        <a href="https://www.google.com/" class="project-tile" target="_blank"><img src="https://images.pexels.com/photos/18867786/pexels-photo-18867786/free-photo-of-man-model-herfst-gezicht.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="project_photo"><p class="project-title">Fake Project</p></a>
        <a href="https://www.google.com/" class="project-tile" target="_blank"><img src="https://images.pexels.com/photos/17884001/pexels-photo-17884001/free-photo-of-voedsel-stad-landschap-mode.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="project_photo"><p class="project-title">Fake Project</p></a>
        <a href="https://www.google.com/" class="project-tile" target="_blank"><img src="https://images.pexels.com/photos/18968266/pexels-photo-18968266/free-photo-of-natuur-mode-man-mensen.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="project_photo"><p class="project-title">Fake Project</p></a>
        <a href="https://www.google.com/" class="project-tile" target="_blank"><img src="https://images.pexels.com/photos/18955891/pexels-photo-18955891/free-photo-of-vrouw-veld-gras-jong.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="project_photo"><p class="project-title">Fake Project</p></a>
        <a href="https://www.google.com/" class="project-tile" target="_blank"><img src="https://images.pexels.com/photos/18530729/pexels-photo-18530729/free-photo-of-roodharig-meisje-in-een-zwarte-vintage-jurk-met-fruit.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="project_photo"><p class="project-title">Fake Project</p></a>
        <a href="https://www.google.com/" class="project-tile" target="_blank"><img src="https://images.pexels.com/photos/10049345/pexels-photo-10049345.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="project_photo"><p class="project-title">Fake Project</p></a>
      </div>
    </div>
    <div id="contact">
      <div id="contact-card">
        <h1>Find more of me and my work below</h1>
        <div id="website-links">
          <a href="https://github.com/niko-niko-nom" target="_blank"><img src="https://pngimg.com/d/github_PNG58.png" alt="GitHub">GitHub</a>
          <a href="https://www.frontendmentor.io/profile/niko-niko-nom" target="_blank"><img src="https://cdn.worldvectorlogo.com/logos/frontendmentor-logo.svg" alt="FrontendMentor">FrontendMentor</a>
          <a href="https://www.freecodecamp.org/niko-niko-nom" id="profile-link" target="_blank"><img src="https://design-style-guide.freecodecamp.org/downloads/fcc_secondary_small.svg" alt="freeCodeCamp">freeCodeCamp</a>
        </div>
      </div>
    </div>
  </body>
</html>

CSS:

:root {
 --moonstone: #64A6BD;
 --powder-blue: #90A8C3;
 --rose-quartz: #ADA7C9;
 --thistle: #D7B9D5;
 --fairy-tale: #F4CAE0;
 --magnolia: #ECE6E9
}

* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}

html {
 height: 100%;
 width: 100%;
 font-family: Helvetica, sans-serif;
 /* scroll-behavior: smooth; */
}

#navbar {
 height: 50px;
 width: 100%;
 background: linear-gradient(90deg, var(--moonstone), var(--rose-quartz));
 position: fixed;
 top: 0;
 display: flex;
 flex-direction: row;
 justify-content: space-evenly;
 align-items: center;

}

.nav-link {
 width: 125px;
 height: 75%;
 text-align: center;
 font-weight: bold;
 color: white;
 border-radius: 15px;
 text-transform: uppercase;
 padding-top: 10px;
}

.nav-link:hover {
 background-color: white;
 color: var(--moonstone);
}

a {
 text-decoration: none;
}

#welcome-section {
 height: 100vh;
 padding-top: 250px;
}

#welcome-card {
 height: 80%;
 width: 80%;
 background: linear-gradient(-60deg, var(--rose-quartz), var(--fairy-tale));
 border-radius: 150px;
 margin: auto;
 display: flex;
 flex-direction: column;
 justify-content: center;
 text-align: center;
 max-width: 1000px;
}

#welcome-section h1 {
 color: white;
 font-size: 5em;
 margin-bottom: 30px;
}

#welcome-section h2 {
 color: white;
 font-size: 1.8em;
}

#projects {
 width: 100%;
 padding-top: 100px;
 background: var(--thistle);
 box-sizing: inherit;
}

#projects h1 {
 color: var(--thistle);
 font-size: 3em;
 background-color: white;
 border-radius: 15px;
 width: 90%;
 padding: 25px;
 margin: auto;
 margin-bottom: 50px;
 max-width: 1200px;
 text-align: center;
}

#projects-grid {
 width: 80%;
 max-width: 1100px;
 display: grid;
 grid-template-columns: auto auto;
 grid-template-rows: auto auto;
 gap: 50px;
 justify-items: center;
}

.project-tile {
 width: 100px;
 height: 100px;
 background: white;
}

.project-tile img {
 object-fit: cover;
 border: 5px solid white;
 display: block;
}

#contact {
 height: 100vh;
 background-color: var(--magnolia);
 padding-top: 250px;
}

#contact-card {
 background-color: white;
 border-radius: 150px;
 height: 80%;
 width: 80%;
 margin: auto;
 display: flex;
 flex-direction: column;
 justify-content: center;
 text-align: center;
 max-width: 1000px;
}

#website-links {
 display: inherit;
 justify-content: space-evenly;
}

#website-links img {
 max-height: 65px;
 position: relative;
 top: 20px;
 right: 15px;
}

#contact-card h1 {
 color: var(--thistle);
 font-size: 3em;
}

#website-links a {
 color: var(--moonstone);
 font-weight: bold;
}
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.