<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <title></title>
        <link href="https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700|Roboto:300,300i,400,400i" rel="stylesheet">
    </head>

    <body>
    <div class="container">

        <header>
            <h1> Ruby Chen</h1>
        </header>

        <div class="wrapper">

        <div class="basic">
            <h3>The Basic</h3>
            <ul>

            </ul>
        </div>

        <div class="story">
           <h3>The Story </h3>

        </div>

        <div class="pic">
        </div>

        </div>

        </div>
        <script type="text/javascript" src="main.js"></script>

    </body>
    <footer>
    </footer>
</html>
header {
    font-family:'Merriweather', serif;
    color:white;
    font-size: 35px;
    background-color: #76949F;
    padding:10px;
    text-align: center;

}

h3 {
    font-family:'Merriweather', serif;
    font-size: 28px;
    color:brown;

}
.wrapper {
    display: flex;
    margin:20px;
    justify-content: space-around;
}

img {
    width:110px;
    height: 110px;
    border-radius: 50%;
    margin: 15px;

}

li {
    font-family:'Merriweather', serif;
    list-style-type: none;
    color: grey;
}

P {
    font-family:'Merriweather', serif;
    color: grey;
    border-left: 1px solid grey;
    border-spacing: 10px 50px;
    padding: 15px;
}

a {
    text-decoration: none;
}

footer {
    background-color: lightgrey;
    padding:30px;
}
let list= document.querySelector("ul")
let story = document.querySelector(".story")
let picture = document.querySelector(".pic")

let req = new XMLHttpRequest();
req.open("GET", "https://api.github.com/users/madebymt")
req.addEventListener("load", function(){
    let data = JSON.parse(this.responseText);
    console.log(list)
let string =  `
<li> Name : ${data.name} </li>
<li> Github URL : <a href="${data.html_url}"> User Name </a>
<li> E-mail : c19890611@gmail.com </li>
<li> Company: ${data.company} </li>
<li> Website : www.rubycodes.com</li>
`

let bio = `
  <h3> The Story </h3>
  <p>${data.bio}</p>
`

let img = `
<img src="${data.avatar_url}" alt="picture">
`

list.innerHTML = string
story.innerHTML = bio
picture.innerHTML = img



    console.log(data)
})

req.send();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.