├── Capture4.PNG
├── git-white.png
├── github-white.png
├── githubscoreimg.PNG
├── home.html
├── check.html
├── compare.html
├── style.css
├── compare.css
├── README.md
├── nav.css
├── index.js
├── card.css
└── index.html


/Capture4.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/Github-scorecard-and-compare/main/Capture4.PNG


--------------------------------------------------------------------------------
/git-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/Github-scorecard-and-compare/main/git-white.png


--------------------------------------------------------------------------------
/github-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/Github-scorecard-and-compare/main/github-white.png


--------------------------------------------------------------------------------
/githubscoreimg.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/Github-scorecard-and-compare/main/githubscoreimg.PNG


--------------------------------------------------------------------------------
/home.html:
--------------------------------------------------------------------------------
 1 | <div class="top-section">
 2 |     <h1 class="heading">Github Scorecard Generator</h1>
 3 |     <h2 class="sub-heading">How strong is your github profile !!!</h2>
 4 | </div>
 5 | 
 6 | <div class="cards">
 7 |     <div class="card">
 8 |         <h2 class="card-title">Get Your Score</h2>
 9 |         <img src="git-white.png" alt="Git" class="card-img">
10 |         <button onclick="checkPage()" class="btn-card">Check</button>
11 |     </div>
12 |     <div class="card">
13 |         <h2 class="card-title">Compare Your Score</h2>
14 |         <img src="github-white.png" alt="GitHub" class="card-img">
15 |         <button onclick="comparePage()" class="btn-card">Compare</button>
16 |     </div>
17 | </div>


--------------------------------------------------------------------------------
/check.html:
--------------------------------------------------------------------------------
 1 | <div class="top-section">
 2 |     <h1 class="heading">Check Your score!!</h1>
 3 |     <h2 class="sub-heading">Enter Your Github Username</h2>
 4 | </div>
 5 | 
 6 | <div class="form-area"> 
 7 |     <center>
 8 |     <form name="myScore" onsubmit="return getScore(this)">
 9 |         <div class="row">
10 |         <div class="col-75">
11 |             <input type="text" id="fname" name="uid" placeholder="Username" required>
12 |         </div><br>  
13 |         <br>
14 |         </div><br><br>
15 |         
16 |         <div class="row" id="submit">
17 |         <input type="submit" value="Check">
18 |         </div>
19 |     </form>
20 |     </center> 
21 |     </div>
22 | </div>
23 | 
24 | <div id="myCard" class="cards">
25 |     
26 | </div>


--------------------------------------------------------------------------------
/compare.html:
--------------------------------------------------------------------------------
 1 | <div class="top-section">
 2 |     <h1 class="heading">Compare Your Github !!</h1>
 3 |     <h2 class="sub-heading">Enter Your Github Username</h2>
 4 | </div>
 5 | 
 6 | <div class="form-area">
 7 |     <center>
 8 |     <form name="compare" onsubmit="return compareScore(this)">
 9 |         <div class="row">
