"`
21 | 5. `git pull`
22 | 6. `git push`
23 |
24 | After following these steps in CLI, you'll need to go to your github repository in the website.
25 |
26 | If you're new to contributing and have no idea about working with repositories, be sure to check and [start here](https://github.com/firstcontributions/first-contributions).
27 |
28 | ### Contributor's Hack, 2020
29 |
30 | This repository has also been accepting contributions under Contributor's Hack 2020 by [HakinCodes](https://github.com/HakinCodes).
31 | If you'd like to get accounted for contributions under this program, then the contribution process is almost same as the above, and you'll just additionally need to ensure:
32 | 1. Your PR (Pull Request) made must be linked to an issue, that **must** contain the `CH20` as a label. (This can be simply done by mentioning the issue number with a pound or hash (specifically `#`) symbol preceeding the issue number).
33 |
34 | That's all!
35 |
36 | The Live Tool can be accessed here: https://aakansha99.github.io/Github-Profile-Analyser/.
37 |
38 | To know about the entire repository, head straightaway to the [README](README.md) file.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Github-profile-Analyser About
10 | In the recent times, GitHub has evolved from more than being a place to keep a record of all your amazing projects 💻 with their respective source-code. It is now a proof of your commitment, urge to solve problems, not just in the DSA questions in the interviews, but those which you notice around, and come up with software/hardware solutions. Having an amazing GitHub profile 🤩 is one of the aims of every developer today.
11 |
15 |
16 |
17 |
18 |
19 |
20 | Contributions
21 |
22 |
23 | Wanna contribute? Yeah, it's open for all✌.
29 |
30 | Contributor's Hack, 2020
31 |
32 | Contributor's Hack, 2020 is an Open Source Program organized by HakinCodes to introduce the youth to Open Source and it's great benefits. This program will run for about one and a half months in which fellow participants will get guidance from highly skilled mentors to contribute in Open Source Projects and after the conclusion of the program, they will recieve benefits according to their contributions.
33 |
34 |
35 |
36 |
38 |
39 |
--------------------------------------------------------------------------------
/css/singleProfile.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
2 |
3 | *{
4 | margin: 0;
5 | padding: 0;
6 | }
7 |
8 | body {
9 | background-color: white;
10 | background: linear-gradient(to right, #7f7fd5, #86a8e7, #91eae4);
11 | color: black;
12 | width: 100%;
13 | height: auto;
14 | margin-bottom: 50px;
15 | background-size: cover;
16 | overflow-x: hidden;
17 | }
18 |
19 | .dark-mode {
20 | background-color: black;
21 | color: white;
22 | background: linear-gradient(to right, #141e30, #243b55);
23 | }
24 |
25 | .autocomplete {
26 | width: auto;
27 | background: #0A79DF;
28 | text-align: center;
29 | margin-top: 8px;
30 | box-shadow: 0px 1px 5px 1px #000;
31 | padding: 0.1rem;
32 | }
33 |
34 | .autocomplete:hover {
35 | background: rgba(255, 0, 170, 0.2);
36 | overflow: hidden;
37 | padding: 0.1rem;
38 | }
39 |
40 | #match-list{
41 | margin: auto;
42 | padding: auto;
43 | width: 30%;
44 | display: inline;
45 | }
46 |
47 | h2{
48 | margin-top: 10px;
49 | font-family: 'Righteous', cursive;
50 | text-align: center;
51 | }
52 |
53 | .img{
54 | width: 35px;
55 | height: 35px;
56 | border-radius: 5px;
57 | }
58 |
59 | .form-control:focus {
60 | border: green 2px solid;
61 | }
62 |
63 | .form-control{
64 | display: inline;
65 | border-radius: 25px;
66 | width: 35%;
67 | text-align: center;
68 | margin: 10px;
69 | }
70 |
71 | .btn{
72 | border-radius: 5px;
73 | width: 100px;
74 | }
75 |
76 | #match-list {
77 | margin-bottom: 10px;
78 | }
79 |
80 | .item {
81 | width: auto;
82 | height: auto;
83 | font-size: 20px;
84 | padding: 10px;
85 | }
86 |
87 | .pro{
88 | height: 1000px;
89 | }
90 |
91 | #profile {
92 | display: flex;
93 | background-color: rgb(255, 250, 250, 0.4);
94 | overflow: auto;
95 | flex-direction: column;
96 | width: auto;
97 | align-items: center;
98 | height: auto;
99 | border-radius: 20px;
100 | }
101 |
102 | #profile_pic {
103 | display: inline-block;
104 | margin: 20px 0 0 20px;
105 | width: 300px;
106 | height: 300px;
107 | border-radius: 10%;
108 | border: 1px solid grey;
109 | box-shadow: steelblue 3px 3px;
110 | }
111 |
112 | #profile_name {
113 | font-size: 40px;
114 | width: auto;
115 | height: auto;
116 | color: hsla(250, 90%, 60%, 0.6);
117 | margin: 20px 0 0 10px;
118 | }
119 | #profile_bio{
120 | font-size: 20px;
121 | margin-left: 10px;
122 | }
123 |
124 | #profile_location{
125 | width: 200px;
126 | }
127 |
128 | canvas {
129 | background-color: rgba(255, 100, 170, 0.3);
130 | display: contents;
131 | margin-top: 20px;
132 | border-radius: 20px;
133 | padding: 0;
134 | }
--------------------------------------------------------------------------------
/css/background.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: Kaushan;
3 | src: url(../fonts/KaushanScript-Regular.otf);
4 | }
5 |
6 | /* Background boxes */
7 | .box div {
8 | height: 60px;
9 | width: 60px;
10 | position: fixed;
11 | top: 10%;
12 | left: 10%;
13 | animation: animate 4s linear infinite;
14 | background: rgba(255, 255, 255, 0.5);
15 | border-radius: 15px;
16 | }
17 | .box div:nth-child(1) {
18 | top: 20%;
19 | left: 20%;
20 | animation: animate 8s linear infinite;
21 | }
22 | .box div:nth-child(2) {
23 | top: 26%;
24 | left: 89%;
25 | animation: animate 10s linear infinite;
26 | }
27 | .box div:nth-child(3) {
28 | top: 80%;
29 | left: 90%;
30 | animation: animate 5s linear infinite;
31 | }
32 | .box div:nth-child(4) {
33 | top: 65%;
34 | left: 75%;
35 | animation: animate 7s linear infinite;
36 | }
37 | .box div:nth-child(5) {
38 | top: 90%;
39 | left: 10%;
40 | animation: animate 9s linear infinite;
41 | }
42 | .box div:nth-child(6) {
43 | top: 30%;
44 | left: 60%;
45 | animation: animate 5s linear infinite;
46 | }
47 | .box div:nth-child(7) {
48 | top: 70%;
49 | left: 33%;
50 | animation: animate 8s linear infinite;
51 | }
52 | .box div:nth-child(8) {
53 | top: 75%;
54 | left: 60%;
55 | animation: animate 10s linear infinite;
56 | }
57 | .box div:nth-child(9) {
58 | top: 23%;
59 | left: 50%;
60 | animation: animate 6s linear infinite;
61 | }
62 | .box div:nth-child(10) {
63 | top: 35%;
64 | left: 7%;
65 | animation: animate 10s linear infinite;
66 | }
67 | @keyframes animate {
68 | 0% {
69 | transform: scale(0) translateY(0) rotate(50deg);
70 | }
71 | 100% {
72 | transform: scale(1.6) translateY(-250px) rotate(360deg);
73 | }
74 | }
75 | /* Background boxes */
76 |
77 | /*****************************
78 | LIGHT MODE
79 | *****************************/
80 |
81 | body {
82 | width: 100%;
83 | height: 100vh;
84 | /* background: linear-gradient(#ee7752, #e083a7, #26738f, #80d6c2); */
85 | background: linear-gradient(
86 | #9ba1db,
87 | rgba(166, 175, 175, 0.541),
88 | #26738f,
89 | #80d6c2
90 | );
91 | background-size: 400% 400%;
92 | position: relative;
93 | animation: change-bg 10s ease-in-out infinite;
94 | }
95 |
96 | @keyframes change-bg {
97 | 0% {
98 | background-position: 0% 50%;
99 | }
100 |
101 | 50% {
102 | background-position: 50% 100%;
103 | }
104 |
105 | 100% {
106 | background-position: 0% 50%;
107 | }
108 | }
109 |
110 | /* Navigation bar */
111 | .topnav a {
112 | color: rgb(34, 53, 68);
113 | }
114 |
115 | .topnav a.active {
116 | color: rgb(34, 53, 68);
117 | }
118 |
119 |
120 | /* GitHub profile comparison section */
121 | div.info > a {
122 | display: inline-block;
123 | color: rgb(34, 53, 68);
124 | font-family: Kaushan;
125 | letter-spacing: 2px;
126 | transition: 0.5s all;
127 | }
128 |
129 | div.info a:hover {
130 | text-decoration: none;
131 | color: rgb(226, 205, 205);
132 | }
133 |
134 | /* GitHub profile comparison section */
135 |
136 | /* Changing text */
137 | .info p {
138 | font-size: 20px;
139 | padding: 30px 25px 5px 25px;
140 | height: 120px;
141 | /* border: 1px solid black; */
142 | animation: color-change 5s infinite;
143 | }
144 |
145 | @keyframes color-change {
146 | 0% {
147 | color: rgb(34, 34, 117);
148 | }
149 |
150 | 50% {
151 | color: black;
152 | }
153 |
154 | 100% {
155 | color: rgb(34, 34, 117);
156 | }
157 | }
158 |
159 | /* Changing text end */
160 |
161 | /*****************************
162 | DARK MODE
163 | *****************************/
164 | .dark-mode {
165 | background: linear-gradient(
166 | #000,
167 | rgb(18, 28, 48),
168 | rgb(20, 19, 19),
169 | rgb(128, 45, 128)
170 | );
171 | color: white;
172 | background-size: 400% 400%;
173 | animation: change 10s ease-in-out infinite all;
174 | }
175 |
176 | @keyframes change {
177 | 0% {
178 | background-position: 0% 50%;
179 | }
180 |
181 | 50% {
182 | background-position: 50% 100%;
183 | color: lightblue;
184 | }
185 |
186 | 100% {
187 | background-position: 0% 50%;
188 | }
189 | }
190 |
191 | /* Navigation bar */
192 | .dark-mode .topnav a {
193 | color: steelblue;
194 | }
195 |
196 | .dark-mode .topnav a:hover {
197 | color: lightblue;
198 | }
199 |
200 | .dark-mode .topnav a.active {
201 | color: steelblue;
202 | }
203 |
204 | /* Navigation bar end */
205 |
206 | /* GitHub profile comparison section */
207 | .dark-mode div.info a {
208 | display: inline-block;
209 | font-family: Kaushan;
210 | letter-spacing: 2px;
211 | color: steelblue;
212 | transition: 0.5s all;
213 | }
214 |
215 | .dark-mode div.info a:hover {
216 | text-decoration: none;
217 | color: lightblue;
218 | }
219 |
220 | /* GitHub profile comparison section end */
221 |
222 | /* Changing text */
223 | .dark-mode .info p {
224 | font-size: 20px;
225 | animation: dark-color-change 5s infinite;
226 | }
227 |
228 | @keyframes dark-color-change {
229 | 0% {
230 | color: rgb(133, 133, 177);
231 | }
232 |
233 | 50% {
234 | color: rgb(167, 160, 160);
235 | }
236 |
237 | 100% {
238 | color: rgb(133, 133, 177);
239 | }
240 | }
241 |
242 | /* Changing text end */
243 |
--------------------------------------------------------------------------------
/singleProfile.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
12 | Github Profile Analyser
13 |
14 |
15 |
16 |
17 |
18 |
82 |
83 |
84 |
85 |
96 |
97 |
98 |
99 |
102 |
103 |
104 |
Github Compare
13 |
14 |
15 |
16 |
80 | User Not Found `;
60 | } else {
61 | const repositories = await fetch(data.repos_url);
62 | const repos = await repositories.json();
63 |
64 | profileDiv.innerHTML = "";
65 |
66 | if (data) {
67 | this.addUserToList(data, repos, profileDiv);
68 | }else{
69 | profileDiv.innerHTML = `No Data To Display `;
70 | }
71 | }
72 | }
73 |
74 | addUserToList(data, repos,profileDiv) {
75 |
76 | let stars = 0;
77 |
78 | // defining user points on the scale of 10 //
79 | var points = ((data.public_repos + stars) / 2 / 50) * 10;
80 | var Grade = Grading(points);
81 |
82 | for (var i = 0; i < repos.length; i += 1) {
83 | stars += repos[i].watchers_count;
84 | }
85 | let profile_pic = `Name:
`
87 | let profile_bio = `~${data.bio}
`;
88 | let profile_location = `from :
`
89 | let profile_followers = `followers :
`
90 | let profile_following = `following :
`
91 | let profile_public_repos = `Public Repos :
`
92 | let profile_stars = `Total Stars :
`
93 | let profile_Grade = `Grade :
`
94 | let profile_URL = ``
95 |
96 | profileDiv.insertAdjacentHTML('beforeend', profile_pic);
97 | profileDiv.insertAdjacentHTML('beforeend', profile_name);
98 | if(data.bio)profileDiv.insertAdjacentHTML('beforeend', profile_bio);
99 | if(data.location)profileDiv.insertAdjacentHTML('beforeend', profile_location);
100 | profileDiv.insertAdjacentHTML('beforeend', profile_followers);
101 | profileDiv.insertAdjacentHTML('beforeend', profile_following);
102 | profileDiv.insertAdjacentHTML('beforeend', profile_public_repos);
103 | profileDiv.insertAdjacentHTML('beforeend', profile_stars);
104 | profileDiv.insertAdjacentHTML('beforeend', profile_Grade);
105 | profileDiv.insertAdjacentHTML('beforeend', profile_URL);
106 | getGraph();
107 | }
108 | }
109 |
110 | const debounce = (func, delay) => {
111 | let timer;
112 | return function (...args) {
113 | if (timer) {
114 | clearTimeout(timer);
115 | }
116 | timer = setTimeout(() => {
117 | func(...args);
118 | }, delay);
119 | };
120 | };
121 | var search = document.getElementById("username");
122 | let users;
123 |
124 |
125 | // FIlter states
126 | async function searchUser(searchText, id, search) {
127 | const matchList = document.getElementById(id);
128 | if (searchText !== "") {
129 | const res = await fetch(
130 | `https://api.github.com/search/users?q=${searchText}`
131 | );
132 | users = await res.json();
133 | if (users.total_count === 0) {
134 | matchList.innerHTML = "";
135 | } else {
136 | let matches;
137 | matches = users.items.filter((user) => {
138 | const regex = new RegExp(`^${searchText}`, "gi");
139 | return user.login.match(regex);
140 | });
141 |
142 | const html = matches
143 | .slice(0, 5)
144 | .map(
145 | (match) => `
146 |
147 |
User Not Found `;
44 | }
45 | else
46 | {
47 | const repositories = await fetch(data.repos_url);
48 | const repos = await repositories.json();
49 |
50 | if (data)
51 | {
52 | this.deletedata(c)
53 | this.addUserToList(data,repos,c)
54 | }
55 | }
56 | }
57 |
58 | addUserToList(data,repos,c)
59 | {
60 | const list = document.querySelector(c);
61 | const table = document.createElement('table');
62 | table.className="table border table-striped mt-5";
63 | let stars = 0
64 | // defining user points on the scale of 10 //
65 | var points=(((data.public_repos+stars)/2)/50)*10
66 | var Grade = Grading(points)
67 |
68 | for( var i = 0;i
75 |
76 |
77 |
79 | Name : ${data.name}
81 |
82 |
83 | About: ${data.bio}
85 | ${ (data.blog)?`Custom Site: ${data.blog}
88 | Location : ${data.location}
90 |
91 |
92 | Followers : ${data.followers}
94 |
95 |
96 | Following : ${data.following}
98 |
99 |
100 | Total Repositories : ${data.public_repos}
102 |
103 |
104 | Total Stars : ${stars}
106 |
107 |
108 | GitHub Grade : ${Grade}
112 | Github Url : ${data.html_url}
163 |
164 |
Home
12 |
13 |
14 |
15 |
79 |
80 |
81 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
100 |
101 |
102 |
117 |
118 |
119 |
120 |
181 |
182 |
188 |
189 |
190 |
195 |
200 |
205 |
206 |
207 |
208 |
209 |
250 |
251 |
256 |
257 |
--------------------------------------------------------------------------------
/css/compareProfile.css:
--------------------------------------------------------------------------------
1 | /* Compare page */
2 |
3 | body {
4 | background-color: white;
5 | color: black;
6 | background-image: url("NormalTheme.jpeg"); /* Normal_Theme background */
7 | }
8 |
9 | .dark-mode {
10 | background-color: black;
11 | color: white;
12 | background-image: url("Dark_Theme.jpg"); /*Dark_theme background */
13 | }
14 |
15 | .git{
16 | font-family: Arial;
17 | }
18 |
19 | .split {
20 | height: 80vh;
21 | width: 45%;
22 | position: fixed;
23 | z-index: 1;
24 | overflow-x: hidden;
25 | padding-top: 20px;
26 | margin: 3vw;
27 | }
28 |
29 | .left {
30 | left: 0;
31 | position: absolute;
32 | }
33 |
34 | .right {
35 | right: 0;
36 | position: absolute;
37 |
38 | }
39 |
40 | .form-control{
41 | margin-left: auto;
42 | margin-right: auto;
43 | width: 300px;
44 | border-radius: 15px;
45 | }
46 |
47 | .btn{
48 | width: 180px;
49 | margin: auto;
50 | border-radius: 15px;
51 | }
52 |
53 | .class{
54 | margin-right: 20px !important;
55 | }
56 |
57 | @media only screen and (max-width: 500px) {
58 | .form-control{
59 | width: auto;
60 | border-radius: 15px;
61 | }
62 |
63 | .btn{
64 | width: auto;
65 | border-radius: 15px;
66 | }
67 | .git{
68 | height: 100vh;
69 | }
70 | .home{
71 | height: 100%;
72 | }
73 | }
74 |
75 | td{
76 | font-size: 15px;
77 | text-align: center;
78 | }
79 |
80 | .footer1{
81 | text-align: center;
82 | color: aliceblue;
83 | margin-top: 544px;
84 | }
85 |
86 | /* Home page */
87 |
88 | .home{
89 | /* background: url(./coffee-apple.jpg) no-repeat fixed; */
90 | font-family: Arial;
91 | /* height: 100%; */
92 | }
93 |
94 | .info{
95 | text-align: center;
96 | margin-top: 60px;
97 | }
98 |
99 | .info b,h3{
100 | font-weight:600;
101 | }
102 |
103 | /* .info h3:hover{
104 | color:steelblue;
105 | } */
106 | .info h3 {
107 | animation: color-change 2s infinite;
108 | }
109 |
110 | @keyframes color-change {
111 | 0% { color: steelblue; }
112 | 50% { color: black; }
113 | 100% { color: steelblue; }
114 | }
115 |
116 | .footer{
117 | text-align: center;
118 | margin-top: 141px;
119 | }
120 |
121 | .footer p{
122 | font-weight:600
123 | }
124 |
125 | #div1 {
126 | font-size:48px;
127 | font-weight:600;
128 | }
129 |
130 | #div1:hover{
131 | color: steelblue;
132 | }
133 |
134 | /* searchBar */
135 |
136 | .autocomplete {
137 | width: auto;
138 | text-align: center;
139 | margin-top: 8px;
140 | box-shadow: 0px 1px 5px 1px #000;
141 | padding: 0.1rem;
142 | }
143 |
144 | .autocomplete:hover {
145 | background: rgb(183, 187, 187);
146 | padding: 0.1rem;
147 | }
148 |
149 | #match-list{
150 | overflow: hidden;
151 | }
152 |
153 | .img{
154 | width: 35px;
155 | height: 35px;
156 | border-radius: 5px;
157 | }
158 |
159 | /* loader */
160 |
161 | .lds-roller {
162 | display: inline-block;
163 | position: relative;
164 | width: 80px;
165 | height: 80px;
166 | }
167 | .lds-roller div {
168 | animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
169 | transform-origin: 40px 40px;
170 | }
171 | .lds-roller div:after {
172 | content: " ";
173 | display: block;
174 | position: absolute;
175 | width: 7px;
176 | height: 7px;
177 | border-radius: 50%;
178 | background: black;
179 | margin: -4px 0 0 -4px;
180 | }
181 |
182 | .lds-roller div:nth-child(1) {
183 | animation-delay: -0.036s;
184 | }
185 | .lds-roller div:nth-child(1):after {
186 | top: 63px;
187 | left: 63px;
188 | }
189 | .lds-roller div:nth-child(2) {
190 | animation-delay: -0.072s;
191 | }
192 | .lds-roller div:nth-child(2):after {
193 | top: 68px;
194 | left: 56px;
195 | }
196 | .lds-roller div:nth-child(3) {
197 | animation-delay: -0.108s;
198 | }
199 | .lds-roller div:nth-child(3):after {
200 | top: 71px;
201 | left: 48px;
202 | }
203 | .lds-roller div:nth-child(4) {
204 | animation-delay: -0.144s;
205 | }
206 | .lds-roller div:nth-child(4):after {
207 | top: 72px;
208 | left: 40px;
209 | }
210 | .lds-roller div:nth-child(5) {
211 | animation-delay: -0.18s;
212 | }
213 | .lds-roller div:nth-child(5):after {
214 | top: 71px;
215 | left: 32px;
216 | }
217 | .lds-roller div:nth-child(6) {
218 | animation-delay: -0.216s;
219 | }
220 | .lds-roller div:nth-child(6):after {
221 | top: 68px;
222 | left: 24px;
223 | }
224 | .lds-roller div:nth-child(7) {
225 | animation-delay: -0.252s;
226 | }
227 | .lds-roller div:nth-child(7):after {
228 | top: 63px;
229 | left: 17px;
230 | }
231 | .lds-roller div:nth-child(8) {
232 | animation-delay: -0.288s;
233 | }
234 | .lds-roller div:nth-child(8):after {
235 | top: 56px;
236 | left: 12px;
237 | }
238 |
239 | @keyframes lds-roller {
240 | 0% {
241 | transform: rotate(0deg);
242 | }
243 | 100% {
244 | transform: rotate(360deg);
245 | }
246 | }
247 |
248 | .col-md-6{
249 | display: block;
250 | widows: 100%;
251 | height: auto;
252 |
253 |
254 | }
255 | /* ======= */
256 | /* Compare page */
257 |
258 |
259 | body {
260 | background-color: white;
261 | color: black;
262 | background-image: url("NormalTheme.jpeg"); /* Normal_Theme background */
263 | }
264 |
265 | .dark-mode {
266 | background-color: black;
267 | color: white;
268 | background-image: url("Dark_Theme.jpg"); /*Dark_theme background */
269 | }
270 | .loader{
271 | position: fixed;
272 | z-index: 999;
273 | top: 0;
274 | left: 0;
275 | width: 100%;
276 | height: 100%;
277 | background: white;
278 | display: flex;
279 | justify-content: center;
280 | align-items: center;
281 | }
282 |
283 | .loader > img {
284 | width: 100px;
285 |
286 | }
287 |
288 | .loader.hidden{
289 | animation: fadeOut 1s;
290 | animation-fill-mode: forwards;
291 |
292 | }
293 |
294 | @keyframes fadeOut{
295 | 100% {
296 | opacity: 0;
297 | visibility: hidden;
298 | }
299 | }
300 |
301 | ::placeholder{
302 | text-align: center;
303 | }
304 |
305 | .git{
306 | /* background: url(./coffee-apple.jpg) no-repeat fixed; */
307 | font-family: Arial;
308 | /* height: 100vh; */
309 | }
310 |
311 | .split {
312 | height: 80vh;
313 | width: 45%;
314 | position: fixed;
315 | z-index: 1;
316 | /* top: 0; */
317 | overflow-x: hidden;
318 | padding-top: 20px;
319 | margin: 3vw;
320 | }
321 |
322 | .left {
323 | left: 0;
324 | position: absolute;
325 | }
326 |
327 | .right {
328 | right: 0;
329 | position: absolute;
330 |
331 | }
332 | .centre{
333 | position:fixed;
334 | left: 25%;
335 | }
336 |
337 | .form-control{
338 | margin-left: auto;
339 | margin-right: auto;
340 | width: 300px;
341 | border-radius: 15px;
342 | }
343 |
344 | .btn{
345 | width: 180px;
346 | margin: auto;
347 | border-radius: 15px;
348 | }
349 |
350 | .class{
351 | margin-right: 20px !important;
352 | }
353 |
354 | @media only screen and (max-width: 500px) {
355 | .form-control{
356 | width: auto;
357 | border-radius: 15px;
358 | }
359 |
360 | .btn{
361 | width: auto;
362 | border-radius: 15px;
363 | }
364 | .git{
365 | height: 100vh;
366 | }
367 | .home{
368 | height: 100%;
369 | }
370 | }
371 |
372 | td{
373 | font-size: 15px;
374 | text-align: center;
375 | }
376 |
377 | .footer1{
378 | text-align: center;
379 | color: aliceblue;
380 | margin-top: 544px;
381 | }
382 |
383 | /* Home page */
384 |
385 | .home{
386 | /* background: url(./coffee-apple.jpg) no-repeat fixed; */
387 | font-family: Arial;
388 | /* height: 100%; */
389 | }
390 |
391 | .info{
392 | text-align: center;
393 | margin-top: 60px;
394 | }
395 |
396 | .info b,h3{
397 | font-weight:600;
398 | }
399 |
400 | /* .info h3:hover{
401 | color:steelblue;
402 | } */
403 | .info h3 {
404 | animation: color-change 2s infinite;
405 | }
406 |
407 | @keyframes color-change {
408 | 0% { color: steelblue; }
409 | 50% { color: black; }
410 | 100% { color: steelblue; }
411 | }
412 |
413 | .footer{
414 | text-align: center;
415 | margin-top: 141px;
416 | }
417 |
418 | .footer p{
419 | font-weight:600
420 | }
421 |
422 | #div1 {
423 | font-size:48px;
424 | font-weight:600;
425 | }
426 |
427 | #div1:hover{
428 | color: steelblue;
429 | }
430 |
431 | /* searchBar */
432 |
433 | .autocomplete {
434 | width: auto;
435 | text-align: center;
436 | margin-top: 8px;
437 | box-shadow: 0px 1px 5px 1px #000;
438 | padding: 0.1rem;
439 | }
440 |
441 | .autocomplete:hover {
442 | background: rgb(183, 187, 187);
443 | padding: 0.1rem;
444 | }
445 |
446 | #match-list{
447 | overflow: hidden;
448 | }
449 |
450 | .img{
451 | width: 35px;
452 | height: 35px;
453 | border-radius: 5px;
454 | }
455 |
456 | /* loader */
457 |
458 | .lds-roller {
459 | display: inline-block;
460 | position: relative;
461 | width: 80px;
462 | height: 80px;
463 | }
464 | .lds-roller div {
465 | animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
466 | transform-origin: 40px 40px;
467 | }
468 | .lds-roller div:after {
469 | content: " ";
470 | display: block;
471 | position: absolute;
472 | width: 7px;
473 | height: 7px;
474 | border-radius: 50%;
475 | background: black;
476 | margin: -4px 0 0 -4px;
477 | }
478 |
479 | .lds-roller div:nth-child(1) {
480 | animation-delay: -0.036s;
481 | }
482 | .lds-roller div:nth-child(1):after {
483 | top: 63px;
484 | left: 63px;
485 | }
486 | .lds-roller div:nth-child(2) {
487 | animation-delay: -0.072s;
488 | }
489 | .lds-roller div:nth-child(2):after {
490 | top: 68px;
491 | left: 56px;
492 | }
493 | .lds-roller div:nth-child(3) {
494 | animation-delay: -0.108s;
495 | }
496 | .lds-roller div:nth-child(3):after {
497 | top: 71px;
498 | left: 48px;
499 | }
500 | .lds-roller div:nth-child(4) {
501 | animation-delay: -0.144s;
502 | }
503 | .lds-roller div:nth-child(4):after {
504 | top: 72px;
505 | left: 40px;
506 | }
507 | .lds-roller div:nth-child(5) {
508 | animation-delay: -0.18s;
509 | }
510 | .lds-roller div:nth-child(5):after {
511 | top: 71px;
512 | left: 32px;
513 | }
514 | .lds-roller div:nth-child(6) {
515 | animation-delay: -0.216s;
516 | }
517 | .lds-roller div:nth-child(6):after {
518 | top: 68px;
519 | left: 24px;
520 | }
521 | .lds-roller div:nth-child(7) {
522 | animation-delay: -0.252s;
523 | }
524 | .lds-roller div:nth-child(7):after {
525 | top: 63px;
526 | left: 17px;
527 | }
528 | .lds-roller div:nth-child(8) {
529 | animation-delay: -0.288s;
530 | }
531 | .lds-roller div:nth-child(8):after {
532 | top: 56px;
533 | left: 12px;
534 | }
535 |
536 | @keyframes lds-roller {
537 | 0% {
538 | transform: rotate(0deg);
539 | }
540 | 100% {
541 | transform: rotate(360deg);
542 | }
543 | }
--------------------------------------------------------------------------------
11 | 
37 |
38 | 
81 | 