<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 圓餅圖、進度條...)
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.