Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:

how do I get images for my project

the part where I am meant to attach images of previous projects are empty

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">
  <title> My Portfolio Webpage</title>
  <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header id="hero-part">
      <nav id="navbar">
      <a href="#welcome-section"> About</a>
      <a href="#work"> Work</a>
      <a href="#contact"> Contact</a>
      </nav>
    </header>
    <main>
    <section id="welcome-section">
      <h1>Hello I am Chinaza </h1>
      <p> a passionate web developer </p>
    </section>
    <section id="projects">
      <div class="project-tile">
        <p id="work">These are some of my Projects</p>
        <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank">Tribute page</a>
          <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank">calclator page</a>
      </div>
        

    </section>
    </main>
    <footer>
      <div id="contact">
        <h2>Let's work together...</h2>
        <p>How do you take your coffee?</p>
        <a id="profile-link" href="https:https://github.com/freecodecamp" target="_blank"> View my GitHub profile</a>
      </div>
      <hr>
      <p id="foot"> © Created for freeCodeCamp </p>
    </footer>
  </body>
</html>

/* file: styles.css */
body{
  background-color: gray;
  color: white;
}
#hero-part{
  background-color: black;
  width: 100%;
  font-weight: bold;
  font-size:20px;
  
  
  position: fixed;
  top:0;
}
#hero-part a{
  color: white;
  text-decoration: none;
  display:flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: right;
  /* margin: 10px; */
    
}
a{
  text-decoration: none;
}
#welcome-section{
  width: 100%;
  height: auto;
  text-align: center;
  
  font-weight: bold;
  padding:30px;
  background-color: white;

}
h1{
  font-size: 50px;
  color: black;
  margin-top: 30px;
}
@media (max-width:768px){
  #welcome-section{
    font-weight: bold;
  }
}

Your browser information:

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

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

2

You’ll need to host images somewhere (e.g. a hosting site like Imgur), then link to the images in your img elements’ src attributes.
(There’s no direct hosting facility available on FCC).

1 Like
3

Thank you so much, I use Codepen to get images of my previous projects.

I appreciate :clap: