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>Aspirant Front-end Developer</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%;
}

: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;
 padding: 1.4em;
 gap: 3em;
 align-items: center;
 background-color: var(--navbar-bgcolor);
 position: fixed;
 top: 0;
 border: none;
 
}

nav li {
 list-style-type: none;
}

nav a {
 text-decoration: none;
 color: var(--font-color);
 font-size: 1.3rem;
 display: block;
}

nav a:hover {
 background: #889EAF;
 
 

}

/* END OF NAVBAR */

header{
background-color: var(--header-bgcolor);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2em;
}

header p {
 color: #57CC99;
 font-size: 1.3rem;
}

h1 {
font-size: 2.5rem;
color: #D4ECDD;
}

   **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:

I want my nav links when hovering needs to be full width or full height of background color

2

Hello I did this challenge in the codepen editor, so you can look into this

.nav {
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--main-red);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  z-index: 10;
}

.nav-list {
  display: flex;
  margin-right: 2rem;
}

@media (max-width: 28.75em) {
  .nav {
    justify-content: center;
  }

  .nav-list {
    margin: 0 1rem;
  }
}

.nav-list a {
  display: block;
  font-size: 2.2rem;
  padding: 2rem;
}

.nav-list a:hover {
  background: var(--main-blue);
}

You have justify it’s width and apply the hover feature to get the awesome hovering button. This is the styles.css part.

For implementing in html, you can refer this code:

<nav id="navbar" class="nav">
  <ul class="nav-list">
    <li>
    <a href="#welcome-section">About</a>
    </li>
    <li>
      <a href="#projects">Work</a>
    </li>
    <li>
      <a href="#contact">Contact</a>
    </li>
  </ul>
</nav>

Hope this helps.

3

You can tweak it, be my guest. You can take a look at this one, which I created a few months ago.

1 Like
4

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