<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<div class="resume">
  <div class="title">STEVEN BRAIN<hr><div class="position">Graphic & Web Designer</div></div>
  <div class="content">
    <div class="left">
      <div class="headshot"><img src="https://obs.line-scdn.net/0hu3sPU5VsKhxOKQIOxhZVS3R_KXN9RTkfKh97Hw1HdCg3H2lDdkhscm0qfCRqTm1CJ09meW4rMS0wSm0aIEts/w644"></div>
      <div class="introduction"><div class="subtitle">HELLO</div><hr><p>Pick a resume template, fill it out, and format. Create a professional resume in a few clicks. Just choose one of resume templates below, add ready-made content, download, and get the job.</p></div>
      <div class="contact">
        <div class="subtitle">CONTACT</div><hr>
        <div class="item">
          <div class="icon"><i class="fas fa-mobile-alt"></i></div>
          <div class="info"><h4>Phone</h4><p>0913627633</p></div>
        </div>
        <div class="item">
          <div class="icon"><i class="far fa-envelope"></i></div>
          <div class="info"><h4>Email</h4><p>email@gmail.com</p></div>
        </div>
        <div class="item">
          <div class="icon"><i class="fab fa-weixin"></i></div>
          <div class="info"><h4>Web</h4><p>yourscypeaccount</p></div>
        </div>
        <div class="item">
          <div class="icon"><i class="fab fa-twitter-square"></i></div>
          <div class="info"><h4>Twitter</h4><p>www.yoursite.com</p></div>
        </div>
      </div>
    </div><div class="right">
      <div class="profile">
        <div class="subtitle">Profile</div><hr>
        <div class="text">My goal is to continually expand my design skills and knowledge in Architecture and Design at a professional level.Belief in dedication, hardwork and eagerness to learn, make me a valuable asset on any team.</div>
        <div class="pie_chart">
          <div class="circle"><div class="squre"></div><div class="inner_circle"><p class="item">JAVA</p></div></div>
          <div class="circle"><div class="squre"></div><div class="squre squre2"></div><div class="inner_circle"><p class="item">HTML</p></div></div>
          <div class="circle"><div class="squre"></div><div class="squre squre3"></div><div class="inner_circle"><p class="item">PYTHON</p></div></div>
          <div class="circle"><div class="squre"></div><div class="squre squre4"></div><div class="inner_circle"><p class="item">C++</p></div></div>
          <div class="circle"><div class="squre"></div><div class="squre squre5"></div><div class="inner_circle"><p class="item">C#</p></div></div>
        </div>
        </div>
      <div class="work">
        <div class="subtitle">Work Experience</div><hr>
        <div class="year">
          <div class="line"></div>
          <div class="year1">2010</div>
          <div class="year2">2012</div>
          <div class="year3">2016</div>
        </div>
        <div class="work_experience">
          <div class="position"><h3>WEB DEVELOPEMENT</h3><p>b.arch degree from The Department Of Architecture & Landscape Design, SMVD University, Jammu & Kashmir.</p></div>
          <div class="position"><h3>HIGHER SECONDARY</h3><p>completed my 10+2 degree from PERKS Matriculation Higher Secondary School, Coimbatore, Tamilnadu.</p></div>
          
          <div class="position"><h3>FREELANCER</h3><p>six months intership at the Madras Office For A rchitects & Designers, Chennai under Ar.Mahesh Radhakrishnan.</p></div>
        </div>
      </div>
      <div class="skills">
        <div class="subtitle">Skills</div><hr>
        <div class="skill_left">
          <h3>HARD</h3>
			    <div class="skill">
				    <h4>Adobe InDesign CC</h4>
				    <div class="progressbar">
					    <div class="valuebar value1"></div>
				    </div>
			    </div>
			    <div class="skill">
				    <h4>Adobe Illustrator CS6</h4>
				    <div class="progressbar">
					    <div class="valuebar value2"></div>
				    </div>
			    </div>
          <div class="skill">
				    <h4>Adobe Xd</h4>
				    <div class="progressbar">
					    <div class="valuebar value2"></div>
				    </div>
			    </div>
        </div>
		
        <div class="skill_right">
          <h3>SOFT</h3>
          <div class="skill">
				    <h4>Adobe After Effects CC</h4>
				    <div class="progressbar">
					    <div class="valuebar value3"></div>
			    	</div>
			    </div>
			    <div class="skill">
				    <h4>Adobe Photoshop CS6</h4>
			    	<div class="progressbar">
				    	<div class="valuebar value4"></div>
				    </div>
		  	  </div>
          <div class="skill">
				    <h4>Adobe Premiere Pro</h4>
			    	<div class="progressbar">
				    	<div class="valuebar value4"></div>
				    </div>
		  	  </div>
        </div>
      </div>
    </div>
  </div>
