Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit b3f3c76

Browse files
HuXn-WebDevHuXn-WebDev
committedJun 22, 2023
Github Profile Clone
1 parent 0908960 commit b3f3c76

File tree

4 files changed

+719
-0
lines changed

4 files changed

+719
-0
lines changed
 

‎99. Github Profile Clone/app.js

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
const form = document.querySelector("form");
2+
const input = document.querySelector("input");
3+
const reposContainer = document.querySelector(".repos");
4+
const mainContainer = document.querySelector(".main-container");
5+
6+
const API = "https://api.github.com/users/";
7+
8+
async function fetchData(username) {
9+
try {
10+
const response = await fetch(`${API}${username}`);
11+
if (!response.ok) throw new Error(response.statusText);
12+
13+
const {
14+
avatar_url,
15+
bio,
16+
blog,
17+
company,
18+
followers,
19+
following,
20+
location,
21+
login,
22+
twitter_username,
23+
} = await response.json();
24+
25+
const html = `
26+
<div
27+
class="user-avatar"
28+
style="background: url(${avatar_url}) no-repeat center/cover"
29+
></div>
30+
<p class="user-name">${login}</p>
31+
<button class="follow">Follow</button>
32+
<p class="user-bio">${bio}</p>
33+
<div class="followers-info">
34+
<a href="#">
35+
<i class="fa-solid fa-person"></i>
36+
<span class="followers">${followers}</span> follower
37+
</a>
38+
39+
<a href='#'>
40+
<span class="following">${following} </span> following
41+
</a>
42+
43+
<div class="icon-container">
44+
<i class="fa-regular fa-building"></i>
45+
<a href="#" class="company">${company}</a>
46+
</div>
47+
<div class="icon-container">
48+
<i class="fa-sharp fa-solid fa-location-dot"></i>
49+
<a href="#" class="location">${location}</a>
50+
</div>
51+
<div class="icon-container">
52+
<i class="fa-regular fa-solid fa-link"></i>
53+
<a href="#" class="blog">${blog}</a>
54+
</div>
55+
<div class="icon-container">
56+
<i class="fa-brands fa-twitter"></i>
57+
<a href="#" class="twitter_username">@${twitter_username}</a>
58+
</div>
59+
</div>
60+
`;
61+
62+
const section = document.createElement("section");
63+
section.classList.add("about-user");
64+
section.innerHTML = html;
65+
mainContainer.insertAdjacentElement("afterbegin", section);
66+
} catch (error) {
67+
console.error(error);
68+
}
69+
}
70+
71+
async function fetchRepos(username) {
72+
try {
73+
const response = await fetch(`${API}${username}/subscriptions`);
74+
if (!response.ok) throw new Error(response.statusText);
75+
const data = await response.json();
76+
77+
data.forEach(
78+
({
79+
name,
80+
description,
81+
forks_count,
82+
language,
83+
watchers_count,
84+
git_url,
85+
}) => {
86+
const modifiedUrl = git_url
87+
.replace(/^git:/, "http:")
88+
.replace(/\.git$/, "");
89+
90+
const singleElement = document.createElement("div");
91+
singleElement.classList.add("repo-card");
92+
const html = `
93+
<a href=${modifiedUrl} class="repo-title">${name}</a>
94+
<p class="repo-subtitle">${description}</p>
95+
<div class="popularity">
96+
<p class="technology-used">${language}</p>
97+
<p class="stars"><i class="fa-regular fa-star"></i>${watchers_count}</p>
98+
<img src="./git-fork_1.svg" alt="Fork SVG" class="fork-svg">
99+
<span class="forked">${forks_count}</span>
100+
</div>
101+
102+
<p class="pill">Public</p>
103+
`;
104+
singleElement.innerHTML = html;
105+
reposContainer.append(singleElement);
106+
}
107+
);
108+
} catch (error) {
109+
console.error(error);
110+
}
111+
}
112+
113+
form.addEventListener("submit", async (e) => {
114+
e.preventDefault();
115+
const val = input.value;
116+
117+
if (val) {
118+
try {
119+
await fetchData(val);
120+
await fetchRepos(val);
121+
} catch (error) {
122+
console.log(error);
123+
} finally {
124+
input.value = "";
125+
}
126+
}
127+
128+
document
129+
.querySelector("input")
130+
.addEventListener("click", () => location.reload());
131+
});

