InnogeeksOrganization · ananyakushal · Apr 16, 2023 · Apr 16, 2023
diff --git a/Untitled design (1).png b/Untitled design (1).png
diff --git a/github_image.jpg b/github_image.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title> Github Profile Finder </title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>
+        <i> <b> GITHUB PROFILE FINDER </b></i> 
+    </h1>
+    <img class="image" src="github_image.jpg" alt="">
+    <div class="usernames">
+    <input type="text" name="" id="username" placeholder="    ENTER YOUR USERNAME" autocomplete="off">
+    <button onclick="getDetails();" id="button">
+        SEARCH
+    </button>
+    <img id="arrow" style="float: left; width: 350px; margin-bottom: 100px; margin-left: -400px;" src="Untitled design (1).png" alt="">
+
+    <div class="output-container" id="output"></div>
+    <div class="profile" id="profile"></div>
+    <div class="username">
+        <h2 id="name"> </h2>
+    </div>
+    <div class="profile"></div>
+    </div>
+</div>
+<div class="bio">
+    <p id="bio"></p>
+</div>
+<div class="info" id="info">
+    <ul>
+        <li id="followers"></li>
+        <li id="following"></li>
+    </ul>
+</div>
+<!-- 
+    <link rel="stylesheet" href="style.js"> -->
+</body>
+<script src="style.js"></script>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,139 @@
+*{
+    background-color: black;
+    color: white;
+}
+h1{
+    color: white;
+    font-family: 'Delicious Handrawn', cursive;
+    font-size: 60px;
+    text-align: center;
+    text-shadow: 15px 15px 15px white;
+} 
+@import url('https://fonts.googleapis.com/css2?family=Delicious+Handrawn&display=swap');
+
+.usernames{
+    margin-left: 530px;
+    margin-top: 80px; 
+}
+#username{
+    height: 40px;
+    width: 300px;
+    font-size: 20px;
+    border: 4px solid grey;
+    border-style: double;
+    border-radius: 80px;
+}
+
+#username:hover{
+  color: goldenrod;
+  background-color: white;
+}
+#button{
+    height: 45px;
+    width: 88px;
+    font-size: 18px;
+    /* background-color: goldenrod   */
+    /* width: 220px; */
+    /* height: 50px; */
+    border: none;
+    outline: none;
+    color: #fff;
+    background: goldenrod;
+    cursor: pointer;
+    position: relative;
+    z-index: 0;
+    border-radius: 10px;
+}
+#button:before {
+  content: '';
+  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
+  position: absolute;
+  top: -2px;
+  left:-2px;
+  background-size: 400%;
+  z-index: -1;
+  filter: blur(5px);
+  width: calc(100% + 4px);
+  height: calc(100% + 4px);
+  animation: glowing 20s linear infinite;
+  opacity: 0;
+  transition: opacity .3s ease-in-out;
+  border-radius: 10px;
+}
+
+#button:active {
+  color: #000
+}
+
+#button:active:after {
+  background: transparent;
+}
+
+#button:hover:before {
+  opacity: 1;
+}
+
+#button:after {
+  z-index: -1;
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: #111;
+  left: 0;
+  top: 0;
+  border-radius: 10px;
+}
+
+@keyframes glowing {
+  0% { background-position: 0 0; }
+  50% { background-position: 400% 0; }
+  100% { background-position: 0 0; }
+}
+
+.image{
+    height: 200px;
+    width: 350px;
+    margin-top: -170px;
+}
+
+#profile img {
+  /* border: 2px solid red; */
+  width: 250px;
+  border-radius: 50% 10%;
+	/* background-image: linear-gradient(to bottom left, #f83600, #f9d423); */
+  /* box-shadow: 1 1 5px 5px rgba(1, 1, 1, 1.5); */
+}
+
+.info ul{
+  position: absolute;
+  margin-top: -20px;
+  margin-left: 470px;
+  color: goldenrod;
+  display: flex;
+}
+ul li{font-weight: 650;
+  color: goldenrod;
+  letter-spacing: 2px;
+  margin: 15px;
+  padding: 5px 15px;
+  /* background: goldenrod; */
+  list-style: none;
+}
+li:hover{
+  color: white;
+}
+
+#output{
+  display: none;
+}
+
+.bio p{
+  font-size: 20px;
+  font-weight: 600;
+  margin-left: 950px;
+  width: 500px;
+  color: white;
+  margin-top: -300px;
+  position: absolute;
+}
diff --git a/style.js b/style.js
@@ -0,0 +1,14 @@
+function getDetails(){
+    document.getElementById('output').style.display="block";
+    const name=document.getElementById('username').value;
+    fetch(`https://api.github.com/users/${name}`)
+    .then(response=>response.json().then(data=>{
+        console.log(data)
+        document.getElementById('name').innerHTML=data.name;
+        document.getElementById('bio').innerHTML=data.bio;
+        document.getElementById('followers').innerHTML=data.followers +" Followers";
+        document.getElementById('following').innerHTML=data.following + " Following";
+        document.getElementById('profile').innerHTML=`
+        <img src="${data.avatar_url}" />`
+    }))
+}