Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Tell us what’s happening:
Describe your issue in detail here.
I made 2 posts today, the first one was about Navigation Bar and the other one was about CodePen. The one about Navigation Bar was UNLISTED so I AM MAKING IT AGAIN

Repost:

The contents in my navigation bar are Non left aligned like in the portfolio example. I need help on that. The code is below where I did the left alignment of those contents.

DISCLAIMER: this is NOT a duplicate post. My other one was unlisted with no valid reason on my part.
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width initial-scale=1.0"/>
<link rel="stylesheet" href="styles.css"/>
<title>Personal Portfolio</title>
</head>

<body>
<nav id="nav-bar">
<ul id="nav-list">
<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>

<section id="welcome-section" class="welcome-section">
<h1>Welcome, I am Camagu</h1>
<p>a  Front-End Developer</p>
</section>

<section id="projects" class="projects">
<h2 class="project-tile">These are some of my projects</h2>
<div class="project-grid">
  <a href="https://codepen.io/Camagu-Ncoso/full/zYMdvoP" target="_blank">

<img src="https://i.pinimg.com/564x/ea/c7/90/eac79017cf53edc7f9ada1e79b943872.jpg" alt="tupac" class="project-img">

<p class="project-title">Tribute page</p>


</a>
</div>
</section>

<section id="contact" class="contact">

</section>









</body>
</html>
/* file: styles.css */
body {margin: 0; padding: 0;}

#nav-bar {background-color: #000000;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: fex-end;
font-family: Blippo, fantasy;}

#nav-list {display: flex;
flex-direction: row;}

li {list-style: none;}

a {color: white;
text-decoration: none;
font-size: 1.5em;
padding: 1rem 2rem;}

a:hover {background-color: #C06014;}

#welcome-section {width: 100%;
height: 100vh;
display: flex; 
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #C06014;}

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


#welcome-section > p {color: #1A2930;
  font-size: 2.5rem;
  font-style: italic;
  font-weight: 700;}

  #projects {background-color: #828081;} 

  #0F1626      #0B3C5D     #1A2930
  

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

I moved your question to its own topic because you were asking a question related to your own code for a challenge and were not answering the OP of the other thread. It is always best to create your own thread for you specific question(s). Also, it is advisable to use the Ask for Help button on the challenge, so it auto-populates with your current code and the challenge url.

Thank you.

1 Like

That other thread was his thread. I merged this post to that post because he had multiple portfolio topics on the forum. Anyway, we can just keep this here to not confuse him anymore. In the future @camaguncoso just keep in mind any questions you have that have to do with a challenge, topic, etc. need to stay in one topic instead of having 5 different ones

For help with the the navbar you can see below.
You just have a misspelling error in the code below. You have fex instead of flex

justify-content: fex-end;
1 Like

Thank you. I was not aware of that mistake

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