HTML
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>
<div id="w">
<h1>Simple Github API Webapp</h1>
<p>Enter a single Github username below and click the button to display profile info via JSON.</p>
<input type="text" name="ghusername" id="ghusername" placeholder="Github username...">
<a href="#" id="ghsubmitbtn">Pull User Data</a>
<div id="ghapidata" class="clearfix"></div>
</div>
</body>
<style>
@import url('http://fonts.googleapis.com/css?family=Oldenburg');
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { overflow-y: scroll; }
body {
background: #fafafa url('http://i.imgur.com/l92k33u.png'); /* http://subtlepatterns.com/subtle-grey/ */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 62.5%;
line-height: 1;
color: #616161;
padding: 35px 0;
}
br { display: block; line-height: 1.6em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
input, textarea {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
...