ui/index.html at master · github-user-breakdown-2/ui · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />

  <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet" />

  <link rel="stylesheet" href="css/index.css" />
  <link rel="shortcut icon" type="image/png" href="img/favicon-area-chart.ico" />
  <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js" integrity="sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP"
    crossorigin="anonymous"></script>
  <script async src="js/carousel.js"></script>
  <script async src="js/navigation.js"></script>

  <title>GitHub | User Breakdown</title>
</head>

<body>
  <div class="container">
    <header class="header">
      <nav class="nav">
        <button class="nav-button">||||</button>
        <div class="nav-menu">
          <a href="https://ghub-users.netlify.com/" class="nav-menu-item">Register Now!</a>
          <a href="/ui/" class="nav-menu-item">Features</a>
          <a href="/ui/team.html" class="nav-menu-item">Team</a>
        </div>
      </nav>

      <div class="chart-container">
        <div class="chart chart-1"></div>
        <div class="chart chart-2"></div>
        <div class="chart chart-3"></div>
      </div>
      <h1 class="title">
        GitHub User Breakdown
      </h1>
    </header>

    <main class="main-content">
      <span class="call-to-action-heading">Need a quick way to analyze GitHub users?</span>
      <br/>
      <span class="call-to-action-subheading">Register For Free!</span>
      <br/>
      <a href="https://ghub-users.netlify.com/">
        <button class="call-to-action-button">Analyze User</button>
      </a>


      <section class="features">
        <button class="button left-button">
          <i class="fas fa-angle-double-left"></i>
        </button>
        <div class="card">
          <i class="card-icon fas fa-chart-area"></i>
          <h2 class="card-title">User Statistics</h2>
          <p class="card-info">
            How active are they, and when are they most productive?
          </p>
        </div>
        <div class="card">
          <i class="card-icon fas fa-language"></i>
          <h2 class="card-title">Language Proficiency</h2>
          <p class="card-info">
            What languages do they utilize, and how often do they utilize them?
          </p>
        </div>
        <div class="card">
          <i class="card-icon fas fa-chart-bar"></i>
          <h2 class="card-title">Repository Analysis</h2>
          <p class="card-info">
            Which repositories have they contributed to, and what specific contributions were made?
          </p>
        </div>

        <button class="button right-button">
          <i class="fas fa-angle-double-right"></i>
        </button>
      </section>

      <section class="description">
        <div class="info">
          <i class="info-icon fab fa-github"></i>
          <p class="info-text">
            GitHub is home to over 28 million developers working together to host and review code, manage projects, and
            build software together. Each and every developer using GitHub has a profile that is visible to the public!
          </p>
        </div>
        <div class="info info-reverse">
          <i class="info-icon fas fa-code-branch"></i>
          <p class="info-text">
            This is where GitHub gets interesting for recruiters! GitHub user profiles contain all sorts of fantastic
            information. User statistics and repository analysis
            can be a great tool to size up potential job candidates.
          </p>
        </div>
        <div class="info">
          <i class="info-icon fas fa-poll-h"></i>
          <p class="info-text">
            GitHub User Breakdown allows anyone to easily lookup any GitHub user to see the frequency of their
            commits, which repositories they have contributed to, which languages they are proficient in, and which
            times of the day or week they are most active!
          </p>
        </div>
      </section>
    </main>

    <footer class="footer">
      <div class="footer-info">
        Do you have some feedback for us? <br />
        Want to contribute?! <br />
        </br>
        We'd love to hear from you! <br />

        <a href="https://github.com/github-user-breakdown-2"><i class="social-icon fab fa-github"></i></a>
        <!-- <a href="#"><i class="social-icon fab fa-facebook"></i></a> -->
        <!-- <a href="#"><i class="social-icon fab fa-twitter"></i></a> -->
      </div>

      <div class="footer-copyright">
        &copy; Copyright 2019 <br />
        ACME Website Co.
      </div>
      <div class="footer-attribution">
        Font Awesome Favicon Generator by Paul Ferrett with many thanks to @davegandy for <a href="fontawesome.io">fontawesome.io</a>
      </div>
    </footer>
  </div>
</body>

</html>