Merge pull request #1499 from ak-sh-at/main

Github Profile Wrapper (overflow problem solved , added some CSS also)

Author: TusharKesarwani

Projects/Github Profile Wrapper/index.html

@@ -3,6 +3,15 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <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=Courgette&display=swap" rel="stylesheet">
+<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=Kalam&display=swap" rel="stylesheet">
+
     <link rel="stylesheet" href="style.css">
     <title>Github Profile Wrapper</title>
 </head>
@@ -11,7 +20,7 @@
     <div class="container">
         <div class="main">
             <div class="srch">
-                <h1>Github Profile Wrapper</h1>
+                <h2>Github Profile Wrapper</h2>
 
             </div>
             <div class="search-container">

Projects/Github Profile Wrapper/style.css

@@ -1,4 +1,3 @@
-
 @import url('https://fonts.googleapis.com/css2?family=DynaPuff&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=DynaPuff&family=Mukta:wght@300&display=swap');
 ::-webkit-scrollbar {
@@ -28,7 +27,14 @@ body {
   background-image: url("bg.png");
   color: rgb(212 212 212);
 }
-
+h2{
+  font-family: 'Kalam', cursive;
+}
+@media (min-width: 470px) {
+  #search-btn {
+     width:50px;
+  }
+}
 .container {
   width: 100%;
   height: 100%;
@@ -39,8 +45,8 @@ body {
 }
 .main {
   padding: 5%;
-  width: 30%;
-  height: 30%;
+  width: 32%;
+  height: 32%;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -73,7 +79,7 @@ body {
 }
 
 .search-container:hover > #search-input {
-  width: 400px;
+  width: 300px;
 }
 
 .search-container #search-input {
@@ -92,9 +98,10 @@ body {
 
 #search-btn {
     font-size: 15px;
-  font-family: Arial;
+    font-family: 'Kalam', cursive;
+    letter-spacing: 1px;
   width: 140px;
-  height: 50px;
+  height: 40px;
   border-width: 1px;
   color: #fff;
   border-color: rgba(29, 30, 29, 1);
@@ -107,6 +114,40 @@ body {
   text-shadow: 1px 1px 0px rgba(15, 15, 15, 1);
   background-color: transparent;
 }
+#search-btn:hover{
+  background-color: bisque;
+  color: #000000;
+  box-shadow: 2px 3px grey;
+}
+@media (max-width: 470px) {
+  #search-btn {
+     width:70px;
+     height:25px;
+     font-size: small;
+  }
+}
+@media (max-width: 299px) {
+  h2{
+    font-size:small ;
+  }
+  #search-btn {
+    width:50px;
+    height:25px;
+    font-size: small;
+ }
+}
+ @media (max-width: 182px) {
+  h2{
+    font-size:x-small ;
+  }
+  #search-btn {
+    width:25px;
+    height:20px;
+    font-size:x-small;
+    letter-spacing: 0;
+ }
+
+}
 .card{
 
 
@@ -139,7 +180,8 @@ body {
   align-items: center;
 }
 .round{
-  
+  height:88%;
+  width: 88%;
   align-items: center;
   border: 1px solid #03BFCB;
 	border-radius: 50%;
@@ -171,4 +213,4 @@ body {
   color: aliceblue;
   text-decoration: none;
   font-size: large;
-}
+}