-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
140 lines (106 loc) · 6.9 KB
/
index.html
File metadata and controls
140 lines (106 loc) · 6.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./assets/favicon-32x32.png"
/>
<link rel="stylesheet" href="fonts.css">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<title>Frontend Mentor | GitHub user search app</title>
<script src="index.js" defer></script>
<script src="svg-inject.js"></script>
</head>
<body class="flex h-screen w-screen justify-center sm:items-center pt-[10svh] sm:pt-0 ">
<div class="w-[327px] sm:w-[573px] md:w-[730px] h-[575px]">
<!-- Devfinder header -->
<div class="font-bold mb-[36px] flex justify-between items-center">
<p class="text-[26px]">devfinder</p>
<div id="btn-light-mode" class=" btn-light-mode flex items-center gap-3">
<p class="light-mode-text text-[13px] font-bold">DARK</p>
<svg id="light-mode-icon" width="20" height="20" viewBox="0 0 244 244" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="sun" d="M91.5 133.5C116.697 195.394 191.5 212.5 191.5 212.5C104 249 33.1972 229.894 7.99994 168C-17.1973 106.106 18 21 104 0.500002C104 0.500002 66.3027 71.606 91.5 133.5Z" fill="#FFC531"/>
</svg>
<!--
d="M91.5 133.5C116.697 195.394 191.5 212.5 191.5 212.5C104 249 33.1972 229.894 7.99994 168C-17.1973 106.106 18 21 104 0.500002C104 0.500002 66.3027 71.606 91.5 133.5Z"
<svg width="192" height="231" viewBox="0 0 192 231" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M91.5 133.5C116.697 195.394 191.5 212.5 191.5 212.5C104 249 33.1972 229.894 7.99994 168C-17.1973 106.106 18 21 104 0.500002C104 0.500002 66.3027 71.606 91.5 133.5Z" fill="#FFC531"/>
</svg>
-->
</div>
</div>
<!-- Searchbar -->
<div class="search h-[69px] w-full flex items-center justify-between pe-2 ps-3 sm:pe-3 sm:ps-6 bg-white shadow-md rounded-md mb-[24px] cursor-pointer">
<div class="flex gap-2 w-full items-center">
<img class="w-[25px]" src="./assets/icon-search.svg" alt="" />
<input id="search" class="input cursor-pointer focus:outline-none w-full py-5 sm:px-5 text-[13px] sm:text-[18px]" type="text" placeholder="Search Github username.." />
</div>
<p class="no-result hidden">No results</p>
<button class="text-[14px] search-btn bg-[#0079FF] py-3 px-2 sm:px-5 sm:py-3 text-white rounded-md">
Search
</button>
</div>
<div class="data h-[517px] sm:h-min w-full bg-white rounded-lg shadow-md flex p-[40px] gap-[37px]">
<div id="not-found" class="hidden flex flex-col md:flex-row justiy-between w-full h-full md:gap-5">
<img class="w-[150px] md:w-[300px]" src="./assets/octocat404.png" alt="">
<div class="w-full" >
<h2 class="font-bold text-[30px] leading-10 mt-12 mb-5" ><span class="text-[60px]">404</span> <br>User Not Found</h2>
<p >Ooopss... sorry we couldn't find the user you are looking for.</p>
</div>
</div>
<div class="hidden md:block" >
<div class="profilePic w-[70px] sm:w-[117px] h-[70px] sm:h-[117px] rounded-full " ></div>
</div>
<div id="data-container" class="w-full ">
<div class="flex items-center gap-[19px] mb-[30px]">
<div id="profileContainer">
<div id="profilePic" class="profilePic w-[70px] sm:w-[117px] h-[70px] sm:h-[117px] rounded-full block md:hidden" ></div>
</div>
<div>
<div class=" hidden md:flex w-[470px] justify-between items-center">
<h2 class="name text-[16px] sm:text-[26px] font-bold"></h2>
<p class="created text-[13px] sm:text-[15px]" ></p>
</div>
<a href="#" target="_blank" class="username text-[#0079FF] text-[13px] sm:text-[16px] mb-[20px] hidden md:block">@username</a>
<div class="block md:hidden">
<h2 class="name text-[16px] sm:text-[26px] font-bold"></h2>
<a href="#" target="_blank" class="username text-[#0079FF] text-[13px] sm:text-[16px] mb-[20px]">@username</a>
<p class="created text-[13px] sm:text-[15px]" ></p>
</div>
</div>
</div>
<div class="md:w-[480px]">
<p id="bio" class="text-[15px] mb-[32px] text-[13px] sm:text-[15px]"></p>
<div class="stats grid grid-rows-2 grid-cols-3 gap-2 px-5 py-5 bg-[#F6F8FF] h-[85px] rounded-lg items-center justify-center mb-[30px]">
<p class="category text-[11px] sm:text-[13px] off-white-text text-center">Repos</p>
<p class="category text-[11px] sm:text-[13px] off-white-text text-center">Followers</p>
<p class="category text-[11px] sm:text-[13px] off-white-text text-center">Following</p>
<p class="text-[16px] sm:text-[22px] font-bold text-center" id="repoNumber"></p>
<p class="text-[16px] sm:text-[22px] font-bold text-center" id="followerNumber"></p>
<p class="text-[16px] sm:text-[22px] font-bold text-center" id="following"></p>
</div>
<div class="grid grid-rows-4 sm:grid-rows-2 grid-cols-1 sm:grid-cols-2 gap-[10px]">
<p class="flex gap-3 items-center"><img onload="SVGInject(this)" class="icon" src="./assets/icon-location.svg" alt=""><span id="city"></span></p>
<p class="flex gap-3 items-center"><img onload="SVGInject(this)" class="icon" src="./assets/icon-twitter.svg" alt=""> <span id="twitter"></span></p>
<p class="flex gap-3 items-center"><img onload="SVGInject(this)" class="icon" src="./assets/icon-website.svg" alt=""> <a href="" target="_blank" id="link"></a></p>
<p class="flex gap-3 items-center"><img onload="SVGInject(this)" class="icon" src="./assets/icon-company.svg" alt=""> <span id="company"></span></p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="anime.min.js"></script>
</body>
</html>