‎99. Github Profile Clone/git-fork_1.svg

Lines changed: 39 additions & 0 deletions
Loading

‎99. Github Profile Clone/index.html

Lines changed: 289 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,289 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<title>Github Profile Clone</title>
6+
<link rel="stylesheet" href="style.css" />
7+
<link
8+
rel="stylesheet"
9+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
10+
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
11+
crossorigin="anonymous"
12+
referrerpolicy="no-referrer"
13+
/>
14+
</head>
15+
<body>
16+
<nav>
17+
<i class="fa-brands fa-github"></i>
18+
<section class="nav-container">
19+
<ul>
20+
<li>
21+
<a href="#">Product <i class="fa-solid fa-chevron-down"></i> </a>
22+
</li>
23+
<li>
24+
<a href="#">Solutions <i class="fa-solid fa-chevron-down"></i> </a>
25+
</li>
26+
<li><a href="#">Open Source</a></li>
27+
<li><a href="#">Pricing</a></li>
28+
</ul>
29+
30+
<form>
31+
<input type="text" placeholder="Search" />
32+
</form>
33+
</section>
34+
35+
<div class="btns-container">
36+
<a href="#">Sign In</a>
37+
<button>Sign Up</button>
38+
</div>
39+
</nav>
40+
41+
<header>
42+
<ul>
43+
<li>
44+
<a href="#" class="active">
45+
<i class="fa-solid fa-book-open"></i> Overview
46+
</a>
47+
</li>
48+
<li>
49+
<a href="#"> <i class="fa-solid fa-folder"></i> Repositories </a>
50+
</li>
51+
<li>
52+
<a href="#"> <i class="fa-solid fa-cloud"></i> Projects </a>
53+
</li>
54+
<li>
55+
<a href="#"> <i class="fa-solid fa-cube"></i> Packages </a>
56+
</li>
57+
<li>
58+
<a href="#"> <i class="fa-solid fa-star"></i> Stars </a>
59+
</li>
60+
</ul>
61+
</header>
62+
63+
<section class="main-container">
64+
<main>
65+
<p>Popular Repositories</p>
66+
<div class="repos">
67+
<!-- <div class="repo-card">
68+
<a href="#" class="repo-title">HTML-CSS-JavaScript-100-Projects</a>
69+
<p class="repo-subtitle">Build 100+ projects in 100 days [free]</p>
70+
71+
<div class="popularity">
72+
<p class="technology-used">HTML</p>
73+
<div class="stars"><i class="fa-regular fa-star"></i>35</div>
74+
75+
<div class="fork">
76+
<svg
77+
version="1.1"
78+
id="Layer_1"
79+
xmlns="http://www.w3.org/2000/svg"
80+
xmlns:xlink="http://www.w3.org/1999/xlink"
81+
x="0px"
82+
y="0px"
83+
viewBox="0 0 512 512"
84+
style="enable-background: new 0 0 512 512"
85+
xml:space="preserve"
86+
fill="#4a515d"
87+
class="fork-svg"
88+
>
89+
<g>
90+
<path
91+
d="M256,369.8v28.4c15.7,0,28.4,12.8,28.4,28.4c0,15.7-12.8,28.4-28.4,28.4c-15.7,0-28.4-12.8-28.4-28.4
92+
c0-15.7,12.8-28.4,28.4-28.4V369.8v-28.4c-47.1,0-85.3,38.2-85.3,85.3c0,47.1,38.2,85.3,85.3,85.3c47.1,0,85.3-38.2,85.3-85.3
93+
c0-47.1-38.2-85.3-85.3-85.3V369.8z"
94+
/>
95+
<path
96+
d="M113.8,28.4v28.4c15.7,0,28.4,12.8,28.4,28.4c0,15.7-12.8,28.4-28.4,28.4c-15.7,0-28.4-12.8-28.4-28.4
97+
c0-15.7,12.8-28.4,28.4-28.4V28.4V0C66.6,0,28.5,38.2,28.4,85.3c0,47.1,38.2,85.3,85.3,85.3c47.1,0,85.3-38.2,85.3-85.3
98+
c0-47.1-38.2-85.3-85.3-85.3V28.4z"
99+
/>
100+
<path
101+
d="M398.2,28.4v28.4c15.7,0,28.4,12.8,28.4,28.4c0,15.7-12.8,28.4-28.4,28.4c-15.7,0-28.4-12.8-28.4-28.4
102+
c0-15.7,12.8-28.4,28.4-28.4V28.4V0c-47.1,0-85.3,38.2-85.3,85.3c0,47.1,38.2,85.3,85.3,85.3c47.1,0,85.3-38.2,85.3-85.3
103+
c0-47.1-38.2-85.3-85.3-85.3V28.4z"
104+
/>
105+
<path
106+
d="M85.3,142.2v56.9c0,47.1,38.2,85.3,85.3,85.3h170.7c47.1,0,85.3-38.2,85.3-85.3v-56.9c0-15.7-12.7-28.4-28.4-28.4
107+
s-28.4,12.7-28.4,28.4v56.9c0,15.7-12.8,28.4-28.4,28.4H170.7c-15.7,0-28.4-12.8-28.4-28.4l0-56.9c0-15.7-12.7-28.4-28.4-28.4
108+
S85.3,126.5,85.3,142.2z"
109+
/>
110+
<path
111+
d="M227.6,256v113.8c0,15.7,12.7,28.4,28.4,28.4c15.7,0,28.4-12.7,28.4-28.4V256c0-15.7-12.7-28.4-28.4-28.4
112+
C240.3,227.6,227.6,240.3,227.6,256"
113+
/>
114+
</g>
115+
</svg>
116+
<span class="forked">20</span>
117+
</div>
118+
</div>
119+
<p class="pill">Public</p>
120+
</div>
121+
<div class="repo-card">
122+
<a href="#" class="repo-title">HTML-CSS-JavaScript-100-Projects</a>
123+
<p class="repo-subtitle">Build 100+ projects in 100 days [free]</p>
124+
125+
<div class="popularity">
126+
<p class="technology-used">HTML</p>
127+
<div class="stars"><i class="fa-regular fa-star"></i>35</div>
128+
129+
<div class="fork">
130+
<svg
131+
version="1.1"
132+
id="Layer_1"
133+
xmlns="http://www.w3.org/2000/svg"
134+
xmlns:xlink="http://www.w3.org/1999/xlink"
135+
x="0px"
136+
y="0px"
137+
viewBox="0 0 512 512"
138+
style="enable-background: new 0 0 512 512"
139+
xml:space="preserve"
140+
fill="#4a515d"
141+
class="fork-svg"
142+
>
143+
<g>
144+
<path
145+
d="M256,369.8v28.4c15.7,0,28.4,12.8,28.4,28.4c0,15.7-12.8,28.4-28.4,28.4c-15.7,0-28.4-12.8-28.4-28.4
146+
c0-15.7,12.8-28.4,28.4-28.4V369.8v-28.4c-47.1,0-85.3,38.2-85.3,85.3c0,47.1,38.2,85.3,85.3,85.3c47.1,0,85.3-38.2,85.3-85.3
147+
c0-47.1-38.2-85.3-85.3-85.3V369.8z"
148+
/>
149+
<path
150+
d="M113.8,28.4v28.4c15.7,0,28.4,12.8,28.4,28.4c0,15.7-12.8,28.4-28.4,28.4c-15.7,0-28.4-12.8-28.4-28.4
151+
c0-15.7,12.8-28.4,28.4-28.4V28.4V0C66.6,0,28.5,38.2,28.4,85.3c0,47.1,38.2,85.3,85.3,85.3c47.1,0,85.3-38.2,85.3-85.3
152+
c0-47.1-38.2-85.3-85.3-85.3V28.4z"
153+
/>
154+
<path
155+
d="M398.2,28.4v28.4c15.7,0,28.4,12.8,28.4,28.4c0,15.7-12.8,28.4-28.4,28.4c-15.7,0-28.4-12.8-28.4-28.4
156+
c0-15.7,12.8-28.4,28.4-28.4V28.4V0c-47.1,0-85.3,38.2-85.3,85.3c0,47.1,38.2,85.3,85.3,85.3c47.1,0,85.3-38.2,85.3-85.3
157+
c0-47.1-38.2-85.3-85.3-85.3V28.4z"
158+
/>
159+
<path
160+
d="M85.3,142.2v56.9c0,47.1,38.2,85.3,85.3,85.3h170.7c47.1,0,85.3-38.2,85.3-85.3v-56.9c0-15.7-12.7-28.4-28.4-28.4
161+
s-28.4,12.7-28.4,28.4v56.9c0,15.7-12.8,28.4-28.4,28.4H170.7c-15.7,0-28.4-12.8-28.4-28.4l0-56.9c0-15.7-12.7-28.4-28.4-28.4
162+
S85.3,126.5,85.3,142.2z"
163+
/>
164+
<path
165+
d="M227.6,256v113.8c0,15.7,12.7,28.4,28.4,28.4c15.7,0,28.4-12.7,28.4-28.4V256c0-15.7-12.7-28.4-28.4-28.4
166+
C240.3,227.6,227.6,240.3,227.6,256"
167+
/>
168+
</g>
169+
</svg>
170+
<span class="forked">20</span>
171+
</div>
172+
</div>
173+
<p class="pill">Public</p>
174+
</div>
175+
<div class="repo-card">
176+
<a href="#" class="repo-title">HTML-CSS-JavaScript-100-Projects</a>
177+
<p class="repo-subtitle">Build 100+ projects in 100 days [free]</p>
178+
179+
<div class="popularity">
180+
<p class="technology-used">HTML</p>
181+
<div class="stars"><i class="fa-regular fa-star"></i>35</div>
182+
183+
<div class="fork">
184+
<svg
185+
version="1.1"
186+
id="Layer_1"
187+
xmlns="http://www.w3.org/2000/svg"
188+
xmlns:xlink="http://www.w3.org/1999/xlink"
189+
x="0px"
190+
y="0px"
191+
viewBox="0 0 512 512"
192+
style="enable-background: new 0 0 512 512"
193+
xml:space="preserve"
194+
fill="#4a515d"
195+
class="fork-svg"
196+
>
197+
<g>
198+
<path
199+
d="M256,369.8v28.4c15.7,0,28.4,12.8,28.4,28.4c0,15.7-12.8,28.4-28.4,28.4c-15.7,0-28.4-12.8-28.4-28.4
200+
c0-15.7,12.8-28.4,28.4-28.4V369.8v-28.4c-47.1,0-85.3,38.2-85.3,85.3c0,47.1,38.2,85.3,85.3,85.3c47.1,0,85.3-38.2,85.3-85.3
201+
c0-47.1-38.2-85.3-85.3-85.3V369.8z"
202+
/>
203+
<path
204+
d="M113.8,28.4v28.4c15.7,0,28.4,12.8,28.4,28.4c0,15.7-12.8,28.4-28.4,28.4c-15.7,0-28.4-12.8-28.4-28.4
205+
c0-15.7,12.8-28.4,28.4-28.4V28.4V0C66.6,0,28.5,38.2,28.4,85.3c0,47.1,38.2,85.3,85.3,85.3c47.1,0,85.3-38.2,85.3-85.3
206+
c0-47.1-38.2-85.3-85.3-85.3V28.4z"
207+
/>
208+
<path
209+
d="M398.2,28.4v28.4c15.7,0,28.4,12.8,28.4,28.4c0,15.7-12.8,28.4-28.4,28.4c-15.7,0-28.4-12.8-28.4-28.4
210+
c0-15.7,12.8-28.4,28.4-28.4V28.4V0c-47.1,0-85.3,38.2-85.3,85.3c0,47.1,38.2,85.3,85.3,85.3c47.1,0,85.3-38.2,85.3-85.3
211+
c0-47.1-38.2-85.3-85.3-85.3V28.4z"
212+
/>
213+
<path
214+
d="M85.3,142.2v56.9c0,47.1,38.2,85.3,85.3,85.3h170.7c47.1,0,85.3-38.2,85.3-85.3v-56.9c0-15.7-12.7-28.4-28.4-28.4
215+
s-28.4,12.7-28.4,28.4v56.9c0,15.7-12.8,28.4-28.4,28.4H170.7c-15.7,0-28.4-12.8-28.4-28.4l0-56.9c0-15.7-12.7-28.4-28.4-28.4
216+
S85.3,126.5,85.3,142.2z"
217+
/>
218+
<path
219+
d="M227.6,256v113.8c0,15.7,12.7,28.4,28.4,28.4c15.7,0,28.4-12.7,28.4-28.4V256c0-15.7-12.7-28.4-28.4-28.4
220+
C240.3,227.6,227.6,240.3,227.6,256"
221+
/>
222+
</g>
223+
</svg>
224+
<span class="forked">20</span>
225+
</div>
226+
</div>
227+
<p class="pill">Public</p>
228+
</div>
229+
<div class="repo-card">
230+
<a href="#" class="repo-title">HTML-CSS-JavaScript-100-Projects</a>
231+
<p class="repo-subtitle">Build 100+ projects in 100 days [free]</p>
232+
233+
<div class="popularity">
234+
<p class="technology-used">HTML</p>
235+
<div class="stars"><i class="fa-regular fa-star"></i>35</div>
236+
237+
<div class="fork">
238+
<svg
239+
version="1.1"
240+
id="Layer_1"
241+
xmlns="http://www.w3.org/2000/svg"
242+
xmlns:xlink="http://www.w3.org/1999/xlink"
243+
x="0px"
244+
y="0px"
245+
viewBox="0 0 512 512"
246+
style="enable-background: new 0 0 512 512"
247+
xml:space="preserve"
248+
fill="#4a515d"
249+
class="fork-svg"
250+
>
251+
<g>
252+
<path
253+
d="M256,369.8v28.4c15.7,0,28.4,12.8,28.4,28.4c0,15.7-12.8,28.4-28.4,28.4c-15.7,0-28.4-12.8-28.4-28.4
254+
c0-15.7,12.8-28.4,28.4-28.4V369.8v-28.4c-47.1,0-85.3,38.2-85.3,85.3c0,47.1,38.2,85.3,85.3,85.3c47.1,0,85.3-38.2,85.3-85.3
255+
c0-47.1-38.2-85.3-85.3-85.3V369.8z"
256+
/>
257+
<path
258+
d="M113.8,28.4v28.4c15.7,0,28.4,12.8,28.4,28.4c0,15.7-12.8,28.4-28.4,28.4c-15.7,0-28.4-12.8-28.4-28.4
259+
c0-15.7,12.8-28.4,28.4-28.4V28.4V0C66.6,0,28.5,38.2,28.4,85.3c0,47.1,38.2,85.3,85.3,85.3c47.1,0,85.3-38.2,85.3-85.3
260+
c0-47.1-38.2-85.3-85.3-85.3V28.4z"
261+
/>
262+
<path
263+
d="M398.2,28.4v28.4c15.7,0,28.4,12.8,28.4,28.4c0,15.7-12.8,28.4-28.4,28.4c-15.7,0-28.4-12.8-28.4-28.4
264+
c0-15.7,12.8-28.4,28.4-28.4V28.4V0c-47.1,0-85.3,38.2-85.3,85.3c0,47.1,38.2,85.3,85.3,85.3c47.1,0,85.3-38.2,85.3-85.3
265+
c0-47.1-38.2-85.3-85.3-85.3V28.4z"
266+
/>
267+
<path
268+
d="M85.3,142.2v56.9c0,47.1,38.2,85.3,85.3,85.3h170.7c47.1,0,85.3-38.2,85.3-85.3v-56.9c0-15.7-12.7-28.4-28.4-28.4
269+
s-28.4,12.7-28.4,28.4v56.9c0,15.7-12.8,28.4-28.4,28.4H170.7c-15.7,0-28.4-12.8-28.4-28.4l0-56.9c0-15.7-12.7-28.4-28.4-28.4
270+
S85.3,126.5,85.3,142.2z"
271+
/>
272+
<path
273+
d="M227.6,256v113.8c0,15.7,12.7,28.4,28.4,28.4c15.7,0,28.4-12.7,28.4-28.4V256c0-15.7-12.7-28.4-28.4-28.4
274+
C240.3,227.6,227.6,240.3,227.6,256"
275+
/>
276+
</g>
277+
</svg>
278+
<span class="forked">20</span>
279+
</div>
280+
</div>
281+
<p class="pill">Public</p>
282+
</div> -->
283+
</div>
284+
</main>
285+
</section>
286+
287+
<script src="app.js"></script>
288+
</body>
289+
</html>

