frontend-mentor-challenges/github-user-search-app/index.html at master · vimode/frontend-mentor-challenges · GitHub

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
141
142
143
144
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">

  <link rel="stylesheet" href="/github-user-search-app/style.css">

  <script src="/github-user-search-app/script.js" defer></script>

  <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:wght@400;700&display=swap" rel="stylesheet">


  <title> GitHub user search app</title>
</head>

<body>

  <div class="outer_wrapper flex_">

    <header class="inner_wrapper flex_">
      <h1>devfinder</h1>
      <div class="theme_switcher flex_">
        <input type="checkbox" class="toggle_theme" name="theme_switch" id="theme_checkbox">
        <label for="theme_checkbox" name="mode" id="mode">DARK</label>
      </div> <!-- theme toggle switch-->
    </header>

    <main class="card inner_wrapper flex_">
      <form class="search_bar" onsubmit="searchUser(event)">
        <img src="/github-user-search-app/img/icon-search.svg" alt="search icon" class="search_icon">
        <input type="search" id="dev_search" name="search" placeholder="Search Github username..."
          aria-label="Search for a Github profile">
        <button type="submit" class="btn btn_search">Search</button>
        <p class="error_text">No results</p>
      </form>

      <section class="profile_card grid_">
        <figure class="profile_image">
          <img src="https://avatars.githubusercontent.com/u/583231?v=4" alt="profile image" class="profile_img_src">
        </figure>

        <h2 class="profile_name">The Octocat</h2>
        <a href="https://github.com" class="profile_username">@octocat</a>
        <p class="profile_date">Joined 25 Jan 2011</p>
        <p class="profile_bio">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati, eum? Eveniet, ullam
          vel laborum corrupt.</p>

        <ul class="profile_stats flex_">
          <li class="stats_repo">
            <p class="repo_title stats_title">
              Repos
            </p>
            <p class="repo_number stats_number">
              8
            </p>
          </li>
          <li class="stats_followers">
            <p class="followers_title stats_title">
              Followers
            </p>
            <p class="followers_number stats_number">
              3000
            </p>
          </li>
          <li class="stats_following">
            <p class="following_title stats_title">
              Following
            </p>
            <p class="following_number stats_number">
              9
            </p>
          </li>
        </ul>

        <ul class="profile_info_a profile_info flex_">
          <li class="info_location info_text flex_">
            <svg height="20" width="14" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M12.797 3.425C11.584 1.33 9.427.05 7.03.002a7.483 7.483 0 00-.308 0C4.325.05 2.17 1.33.955 3.425a6.963 6.963 0 00-.09 6.88l4.959 9.077.007.012c.218.38.609.606 1.045.606.437 0 .828-.226 1.046-.606l.007-.012 4.96-9.077a6.963 6.963 0 00-.092-6.88zm-5.92 5.638c-1.552 0-2.813-1.262-2.813-2.813s1.261-2.812 2.812-2.812S9.69 4.699 9.69 6.25 8.427 9.063 6.876 9.063z"
                fill="currentColor" />
            </svg>
            <p class="info_location_text">San Francisco</p>
          </li>
          <li class="info_website info_text flex_">
            <svg height="20" width="20" xmlns="http://www.w3.org/2000/svg">
              <g fill="currentColor">
                <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.093 1.47-1.776a.213.213 0 00-.084-.3A2.743 2.743 0 018.878 10.1a2.64 2.64 0 01-.223-1.803c.168-.815 1.043-1.573 1.711-2.274l-.004-.002 2.504-2.555a2.568 2.568 0 013.648-.019 2.6 2.6 0 01.037 3.666l-1.517 1.56a.266.266 0 00-.06.273c.35 1.012.435 2.44.201 3.519-.006.03.031.05.053.028l3.228-3.295c2.062-2.105 2.044-5.531-.04-7.615a5.416 5.416 0 00-7.691.04L7.417 4.998l-.013.014z" />
                <path
                  d="M13.439 13.75a.401.401 0 00.006-.003c.659-1.204.788-2.586.48-3.933l-.002.002-.001-.001a5.434 5.434 0 00-2.19-3.124.3.3 0 00-.333.015c-.553.448-1.095 1.021-1.452 1.754a.243.243 0 00.096.317c.415.24.79.593 1.04 1.061h.001c.196.33.388.958.263 1.632-.116.894-1.019 1.714-1.736 2.453-.546.559-1.935 1.974-2.49 2.542a2.6 2.6 0 01-3.666.037 2.6 2.6 0 01-.038-3.666l1.521-1.564A.266.266 0 005 11.004c-.338-1.036-.43-2.432-.217-3.51.006-.03-.031-.049-.053-.027l-3.179 3.245c-2.083 2.126-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" />
              </g>
            </svg>
            <a class="info_website_text" href="https://github.blog">https://github.blog</a>
          </li>
        </ul>

        <ul class="profile_info_b profile_info flex_">
          <li class="info_twitter info_text flex_">
            <svg height="18" width="20" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M20 2.799a8.549 8.549 0 01-2.363.647 4.077 4.077 0 001.804-2.266 8.194 8.194 0 01-2.6.993A4.099 4.099 0 009.75 4.977c0 .324.027.637.095.934-3.409-.166-6.425-1.8-8.452-4.288a4.128 4.128 0 00-.56 2.072c0 1.42.73 2.679 1.82 3.408A4.05 4.05 0 01.8 6.598v.045a4.119 4.119 0 003.285 4.028 4.092 4.092 0 01-1.075.135c-.263 0-.528-.015-.776-.07.531 1.624 2.038 2.818 3.831 2.857A8.239 8.239 0 01.981 15.34 7.68 7.68 0 010 15.285a11.543 11.543 0 006.29 1.84c7.545 0 11.67-6.25 11.67-11.667 0-.182-.006-.357-.015-.53A8.18 8.18 0 0020 2.798z"
                fill="currentColor" />
            </svg>
            <p class="info_twitter_text">Not Available</p>
          </li>
          <li class="info_company info_text flex_">
            <svg height="20" width="20" xmlns="http://www.w3.org/2000/svg">
              <g fill="currentColor">
                <path
                  d="M10.858 1.558L1.7.167A1.477 1.477 0 00.517.492 1.49 1.49 0 000 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 00-1.225-1.442zM4.583 12.292h-1.25a.625.625 0 010-1.25h1.25a.625.625 0 010 1.25zm0-2.5h-1.25a.625.625 0 010-1.25h1.25a.625.625 0 010 1.25zm0-2.5h-1.25a.625.625 0 010-1.25h1.25a.625.625 0 010 1.25zm0-2.5h-1.25a.625.625 0 010-1.25h1.25a.625.625 0 010 1.25zm4.167 7.5H7.5a.625.625 0 010-1.25h1.25a.625.625 0 010 1.25zm0-2.5H7.5a.625.625 0 010-1.25h1.25a.625.625 0 010 1.25zm0-2.5H7.5a.625.625 0 010-1.25h1.25a.625.625 0 010 1.25zm0-2.5H7.5a.625.625 0 010-1.25h1.25a.625.625 0 010 1.25zM18.85 9.035l-5.933-1.242V20h5.625A1.46 1.46 0 0020 18.542V10.46c0-.688-.47-1.274-1.15-1.425zM16.875 17.5h-1.25a.625.625 0 010-1.25h1.25a.625.625 0 010 1.25zm0-2.5h-1.25a.625.625 0 010-1.25h1.25a.625.625 0 010 1.25zm0-2.5h-1.25a.625.625 0 010-1.25h1.25a.625.625 0 010 1.25z" />
              </g>
            </svg>
            <p class="info_company_text">@github</p>
          </li>
        </ul>
      </section>

      <div class="footer">
        <p class="att">
          Challenge by
          <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a
            href="https://github.com/vimode/frontend-mentor-challenges">vimode</a>
        </p>
      </div>


    </main>


  </div><!-- outer wrapper-->


</body>

</html>