-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
design: frontend ui for github profiles project
- Loading branch information
1 parent
3cd5a4c
commit 3612e28
Showing
10 changed files
with
2,519 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
pnpm-debug.log* | ||
lerna-debug.log* | ||
|
||
node_modules | ||
dist | ||
dist-ssr | ||
*.local | ||
|
||
# Editor directories and files | ||
.vscode/* | ||
!.vscode/extensions.json | ||
.idea | ||
.DS_Store | ||
*.suo | ||
*.ntvs* | ||
*.njsproj | ||
*.sln | ||
*.sw? |
241 changes: 241 additions & 0 deletions
241
JavaScript/javaScriptDom/05-github-API-Project/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,241 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<link rel="icon" type="image/svg+xml" href="" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>intern App</title> | ||
<link rel="stylesheet" href="./src/css/main.css" /> | ||
</head> | ||
<body class="bg-[#d1d1d79f]"> | ||
<header | ||
class="px-8 py-4 shadow-md font-poppins flex items-center justify-between bg-white" | ||
> | ||
<div> | ||
<h2 class="text-xl font-semibold"> | ||
<span class="text-[#0dba4b]">Interns </span>profiles | ||
</h2> | ||
</div> | ||
<nav> | ||
<button | ||
class="bg-[#0dba4b] text-white font-semibold px-4 py-1 rounded-md" | ||
> | ||
<a>GitHub </a> | ||
</button> | ||
</nav> | ||
</header> | ||
<main | ||
id="main" | ||
class="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 sm:px-14 items-center justify-center gap-6 px-8 py-10 lg:px-8 font-poppins" | ||
> | ||
<!-- card --> | ||
<section class="bg-white shadow-md p-4 rounded-md"> | ||
<!-- img div --> | ||
<div class="flex justify-center"> | ||
<img | ||
class="rounded-full object-cover size-28 border-4 border-[#0dba4b]" | ||
src="https://avatars.githubusercontent.com/u/95121969?v=4" | ||
alt="" | ||
/> | ||
</div> | ||
<!-- datails --> | ||
<div class="flex flex-col items-center justify-center gap-4 mt-2"> | ||
<!-- name --> | ||
<div class="flex flex-col items-center gap-1"> | ||
<h3 class="text-lg font-semibold">Vijayavedhasekaran</h3> | ||
<p class="text-xs font-normal">FullStack devloper</p> | ||
</div> | ||
<div class="flex items-center gap-3"> | ||
<button | ||
class="border-[#0dba4b] border-2 font-inter text-black text-sm font-semibold px-4 py-1 rounded-md flex items-center gap-1" | ||
> | ||
<span> | ||
<svg | ||
xmlns="http://www.w3.org/2000/svg" | ||
width="20" | ||
height="20" | ||
viewBox="0 0 16 16" | ||
id="github" | ||
> | ||
<path | ||
d="M7.999 0C3.582 0 0 3.596 0 8.032a8.031 8.031 0 0 0 5.472 7.621c.4.074.546-.174.546-.387 0-.191-.007-.696-.011-1.366-2.225.485-2.695-1.077-2.695-1.077-.363-.928-.888-1.175-.888-1.175-.727-.498.054-.488.054-.488.803.057 1.225.828 1.225.828.714 1.227 1.873.873 2.329.667.072-.519.279-.873.508-1.074-1.776-.203-3.644-.892-3.644-3.969 0-.877.312-1.594.824-2.156-.083-.203-.357-1.02.078-2.125 0 0 .672-.216 2.2.823a7.633 7.633 0 0 1 2.003-.27 7.65 7.65 0 0 1 2.003.271c1.527-1.039 2.198-.823 2.198-.823.436 1.106.162 1.922.08 2.125.513.562.822 1.279.822 2.156 0 3.085-1.87 3.764-3.652 3.963.287.248.543.738.543 1.487 0 1.074-.01 1.94-.01 2.203 0 .215.144.465.55.386A8.032 8.032 0 0 0 16 8.032C16 3.596 12.418 0 7.999 0z" | ||
></path></svg | ||
></span> | ||
Profile | ||
</button> | ||
|
||
<button | ||
class="bg-[#0dba4b] border-[#0dba4b] border-2 font-inter text-white text-sm font-semibold px-5 py-1 rounded-md flex items-center gap-1" | ||
> | ||
<span> | ||
<svg | ||
width="20" | ||
height="20" | ||
viewBox="0 0 92 114" | ||
fill="none" | ||
xmlns="http://www.w3.org/2000/svg" | ||
> | ||
<path | ||
d="M76 67C61.1667 67 31.1 67 27.5 67C23 67 16 68 15 75.5" | ||
stroke="currentcolor" | ||
stroke-width="10" | ||
/> | ||
<path | ||
d="M29 82C29 80.8954 29.8954 80 31 80H49C50.1046 80 51 80.8954 51 82V101.89C51 102.733 50.0197 103.198 49.3668 102.664L41.2665 96.0362C40.5298 95.4334 39.4703 95.4334 38.7335 96.0362L30.6332 102.664C29.9803 103.198 29 102.733 29 101.89V82Z" | ||
fill="currentcolor" | ||
/> | ||
<path | ||
d="M62 87L75 87C75.5523 87 76 86.5523 76 86L76 17C76 16.4477 75.5523 16 75 16L28 16C18.5 16 15 23 15 28C15 43.8334 15 59.6667 15 75.5C15 78.6619 16.3997 82.6236 19.8312 85.1091" | ||
stroke="currentcolor" | ||
stroke-width="10" | ||
stroke-linecap="round" | ||
/> | ||
</svg> | ||
</span> | ||
repos | ||
</button> | ||
</div> | ||
</div> | ||
</section> | ||
<!-- card --> | ||
<section class="bg-white shadow-md p-4 rounded-md"> | ||
<!-- img div --> | ||
<div class="flex justify-center"> | ||
<img | ||
class="rounded-full object-cover size-28 border-4 border-[#0dba4b]" | ||
src="https://avatars.githubusercontent.com/u/95121969?v=4" | ||
alt="" | ||
/> | ||
</div> | ||
<!-- datails --> | ||
<div class="flex flex-col items-center justify-center gap-4 mt-2"> | ||
<!-- name --> | ||
<div class="flex flex-col items-center gap-1"> | ||
<h3 class="text-lg font-semibold">Vijayavedhasekaran</h3> | ||
<p class="text-xs font-normal">FullStack devloper</p> | ||
</div> | ||
<div class="flex items-center gap-3"> | ||
<button | ||
class="border-[#0dba4b] border-2 font-inter text-black text-sm font-semibold px-4 py-1 rounded-md flex items-center gap-1" | ||
> | ||
<span> | ||
<svg | ||
xmlns="http://www.w3.org/2000/svg" | ||
width="20" | ||
height="20" | ||
viewBox="0 0 16 16" | ||
id="github" | ||
> | ||
<path | ||
d="M7.999 0C3.582 0 0 3.596 0 8.032a8.031 8.031 0 0 0 5.472 7.621c.4.074.546-.174.546-.387 0-.191-.007-.696-.011-1.366-2.225.485-2.695-1.077-2.695-1.077-.363-.928-.888-1.175-.888-1.175-.727-.498.054-.488.054-.488.803.057 1.225.828 1.225.828.714 1.227 1.873.873 2.329.667.072-.519.279-.873.508-1.074-1.776-.203-3.644-.892-3.644-3.969 0-.877.312-1.594.824-2.156-.083-.203-.357-1.02.078-2.125 0 0 .672-.216 2.2.823a7.633 7.633 0 0 1 2.003-.27 7.65 7.65 0 0 1 2.003.271c1.527-1.039 2.198-.823 2.198-.823.436 1.106.162 1.922.08 2.125.513.562.822 1.279.822 2.156 0 3.085-1.87 3.764-3.652 3.963.287.248.543.738.543 1.487 0 1.074-.01 1.94-.01 2.203 0 .215.144.465.55.386A8.032 8.032 0 0 0 16 8.032C16 3.596 12.418 0 7.999 0z" | ||
></path></svg | ||
></span> | ||
Profile | ||
</button> | ||
|
||
<button | ||
class="bg-[#0dba4b] border-[#0dba4b] border-2 font-inter text-white text-sm font-semibold px-5 py-1 rounded-md flex items-center gap-1" | ||
> | ||
<span> | ||
<svg | ||
width="20" | ||
height="20" | ||
viewBox="0 0 92 114" | ||
fill="none" | ||
xmlns="http://www.w3.org/2000/svg" | ||
> | ||
<path | ||
d="M76 67C61.1667 67 31.1 67 27.5 67C23 67 16 68 15 75.5" | ||
stroke="currentcolor" | ||
stroke-width="10" | ||
/> | ||
<path | ||
d="M29 82C29 80.8954 29.8954 80 31 80H49C50.1046 80 51 80.8954 51 82V101.89C51 102.733 50.0197 103.198 49.3668 102.664L41.2665 96.0362C40.5298 95.4334 39.4703 95.4334 38.7335 96.0362L30.6332 102.664C29.9803 103.198 29 102.733 29 101.89V82Z" | ||
fill="currentcolor" | ||
/> | ||
<path | ||
d="M62 87L75 87C75.5523 87 76 86.5523 76 86L76 17C76 16.4477 75.5523 16 75 16L28 16C18.5 16 15 23 15 28C15 43.8334 15 59.6667 15 75.5C15 78.6619 16.3997 82.6236 19.8312 85.1091" | ||
stroke="currentcolor" | ||
stroke-width="10" | ||
stroke-linecap="round" | ||
/> | ||
</svg> | ||
</span> | ||
repos | ||
</button> | ||
</div> | ||
</div> | ||
</section> | ||
<!-- card --> | ||
<section class="bg-white shadow-md p-4 rounded-md"> | ||
<!-- img div --> | ||
<div class="flex justify-center"> | ||
<img | ||
class="rounded-full object-cover size-28 border-4 border-[#0dba4b]" | ||
src="https://avatars.githubusercontent.com/u/95121969?v=4" | ||
alt="" | ||
/> | ||
</div> | ||
<!-- datails --> | ||
<div class="flex flex-col items-center justify-center gap-4 mt-2"> | ||
<!-- name --> | ||
<div class="flex flex-col items-center gap-1"> | ||
<h3 class="text-lg font-semibold">Vijayavedhasekaran</h3> | ||
<p class="text-xs font-normal">FullStack devloper</p> | ||
</div> | ||
<div class="flex items-center gap-3"> | ||
<button | ||
class="border-[#0dba4b] border-2 font-inter text-black text-sm font-semibold px-4 py-1 rounded-md flex items-center gap-1" | ||
> | ||
<span> | ||
<svg | ||
xmlns="http://www.w3.org/2000/svg" | ||
width="20" | ||
height="20" | ||
viewBox="0 0 16 16" | ||
id="github" | ||
> | ||
<path | ||
d="M7.999 0C3.582 0 0 3.596 0 8.032a8.031 8.031 0 0 0 5.472 7.621c.4.074.546-.174.546-.387 0-.191-.007-.696-.011-1.366-2.225.485-2.695-1.077-2.695-1.077-.363-.928-.888-1.175-.888-1.175-.727-.498.054-.488.054-.488.803.057 1.225.828 1.225.828.714 1.227 1.873.873 2.329.667.072-.519.279-.873.508-1.074-1.776-.203-3.644-.892-3.644-3.969 0-.877.312-1.594.824-2.156-.083-.203-.357-1.02.078-2.125 0 0 .672-.216 2.2.823a7.633 7.633 0 0 1 2.003-.27 7.65 7.65 0 0 1 2.003.271c1.527-1.039 2.198-.823 2.198-.823.436 1.106.162 1.922.08 2.125.513.562.822 1.279.822 2.156 0 3.085-1.87 3.764-3.652 3.963.287.248.543.738.543 1.487 0 1.074-.01 1.94-.01 2.203 0 .215.144.465.55.386A8.032 8.032 0 0 0 16 8.032C16 3.596 12.418 0 7.999 0z" | ||
></path></svg | ||
></span> | ||
Profile | ||
</button> | ||
|
||
<button | ||
class="bg-[#0dba4b] border-[#0dba4b] border-2 font-inter text-white text-sm font-semibold px-5 py-1 rounded-md flex items-center gap-1" | ||
> | ||
<span> | ||
<svg | ||
width="20" | ||
height="20" | ||
viewBox="0 0 92 114" | ||
fill="none" | ||
xmlns="http://www.w3.org/2000/svg" | ||
> | ||
<path | ||
d="M76 67C61.1667 67 31.1 67 27.5 67C23 67 16 68 15 75.5" | ||
stroke="currentcolor" | ||
stroke-width="10" | ||
/> | ||
<path | ||
d="M29 82C29 80.8954 29.8954 80 31 80H49C50.1046 80 51 80.8954 51 82V101.89C51 102.733 50.0197 103.198 49.3668 102.664L41.2665 96.0362C40.5298 95.4334 39.4703 95.4334 38.7335 96.0362L30.6332 102.664C29.9803 103.198 29 102.733 29 101.89V82Z" | ||
fill="currentcolor" | ||
/> | ||
<path | ||
d="M62 87L75 87C75.5523 87 76 86.5523 76 86L76 17C76 16.4477 75.5523 16 75 16L28 16C18.5 16 15 23 15 28C15 43.8334 15 59.6667 15 75.5C15 78.6619 16.3997 82.6236 19.8312 85.1091" | ||
stroke="currentcolor" | ||
stroke-width="10" | ||
stroke-linecap="round" | ||
/> | ||
</svg> | ||
</span> | ||
repos | ||
</button> | ||
</div> | ||
</div> | ||
</section> | ||
</main> | ||
</body> | ||
<!-- <script type="module" src="./src/js/test.js"></script> --> | ||
</html> |
Oops, something went wrong.