Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:

The image on my project is not showing, what am i doing wrong?

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>Chris Portfolio</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  </head>
  <body>
    <header> 
      <nav id="nav-bar">
        <ul class="nav-links">
          <li><a href="#welcome-section" class="nav-link">Welcome</a></li>
          <li><a href="#projects" class="nav-link">Projects</a></li>
          <li><a href="#contacts" class="nav-link">Contacts</a></li>
        </nav>
      </header>
      <section id="welcome-section">
        <h1>Hey, I'm Chris</h1>
          <p>full stack developer</p>
        </section>
        <Section id="projects">
          <a href="" class="project-tile"><img src="https://cdpn.io/freeCodeCamp/fullpage/zNqgVx?anon=true&view=fullpage" alt=""><p><span></span><span></span></p>
          <a href="" class="project-tile"><img src="" alt=""><p><span></span><span></span></p>
          <a href="" class="project-tile"><img src="" alt=""><p><span></span><span></span></p>
          <a href="" class="project-tile"><img src="" alt=""><p><span></span><span></span></p>
          <a href="" class="project-tile"><img src="" alt=""><p><span></span><span></span></p>
          <a href="" class="project-tile"><img src="" alt=""><p><span></span><span></span></p>
          </Section>
  </body>
</html>

/* file: styles.css */
:root{
  --neutral: #fbdd74;
  --base-100: #1f1235;
  --neutral-focus: #67568c;
  --accent:#ff6e6c;

}

*{
  margin: 0;
}

body{
    font-family: "Noto serif", sans-serif;
    text-align: center;
    background-color: var(--neutral)

}

h1,
h2,
h3,
h4,
h5,
h6{
  font-family: "Poppins", sans-serif;
}

h1{
  font-size: 60px;
}

#nav-bar {
  display: flex;
  justify-content: center;
  position: fixed;
  top:0;
  width: 100%;
  background-color: var(--neutral);
  padding: 20px 0;
  font-size: 20px;
  border-bottom: 1px solid var(--neutral);
}

.nav-links{
  display: flex;
  list-style: none;
}

.nav-links a{
  text-decoration: none;
  padding: 0 10px;
  color: var(--base-100);
}

.nav-links a:hover{
  text-decoration: underline;
}

section{
  min-height: 100vh;
  padding: 70px 0;
}

#welcome-section{
  background-color: var(--neutral);
  color: var(--base-100);
  display: flex;
  flex-direction: column;
}

#welcome-secton h1{
  margin-top: 30vh;
}

#welcome-section p{
  color: var(--accent);
  font-size: 25px;
  margin: 25px 0;
  font-style: italic;
}

#project .project-tile img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

Your browser information:

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

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

2

that’s not an image link.
Follow this to get image links from codepen projects: https://blog.codepen.io/documentation/screenshots/