‎99. Github Profile Clone/style.css

Lines changed: 260 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
a {
8+
text-decoration: none;
9+
}
10+
11+
:root {
12+
--primary-color: #161b22;
13+
--secondary-color: #0d1117;
14+
}
15+
16+
body {
17+
background: var(--secondary-color);
18+
font-family: Hubot-Sans, sans-serif;
19+
font-weight: normal;
20+
}
21+
22+
/* ************************** Navigation ************************** */
23+
nav {
24+
background: var(--primary-color);
25+
padding: 15px;
26+
display: flex;
27+
justify-content: center;
28+
align-items: center;
29+
}
30+
31+
.nav-container {
32+
display: flex;
33+
justify-content: space-between;
34+
align-items: center;
35+
width: 100%;
36+
}
37+
38+
nav ul li {
39+
display: inline;
40+
margin: 10px;
41+
}
42+
43+
ul li a {
44+
text-decoration: none;
45+
color: #fff;
46+
font-size: 14px;
47+
}
48+
49+
nav form {
50+
width: 20%;
51+
}
52+
53+
nav form input {
54+
background: var(--secondary-color);
55+
padding: 7px;
56+
border: none;
57+
border-radius: 5px;
58+
width: 100%;
59+
border: 1px solid #4a515d;
60+
color: #fff;
61+
}
62+
63+
nav form input::placeholder {
64+
color: #fff;
65+
}
66+
67+
/* ************************** Header ************************** */
68+
header {
69+
border-bottom: 0.6px solid #242424;
70+
}
71+
72+
.active {
73+
border-bottom: 2px solid rgb(255, 102, 0);
74+
padding-bottom: 20px;
75+
}
76+
77+
header ul {
78+
display: flex;
79+
justify-content: center;
80+
align-items: center;
81+
}
82+
83+
header ul li {
84+
list-style: none;
85+
margin: 20px;
86+
}
87+
88+
.btns-container {
89+
display: flex;
90+
justify-content: center;
91+
align-items: center;
92+
width: 210px;
93+
margin-left: 20px;
94+
}
95+
96+
.btns-container a {
97+
color: #fff;
98+
}
99+
100+
.btns-container button {
101+
background: transparent;
102+
border: none;
103+
margin-left: 20px;
104+
border: 1px solid #585d63;
105+
padding: 6px 20px;
106+
color: #fff;
107+
border-radius: 5px;
108+
cursor: pointer;
109+
}
110+
111+
.main-container {
112+
display: flex;
113+
}
114+
115+
/* ************************** Header ************************** */
116+
.about-user {
117+
width: 30%;
118+
margin-left: 30px;
119+
color: #fff;
120+
}
121+
122+
.about-user .user-avatar {
123+
background-image: url("https://avatars.githubusercontent.com/u/85052811?v=4");
124+
background-repeat: no-repeat;
125+
background-size: cover;
126+
width: 300px;
127+
height: 300px;
128+
transform: translateY(-20px);
129+
border-radius: 100%;
130+
}
131+
132+
.user-name {
133+
color: #585d63;
134+
font-size: 20px;
135+
margin: 10px 0;
136+
font-weight: normal;
137+
}
138+
139+
button.follow {
140+
width: 70%;
141+
background: #21262d;
142+
color: #fff;
143+
cursor: pointer;
144+
border: none;
145+
border-radius: 4px;
146+
padding: 6px 5px;
147+
margin-bottom: 20px;
148+
}
149+
150+
.followers-info {
151+
margin: 15px 0;
152+
}
153+
154+
.followers-info a {
155+
text-decoration: none;
156+
color: #fff;
157+
}
158+
159+
.followers-info span {
160+
color: #545c66;
161+
}
162+
163+
.company,
164+
.location,
165+
.blog,
166+
.twitter_username {
167+
margin: 10px 0;
168+
color: #dce9f7;
169+
font-size: 13px;
170+
}
171+
172+
/* ************************** REPOSITORIES ************************** */
173+
main {
174+
color: #fff;
175+
margin-top: 20px;
176+
margin-left: 1rem;
177+
}
178+
179+
main p {
180+
margin-bottom: 20px;
181+
}
182+
183+
.repo-card {
184+
border: 1px solid #4a515d;
185+
border-radius: 5px;
186+
width: 43%;
187+
padding: 10px;
188+
margin: 10px;
189+
position: relative;
190+
padding-top: 1.3rem;
191+
}
192+
193+
.repo-title {
194+
text-decoration: non;
195+
color: #549ef3;
196+
font-weight: 500;
197+
margin-top: 3rem;
198+
font-size: 13px;
199+
}
200+
201+
.repo-subtitle {
202+
font-size: 11px;
203+
margin-top: 15px;
204+
color: #868686;
205+
}
206+
207+
.popularity {
208+
display: flex;
209+
color: #585c5e;
210+
}
211+
212+
.stars {
213+
margin-right: 20px;
214+
color: #585c5e;
215+
}
216+
217+
.repos {
218+
display: flex;
219+
flex-wrap: wrap;
220+
}
221+
222+
.pill {
223+
border: 1px solid #4a515d;
224+
color: #a3acbc;
225+
width: 50px;
226+
padding: 3px 10px;
227+
border-radius: 100px;
228+
font-size: 10px;
229+
text-align: center;
230+
position: absolute;
231+
top: 10px;
232+
right: 10px;
233+
}
234+
235+
/* ************************** STYLING ICONS ************************** */
236+
.icon-container {
237+
margin: 5px 0;
238+
}
239+
240+
i {
241+
color: #4a515d;
242+
margin-right: 5px;
243+
}
244+
245+
.fa-github {
246+
font-size: 2rem;
247+
color: #fff;
248+
margin-right: 1rem;
249+
}
250+
251+
section.fork {
252+
display: flex;
253+
align-items: center;
254+
}
255+
256+
.fork-svg {
257+
width: 14px;
258+
margin-bottom: 20px;
259+
margin-right: 6px;
260+
}

0 commit comments

Comments
 (0)
Please sign in to comment.