10 |         
11 |         <div class="col-75">
12 |             <input type="text" id="fname" name="uid1" placeholder="Username 1" required>
13 |         </div><br>
14 |             <div class="col-75">
15 |             <h1 id="center">V/S</h1>
16 |         </div><br>
17 |             <div class="col-75">
18 |             <input type="text" id="fname" name="uid2" placeholder="Username 2" required>
19 |         </div>
20 |         </div><br><br>
21 |         
22 |         <div class="row" id="submit">
23 |         <input type="submit" value="Compare">
24 |         </div>
25 |     </form></center>
26 | </div>
27 | 
28 | <div id="myCard" class="cards">
29 |    
30 | </div>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |     --font1: 'Poppins', sans-serif;
 3 |     --font2: 'Open Sans', sans-serif;
 4 |     --primary-color: #222;
 5 |     --secondary-color: #666;
 6 | }
 7 | 
 8 | .container {
 9 |     margin: 0 auto;
10 |     padding: 2rem 10%;
11 |     text-align: center;
12 | }
13 | 
14 | .heading {
15 |     font-family: var(--font1);
16 |     font-size: 3.5rem;
17 |     font-weight: 700;
18 |     color: white;
19 |     margin-bottom: 1rem;
20 |     letter-spacing: 1px;
21 | }
22 | 
23 | .sub-heading {
24 |     font-family: var(--font2);
25 |     font-size: 1.6rem;
26 |     font-weight: 500;
27 |     color: white;
28 |     margin-bottom: 2rem;
29 | }
30 | 
31 | .top-section {
32 |     animation: titleFadeIn 2s ease-out both;
33 |     transform-origin: top;
34 | }
35 | 
36 | /* Smooth slide + fade-in effect */
37 | @keyframes titleFadeIn {
38 |     0% {
39 |         opacity: 0;
40 |         transform: translateY(-60px) scale(0.95);
41 |         clip-path: inset(0 100% 0 0);
42 |     }
43 |     100% {
44 |         opacity: 1;
45 |         transform: translateY(0) scale(1);
46 |         clip-path: inset(0 0 0 0);
47 |     }
48 | }
49 | 
50 | /* Responsive Improvements */
51 | @media (max-width: 768px) {
52 |     .container {
53 |         padding: 2rem 5%;
54 |     }
55 | 
56 |     .heading {
57 |         font-size: 2.5rem;
58 |     }
59 | 
60 |     .sub-heading {
61 |         font-size: 1.3rem;
62 |     }
63 | }
64 | 
65 | @media (max-width: 480px) {
66 |     .heading {
67 |         font-size: 2rem;
68 |     }
69 | 
70 |     .sub-heading {
71 |         font-size: 1.1rem;
72 |     }
73 | }
74 | 


--------------------------------------------------------------------------------
/compare.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     transition: all 0.5s ease;
 3 |   }
 4 |   
 5 |   input[type=text]{
 6 |     width: 90%;
 7 |     padding: 12px;
 8 |     border: 3px solid var(--neon);
 9 |     background-color: var(--primary);
10 |     color: var(--text);
11 |     font-size: 16px;
12 |     text-align: center;
13 |     border-radius: 24px;
14 |     resize: vertical;
15 |     font-family: var(--font2);
16 |   }
17 |   
18 |   input[type=text]:focus {
19 |     box-shadow: 0 0 20px var(--neon), 0 0 12px var(--neon);
20 |   }
21 |   
22 |   label {
23 |     padding: 12px 12px 12px 0;
24 |     display: inline-block;
25 |   }
26 |   
27 |   input[type=submit] {
28 |     margin-top: 12px;
29 |     color: var(--neon);
30 |     font-size: 20px;
31 |     border: 3px solid var(--neon);
32 |     border-radius: 100px;
33 |     padding: 0.6rem 1.6rem;
34 |     background-color: var(--primary);
35 |     font-family: var(--font2);
36 |     font-weight: 600;
37 |     padding: 12px 20px;
38 |     cursor: pointer;
39 |   }
40 |   
41 |   input[type=submit]:hover {
42 |     background-color: var(--neon);
43 |     color: var(--primary);
44 |     box-shadow: 0 0 20px var(--neon), 0 0 12px var(--neon);
45 |   }
46 |   
47 |   .form-area {
48 |     margin-top: 50px;
49 |     border-radius: 5px;
50 |     background-color: var(--light);
51 |     padding: 30px 20px;
52 |   }
53 |   
54 |   
55 |   .col-75 {
56 |     width: 55%;
57 |     margin-top: 6px;
58 |   
59 |   }
60 |   #center{
61 |       color: var(--text);
62 |       transition: no;
63 |   }
64 |   
65 |   .row:after {
66 |     content: "";
67 |     display: table;
68 |     clear: both;
69 |   }
70 |   
71 |   @media screen and (max-width: 600px) {
72 |     .col-25, .col-75, input[type=submit] {
73 |       width: 100%;
74 |       margin-top: 0;
75 |     }
76 |   }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Github-scorecard-and-compare
 2 | 
 3 | <div align="center">
 4 |   <img src="Capture4.PNG" alt="DevOpsShack Banner">
 5 | </div> 
 6 | Overview
 7 | This project provides a tool to generate a "score" for any GitHub profile, allowing users to evaluate and compare their profiles (or others!) based on various public metrics. Whether you're a developer looking to improve your online presence, a recruiter assessing potential candidates, or just curious about how your profile stacks up, this tool offers a quantifiable way to gauge GitHub activity and influence.
 8 | 
 9 | <div align="center">
