<div class="wrapper">
    <article>
      <header>
        <img id="profile-image" src="https://i.imgsafe.org/c06e4c4348.png">
        <h1 id="title">สมชาย สามารถมาก</h1>
        <h2 id="description">กราฟิค, เว็บดีไซน์เนอร์, นักร้อง, นักแสดง</h2>
        <ul id="contact">
          <li><i class="fa fa-envelope"></i> <a href="mailto:realman@gmail.com">realman@gmail.com</a></li>
          <li><i class="fa fa-phone"></i> <a href="tel:0891234567">089-123-4567</a></i></li>
          <li><i class="fa fa-facebook"></i> <a href="https://www.facebook.com/superrealman">superrealman</a></li>
          <li><i class="fa fa-twitter"></i> <a href="https://twitter.com/superrealman">@superrealman</a></li>
        </ul>
      </header>
      <section id="objective">
        <h2>จุดมุ่งหมายในการทำงาน</h2>
        <p>
          ต้องการใช้ความรู้ความสามารถในการพัฒนากราฟิคในสื่อต่างๆ 
          ให้มีความสวยงาม โดดเด่นและสื่อสารได้อย่างตรงจุดประสงค์ เพื่อช่วยให้วงการออกแบบของไทยได้เติบโตในเวทีโลก
        </p>
      </section>
      <section id="profile">
        <h2>ข้อมูลส่วนตัว</h2>
        <table>
          <tr>
            <th>ชื่อ</th><td>นายสมชาย สามารถมาก</td>
          </tr>
          <tr>
            <th>วันเกิด</th><td>1 มกราคม 2532, อายุ 27 ปี</td>
          </tr>
          <tr>
            <th>สถานภาพ</th><td>โสด</td>
          </tr>
          <tr>
            <th>สัญชาติ</th><td>ไทย</td>
          </tr>
          <tr>
            <th>ที่อยู่ปัจจุบัน</th><td>123 ถนนสุขุมวิท 101 แขวงคลองตันเหนือ, เขตวัฒนา, กรุงเทพมหานคร 10210</td>
          </tr>
          <tr>
            <th>โทรศัพท์</th><td>089-123-4567</td>
          </tr>
        </table>
      </section>
      <section id="skills">
        <h2>ความสามารถ</h2>
        <ul>
          <li>
            <h3>Web Design</h3>
            <p>
              ออกแบบหน้าเว็บไซต์ให้กับลูกค้าหลากหลายระดับ ให้ใช้งานง่ายและสวยงาม
            </p>
          </li>
          <li>
            <h3>Graphic Design</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
              Blanditiis impedit, architecto quae! Consequuntur veniam minus mollitia, 
              voluptatem, nihil incidunt tenetur. Nobis dolor fuga illo dolore assumenda. 
              Distinctio, laudantium eum quaerat.
            </p>
          </li>
          <li>
            <h3>Logo Design</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo voluptate, 
              fugit sunt. Impedit nemo molestias minima sequi omnis expedita cumque 
              ea aliquam dignissimos explicabo eum voluptate, obcaecati qui. Officia, culpa.
            </p>
          </li>
        </ul>
      </section>
      <section id="technical">
        <h2>โปรแกรมที่ชำนาญ</h2>
        <ul>
          <li>Adobe Photoshop CC</li>
          <li>Adobe Illustrator CC</li>
          <li>Adobe Experience CC</li>
          <li>Sketch 3</li>
          <li>Microsoft Paint</li>
          <li>Microsoft Office</li>
        </ul>
      </section>
      <section id="experiences">
        <h2>ประสบการณ์</h2>
        <ul>
          <li>
            <h3>บริษัท ดีไซน์ ซันเด จำกัด</h3>
            <h4>เว็บดีไซน์เนอร์</h4>
            <h5>ก.ย. 2558 - ปัจจุบัน</h5>
            <p>
              รับผิดชอบในการออกแบบหน้าเว็บไซต์ โดยคำนึงถึงการใช้งานของ User เป็นหลัก 
              ออกแบบทั้งหน้าจอสำหรับโทรศัพท์มือถือ, แท็บเล็ต และ หน้าจอคอมพิวเตอร์
            </p>
          </li>
          <li>
            <h3>บริษัท ความสามารถเรามี จำกัด</h3>
            <h4>กราฟิคดีไซน์เนอร์</h4>
            <h5>ม.ค. 2555 - ส.ค. 2888</h5>
            <p>
              ออกแบบหน้าปกและจัดวางเลย์เอ้าท์ของนิตยสารในเครือทั้งหมด รวมทั้งจัดหน้าของหนังสือพ็อกเก็ตบุ๊คด้วย
            </p>
          </li>
          <li>
            <h3>บริษัท จีทีโอ จำกัด</h3>
            <h4>นักศึกษาฝึกงาน</h4>
            <h5>พ.ย. 2554 - ธ.ค. 2554</h5>
            <p>ร่วมออกแบบโปสเตอร์หนังของค่ายจีทีโอและช่วยทำไตเติ้ลรายการทีวีของบริษัท</p>
          </li>
        </ul>
      </section>
      <section id="education">
         <h2>ประวัติการศึกษา</h2>
         <ul>
           <li>
             <h3>มหาวิทยาลัยกรุงเทพ, กรุงเทพมหานคร</h3>
             <p>ปริญญาตรี สาขาออกแบบนิเทศศิลป์, คณะศิลปกรรมศาสตร์ - 2.75 GPA </p>
           </li>
           <li>
             <h3>โรงเรียนบ้านไกลมาก, ชัยนาท</h3>
             <p>ประถม - มัธยมศึกษาตอนปลาย</p>
           </li>
         </ul>
      </section>

    </article>
  </div>

