HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html>
  <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
  <script src="https://use.fontawesome.com/7cac8311c1.js"></script>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>

<html>
  <div id="resume_logo">
    <div id="logo"><img src="https://i.imgur.com/ueDyyL2.png" width="110px"></div> </div>
  
  
<div id="left_column">
  <div class="header">Profile</div>
  <span id="name">Sam <br> JiYun Roh</span>
  <div id="profile_img"><img src="https://i.imgur.com/frQ8Y9e.png" width="60px"></div>
  <div id="website">samjiyunroh.com</div>
  <div id="linkedin">linkedin.com/in/sam-ji-yun-roh-568a127a/</div>
  
  <div class="header">Contact</div>
  <div id="contact">+1 415 797 9108</div>
  <div id="contact_email">jroh2@sva.edu</div>
  
  <div class="header">Education</div>
  <div id="education">School of Visual Arts 
    Class of '18 <br>BFA Design </div>
  
  <div class="header">Language</div>
    <div id="language">
      English <br/> Korean <br/> Chinese
    </div>
  
    <div class="header">Hobbies</div>
  <ul id="hobbies_icon">
    <li><img src="https://i.imgur.com/3VL0AAk.png" width="25px"></li>
    <li><img src="https://i.imgur.com/Xxt9Csv.png" width="25px"></li>
    <li><img src="https://i.imgur.com/7Ekjo6q.png" width="27px"></li>
  </ul>
  
  </div>

<div id="right_column">
  <div class="header">Experience</div>
    <div id="experience_left">
      <header class="date">May 2017 - Dec 2016 </header>
      <header class="date">Nov - Sept 2016</header>
      <header class="date">June - July 2015</header>
    </div>
  
    <div id="experience_right">
      <header class="experience_title">Art director intern <br/> <sub>Geometry global</sub></header>
      <p class="experience_description">
        <ul>
        <li><i class="fa fa-circle-o"></i> Project clients include Porsche, Joycity, Unilever, British American Tobacco, and Saucony</li>
        <li><i class="fa fa-circle-o"></i> Collaborated with account, digital, marketing, and creative team.</li>
        <li><i class="fa fa-circle-o"></i> Participated in Global and Asia Pacific Award shows</li>
        <li><i class="fa fa-circle-o"></i> Actively produced creative inputs for new business pitches</li>
        </ul>
       </p>
      
       <header class="experience_title">Production management intern <br/><sub>Geometry global</sub></header>
       <p class="experience_description">
         <ul>
         <li><i class="fa fa-circle-o"></i> Managed communications between clients and vendors in all channels</li>
         <li><i class="fa fa-circle-o"></i> Assisetd time alignment between creative team, clients and vendors</li>
         <li><i class="fa fa-circle-o"></i> Organised data and visual variations accordingly to the vendors before every project's mass production</li>
         </ul>
        </p>
        
        <header class="experience_title">Marketing manager intern <br/><sub>Wnderkammer</sub></header>
        <p class="experience_description">
        <ul>
        <li><i class="fa fa-circle-o"></i> Managed business communications to promote brand to overseas markets</li>
        <li><i class="fa fa-circle-o"></i> Organised items on ecommerce platform</li>
        <li><i class="fa fa-circle-o"></i> Marketing through all SNS and ecommerce platforms</li>
        </ul>
        </p>
      </div>
  <div id="experience_border"></div>
   
    <div class="header">Skills</div>
        <ul>
         <li><i class="fa fa-circle-o"></i> Front-End Web Development <br><sub>HTML, CSS, Javascript</sub></li><br>
         <li><i class="fa fa-circle-o"></i> 3D Rendering <br><sub>Cinema 4D</sub></li><br>
         <li><i class="fa fa-circle-o"></i> Motion, Branding, Art direction <br><sub>After effects, Photoshop, Illustrator, Indesign </sub></li><br>
         <li><i class="fa fa-circle-o"></i> Prototyping and wireframing <br><sub>Adobe Xd, Sketch, Principle, Invision</sub></li>
       </ul>     
      
</div>

</html>

</body>
</html>

.lw { font-size: 60px; }

#resume_logo {
  
  width: 612px;
  height: 160px;
  border-bottom: 1px solid black;
  
}

#logo {
  padding-left: 270px;
  padding-top: 50px;
}

#left_column {
  width: 165px;
  height: 620px;
  float: left;
  clear: left;
  margin-top: 10px;
  border-right: 1px solid #000000;
}

#right_column {
  width: 447px;
  height: 633px;
  float: left;
  margin-top: 5px;
}

.header {
  font-family: 'Muli', san-serif;
  font-weight: bolder;
  letter-spacing: 2px;
  font-size: 10px;
  padding-left: 30px;
  padding-top: 20px;
  padding-bottom: 10px;
  
}

#experience_left {
  width: 49px;
  float: left;
  clear: left;
  padding-left: 10px;
  padding-right: 10px;
}

#experience_right {
  width: 378px;
  float: left;
}

#experience_border {
  border-bottom: 1px solid #000000;
  width: 400px;
  padding-left: 50px;
  float: left;
  margin-bottom: 10px;
  margin-left: 10px;  
}

.date {
  font-family: 'Muli', san-serif;
  font-size: 13px;
  padding-bottom: 40px;
  width: 30px;
}

#experience_left > .date {
  border-top: 1px solid #000000;
}
.experience_title {
  font-family: 'Muli', san-serif;
  font-size: 13px;
}

li {
  font-family: 'Muli', san-serif;
  font-size: 10px;
  
}
ul {
  list-style-type: none;
}

#name {
  font-family: 'Muli', san-serif;
  font-size: 13px;
  float: left;
  padding-top: 10px;
  padding-left: 10px;
}

#profile_img {
  float: left;
  padding-left: 10px;
}

#website {
  font-family: 'Muli', san-serif;
  font-size: 13px;
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
  float: left;
}

#linkedin {
  font-family: 'Muli', san-serif;
  font-size: 13px;
  padding-left: 10px;
  padding-bottom: 10px;
  width: 145px;
  border-bottom: 1px solid black;

}

#contact {
  font-family: 'Muli', san-serif;
  font-size: 13px;
  float: left;
  padding-left: 10px;
  padding-bottom: 10px;
}

#contact_email {
  font-family: 'Muli', san-serif;
  font-size: 13px;
  padding-left: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #000000;
  width: 145px;
}

#education {
  font-family: 'Muli', san-serif;
  font-size: 13px;
  padding-left: 10px;
  padding-bottom: 10px;
  width: 145px;
  border-bottom: 1px solid black;
}

#language {
  border-bottom: 1px solid black;
  width: 145px;
  padding-bottom: 10px;
  font-family: 'Muli', san-serif;
  font-size: 13px;
  padding-left: 10px;
  
}

#hobbies_icon > li{
  display: inline;
  padding-right: 30px;
  margin-left: -20px;
}