Personal Portfolio Webpage - Build a Personal Portfolio Webpage - Why aren't some elements looking like the ones in example site?

HTML-CSS
1

I am having issues with the below elements:

  1. “Product Landing Page” img - Why is the height of the img so much longer than the other img’s?
  2. “Show All” button - Why doesn’t it look like the one in the example site (https://personal-portfolio.freecodecamp.rocks/)?
  3. GitHub link - why isn’t the icon visible?

Thank you for your help!

Your code so far

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="styles.css" rel="stylesheet">
  <title>Personal Portfolio Website</title>
</head>
<body>
<!-- START NAV -->  
  <nav id="navbar" class="nav">
   <ul class="nav-list">
     <li>
       <a href="#welcome-section">About</a>
      </li>
     <li>
       <a href="#projects">Work</a>
      </li> 
     <li>
       <a href="#contact">Contact</a>
      </li>  
     </ul>
    </nav>
<!-- END NAV --> 
<!-- START WELCOME SECTION --> 
  <section id="welcome-section" class="welcome-section">
   <h1>Hey I am Mitsu</h1>
   <p>a web developer</p>
  </section>
<!-- END WELCOME SECTION --> 
<!-- START PROJECTS SECTION --> 
  <section id="projects" class="projects-section">
   <h2 class="projects-section-header">These are some of my projects</h2>
<!-- START PROJECT 1 -->    
   <div class="projects-grid">
    <a href="https://codepen.io/Mitsu-Kubo/full/zYyRMPz" target="_blank" class="project project-title">
     <img class="project-image" src="https://cdn.pixabay.com/photo/2016/03/29/10/38/saxophone-1287911_1280.png" alt="project">
     <p class="project-tile">
       <span class="code"><</span>
       Product Landing Page
       <span class="code">></span>
     </p>
    </a>
<!-- END PROJECT 1 -->   
<!-- START PROJECT 2 -->    
   <div class="projects-grid">
    <a href="https://codepen.io/Mitsu-Kubo/full/jOXZQGb" target="_blank" class="project project-title">
     <img class="project-image" src="https://cdn.pixabay.com/photo/2017/09/06/21/43/crystal-2723145_1280.jpg" alt="project">
     <p class="project-tile">
       <span class="code"><</span>
       Crystal Survery Form
       <span class="code">></span>
     </p>
    </a>
<!-- END PROJECT 2 -->   
<!-- START PROJECT 3 -->    
   <div class="projects-grid">
    <a href="https://codepen.io/Mitsu-Kubo/full/yLGvQPJ" target="_blank" class="project project-title">
     <img class="project-image" src="https://cdn.pixabay.com/photo/2015/12/04/14/05/code-1076536_1280.jpg" alt="project">
     <p class="project-tile">
       <span class="code"><</span>
       CSS Documentation Page
       <span class="code">></span>
     </p>
    </a>
<!-- END PROJECT 3 -->   
<!-- START PROJECT 4 -->    
   <div class="projects-grid">
    <a href="https://codepen.io/Mitsu-Kubo/full/OJrQaxY" target="_blank" class="project project-title">
     <img class="project-image" src="https://www.biographyonline.net/wp-content/uploads/2014/05/Tolkien3_01.jpg.webp" alt="project">
     <p class="project-tile">
       <span class="code"><</span>
       Tolkien Tribute Page
       <span class="code">></span>
     </p>
    </a>
<!-- END PROJECT 4 -->   
   </div>
   <a href="https://codepen.io/Mitsu-Kubo/pen/zYyRMPz" target="_blank" class="btn btn-show-all">
   Show All
   <i class="fas fa-chevron-right"></i>
   </a>
  </section>
<!-- END PROJECTS SECTION --> 
<!-- START CONTACT SECTION --> 
  <section id="contact" class="contact-section">
   <div class="contact-section-header">
     <h2>Let's work together...</h2>
     <p>How do you take your coffee?</p>
   </div>
   <div class="contact-links">
     <a id="profile-link" href="https://github.com/mitsk2002?tab=projects"" target="_blank" class="btn contact-details">
       <i class="fab fa-github"></i>
       GitHub
     </a>
   </div>
  </section>
<!-- END CONTACT SECTION --> 
<!-- START FOOTER SECTION --> 
  <footer>
    <p></p>
    <p></p>
  </footer>
<!-- END FOOTER SECTION --> 

</body>
</html>

CSS

:root {
  --main-white: ##f0f0f0;
  --main-red: #be3144;
  --main-blue: #45567d;
  --main-gray: #303841;
}

@media (max-width: 61.25em) 
html {
  font-size: 58%;
}

@media (max-width: 75em)
html { font-size: 60%;
}

*, *::before, *::after {
  box-sizing: inherit;
}

* {
    margin: 0;
  padding: 0;
}

:root {
  view-transition-name: root;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  scroll-behavior: smooth;
}



body {
  font-family: Poppins, sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--main-white);
}

a {
  text-decoration: none;
  color: var(--main-white);
}
img {
  overflow-clip-margin: content-box;
  overflow: clip;

}

h1 {
  font-size: 6rem;
  color: white;
}

h2 {
  font-size: 4.2rem;
}

h1, h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  text-align: center;
}

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}



.nav {
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--main-red);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  z-index: 10;
}

.nav-list {
  display: flex;
  margin-right: 2rem;
  gap: 1rem;
}

ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
  list-style: none;
}

.welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #000;
  background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}
.welcome-section > p {
  font-size: 3rem;
  font-weight: 200;
  font-style: italic;
  color: var(--main-red);
}


.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 4rem;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  margin-bottom: 6rem;
}
.projects-section {
  text-align: center;
  padding: 10rem 2rem;
  background: var(--main-blue);
}
.projects-section-header {
  max-width: 640px;
  margin: 0 auto 6rem auto;
  border-bottom: 0.2rem solid var(--main-white);
}
.project {
  background: var(--main-gray);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  border-radius: 2px;
}
.project-image {
  height: calc(100% -6.8rem);
  width: 100%;
  object-fit: cover:
}


.contact-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 80vh;
  padding: 0.2rem;
  background: var(--main-gray);
}

.contact-section-header >h2 {
  font-size: 6rem;
}
.contact-details {
  font-size: 2.4rem;
  text-shadow: 2px 2px 1px #1f1f1f;
  transition: transform 0.3s ease-out;
}

.btn {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 2px;
}
.fab {
  font-family: "Font Awesome 5 Brands";
}

.code {
  color: var(--main-gray);
  transition: color 0.3s ease-out;
}
img {
  display: block;

}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

1 Like
2

Hope can be good put your html in vscode to help with html
Not want to give answer can help you try some fixes
For github website icon drawing need to add script in head of html for FA icon drawings to work in html can google how to get paste script under your css link style sheet

For pictures and drawings for each project go over your div’s made in html you need one div for projects grid that can wrap around each project as own div in your html for each project start you have div put but no closeing div only for that project.

Your html is good just make each project own div than make one div (projects-grid) that what can be wrapper wrap around all the project divs than your grid and flex can work better.

This can help change your html some and try to change the size of images make some changes with size give width height to each drawing image make them same size try few ways hope this can help you have some things fixed to help you find ways to adjust your html for pictures your html is very good thank you take care gn gm fren hope this can help

Screen Shot 2023-09-25 at 11.15.28 PM
Screen Shot 2023-09-25 at 11.15.28 PM1920×1517 115 KB

Screen Shot 2023-09-25 at 11.14.57 PM

1 Like
3

Thank you so much! Your guidance helped me to find the errors.

1 Like
4

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