index.html

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Projects</title>

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

        <!-- fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigen>
        <link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Playwrite+RO:wght@100..400&display=swap" rel="stylesheet">

    </head>

    <body>

      <!-- navbar -->
      <header class="navbar">
          <h1 class="brand">Anujit Singh</h1>
          <h1 class="title">Projects</h1>
          <div class="nav-link">
            <a href="https://github.com/Anujit1" target="_blank" class="nav-icon">
              <i class="fa-brands fa-github fa-2xl std-icon" style="color: #FFD43B;"></i>
              <i class="fa-brands fa-github fa-flip fa-2xl hover-icon" style="color: #FFD43B;"></i>
            </a>
          </div>
          
      </header>
        
      <div id="navbarMargin"><div>
      

      <!-- main body -->
      <div class="canvas">
        <div class="projects-container">

          <!-- card -->
          <div class="project-card">
            <div class="project-snapshot">
              <img src="project_Snapshot/todo.png" alt="Project Snapshot">
            </div>
            <div class="project-info">
              <h2><a href="ToDo/index.html" class="project-link" target="_blank" rel="noopener noreferrer">ToDo</a></h2>
              <p>Track your work!</p>
            </div>
          </div>

          <!-- card -->
          <div class="project-card">
            <div class="project-snapshot">
              <img src="project_Snapshot/GitHub_Profile_Card.png" alt="Project Snapshot">
            </div>
            <div class="project-info">
              <h2><a href="github_profile_card/index.html" class="project-link" target="_blank" rel="noopener noreferrer">GitHub Profile Card</a></h2>
              <p>Makes a card of your github profile and copy user, followers and profile image link api data.</p>
            </div>
          </div>

          <!-- card -->
          <div class="project-card">
            <div class="project-snapshot">
              <img src="project_Snapshot/keyboard-check.png" alt="Project Snapshot">
            </div>
            <div class="project-info">
              <h2><a href="keyboard_check/index.html" class="project-link" target="_blank" rel="noopener noreferrer">key Check</a></h2>
              <p>Test every key</p>
            </div>
          </div>


          <!-- card -->
          <div class="project-card">
            <div class="project-snapshot">
              <img src="project_Snapshot/infinity-color.png" alt="Project Snapshot">
            </div>
            <div class="project-info">
              <h2><a href="Display_Test/index.html" class="project-link" target="_blank" rel="noopener noreferrer">Infinity Color</a></h2>
              <p>Never ending colors.....</p>
            </div>
          </div>


          <!-- card 1 -->
          <div class="project-card">
            <div class="project-snapshot">
              <img src="project_Snapshot/color_changer.png" alt="Project Snapshot">
            </div>
            <div class="project-info">
              <h2><a href="colorChanger/index.html" class="project-link" target="_blank" rel="noopener noreferrer">Color Changer</a></h2>
              <p>Test vibrant colors.</p>
            </div>
          </div>

          <!-- card 2 -->
          <div class="project-card">
              <div class="project-snapshot">
                <img src="project_Snapshot/bmi_calculator.png" alt="Project Snapshot">
              </div>
              <div class="project-info">
                <h2><a href="BMI_Calculator/index.html" class="project-link" target="_blank" rel="noopener noreferrer">Bmi CalCulator</a></h2>
                <p>Calculate your Bmi.</p>
              </div>
          </div>

          <!-- card 3 -->
          <div class="project-card">
              <div class="project-snapshot">
                <img src="project_Snapshot/Ticker_clock.png" alt="Project Snapshot">
              </div>
              <div class="project-info">
                <h2><a href="Clock/index.html" class="project-link" target="_blank" rel="noopener noreferrer">Ticker</a></h2>
                <p>Time is money, so I built a clock.</p>
              </div>
          </div>

          <!-- card 4 -->
          <div class="project-card">
              <div class="project-snapshot">
                <img src="project_Snapshot/Number_Guess.png" alt="Project Snapshot">
              </div>
              <div class="project-info">
                <h2><a href="guess_number/index.html" class="project-link" target="_blank" rel="noopener noreferrer">Guess Number</a></h2>
                <p>Try and guess the number.</p>
              </div>
          </div>

        </div>
          
      </div>
    </body>
    
    <script src="https://kit.fontawesome.com/fc8c322f0b.js" crossorigen="anonymous"></script>
</html>