JavaScript_Projects/index.html at main · Anujit1/JavaScript_Projects · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!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" crossorigin>
        <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" crossorigin="anonymous"></script>
</html>