@import 'https://fonts.googleapis.com/css?family=Kanit:300,600|Trirong:400,700';

html{
  font-family: Arial, sans-serif;
  font-size: 16px;
}

*{
  box-sizing: border-box;
}

body{
  background-color: #DDD;
  line-height: 1.5em;
}

article{
  max-width: 940px;
  min-width: 280px;
  margin: 20px auto 40px;
  background: #FFF;
  padding: 40px 40px 60px;
  box-shadow: 0 2px 10px 1px rgba(0,0,0,0.3);
  /* font-family: 'Trirong', serif;  */
  display:flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5{
/*   font-family: 'Kanit', sans-serif; */
}

h2{
  font-size:26px;
}

#profile-image{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  float: right;
}

#title{
  font-size: 36px;
  margin: 0;
  font-weight: normal;
}

#description{
  font-size: 20px;
  margin: 20px 0 20px;
  color: #666;
  font-weight: normal;
}

#contact{
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

#contact li{
  padding-right: 10px
}

#contact li i.fa{
  background: #999;
  width:30px;
  height: 30px;
  color: #FFF;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
}

#contact li a{
  color: #333;
}

#contact li a:hover{
  text-decoration: none;
}

#contact li:hover .fa{
  background: #777;
}

table th{
  text-align: left;
  width: 20%;
  vertical-align: top;
}

section{
  padding-top: 20px;
}

section h2{
  border-bottom: 1px solid #999;
  padding-bottom: 5px;
}

section ul{
  padding-left: 24px;
}

#skills ul li h3{
  margin-bottom: 0;
}

#skills ul li p{
  margin-top: 5px;
}

#experiences ul li{
  position: relative;
  padding: 5px 0 10px;
}

#experiences ul li h3{
  margin: 0 0 10px;
}

#experiences ul li h4{
  margin: 0 0 10px;
  color: #666;
}

#experiences ul li h5{
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  font-style: italic;
}

#experiences ul li p{
  margin-top: 5px;
}

#education ul li h3{
  margin-bottom: 5px;
}

#education ul li p{
  margin-top: 0px;
}



@media screen and (max-width: 800px){
  #contact li{
    width: 50%;
    margin: 5px 0;
  }
}

@media screen and (max-width: 600px){
  article{
    padding: 15px;
  }
  
  #profile-image{
    float: none;
    margin: 0 auto 30px;
    display: block;
  }
  
  #title{
    text-align: center;
    font-size: 22px;
  }
  
  #description{
    font-size: 18px;
    text-align: center;
  }

  h2{
    font-size:22px;
  }  

  #experiences ul li h5{
    position: relative;
  }  
  
  #contact{
    flex-direction: column;
  }  
  
  #contact li{
    margin: 5px 0;
    width: 100%;
  }

}