10 |   <img src="githubscoreimg.PNG" alt="DevOpsShack Banner">
11 | </div>
12 | Features
13 | Customizable Scoring Logic: Define your own weights for different metrics (e.g., number of repositories, stars, followers, contributions).
14 | Metric Analysis: Gathers key public data points from a GitHub profile, such as:
15 | Number of public repositories
16 | Total stars across all repositories
17 | Number of followers
18 | Number of users followed
19 | Contribution streak/activity (e.g., commits, pull requests).
20 | 
21 | # 💻 Technology used:
22 | 
23 | ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) ![Fortran](https://img.shields.io/badge/Fortran-%23734F96.svg?style=for-the-badge&logo=fortran&logoColor=white) ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) ![Python](https://img.shields.io/badge/python-3670A0?style=for-the-badge&logo=python&logoColor=ffdd54) ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white) ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) ![Scaleway](https://img.shields.io/badge/SCALEWAY-%234f0599.svg?style=for-the-badge&logo=scaleway&logoColor=white) ![Netlify](https://img.shields.io/badge/netlify-%23000000.svg?style=for-the-badge&logo=netlify&logoColor=#00C7B7) !
24 | 


--------------------------------------------------------------------------------
/nav.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
  2 | 
  3 | :root {
  4 |   --primary: #1a1a1a;
  5 |   --light: #2c2c34;
  6 |   --text: #ffffff;
  7 |   --neon: #00ffff;
  8 |   --font1: 'Lato', 'Trebuchet MS', sans-serif;
  9 |   --font2: 'Raleway', 'Trebuchet MS', sans-serif;
 10 | }
 11 | 
 12 | html, body {
 13 |   margin: 0;
 14 |   padding: 0;
 15 |   font-family: var(--font2);
 16 |   font-size: 100%;
 17 |   background-color: var(--primary);
 18 |   color: var(--text);
 19 | }
 20 | 
 21 | /* Navbar Styling */
 22 | .navbar {
 23 |   position: sticky;
 24 |   top: 0;
 25 |   height: 60px;
 26 |   text-align: center;
 27 |   border-bottom: 2px solid var(--neon);
 28 |   border-radius: 0 0 36% 36%;
 29 |   background-color: var(--light);
 30 |   box-shadow: 0 0 12px 2px var(--neon);
 31 |   padding: 8px 0;
 32 |   z-index: 10;
 33 |   display: flex;
 34 |   align-items: center;
 35 |   justify-content: center;
 36 | }
 37 | 
 38 | .brand {
 39 |   color: var(--text);
 40 |   text-decoration: none;
 41 |   font-size: 2rem;
 42 |   font-weight: 700;
 43 |   font-family: var(--font1);
 44 |   letter-spacing: 1.5px;
 45 |   transition: color 0.3s ease;
 46 | }
 47 | 
 48 | .brand:hover {
 49 |   color: var(--neon);
 50 | }
 51 | 
 52 | /* Theme Switcher */
 53 | .theme {
 54 |   max-height: 52px;
 55 |   width: 48px;
 56 |   position: fixed;
 57 |   left: 0;
 58 |   top: 25%;
 59 |   background-color: var(--light);
 60 |   border-radius: 0 12px 12px 0;
 61 |   z-index: 20;
 62 |   overflow: hidden;
 63 |   transition: max-height 0.6s ease-in-out;
 64 |   box-shadow: 0 0 10px var(--neon);
 65 | }
 66 | 
 67 | .theme:hover {
 68 |   max-height: 220px;
 69 | }
 70 | .h1{
 71 |     color:white;
 72 | }
 73 | .h2{
 74 |     color: white;
 75 | }
 76 | 
 77 | /* Drop Icon */
 78 | .drop-color {
 79 |   cursor: pointer;
 80 |   font-size: 1.8rem;
 81 |   margin: 10px;
 82 |   color: var(--neon);
 83 |   text-align: center;
 84 | }
 85 | 
 86 | /* Color Swatches */
 87 | .color {
 88 |   height: 32px;
 89 |   width: 32px;
 90 |   border-radius: 50%;
 91 |   margin: 10px auto;
 92 |   cursor: pointer;
 93 |   border: 2px solid var(--text);
 94 |   transition: transform 0.3s ease, box-shadow 0.3s ease;
 95 | }
 96 | 
 97 | .color:hover {
 98 |   transform: scale(1.2);
 99 |   box-shadow: 0 0 10px 3px var(--neon);
100 | }
101 | 
102 | .violet {
103 |   background-color: violet;
104 | }
105 | 
106 | .yellow {
107 |   background-color: #ffee00;
108 | }
109 | 
110 | .green {
111 |   background-color: #00ff66;
112 | }
113 | 
114 | .blue {
115 |   background-color: #00c8ff;
116 | }
117 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const usersAPI = "https://api.github.com/users/"
 2 | async function getUserData(uid){
 3 |     let cardData = {}
 4 |     try {
 5 |         const userData = await (await fetch(usersAPI+uid)).json()
 6 |         if(userData.message){
 7 |             alert(userData.message)
 8 |             return false
 9 |         }
10 |         cardData.name = userData.login;
11 |         cardData.image = userData.avatar_url;
12 |         cardData.url = userData.html_url;
13 |         cardData.followers = userData.followers;
14 |         const repos = await (await fetch(userData.repos_url)).json()
15 |         cardData.repos = repos.length;
16 |         let stars = 0;
17 |         let forks = 0;
18 |         repos.forEach(repo => {
19 |             forks+= repo.forks_count;
20 |             stars+= repo.stargazers_count;
21 |         })
22 |         cardData.forks= forks;
23 |         cardData.stars= stars;
24 |         return cardData;
25 |     }catch(e){
26 |         console.log(e)
27 |     }
28 | }
29 | getUserData('gunjanrajtiwari')
30 | 
31 | function changeTheme(code){
32 |     document.documentElement.style
33 |     .setProperty('--neon', code);
34 | }
35 | 
36 | function homePage(){
37 |     $('.container').load('home.html')
38 | }
39 | 
40 | function checkPage(){
41 |     $('.container').load('check.html')
42 | }
43 | 
44 | function comparePage(){
45 |     $('.container').load('compare.html')
46 | }
47 | 
48 | function displayCards(data){
49 |     const cards = document.getElementById('myCard')
50 |     cards.innerHTML='';
51 |     for(user of data){
52 |         let total = user.repos+user.forks+2*user.stars+2*user.followers;
53 |         let card = `
54 |         <div class="profile-card">
55 |             <h2 class="card-title">${user.name}</h2>
56 |             <div class="img-div"><img class="profile-pic" src=${user.image} alt="Photo"></div>
57 |             <div class="github-info">
58 |                 <p>Total Followers: <span>${user.followers}</span></p>
59 |                 <p>Total Stars: <span>${user.stars}</span></p>
60 |                 <p>Total Forks: <span>${user.forks}</span></p>
61 |                 <p>Public Repos: <span>${user.repos}</span></p>
62 |             </div>
63 |             <h2 class="final-score">Your score is: ${total}</h2>
64 |             <button onclick="window.open('${user.url}','_blank')" class="btn-card">Profile</button>
65 |         </div>
66 |         `
67 |         cards.innerHTML+=card;
68 |     }
69 | }
70 | 
71 | async function getScore(form){
72 |     event.preventDefault()
73 |     const userData = await getUserData(form.uid.value)
74 |     if(userData){
75 |         displayCards([userData]);
76 |     }
77 | }
78 | 
79 | async function compareScore(form){
80 |     event.preventDefault()
81 |     const [user1,user2] = await Promise.all([getUserData(form.uid1.value),getUserData(form.uid2.value)])
82 |     if(user1 && user2){
83 |         displayCards([user1,user2])
84 |     }
85 | }


--------------------------------------------------------------------------------
/card.css:
--------------------------------------------------------------------------------
  1 | .cards {
  2 |     display: flex;
  3 |     justify-content: center;
  4 |     flex-wrap: wrap;
  5 |     gap: 30px;
  6 |     margin: 60px 0;
  7 |     padding: 0 20px;
  8 | }
  9 | 
 10 | .card-link {
 11 |     text-decoration: none;
 12 |     color: var(--text);
 13 |     transition: transform 0.3s ease;
 14 | }
 15 | 
 16 | .card-link:hover {
 17 |     transform: scale(1.03);
 18 | }
 19 | 
 20 | .card {
 21 |     height: 320px;
 22 |     width: 260px;
 23 |     background-color: var(--background);
 24 |     border: 2px solid var(--neon);
 25 |     border-radius: 12px;
 26 |     box-shadow: 0px 0px 15px 3px var(--neon);
 27 |     margin: 10px;
 28 |     overflow: hidden;
 29 |     display: flex;
 30 |     flex-direction: column;
 31 |     align-items: center;
 32 |     transition: box-shadow 0.3s ease, transform 0.3s ease;
 33 | }
 34 | 
 35 | .card:hover {
 36 |     transform: translateY(-8px);
 37 |     box-shadow: 0 0 30px 6px var(--neon);
 38 | }
 39 | 
 40 | .card-title {
 41 |     font-family: var(--font1);
 42 |     font-size: 1.6rem;
 43 |     margin-top: 12px;
 44 |     color: var(--neon);
 45 |     text-align: center;
 46 | }
 47 | 
 48 | .card-img {
 49 |     height: 160px;
 50 |     width: 100%;
 51 |     object-fit: cover;
 52 |     border-bottom: 1px solid var(--neon);
 53 | }
 54 | 
 55 | .btn-card {
 56 |     margin-top: auto;
 57 |     margin-bottom: 20px;
 58 |     padding: 0.6rem 1.8rem;
 59 |     color: var(--neon);
 60 |     font-size: 1rem;
 61 |     border: 2px solid var(--neon);
 62 |     border-radius: 30px;
 63 |     background: transparent;
 64 |     transition: all 0.4s ease;
 65 |     cursor: pointer;
 66 |     font-weight: bold;
 67 |     letter-spacing: 0.5px;
 68 | }
 69 | 
 70 | .btn-card:hover {
 71 |     background: var(--neon);
 72 |     color: var(--primary);
 73 |     box-shadow: 0 0 15px var(--neon), 0 0 10px var(--neon);
 74 | }
 75 | 
 76 | /* Profile Card */
 77 | 
 78 | .profile-card {
 79 |     width: 320px;
 80 |     background-color: var(--background);
 81 |     border: 2px solid var(--neon);
 82 |     border-radius: 12px;
 83 |     box-shadow: 0px 0px 15px 3px var(--neon);
 84 |     margin: 10px;
 85 |     text-align: center;
 86 |     padding: 20px;
 87 |     transition: transform 0.3s ease, box-shadow 0.3s ease;
 88 | }
 89 | 
 90 | .profile-card:hover {
 91 |     transform: translateY(-6px);
 92 |     box-shadow: 0px 0px 25px 5px var(--neon);
 93 | }
 94 | 
 95 | .img-div {
 96 |     height: 110px;
 97 |     width: 110px;
 98 |     border-radius: 50%;
 99 |     background-color: var(--primary);
100 |     margin: auto;
101 |     border: 4px solid var(--neon);
102 |     padding: 4px;
103 |     box-shadow: 0 0 12px var(--neon);
104 | }
105 | 
106 | .profile-pic {
107 |     height: 100%;
108 |     width: 100%;
109 |     border-radius: 50%;
110 |     object-fit: cover;
111 | }
112 | 
113 | .profile-card .card-title {
114 |     margin-top: 15px;
115 |     font-size: 1.5rem;
116 | }
117 | 
118 | .github-info {
119 |     font-size: 0.9rem;
120 |     color: var(--text);
121 |     margin-top: 10px;
122 |     line-height: 1.4;
123 | }
124 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Your Github Score</title>
  7 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100&effect=neon">
  8 |     <link rel="stylesheet" href="nav.css">
  9 |     <link rel="stylesheet" href="style.css">
 10 |     <link rel="stylesheet" href="card.css">
 11 |     <link rel="stylesheet" href="compare.css">
 12 | </head>
 13 | <body>
 14 |     <nav class="navbar">
 15 |         <a href="javascript:homePage()" class="brand">GITSTAT</a>
 16 |     </nav>
 17 |     <div id='palette' class="theme">
 18 |         <div class="drop-color"><i class="fas fa-palette"></i></div>
 19 |         <div onclick="changeTheme('#0FF')" class="color violet"></div>
 20 |         <div onclick="changeTheme('#FE0')" class="color yellow"></div>
 21 |         <div onclick="changeTheme('#0F0')" class="color green"></div>
 22 |         <div onclick="changeTheme('#F0F')" class="color blue"></div>
 23 |     </div>
 24 |     <div class="container">
 25 |         <div class="top-section">
 26 |             <h1 class="heading">Github Scorecard </h1>
 27 |             <h2 class="sub-heading">How strong is your github profile !!!</h2>
 28 |         </div>
 29 | 
 30 |         <div class="cards">
 31 |             <div class="card">
 32 |                 <h2 class="card-title">Get Your Score</h2>
 33 |                 <img src="git-white.png" alt="Git" class="card-img">
 34 |                 <button onclick="checkPage()" class="btn-card">Check</button>
 35 |             </div>
 36 |             <div class="card">
 37 |                 <h2 class="card-title">Compare Your Score</h2>
 38 |                 <img src="github-white.png" alt="GitHub" class="card-img">
 39 |                 <button onclick="comparePage()" class="btn-card">Compare</button>
 40 |             </div>
 41 |         </div>
 42 |         <div class="top-section">
 43 |             <h1 class="heading">Check Your score!!</h1>
 44 |             <h2 class="sub-heading">Enter Your Github Username</h2>
 45 |         </div>
 46 |         
 47 |         <div class="form-area"> 
 48 |             <center>
 49 |             <form name="myScore" onsubmit="return getScore(this)">
 50 |                 <div class="row">
 51 |                 <div class="col-75">
 52 |                     <input type="text" id="fname" name="uid" placeholder="Username" required>
 53 |                 </div><br>  
 54 |                 <br>
 55 |                 </div><br><br>
 56 |                 
 57 |                 <div class="row" id="submit">
 58 |                 <input type="submit" value="Check">
 59 |                 </div>
 60 |             </form>
 61 |             </center> 
 62 |             </div>
 63 |         </div>
 64 |         
 65 |         <div id="myCard" class="cards">
 66 |             
 67 |         </div>
 68 |         <div class="top-section">
 69 |             <h1 class="heading">Compare Your Github !!</h1>
 70 |             <h2 class="sub-heading">Enter Your Github Username</h2>
 71 |         </div>
 72 |         
 73 |         <div class="form-area">
 74 |             <center>
 75 |             <form name="compare" onsubmit="return compareScore(this)">
 76 |                 <div class="row">
 77 |                 
 78 |                 <div class="col-75">
 79 |                     <input type="text" id="fname" name="uid1" placeholder="Username 1" required>
 80 |                 </div><br>
 81 |                     <div class="col-75">
 82 |                     <h1 id="center">V/S</h1>
 83 |                 </div><br>
 84 |                     <div class="col-75">
 85 |                     <input type="text" id="fname" name="uid2" placeholder="Username 2" required>
 86 |                 </div>
 87 |                 </div><br><br>
 88 |                 
 89 |                 <div class="row" id="submit">
 90 |                 <input type="submit" value="Compare">
 91 |                 </div>
 92 |             </form></center>
 93 |         </div>
 94 |         
 95 |         <div id="myCard" class="cards">
 96 |            
 97 |         </div>
 98 |     </div>
 99 |     <script src="https://kit.fontawesome.com/82262f4dc4.js" crossorigin="anonymous"></script>
100 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
101 |     <script src="index.js"></script>
102 | </body>
103 | </html>


--------------------------------------------------------------------------------