CodePen Embed - Resume practice finished

<!DOCTYPE html>
<html>
    <head>
      <meta charset="UTF-8">
    </head>
    <body style="background-color: #8c8080">
     <div class="mark"></div>
     <div class="resume">
      <div class="photo">
       <img src="https://image.flaticon.com/icons/svg/181/181374.svg"></div><div class="contact">
       <div class="contact_item">
       <img src="https://image.flaticon.com/icons/svg/2630/2630694.svg">&nbsp;&nbsp;&nbsp;999999999@gmail.com</div>
        <div class="contact_item">
        <img src="https://image.flaticon.com/icons/png/512/126/126509.png">&nbsp;&nbsp;&nbsp;(+886)999999999</div>
        <div class="contact_item">
        <img src="https://image.flaticon.com/icons/svg/2462/2462719.svg">&nbsp;&nbsp;&nbsp;Line : 0999999999</div>
        <div class="contact_item">
        <img src="https://image.flaticon.com/icons/svg/709/709592.svg">&nbsp;&nbsp;&nbsp;Website : www.xxxxxxx</div>
      </div>
      
      <div class="about_me">
<!--       <div class="title_trunk">
      about me</div> -->
        <div class="aboutme_content">
          <sapn style="font-weight:600;font-size: 20px;margin-bottom: -10px;display: block;">xxx-xxx, xxx</sapn><br>
  &nbsp;&nbsp;&nbsp;&nbsp;'xxXXXX'<br>GitHub : xxxxxxx<br>Film-Instagram : xxxxxx
        </div>
      </div>
      
  <div class="sidebar_left">
    <div class="personal_skills">
     
      <div class="title_trunk">
        PERSONAL SKILLS</div>
      <ul>
        <li>Coding Skill
        </li>
        <li>Event Promote
        </li>
        <li>Willingnes to learn
        </li>
        <li>Logical thinking
        </li>
        <li>Sports
        </li>
      </ul>
    </div>
    
  <div class="hobby"><div class="title_trunk">HOBBIES</div>
      <div class="hobby_item">
        <img src="https://image.flaticon.com/icons/png/512/883/883787.png">
        <br>Film Camera
      </div>
      
      <div class="hobby_item">
        <img src="https://image.flaticon.com/icons/svg/2095/2095901.svg">
        <br>Video Editing
      </div>
      
      <div class="hobby_item">
        <img src="https://image.flaticon.com/icons/svg/3014/3014845.svg">
        <br>Music Editing
      </div>
      
      <div class="hobby_item">
        <img src="https://image.flaticon.com/icons/svg/895/895571.svg">
        <br>Dancing
      </div>
      
      <div class="hobby_item">
        <img src="https://image.flaticon.com/icons/svg/2228/2228683.svg">
        <br>Philosophy
      </div>
      
      <div class="hobby_item">
        <img src="https://image.flaticon.com/icons/svg/1170/1170221.svg">
        <br>Writing
      </div>
    </div>
  </div>
    
      
    <div class="sidebar_right">
      <div class="program_language">
        
        <div class="title_trunk">
        PROGRAM LANGUAGE
        </div>
        
    <div class="skill_bigitem">
    <div class="skill_bigitem_title">
    FrontEnd
    </div>  
          
        <div class="skill_trunk">
      <span class="name">Vue</span>
<div class="level">
<div class="amount"style="width:70%">
           </div>
          </div>
        </div> 
          
         <div class="skill_trunk">
      <span class="name">CSS/SASS</span>
<div class="level">
<div class="amount"style="width:80%">
           </div>
          </div>
        </div>
          
         <div class="skill_trunk">
  <span class="name">JavaScript</span>
<div class="level">
<div class="amount"style="width:65%">
           </div>
          </div>
        </div>
          
         <div class="skill_trunk">
    <span class="name">jQuery</span>
<div class="level">
<div class="amount"style="width:50%">
           </div>
          </div>
        </div>
     </div>  
        
        
    <div class="skill_bigitem">
    <div class="skill_bigitem_title">
    BackEnd / Others
    </div>     
        
  <div class="skill_trunk">
    <span class="name">C#</span>
<div class="level">
<div class="amount"style="width:40%">
           </div>
          </div>
        </div>
    
      
  <div class="skill_trunk">
    <span class="name">SQL SERVER</span>
<div class="level">
<div class="amount"style="width:30%">
           </div>
          </div>
        </div>  
      </div>
        
  <div class="skill_bigitem">
    <div class="skill_bigitem_title">
    Version Control
    </div>    
    
    <div class="skill_trunk">
    <span class="name">Git</span>
