Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

I actually passed all the tests on here but eventually I’d like it to show projects. Can anyone explain to me how to get my own projects for the portfolio? It actually doesn’t have any on there and my contacts aren’t showing up in the footer for some reason?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <main>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css"></link>
    <title>Personal Portfolio Webpage</title>
</head>
<body>
  <nav id="navbar" class="nav">
    <ul>
<li><a class="nav-link" href="#About">About</a></li>
 <li><a class="nav-link" href="#Work">Work</a></li>
 <li><a class="nav-link" 
 href="#Contact">Contact</a><li>
 </ul>
  </nav>
  <section id="welcome-section" class="About">
    <h1>Hey, I am Ashley</h1>
    <p>Welcome to my page</p>

    </section>
    <section id="projects" class="work">
      <h2>These are some of my projects</h2>
      <div class="projects-grid">
      <div class="project-tile"></div></div>
      <a></a>
    </section>

</body>
<footer>
  <section id="contact" class="contact-section">
     <a id="profile-link" href="https://github.com/AshleyW15" target="_blank" class="contact">Github</a>
     </section>
</footer>
</main>
</html>


/* file: styles.css */


* {
  margin: 0;
  padding: 0;
}


html {
  scroll-behavior: smooth;
}

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

body {
  font-family: Helvetica, sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
}

h1 {
  font-size: 5rem;
  font-family: Helvetica, sans-serif;
}

h2 {
  max-width: 640px;
  margin: 0 auto 6rem auto;
  border-bottom: 0.2rem solid;             
  color:white
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: white;
}

.nav {
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #f106ad;
}

.nav-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

@media (max-width: 28.75em) {
  .nav {
    justify-content: center;
  }}



.about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 70vh;
  background-color: #c40ac3;
  color: white;
  line-height: 3;
}



.work {
  text-align: center;
  padding: 10rem 2rem;
  background: #df67de;
}


  .project{
    font-size: 4rem;

  }

}
footer{
  background-color:#f106ad; 
}

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

you have to create some projects such as on codepen or github pages and then link them into your portfolio.

I didn’t understand this question just from reading it. Can you explain what it is you were trying to do that didn’t work?

3

Oh okay, that’s a project for another day then thankyou.

I tried to put my contact links in the footer just never even showed up on my page. I put about 7 hours in on it today so I’m probably just completely brain dead and I need to look at it again later.

4

the Github link is white and the background is white (I used developer tools in the browser to see that btw).
Change the color of the footer to black and you will see it

5

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