Responsive Web Design Projects - Build a Personal Portfolio Webpage

  • Your portfolio should have a navbar with an id of navbar.

  • :Your #navbar element should contain at least one a element whose href attribute starts with #.

*Your #navbar element should always be at the top of the viewport

   **Your code so far**
/* file: index.html */
<body> 
 <link rel="stylesheet" href="styles.css">
 <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
 <i>
<nav id:"navbar">
  <a href="#welcome-section"> Home</a> 
  <a href="#projects"> projects </a> 
  
  <a href="#Thoughts"> Thoughts </a> 
  <a href="#about"> about </a> 
 
</nav>


<section id="welcome-section" style="width: 100%; height: 700px; background: lightgray; margin-top:0; padding:0; text-align: center; ">
  <h1> Hey I am Abdul Ahad </h1>
  <p> -your profetional web dev- </p>
  </section>
   
   <section id="projects">
     <h1 class="project-header"> These are my projects </h1> 
     <a href="C:\Users\HP\Documents\css projects\mising slice.html" target="_blank"> <p class="project-tile"> mising slice </p> <img src="C:\Users\HP\Pictures\16435257538190.5979805581650222.jpg" alt="projects" > </a> 
     </section>

     <footer id="about"> <a href="https://www.facebook.com/profile.php?id=100008437237581" target="_blank" id="profile-link"> <p>my Facebook profile </p> </a> </footer> </i>

</body>
/* file: styles.css */
#projects{
 width: 100%;
 height: 200px;
 background: rgb(100, 100, 100);

}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
  nav { 
  width: 100%;
  height: 50px;
  background-color: black;
  position: fixed;
  display: flex;
  overflow: hidden;

  
}
nav a{
  float: right;
  color: white;
  padding: 10px;
  text-align: center; 
  
}
h1, p {
  text-align: center;
}
#welcome-section {
  display: flex;
  justify-content: center;
  align-items: center;
}
#welcome-section h1{
  font-size: 40px
}
#welcome-section p{
  position: relative;
  top: 60px;
  right: 100px  
}
@media (min-width: 80%){
 html {
   font-size: 29%;
 }
}
nav a:hover{
  background-color: rgb(50, 0, 50)
}
#about{
  width:100%;
  height: 100px;
  background: rgb(90, 90, 200)
}
   **Your browser information:**

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

Challenge: Responsive Web Design Projects - Build a Personal Portfolio Webpage

Link to the challenge:

False : <nav id:"navbar">
True : <nav id="navbar">

1 Like

this type of simple mistakes I am doing everyday, today is my lucky day that I got you sir.
God bless you :two_hearts:

1 Like