-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
113 lines (108 loc) · 11 KB
/
index.html
File metadata and controls
113 lines (108 loc) · 11 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<link href="dist/style.css" rel="stylesheet">
<link href="/app/assets/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<title>GitHub user search app</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<header class="header">
<span class="header__logo">devfinder</span>
<button aria-label="Switch theme" class="header__theme--switcher">
<span class="header__theme--value"></span>
<svg class="header__theme--icon-light" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.5133 11.3967C19.3087 11.3453 19.1041 11.3966 18.9251 11.5251C18.2602 12.0901 17.4929 12.5523 16.649 12.8605C15.8562 13.1687 14.9866 13.3228 14.066 13.3228C11.9944 13.3228 10.1019 12.4753 8.74647 11.1142C7.39102 9.75302 6.54707 7.85258 6.54707 5.77237C6.54707 4.89919 6.70051 4.0517 6.95626 3.28125C7.23758 2.45944 7.64677 1.71467 8.18383 1.07263C8.414 0.790132 8.36285 0.379226 8.08153 0.148091C7.90251 0.0196826 7.69792 -0.0316807 7.49332 0.0196826C5.31949 0.61036 3.42698 1.92012 2.07153 3.66648C0.767234 5.38715 0 7.51872 0 9.83007C0 12.6294 1.12528 15.1719 2.96664 17.0209C4.808 18.87 7.3143 20 10.1275 20C12.4803 20 14.6542 19.1782 16.3932 17.8171C18.1579 16.4303 19.4366 14.4528 19.9737 12.1928C20.076 11.8332 19.8714 11.4737 19.5133 11.3967Z" />
</svg>
<svg class="header__theme--icon-dark" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.5449 6.45511C12.6455 5.55564 11.3756 4.97363 9.99997 4.97363C8.6243 4.97363 7.35446 5.52919 6.45499 6.45511C5.55552 7.35459 4.97351 8.62443 4.97351 10.0001C4.97351 11.3757 5.55552 12.6456 6.45499 13.5451C7.35446 14.4445 8.6243 15.0265 9.99997 15.0265C11.3756 15.0265 12.6455 14.471 13.5449 13.5451C14.4444 12.6456 15.0264 11.3757 15.0264 10.0001C15.0264 8.62443 14.4709 7.35459 13.5449 6.45511Z" />
<path d="M9.99996 3.4127C10.3703 3.4127 10.6878 3.09524 10.6878 2.72487V0.687831C10.6878 0.31746 10.3703 0 9.99996 0C9.62959 0 9.31213 0.31746 9.31213 0.687831V2.72487C9.31213 3.09524 9.62959 3.4127 9.99996 3.4127Z"/>
<path d="M15.6349 5.34386L17.09 3.88883C17.3545 3.62428 17.3545 3.201 17.09 2.93645C16.8254 2.6719 16.4021 2.6719 16.1376 2.93645L14.6825 4.39148C14.418 4.65603 14.418 5.07931 14.6825 5.34386C14.9206 5.60841 15.3439 5.60841 15.6349 5.34386Z" />
<path d="M19.3121 9.31226H17.2751C16.9047 9.31226 16.5873 9.62972 16.5873 10.0001C16.5873 10.3705 16.9047 10.6879 17.2751 10.6879H19.3121C19.6825 10.6879 20 10.3705 20 10.0001C20 9.62972 19.6825 9.31226 19.3121 9.31226Z" />
<path d="M15.6084 14.6562C15.3439 14.3916 14.9206 14.3916 14.6561 14.6562C14.3915 14.9207 14.3915 15.344 14.6561 15.6086L16.1111 17.0636C16.3756 17.3281 16.7989 17.3281 17.0635 17.0636C17.328 16.799 17.328 16.3758 17.0635 16.1112L15.6084 14.6562Z" />
<path d="M9.99996 16.5874C9.62959 16.5874 9.31213 16.9049 9.31213 17.2752V19.3123C9.31213 19.6826 9.62959 20.0001 9.99996 20.0001C10.3703 20.0001 10.6878 19.6826 10.6878 19.3123V17.2752C10.6878 16.9049 10.3703 16.5874 9.99996 16.5874Z" />
<path d="M4.36511 14.6562L2.91008 16.1112C2.64553 16.3758 2.64553 16.799 2.91008 17.0636C3.17463 17.3281 3.59791 17.3281 3.86246 17.0636L5.31749 15.6086C5.58204 15.344 5.58204 14.9207 5.31749 14.6562C5.07939 14.3916 4.65611 14.3916 4.36511 14.6562Z" />
<path d="M3.4127 10.0001C3.4127 9.62972 3.09524 9.31226 2.72487 9.31226H0.687831C0.31746 9.31226 0 9.62972 0 10.0001C0 10.3705 0.31746 10.6879 0.687831 10.6879H2.72487C3.09524 10.6879 3.4127 10.3705 3.4127 10.0001Z" />
<path d="M4.36511 5.34386C4.62966 5.60841 5.05294 5.60841 5.31749 5.34386C5.58204 5.07931 5.58204 4.65603 5.31749 4.39148L3.86246 2.93645C3.59791 2.6719 3.17463 2.6719 2.91008 2.93645C2.64553 3.201 2.64553 3.62428 2.91008 3.88883L4.36511 5.34386Z" />
</svg>
</button>
</header>
<form class="search">
<input
class="search__input"
id="name"
name="term"
placeholder="Search Github username"
type="text"
>
<button class="search__button" type="submit">Search</button>
<img alt="Search icon" class="search__icon" src="app/assets/icon-search.svg">
<span class="search__error">No results</span>
</form>
<main class="main">
<div class="user">
<div class="user__info">
<img src="https://avatars.githubusercontent.com/u/11464117?v=4" alt="user avatar" class="user__info-avatar">
<div class="user__info-login--wrapper">
<span class="user__info-login-name"></span>
<span class="user__info-login-nickname"></span>
<span class="user__info-login-joined"></span>
</div>
<span class="user__info-login-bio"></span>
</div>
<div class="user__stats">
<div class="user__stats-info">
<span class="user__stats--info-label">Repos</span>
<span class="user__stats--info-number"></span>
</div>
<div class="user__stats--followers">
<span class="user__stats--followers-label">Followers</span>
<span class="user__stats--followers-number"></span>
</div>
<div class="user__stats--following">
<span class="user__stats--following-label">Following</span>
<span class="user__stats--following-number"></span>
</div>
</div>
<div class="user__links">
<div class="user__links--location">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" class="user__links--location-icon">
<path fill-rule="evenodd" d="M7.03.002c2.398.048 4.554 1.328 5.767 3.423a6.963 6.963 0 0 1 .091 6.88l-4.96 9.077-.006.012c-.218.38-.61.606-1.046.606-.436 0-.827-.226-1.045-.606l-.007-.012-4.96-9.077a6.963 6.963 0 0 1 .091-6.88C2.17 1.33 4.325.05 6.722.002c.103-.003.206-.003.308 0ZM4.064 6.25a2.816 2.816 0 0 0 2.812 2.813A2.816 2.816 0 0 0 9.69 6.25a2.816 2.816 0 0 0-2.813-2.812A2.816 2.816 0 0 0 4.064 6.25Z" clip-rule="evenodd"/>
</svg>
<span class="user__links--location-name"></span>
</div>
<div class="user__links--website">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" class="user__links--website-icon">
<path d="M7.404 5.012c-2.355 2.437-1.841 6.482.857 8.273.089.06.207.048.283-.027.568-.555 1.049-1.092 1.47-1.776a.213.213 0 0 0-.084-.3A2.744 2.744 0 0 1 8.88 10.1a2.64 2.64 0 0 1-.225-1.803c.169-.815 1.044-1.573 1.712-2.274l-.004-.002 2.504-2.555a2.568 2.568 0 0 1 3.648-.019 2.6 2.6 0 0 1 .037 3.666l-1.517 1.56a.266.266 0 0 0-.06.272c.35 1.013.435 2.441.201 3.52-.006.03.031.05.053.028l3.228-3.295c2.062-2.105 2.044-5.531-.04-7.615a5.416 5.416 0 0 0-7.691.04L7.417 4.998l-.013.014Z"/>
<path d="m13.439 13.75.006-.003c.659-1.204.788-2.586.48-3.933l-.002.002h-.001a5.434 5.434 0 0 0-2.19-3.125.3.3 0 0 0-.332.015c-.554.448-1.096 1.022-1.453 1.754a.243.243 0 0 0 .097.317c.414.24.789.593 1.04 1.062.196.33.388.957.263 1.631-.116.894-1.019 1.714-1.736 2.453-.546.559-1.935 1.974-2.49 2.542a2.6 2.6 0 0 1-3.666.038 2.6 2.6 0 0 1-.038-3.666l1.521-1.565A.266.266 0 0 0 5 11.004c-.338-1.036-.43-2.432-.217-3.51.006-.03-.031-.049-.053-.027l-3.179 3.245c-2.083 2.127-2.066 5.588.04 7.693 2.125 2.083 5.57 2.048 7.653-.078.723-.81 3.821-3.678 4.195-4.577Z"/>
</svg>
<span class="user__links--website-link">
<a href="https://github.blog" class="user__links--website-link-anchor"></a>
</span>
</div>
<div class="user__links--twitter">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" class="user__links--twitter-icon">
<path d="M20 2.799a8.55 8.55 0 0 1-2.363.647 4.077 4.077 0 0 0 1.804-2.266 8.194 8.194 0 0 1-2.6.992A4.099 4.099 0 0 0 9.75 4.976c0 .325.027.638.095.935-3.409-.166-6.425-1.8-8.451-4.288A4.128 4.128 0 0 0 .83 3.694c0 1.42.732 2.679 1.821 3.407A4.05 4.05 0 0 1 .8 6.597v.045a4.119 4.119 0 0 0 3.285 4.03 4.09 4.09 0 0 1-1.075.134c-.262 0-.527-.015-.776-.07.531 1.624 2.038 2.818 3.831 2.856a8.239 8.239 0 0 1-5.084 1.75c-.336 0-.658-.016-.981-.057a11.544 11.544 0 0 0 6.29 1.84c7.545 0 11.67-6.25 11.67-11.668 0-.18-.006-.356-.015-.53A8.18 8.18 0 0 0 20 2.8Z"/>
</svg>
<span class="user__links--twitter-handle"></span>
</div>
<div class="user__links--company">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" class="user__links--company-icon">
<path fill-rule="evenodd" d="M10.858 1.558 1.7.167A1.477 1.477 0 0 0 .517.492 1.49 1.49 0 0 0 0 1.608v17.559c0 .458.375.833.833.833h2.709v-4.375c0-.808.65-1.458 1.458-1.458h2.083c.809 0 1.459.65 1.459 1.458V20h3.541V3a1.46 1.46 0 0 0-1.225-1.442ZM4.583 12.292h-1.25a.625.625 0 0 1 0-1.25h1.25a.625.625 0 0 1 0 1.25Zm-1.25-2.5h1.25a.625.625 0 0 0 0-1.25h-1.25a.625.625 0 0 0 0 1.25Zm1.25-2.5h-1.25a.625.625 0 0 1 0-1.25h1.25a.625.625 0 0 1 0 1.25Zm-1.25-2.5h1.25a.625.625 0 0 0 0-1.25h-1.25a.625.625 0 0 0 0 1.25Zm5.417 7.5H7.5a.625.625 0 0 1 0-1.25h1.25a.625.625 0 0 1 0 1.25Zm-1.25-2.5h1.25a.625.625 0 0 0 0-1.25H7.5a.625.625 0 0 0 0 1.25Zm1.25-2.5H7.5a.625.625 0 0 1 0-1.25h1.25a.625.625 0 0 1 0 1.25Zm-1.25-2.5h1.25a.625.625 0 0 0 0-1.25H7.5a.625.625 0 0 0 0 1.25ZM12.917 7.792l5.933 1.243c.68.15 1.15.737 1.15 1.425v8.082A1.46 1.46 0 0 1 18.542 20h-5.625V7.792Zm2.708 9.708h1.25a.625.625 0 0 0 0-1.25h-1.25a.625.625 0 0 0 0 1.25Zm1.25-2.5h-1.25a.625.625 0 0 1 0-1.25h1.25a.625.625 0 0 1 0 1.25Zm-1.25-2.5h1.25a.625.625 0 0 0 0-1.25h-1.25a.625.625 0 0 0 0 1.25Z" clip-rule="evenodd"/>
</svg>
<span class="user__links--company-name"></span>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="app/js/script.js" type="module"></script>
</body>
</html>