-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (126 loc) · 4.74 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="./images/GitHub.svg" type="image/x-icon" />
<meta name="title" content="GitHub Profile Finder" />
<title>GitHub Profile Finder</title>
<meta name="author" content="Manuel Muñiz" />
<!-- Css Styles -->
<link rel="stylesheet" href="styles.css" />
<!-- Css Styles -->
<!-- Scripts -->
<script src="./app.js" defer></script>
<script
src="https://kit.fontawesome.com/a9bc1a82bd.js"
crossorigin="anonymous"
></script>
<!-- Scripts -->
</head>
<body>
<!-- Header Section -->
<header class="header">
<div class="header__container">
<div class="header__information">
<div class="header__logo">
<svg
width="24"
height="24"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
class="Logo_icon_14tkmhr"
>
<title>mark-github</title>
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
fill="#000"
fill-rule="evenodd"
></path>
</svg>
<h1 class="header__title">GitHub User Search</h1>
</div>
<p class="header__description">
Browse users and their profiles via
<a
href="https://developer.github.com/v3/"
class="api__link"
target="_blank"
>the GitHub API</a
>
</p>
</div>
<nav class="nav">
<input
type="text"
class="search__input"
placeholder="Search for a user, e.g. facebook"
/>
<button class="search__button">
<i class="fas fa-search"></i>
</button>
</nav>
</div>
</header>
<!-- Header Section -->
<div class="bg">
<div class="loader" id="mainLoader"></div>
<!-- Main Section -->
<main class="main__section">
<p class="error">We could not find the entered user, try again...</p>
<section class="user">
<div class="user__image">
<img src="" class="github__image" />
</div>
<div class="user__info">
<div class="user__names">
<p class="user__name"></p>
<a href="#" class="user__name2" target="_blank"></a>
</div>
<p class="user__bio"></p>
<div class="user__location"></div>
<div class="user__website"></div>
<div class="user__stats">
<div class="firstStat">
<p class="firstStatNumber"></p>
<p class="firstStatTitle"></p>
</div>
<div class="secondStat">
<p class="secondStatNumber"></p>
<p class="secondStatTitle"></p>
</div>
<div class="thirdStat">
<p class="thirdStatNumber"></p>
<p class="thirdStatTitle"></p>
</div>
</div>
</div>
</section>
</main>
<!-- Main Section -->
<!-- Repositories & Followers Section -->
<section class="user__secondaryInfo">
<div class="user__repositories">
<div class="repositories-controls">
<div class="selectdiv">
<label>
<label class="oplabel" perPageSelect">Repositories per page:</label>
<select id="perPageSelect">
<option value="10" selected>10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</label>
</div>
</div>
<div class="pagination-container" id="paginationContainer"></div>
<div class="user__repositories" id="userRepositories"></div>
</div>
<div class="user__followers"></div>
</section>
<!-- Repositories & Followers Section -->
</div>
</body>
</html>