Skip to content

week3 Homework #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kevinypfan wants to merge 1 commit into
base: master
Choose a base branch
from
Open

week3 Homework #11

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
239 changes: 239 additions & 0 deletions 2017-Kapok-fan.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,239 @@

<!DOCTYPE html>
<html >

<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
<link rel="mask-icon" type="" href="https://production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
<title>CodePen - Resume</title>



<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

<style>
@charset "UTF-8";
* {
font-family: "微軟正黑體";
}

html, body {
margin: 0;
padding: 0;
background-color: #3E3A39;
}

.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 1024px;
background-color: #DCDCDD;
margin: 20px auto;
}

.left-bar {
background-color: #368CBF;
width: 28%;
margin: 0 1%;
box-shadow: 5px 0px 10px #8C95AA;
color: #F9F8FD;
text-shadow: 0.4px 0.4px 1px #DFDCE3;
letter-spacing: 3px;
padding: 20px;
}
.left-bar .leftMt {
padding: 40px 0px;
}

.right-bar {
width: 60%;
margin: 0px auto;
}

.left-block1 {
position: relative;
}
.left-block1 .img {
background: url(https://scontent-tpe1-1.xx.fbcdn.net/v/t1.0-9/20140031_1519698221448757_7578386114127055667_n.jpg?oh=a1fbea1b96bf83bc9a5e67fec18b1eca&oe=5A01258C);
width: 100%;
height: 300px;
background-position: right top;
background-size: 120%;
box-shadow: 0px -30px 50px black inset;
background-repeat: no-repeat;
}
.left-block1 .name {
position: absolute;
right: 0px;
bottom: 0px;
font-weight: 700;
font-size: 36px;
color: #F9F8FD;
letter-spacing: 3px;
}
.left-block1 .name span {
font-size: 20px;
}

.left-block4 i {
font-size: 30px;
margin-right: 15px;
cursor: pointer;
}
.left-block4 i span {
font-size: 12px;
}

.right {
background-color: #F9F8FD;
margin-top: 40px;
padding: 10px 30px;
box-shadow: 2px 2px 14px #3E3A39;
}
.right h3 {
font-size: 26px;
color: #256083;
letter-spacing: 2px;
}
.right p {
letter-spacing: 1px;
font-weight: bold;
color: #3E3A39;
}

.right-block2 .bar {
position: relative;
border: 4px solid;
height: 15px;
border-radius: 15px;
width: 85%;
margin: 5px 13px;
background-color: #DCDCDD;
}
.right-block2 .bar .HTML {
content: "";
display: block;
width: 90%;
height: 15px;
background-color: #368CBF;
border-radius: 15px;
}
.right-block2 .bar .javascript {
content: "";
display: block;
width: 85%;
height: 15px;
background-color: #368CBF;
border-radius: 15px;
}
.right-block2 .bar .Css {
content: "";
display: block;
width: 83%;
height: 15px;
background-color: #368CBF;
border-radius: 15px;
}
.right-block2 .bar .jQuery {
content: "";
display: block;
width: 80%;
height: 15px;
background-color: #368CBF;
border-radius: 15px;
}
.right-block2 .bar .Vue {
content: "";
display: block;
width: 92%;
height: 15px;
background-color: #368CBF;
border-radius: 15px;
}
.right-block2 .bar span {
position: absolute;
right: -50px;
top: -4px;
}

</style>





</head>

<body translate="no" >


<div class="container">
<div class="left-bar">
<div class="left-block1">
<div class="img"></div>
<div class="name">范振哲<span>(Fan,Kevin)</span></div>
</div>
<div class="left-block2 leftMt">
<h3>學歷</h3>
<p>聯合大學資訊工程</p>
<p>苗栗高商商業經營</p>
</div>
<div class="left-block3 leftMt">
<h3>聯絡資訊</h3>
<p>手機:09XX-XXXXXX</p>
<p>苗栗縣頭份市中華路1237號</p>
</div>
<div class="left-block4 leftMt">
<h3>SOCIAL MEDIA</h3><i class="fa fa-instagram"> <span>(kevinypfan)</span></i><i class="fa fa-facebook"><span>(dioypfan)</span></i>
</div>
</div>
<div class="right-bar">
<div class="right-block1 right">
<h3>興趣</h3>
<p>無聊寫程式</p>
<p>有趣動漫</p>
<p>看電影</p>
<p>玩遊戲</p>
</div>
<div class="right-block2 right">
<h3>程式技能</h3>
<p>HTML
<div class="bar">
<div class="HTML"></div><span>90%</span>
</div>
</p>
<p>javascript
<div class="bar">
<div class="javascript"></div><span>85%</span>
</div>
</p>
<p>Css
<div class="bar">
<div class="Css"></div><span>83%</span>
</div>
</p>
<p>jQuery
<div class="bar">
<div class="jQuery"></div><span>80%</span>
</div>
</p>
<p>Vue
<div class="bar">
<div class="Vue"> </div><span>92%</span>
</div>
</p>
</div>
<div class="right-block3 right"></div>
</div>
</div>






</body>
</html>