</div>
*{
/*   border:solid 1px black; */
  vertical-align:top;
  font-family: 微軟正黑體;
  position:relative;
}
html,body{
  margin:0px;
  background:linear-gradient(20deg,#222,#444);
}
.resume{
  margin:50px auto 50px auto;
  width:800px;height:100%;
  font-size:15px;
  letter-spacing:1px;
  border:solid 1px #888;
  background-color:white;
  box-shadow:10px 10px 10px -10px black;
}
.title{
  text-align:center;
  font-size:30px;
  font-weight:bold;
  letter-spacing:4px;
  padding:40px;
  background-color:#eee;
}
.title hr{
  margin-top:0px;
  width:350px;
}
.position{
  font-size:10px;
  margin-bottom:10px;
}
.left,.right{
  display:inline-block;
  box-sizing:border-box;
  padding:0px 15px 20px 25px;
}
.left{
  width:30%;
  background-color:#F5F5F5;
}
.right{
  width:70%;
  background-color:white;
  padding-left:0px;
}

.headshot{
  text-align:center;
}
.headshot img{
  width:170px;
  border-radius:100%;
  margin-top:65px;
  box-shadow:5px 5px 5px -5px #333;
}
.introduction{
  padding:20px;
}
.subtitle{
  text-align:center;
  margin-bottom:0px;margin-top:38px;
  font-size:20px;
  font-weight:bold;
  letter-spacing:4px;
}
hr{
  height:1px; border:none;
  background-color:#aaa;
  /*改變hr顏色(缺一不可)*/
}
.introduction hr{
  margin-top:0px;
  margin-bottom:20px;
  width:160px;
}
.introduction p{
  margin-left:5px;
}
.contact{
  margin-bottom:30px;
}
.contact hr{
  margin-top:0px;
  margin-bottom:20px;
  width:160px;
}
.profile hr{
  margin-top:0px;
  width:450px;
}
.work hr{
  margin-top:0px;
  width:450px;
}
.skills hr{
  margin-top:0px;
  width:450px;
}
.skills>.subtitle{
  margin-top:18px;
}
.contact i{
  width:35px;height:35px;
  font-size:30px;
  margin:0px 10px 5px 20px;
  text-align:center;
  vertical-align: bottom;
}
.icon{
  height:30px;
}
.icon,.info{
  display: inline-block;
  vertical-align: bottom;
}
.info h4{
  margin:0;
}
.info p{
  margin:0;
  font-size:10px;
}
.item{
  margin-bottom:10px;
}
.right .text{
  padding:10px;
  margin:10px;
}
.pie_chart{
  text-align:center;
  margin-left:5px;
}
.profile .text{
  padding:10px;
  margin-left:45px;
}
.pie_chart .circle{
  width:70px;height:70px;
  border-radius:100%;
  background-color: #333;
  position:relative;
  overflow:hidden;
  margin-left:10px;
  margin-right:10px;
}
.pie_chart .squre{
  width:35px;height:35px;
  background-color: #888;
  position:absolute;
  left:35px;
}
.squre.squre2{
  transform-origin:bottom left;
  transform:rotate(45deg);
}
.squre.squre3{
  background-color: #333;
  transform-origin:bottom left;
  transform:rotate(40deg);
}
.squre.squre4{
  transform-origin:bottom left;
  transform:rotate(70deg);
}
.squre.squre5{
  transform-origin:bottom left;
  transform:rotate(15deg);
}
.pie_chart .inner_circle{
  width:60px;height:60px;
  border-radius:100%;
  background-color: #fff;
  position:absolute;
  left: 50%; top: 50%; transform:translate(-50%,-50%); 
}
.circle .item{
  margin: 0;
  position: absolute;
  left: 50%; top: 50%; transform:translate(-50%,-50%); 
  font-size:10px;
  font-weight:500;
}
.circle{
  display:inline-block;
}
.year{
  display: inline-block;
  margin-left:35px;
}
.line{
  width:1px;height:255px;
  background-color: #eee;
  margin-top:10px;
  margin-left:80px;
}
.year1,.year2,.year3{
  position: absolute;
  border:solid 1px #888;
  border-radius:5px;
  font-size: 5px;
  color:white;
  background-color: #888;
  padding:2px 10px;
  right:10px;
}
.year1{
  top:15px;
}
.year2{
  top:100px;
}
.year3{
  top:185px;
}
.work_experience{
  display: inline-block;
  width: 390px;
  padding-right:0px;
}
.work_experience h3{
  letter-spacing:1px;
  margin-top:10px;
  margin-bottom:0px;
  padding:5px 0px 0px 15px;
}
.work_experience p{
  font-size: 10px;
  letter-spacing:1.5px;
  margin-top:0px;
  padding:2px 0px 5px 15px;
}
.skills{
  text-align:center;
}
.skill_left,.skill_right{
  display: inline-block;
  width:40%;
  margin:10px;
  margin-top:20px;
  padding-top:20px;
}
.skill_left{
  margin-left:20px;
}
.progressbar{
  border:solid 1px;
  background-color: #f3f3f3;
  height:10px;
  margin:5px;
  margin-top:20px;
  border-radius:3px;
  overflow:hidden;
}
.valuebar{
  background-color: #666;
  height:100%;
}
.value1{
  width:60%;
}
.value2{
  width:80%;
}
.value3{
  width:90%;
}
.value4{
  width:75%;
}
.skills h4{
  margin:0px;padding:0px;
  display: inline-block;
  font-size: 10px;
  position: absolute;
  left:8px; bottom:13px;
}
.skill{
  margin-top:25px;
}
.skills h3{
  margin:0px;padding:0px;
  display: inline-block;
  font-size: 15px;
  position: absolute;
  left:8px; top:0px;
  font-weight:500;
}
/*

遇到的問題 / 可加強部分:

1.想到什麼就調什麼,造成許多地方程式碼重複,下手前應該先多加思考,把程式碼整理乾淨
2.擬架構的部分還不到非常熟練
3.定位的部分沒有做好綁定(相對對齊),造成有些地方牽一髮動全身
4.任何在html裡散落的文字或元素都要用標籤包起來,這樣才能針對它做樣式的調整

*/

/*

單元重點:

1.從零到有的作業(沒有老師示範),能有一次從頭到尾自己完成小專題的經驗
2.練習版面規劃,包括如何擬定html架構,好的架構能幫助排版變得更容易
3.運用css製作資料圖(ex 圓餅圖、進度條...)

*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.