-
Your portfolio should have a navbar with an
idofnavbar. -
:Your
#navbarelement should contain at least oneaelement whosehrefattribute 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:
