Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

I need help, I don’t understand what link to insert in “img” so that a person is transferred to my projects, it is written to transfer it to the profile, but I don’t understand how to do it, can you please explain to me in detail

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="styles.css">
   <title>Personal Portfolio</title>
</head>
<body>
   <nav class="navbar" id="navbar">
      <ul class="nav">
         <li><a href="#welcome-section">About</a></li>
         <li><a href="#projects">Work</a></li>
         <li><a href="#contact">Contact</a></li>
      </ul>
   </nav>
   <main>
      <section id="welcome-section">
         <h1>Hey I am Sonik25</h1>
         <p>a web developer</p>
      </section>
      <section id="projects">
         <h2>These are some of my projects</h2>
         <div class="project-tile"></div>
          <img class="project-img"  href="https://ibb.co/YkLqCp2"><img src="https://i.ibb.co/G25b6c7/2023-08-28-13-12-15.png" alt="2023-08-28-13-12-15" >
           <img class="project-img"  href="https://ibb.co/2nVQv1j"><img src="https://i.ibb.co/7YM5ndG/2023-08-28-13-13-57.png" alt="2023-08-28-13-13-57" >
            <img class="project-img"  href="https://ibb.co/WfF1PNy"><img src="https://i.ibb.co/0rZ3FpM/2023-08-28-13-15-07.png" alt="2023-08-28-13-15-07" >
             <img class="project-img"  href="https://ibb.co/5ry10C6"><img src="https://i.ibb.co/GWLd6G0/2023-08-28-13-16-10.png" alt="2023-08-28-13-16-10" >
         
      </section>
   </main>
</body>
</html>

/* file: styles.css */
body{
  margin:0;
  padding:0;
  background:linear-gradient(#EEE2DC,#EFE2BA);
  font-family:cursive,sans-serif;
}
.navbar{
 display: flex;
justify-content: flex-end;
background-color:#EDC7B7;
z-index:1;
position:sticky;
top: 0;
min-height: 2em;

}
.nav{
  display: flex;
  margin-right:2rem
  
}
.nav>li{
  list-style-type:none;
  padding:10 5 10 5;
  font-size:23px
}
a{
  text-decoration:none;
  color:#AC3B61;
  padding:26 25 26 25;
}
a:hover{
  background-color:#C5CBE3;
  transition:0.4s;
  
}
#welcome-section{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height: 100vh;
  font-size:25px;
}
h2{
  text-align:center;
  font-size:30;
  border-bottom:2px solid black;
  max-width: 640px;
  margin: 0 auto 6rem auto;
}

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 YaBrowser/23.7.3.823 Yowser/2.5 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

1 Like
2

Great work! I think you are trying to wrap your ‘img’ tag with a
‘img’ tag instead of the ‘a’ tag. Try changing your first ‘img’ tags to ‘a’ tags and then make sure that you close the ‘a’ tags after each ‘img’ tag.

1 Like
3

Hello,

I faced the same issue.
First it’s not the image that is necessarily supposed to lead to the project. The instruction is:
The projects section should contain at least one link to a project

So it may be a text or anything else, just make sure to wrap it in an anchor a. (It was the name of the project for me). Next, the link does’nt need to be valid. Just add any link (your facebook profile for example) I think it will work even though this is not what I did personally.

But if you want to go further you could host some of your projects on github pages and then copy and paste the link there so it really leads to a project of yours. (This is what I did personally).

2 Likes
4

thanks, hope it works

2 Likes
5

Keep us updated and good luck !