Enhancements

This page presents two enhancements we have made as part of assignment 1.

Responsive navigation bar

Our website features a responsive navigation bar that links all of our pages together. It features a logo, which takes the user to the home page when clicked on, as well as five navigation links to the different pages of our website. For large screens (more than 775px), the navigation links are laid out horizontally in a block. For smaller screen sizes, a button will appear in place of these links. Click on the menu button will make a panel containing the links to slide in from the right side of the screen. One more click in this button will automatically collapse it.

The HTML markup for the responsive navigation bar.

<div id="navbar" class="obj-width">
  <a href="index.php"><img class="logo" src="images/logo.png" alt="Next_gen logo"></a> <input type="checkbox" id="nav-toggle" class="nav-toggle">
    <ul id="menu">
        <li><a class="navbar_button" href="jobs.php">Jobs</a></li>
        <li><a class="navbar_button" href="about.php">About</a></li>
        <li><a class="navbar_button" href="apply.php">Apply</a></li>
        <li><a class="navbar_button" href="contact.php">Contact</a></li>
        <li><a id="w-btn" href="join.php">Join</a></li>
    </ul>
    <label for="nav-toggle" class="nav-toggle-label">
        <i class='bx bx-menu'></i>
    </label>
</div>
        

The CSS for the responsive navigation bar. Only key rulesets and properties needed for the responsivity of the navigation bar is included for the sake of brevity.

        .navbar_button {
            color: #fff;
            text-decoration: none;
            margin-left: 40px;
            font-size: 1.3rem;
            font-weight: 500;
            position: relative;
            transition: color 0.3s;
        }
        
        .navbar_button::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            bottom: -5px;
            left: 0;
            background-color: white;
            transform: scaleX(0);
            transition: transform 0.3s;
        }
        
        #menu li a:hover::after {
            transform: scaleX(1);
        }
        
        #w-btn {
            margin-left: 40px;
            margin-right: 20px;
            font-size: 1.2rem;
            font-weight: 500;
            background: #fff;
            color: #1f3e5d;
            padding: 9px 30px;
            border-radius: 20px;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
            opacity: 0;
            animation: fadeInUp 0.8s forwards 0.5s;
            text-decoration: none;
        }
        
        .apply-button button a {
            text-decoration: none;
            color: inherit;
        }
        
        #w-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        
        .nav-toggle {
            display: none;
        }
        
        .nav-toggle-label {
            display: none;
            color: #fff;
            font-size: 1.7rem;
            cursor: pointer;
            transition: transform 0.3s;
        }
        @media (max-width: 775px) {
          .nav-toggle-label {
              display: block;
          }
      
          #menu {
              background-color: #fff;
              display: block;
              width: 250px;
              height: auto;
              position: absolute;
              top: 80px;
              right: -300px;
              padding: 10px 0;
              box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
              border-radius: 13px;
              opacity: 0;
              transition: all 0.3s ease;
              z-index: 999; 
          }
      
      
          #menu li {
              padding: 1rem;
              animation: none;
              opacity: 1;
          }
      
          #menu li a {
              color: #1f3e5d;
              margin-left: 20px;
          }
      
          #menu li a::after {
              background-color: #1f3e5d;
          }
      
          .nav-toggle:checked ~ #menu {
              right: 10px;
              opacity: 1;
          }
      
      
          #w-btn { 
              margin-left: 20px;
              font-size: 1.4rem;
              font-weight: 500;
              background: #fff;
              color: #1f3e5d;
              padding: 12px 30px;
              border-radius: 20px;
              border: none;
              cursor: pointer;
              transition: all 0.3s;
              opacity: 1; 
              animation: none; 
          }
        }
        

This navigation bar is present at the top of all the pages of our website, including this page. Change the screen dimensions to see how it works!

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

          @media (max-width: 650px) {
            .nav-toggle-label {
                display: block;
            } 
        
            .contact-info h1 {
                font-size: 3rem;
            }
        
            .contact-form h2 {
                font-size: 1.75rem;
                text-align: center;
            }
        
            .info-card {
                padding: 15px;
            }
        
            .contact-info, .contact-form {
                padding: 30px 20px;
            }
          }