Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

   **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Personal Portfolio</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<!-- START NAVIGATION -->

   <nav id="navbar">
      <ul>

        <li>
          <a href="#">About</a> 
        </li>

       <li>
          <a href="#">Work</a> 
       </li>

       <li>
         <a href="#">Contact</a> 
         </li>  

     </ul>  
   <nav> 

<!---- END NAVIGATION   -->

<!-- START WELCOME -->

 <header id="welcome-section">
       <h1>Hi I am Troy </h1>
     <p>&#60/ Aspirant Front-end Developer &#62;</p>
  </header> 

 <!-- END WELCOME -->

<!-- START PROJECTS SECTION -->

 <section id="projects">
    <h2>My project in freeCodeCamp Responsive Design</h2>




 </section>
<!-- END OF PROJECTS SECTION -->

 <!-- START OF CONTACT LINKS -->

<section id="contact-section">
 <div class="contact-section-header">
   <h2>Let's work together...</h2>
   <p>How do you cope burnout?</p>
 </div>

 <div class="contact-links">
   <a
     href="https://facebook.com/freecodecamp"
     target="_blank"
     class="btn contact-details"
     ><i class="fab fa-facebook-square"></i> Facebook</a
   >
   <a
     id="profile-link"
     href="https://github.com/freecodecamp"
     target="_blank"
     class="btn contact-details"
     ><i class="fab fa-github"></i> GitHub</a
   >
   <a
     href="https://twitter.com/freecodecamp"
     target="_blank"
     class="btn contact-details"
     ><i class="fab fa-twitter"></i> Twitter</a
   >
   <a href="mailto:example@example.com" class="btn contact-details"
     ><i class="fas fa-at"></i> Send a mail</a
   >
   <a href="tel:555-555-5555" class="btn contact-details"
     ><i class="fas fa-mobile-alt"></i> Call me</a
   >
 </div>  

</section> 

<!-- END OF CONTACT LINKS -->

 <footer>
    <p>
   **This is just a fake portfolio. All the projects and contact details given
   are not real.
 </p>
 <p>
   &copy; Created for
   <a href="https://www.freecodecamp.com/" target="_blank"
     >freeCodeCamp <i class="fa-brands fa-free-code-camp"></i></a>
 </p>

</footer>

 
<script src="https://kit.fontawesome.com/3deee4c594.js" crossorigin="anonymous" ></script>
   
</body>
</html> 

/* file: styles.css */
* {
 margin: 0;
 padding: 0;
}

*,
::before,
::after {
 box-sizing: inherit;
}

html {
 box-sizing: border-box;
 height: 100%;
   scroll-behavior: smooth;
}

:root {
 --navbar-bgcolor: #112031;
 --font-color: #EEEEEE;
 --header-bgcolor: #152D35;
}

/* START OF NAVBAR */

nav {
 margin-top:4.1em;
 
}

nav ul {
 display: flex;
 min-width: 100%;
 justify-content: flex-end;
 align-items: center;
 background-color: var(--navbar-bgcolor);
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 /* border: 2px solid red; */
 z-index: 10;


}

nav li {
 list-style-type: none;
 display: flex;
 /* border: 2px solid red; */
}

nav a {
 text-decoration: none;
 color: var(--font-color);
 font-size: 1.5rem;
 display: block;
 /* border: 2px solid red; */
 padding: 1.2em;
 font-weight: 600;
 
}

nav a:hover {
 background: #889EAF;
 box-shadow: 1.5px 2px 1px  #2C3333;
 
}

/* END OF NAVBAR */


/* START OF HEADER */
header{
background-color: var(--header-bgcolor);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 5.7em;
box-shadow: 0px -1.5px 10px 3px  black;
}

header p {
 color: #57CC99;
 font-size: 1.3rem;
 text-align: center;
 line-height: 4em;
}

h1 {
font-size: 2.5rem;
color: #D4ECDD;
}
/* END OF HEADER */

   **Your browser information:**

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:103.0) Gecko/20100101 Firefox/103.0

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

Waiting: Your #navbar element should always be at the top of the viewport.

3

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