resume - Liveweave

<!DOCTYPE html>
<html>
<head>
<title>resume</title>
</head>
<body>

<div class="canves">
    
    <div class="top-lines">
       <div class="line1"></div>
       <div class="line2"></div>
       <div class="line3"></div>
    </div>
  
    <div class="info">
      <p class="name"><strong>LIHUA JIN </strong></p>
      <div class="phone">
      <p>+ (310) 880 - 4167<br>lihuajin19@gmail.com<br/>
www.J-lihua.com</p>
      </div>
    </div>
  
    <div class="edu">
      <p class="edu-title"><strong>Eduacation</strong></p>
      <div class="edu-info">
      <p><strong>School of Visual Arts</strong> | 2016 â€“ 2019<br>BFA Graphic Design</p>
      <p><strong>Santa Monica College</strong> | 2013 â€“ 2016<br>AA Graphic      Design<br>Business Administration and Management</p>
      </div>
      <div class="blue-line"></div>
    </div>
    
    <div class="exp">
      <p class="exp-title"><strong>Experience</strong></p>
      <p class="free"><strong>Freelance</strong> | 2015 â€“ Present</p>
      <p class="jobs">
        - Portfolio website design for freelance architect.<br/>
        - Branding and social media promotion for local restaurant.<br/>
        - Branding and print material design (business card, stationery set,<br/>
        &nbsp;&nbsp;and product catalogue) for electronic materials company.<br/>
        - Print design for wedding invation, poster and brochure.
      </p>
      <div class="green-line"></div>
    </div>
    
    <div class="skillandtool-container">
      <div class="skillandtool-grid">
        <div class="skill">
        <p class="skill-title"><strong>Skills</strong></p>
        <p class="skill-info">UI/UX, Coding, Communication Design,<br/>
        AR/VR Prototyping, Motion Design,<br/>
        Video Editing, Branding, Print Design,<br/>
        Typography, Illustration, etc.</p>
      </div>
      <div class="tool">
        <p class="tool-title"><strong>Design Tools</strong></p>
        <p class="tool-info">Illustration, Photoshop, InDesign, Sketch<br/>
        HTML, CSS, familiarity with JavaScript<br/>
        After Effects, Premiere, C4D, Torch 3D<br/>
        Ottifox, Halo, etc.</p>
      </div>  
      </div>
      <div class="o-line"></div>
    </div>
    
    <div class="lag">
      <p class="lag-title"><strong>Languages</strong></p>
      <p class="lag-item">Fluent in English, Chinese and Cantonese</p>
    </div>
  
    <div class="bottom-line">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
    </div>
  
  
  </div>

</body>
</html>

.canves{
  width: 612;
  height: 792;
  border: solid 0.01em;
  
}

.top-lines{
  display: block;
  margin-top: 24px;
  margin-left: 435px;
}

.line1{
  width: 120;
  height: 1px;
  background-color: #1b75bc;
}
 
.line2{
  width: 120;
  height: 1px;
  background-color: #009444;
  margin-top: 6px;
}

.line3{
  width: 120;
  height: 1px;
  background-color: #f7941d;
  margin-top: 6px;
}

.info{
  font-family: Avenir Next;
  font-size: 12;
  display: block;
  margin-left: 57;
  
}

.name{
  font-size: 24;
}

.phone{
  display: block;
  margin-top: -20px;
}

.edu{
  display: block;
  margin-left: 57;
  margin-top: 35px;
  font-family: Avenir Next;
  font-size: 12;
}

.edu-info{
  margin-top: -5px;
}
.edu-title{
  font-size:18;
  color: #1b75bc;
}

.blue-line{
  width: 498;
  height: 1px;
  background-color: #1b75bc;
  margin-top: -10px;
}

.exp{
  display: block;
  margin-left: 57;
  margin-top: 35px;
  font-family: Avenir Next;
  font-size: 12;
}

.exp-title{
  font-size:18;
  color: #009444;
}

.jobs{
  margin-top: -5px;
}
.green-line{
  width: 498;
  height: 1px;
  background-color: #009444;
  margin-top: -10px;
}

.skillandtool-container{
  display: block;
  margin-left: 57;
  margin-top: 20px;
  font-family: Avenir Next;
  font-size: 12;
}

.skillandtool-grid{
  display: grid;
  grid-template-columns: 50% 50%;
}

.skill-title{
  font-size:18;
  color: #f7941d;
}

.tool-title{
  font-size:18;
  color: #f7941d;
}

.skill-info{
  margin-top: -12px;
}

.tool-info{
  margin-top: -12px;
}

.o-line{
  width: 498;
  height: 1px;
  background-color: #f7941d;
  margin-top: -10px;
}

.lag{
  display: block;
  margin-left: 57;
  margin-top: 20px;
  font-family: Avenir Next;
  font-size: 12;
}

.lag-title{
  font-size:18;
  color: d7df23;
}

.lag-item{
  display: block;
  margin-top: -12px;
}

.bottom-line{
  display: block;
  margin-left: 57;
  margin-top: 55px;
}