<div class="level">
<div class="amount"style="width:50%">
           </div>
          </div>
        </div> 
      </div>  
    </div>  
  </div>  
      
      
      <div class="education">
       <div class="title_trunk">
       EDUCATION
       </div>
       <img src="https://image.flaticon.com/icons/svg/212/212852.svg">
        <div class="item_footer">
          <b>XXXX</b>
          <div class="ba">
            <b>BA of XXXXXX</b> 
            <br>XXXX
          </div>  
        </div>
      </div>
      
    <div class="certification">
    <div class="title_trunk">
    CERTIFICATION</div>
    <img src="https://image.flaticon.com/icons/svg/223/223399.svg">
    
      <div class="item_footer">
        <b>English / 日本語</b>
          <div class="ba">
            <b>Toeic XXX, JLPT XXX</b>
          </div>
        </div>
      </div>    
    </div>
  </body>
</html>

* {
  font-family: 微軟正黑體;
  box-sizing: border-box;
  position: relative;
  vertical-align: top; 
}

.html,.body{
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow: auto;
  box-sizing: border-box;
}

.resume{
  width: 500px; 
  height: 750px;
  padding: 15px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  background-color: #D5E0C9;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);  
} 

.resume .photo{
  width: 28%;
  height: 130px;
  margin-top: 5px; 
  margin-bottom: 10px;
  border-right: solid 2px;
  line-height: 130px;
  display: inline-block;
}
.resume .photo img{
  vertical-align: middle;
  width: 120px;
}
.resume .contact{
  width: 72%;
  height: 130px;
  margin-top: 5px;
  margin-bottom: 5px;
  padding-top: 10px;
  line-height: 25px;
  font-weight: 600;
  letter-spacing: 5px;
  display: inline-block;
}
.resume .contact .contact_item{
  margin-left: 15px;
  margin-top: 3px;
  font-size: 12px;
}
.resume .contact .contact_item img{
  vertical-align: top;
  width: 22px;
}
.resume .about_me{
  border-top: solid 2px;
  width: 100%;
  height: 130px;
  padding-top: 5px;
  text-align: center;
}
.resume .about_me .aboutme_content {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  font-size: 12px;
  line-height: 20px;
}
.resume .sidebar_left{
  width: 40%;
  height: 310px;
/*   border-top: solid 2px; */
  display: inline-block;
}
.resume .sidebar_left .personal_skills{
  width: 100%;
  height: 130px;
  padding-top: 5px;
  font-weight: 300;
  border-top: solid 2px;
  border-bottom: solid 2px;
}
.resume .sidebar_left 
.personal_skills ul{
  padding: 0px;
  left: 20px;
  font-size: 13px;
}
.resume .sidebar-left .hobby{
  width: 100%;
  height: 180px;
  padding-top: 10px;
}
.hobby_item{
  width: 55px;
  height: 70px;
  display: inline-block;
  margin-top: 15px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.hobby_item img{
  border: solid 0.5px;
  border-radius: 100%;
  margin-left: auto;
  margin-right: auto;
  width: 40px;
  height: 40px;
}
.title_trunk{
  background-color: white;
  /*先用白色框出來比較好對*/
  padding-right: 5px;
  position: absolute; 
  font-weight: 600;
  top: -11px;
  background-color: #D5E0C9;
}
.mark{
  width: 100%;
  height: 100%;
  font-size: 
}
.resume .sidebar_right{
  width: 50%;
  height: 310px;
  display: inline-block;
  margin-left: 30px;
  border-top: solid 2px;
}
.resume .sidebar_right .program_language{
  width: 100%;
  height: 310px;
  padding-top: 20px;
}
.skill_bigitem{
  margin-bottom: 10px;
}
.skill_bigitem_title{
  text-align: center;
  font-weight: 550;
  font-size: 10px;
  width: fit-content;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  border-top: solid 1px;
  border-bottom: solid 1px;
}
.skill_trunk .name{
  font-size: 10px;
  font-weight: 600;
  margin-right: 10px;
}
.skill_trunk{
  width: 100%;
  height: 20px;
  line-height: 15px;
  margin-bottom: 5px;
  margin-left: auto;
  margin-right: auto;
}
.skill_trunk .level{
  width: 170px;
  height: 10px;
  border: solid 0.5px;
  position: absolute;
  vertical-align: middle;
  overflow: hidden;
  top: 3px;
  right: 0px;
}
.skill_trunk .level .amount{
  height: 10px;
  position: absolute;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.5);
}
.education{
  width: 90%;
  height: 65px;
  padding-top: 15px;
  margin-top: 10px;
  border-top: solid 2px;
}
.certification{
  border-top: solid 2px;
  width: 90%;
  height: 65px;
  padding-top: 15px;
}
.education img{
  position: absolute;
  width: 40px;
  right: -50px;
  top: -20px;
}
.certification img{
  width: 40px;
  right: -50px;
  position: absolute;
  top: -20px;
}
.item_footer{
  font-size: 15px;
  line-height: 100%;
  margin-left: 60px;
}
.item_footer .ba{
  font-size: 12px;
  font-weight: 300;
  display: inline-block;
  margin-left: 8px;
}

.personal_skills{
  letter-spacing: 2px;
  font-weight: 600;
}

This Pen is owned by linooohon on CodePen.

See more by @linooohon on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.