diff --git a/github-profiles/index.html b/github-profiles/index.html
new file mode 100644
index 0000000..5157144
--- /dev/null
+++ b/github-profiles/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+ Github Profiles
+
+
+
+
+
+
+
+
+
+
diff --git a/github-profiles/script.js b/github-profiles/script.js
new file mode 100644
index 0000000..e41f735
--- /dev/null
+++ b/github-profiles/script.js
@@ -0,0 +1,90 @@
+const APIURL = 'https://api.github.com/users/'
+
+const main = document.getElementById('main')
+const form = document.getElementById('form')
+const search = document.getElementById('search')
+
+async function getUser(username) {
+ try {
+ const { data } = await axios(APIURL + username)
+
+ createUserCard(data)
+ getRepos(username)
+ } catch(err) {
+ if(err.response.status == 404) {
+ createErrorCard('No profile with this username')
+ }
+ }
+}
+
+async function getRepos(username) {
+ try {
+ const { data } = await axios(APIURL + username + '/repos?sort=created')
+
+ addReposToCard(data)
+ } catch(err) {
+ createErrorCard('Problem fetching repos')
+ }
+}
+
+function createUserCard(user) {
+ const cardHTML = `
+
+
+
+
+
+
${user.name}
+
${user.bio}
+
+ - ${user.followers} Followers
+ - ${user.following} Following
+ - ${user.public_repos} Repos
+
+
+
+
+
+
${msg}
+
+ `
+
+ main.innerHTML = cardHTML
+}
+
+function addReposToCard(repos) {
+ const reposEl = document.getElementById('repos')
+
+ repos
+ .slice(0, 5)
+ .forEach(repo => {
+ const repoEl = document.createElement('a')
+ repoEl.classList.add('repo')
+ repoEl.href = repo.html_url
+ repoEl.target = '_blank'
+ repoEl.innerText = repo.name
+
+ reposEl.appendChild(repoEl)
+ })
+}
+
+form.addEventListener('submit', (e) => {
+ e.preventDefault()
+
+ const user = search.value
+
+ if(user) {
+ getUser(user)
+
+ search.value = ''
+ }
+})
+
diff --git a/github-profiles/style.css b/github-profiles/style.css
new file mode 100644
index 0000000..b648f88
--- /dev/null
+++ b/github-profiles/style.css
@@ -0,0 +1,113 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #2a2a72;
+ color: #fff;
+ font-family: 'Poppins', sans-serif;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ overflow: hidden;
+ margin: 0;
+}
+
+.user-form {
+ width: 100%;
+ max-width: 700px;
+}
+
+.user-form input {
+ width: 100%;
+ display: block;
+ background-color: #4c2885;
+ border: none;
+ border-radius: 10px;
+ color: #fff;
+ padding: 1rem;
+ margin-bottom: 2rem;
+ font-family: inherit;
+ font-size: 1rem;
+ box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
+ 0 15px 40px rgba(0, 0, 0, 0.1);
+}
+
+.user-form input::placeholder {
+ color: #bbb;
+}
+
+.user-form input:focus {
+ outline: none;
+}
+
+.card {
+ max-width: 800px;
+ background-color: #4c2885;
+ border-radius: 20px;
+ box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
+ 0 15px 40px rgba(0, 0, 0, 0.1);
+ display: flex;
+ padding: 3rem;
+ margin: 0 1.5rem;
+}
+
+.avatar {
+ border-radius: 50%;
+ border: 10px solid #2a2a72;
+ height: 150px;
+ width: 150px;
+}
+
+.user-info {
+ color: #eee;
+ margin-left: 2rem;
+}
+
+.user-info h2 {
+ margin-top: 0;
+}
+
+.user-info ul {
+ list-style-type: none;
+ display: flex;
+ justify-content: space-between;
+ padding: 0;
+ max-width: 400px;
+}
+
+.user-info ul li {
+ display: flex;
+ align-items: center;
+}
+
+.user-info ul li strong {
+ font-size: 0.9rem;
+ margin-left: 0.5rem;
+}
+
+.repo {
+ text-decoration: none;
+ color: #fff;
+ background-color: #212a72;
+ font-size: 0.7rem;
+ padding: 0.25rem 0.5rem;
+ margin-right: 0.5rem;
+ margin-bottom: 0.5rem;
+ display: inline-block;
+}
+
+@media (max-width: 500px) {
+ .card {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .user-form {
+ max-width: 400px;
+ }
+}