diff --git a/my code/28-github-profiles/index.html b/my code/28-github-profiles/index.html
new file mode 100644
index 0000000..b2deb03
--- /dev/null
+++ b/my code/28-github-profiles/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+ 28 github profiles
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/my code/28-github-profiles/script.js b/my code/28-github-profiles/script.js
new file mode 100644
index 0000000..3281579
--- /dev/null
+++ b/my code/28-github-profiles/script.js
@@ -0,0 +1,108 @@
+const form = document.getElementById("form");
+const search = document.getElementById("search");
+const profile = document.getElementById("profile");
+
+let searchVal = "";
+
+form.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ searchVal = search.value;
+ fetchURL("https://api.github.com/users/" + searchVal).then((data) => {
+ displayData(data);
+ });
+});
+
+async function fetchURL(url) {
+ const res = await fetch(url);
+ const data = await res.json();
+
+ return data;
+}
+
+function displayData(user) {
+ profile.innerHTML = "";
+
+ const {
+ avatar_url,
+ bio,
+ followers,
+ following,
+ name,
+ public_repos,
+ starred_url,
+ } = user;
+
+ const container = document.createElement("div");
+ container.classList.add("container");
+
+ const leftDiv = document.createElement("div");
+ leftDiv.classList.add("left");
+
+ const img = document.createElement("img");
+ img.src = avatar_url;
+ img.alt = name;
+
+ const rightDiv = document.createElement("div");
+ rightDiv.classList.add("right");
+
+ const h2 = document.createElement("h2");
+ h2.classList.add("name");
+ h2.append(document.createTextNode(name));
+
+ const p = document.createElement("p");
+ p.classList.add("bio");
+ p.append(document.createTextNode(bio));
+
+ const panelWrapper = document.createElement("section");
+
+ const followersPanel = document.createElement("div");
+
+ const followersNum = document.createElement("span");
+ followersNum.classList.add("value");
+ followersNum.append(document.createTextNode(followers));
+
+ const followersLabel = document.createElement("strong");
+ followersLabel.append(document.createTextNode("Followers"));
+
+ const followingPanel = document.createElement("div");
+
+ const followingNum = document.createElement("span");
+ followingNum.classList.add("value");
+ followingNum.append(document.createTextNode(following));
+
+ const followingLabel = document.createElement("strong");
+ followingLabel.append(document.createTextNode("Following"));
+
+ const reposPanel = document.createElement("div");
+
+ const reposNum = document.createElement("span");
+ reposNum.classList.add("value");
+ reposNum.append(document.createTextNode(public_repos));
+
+ const reposLabel = document.createElement("strong");
+ reposLabel.append(document.createTextNode("Repos"));
+
+ profile.append(container);
+
+ container.append(leftDiv);
+ leftDiv.append(img);
+
+ container.append(rightDiv);
+ rightDiv.append(h2);
+ rightDiv.append(p);
+ rightDiv.append(panelWrapper);
+
+ panelWrapper.append(followersPanel);
+ panelWrapper.append(followingPanel);
+ panelWrapper.append(reposPanel);
+
+ followersPanel.append(followersNum);
+ followersPanel.append(followersLabel);
+
+ followingPanel.append(followingNum);
+ followingPanel.append(followingLabel);
+
+ reposPanel.append(reposNum);
+ reposPanel.append(reposLabel);
+}
diff --git a/my code/28-github-profiles/style.css b/my code/28-github-profiles/style.css
new file mode 100644
index 0000000..175b075
--- /dev/null
+++ b/my code/28-github-profiles/style.css
@@ -0,0 +1,78 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background: #2a2a72;
+ font-family: Arial, Helvetica, sans-serif;
+ color: #fff;
+}
+
+input {
+ width: 600px;
+ padding: 20px 15px;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 20px;
+ background-color: #4c2885;
+ border: unset;
+ outline: none;
+ margin-bottom: 30px;
+ border-radius: 10px;
+ color: #eeeeee;
+}
+
+input::placeholder {
+ color: #c4c4c4;
+}
+
+.container {
+ background: #4c2885;
+ padding: 50px;
+ border-radius: 20px;
+ display: flex;
+ max-width: 800px;
+}
+
+.left {
+ min-width: 150px;
+ min-height: 150px;
+ border-radius: 50%;
+ overflow: hidden;
+ margin-right: 30px;
+ max-width: 150px;
+ max-height: 150px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #2a2a72;
+}
+
+.left img {
+ width: 90%;
+ height: 90%;
+ border-radius: 50%;
+}
+
+.name {
+ margin-bottom: 30px;
+}
+
+.bio {
+ margin-bottom: 20px;
+}
+
+section {
+ display: flex;
+ justify-content: space-between;
+}
+
+.value {
+ margin-right: 10px;
+}