hellojs-tw · losevoid · Jul 27, 2017 · Jul 27, 2017 · Jul 27, 2017
diff --git a/README.md → 2017-kapok-losevoid/README.md b/README.md → 2017-kapok-losevoid/README.md
diff --git a/2017-kapok-losevoid/index.html b/2017-kapok-losevoid/index.html
@@ -0,0 +1,79 @@
+
+<!DOCTYPE html>
+<html lang="">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Title Page</title>
+
+        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+        <link rel="stylesheet" href="main.css">
+    </head>
+    <body>
+        <h1 class="text-center">My resume (張宇喬)</h1>
+
+        <div class="container-fluid">
+
+            <div class="row">
+
+                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
+                    <div class="stickers"><img src="sticker.jpg" alt=""></div>
+                    <div class="basic">Git Hub ID:losevoid</div>
+                    <div class="basic">Email: kg650034@gmail.com</div>
+                </div>
+
+
+                <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
+                    <div class="skills text-center">Skill ability</div>
+
+
+                    <div class="sktable">
+                    <dl class="dl-horizontal">
+                    <dt><span class="tittle">前端技能</span></dt>
+                    <dd>                    
+                        <span class="picture"> 
+                        <div class="progress">
+                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
+                        60%
+                        </div>
+                        </div> 
+                        </span>
+                    </dd>
+                    </dl> 
+                    <dl class="dl-horizontal">
+                    <dt><span class="tittle">後端技能</span></dt>
+                    <dd>                    
+                        <span class="picture"> 
+                        <div class="progress">
+                        <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
+                        70%
+                        </div>
+                        </div> 
+                        </span>
+                    </dd>
+                    </dl> 
+                    <dl class="dl-horizontal">
+                    <dt><span class="tittle">日文能力</span></dt>
+                    <dd>                    
+                        <span class="picture"> 
+                        <div class="progress">
+                        <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
+                        40%
+                        </div>
+                        </div> 
+                        </span>
+                    </dd>
+                    </dl>
+                    </div>
+
+                </div>
+
+            </div>
+
+        </div>
+
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    </body>
+</html>
diff --git a/2017-kapok-losevoid/main.css b/2017-kapok-losevoid/main.css
@@ -0,0 +1,21 @@
+*{
+    background-color: #eee;
+}
+
+.stickers img{
+    height: 100%;
+    width: 100%;
+}
+.skills{
+    border: 2px solid black;
+    margin: 10px 0;
+    background-color: #f0ad4e;
+}
+.progress{
+    border: 2px solid black;
+}
+
+.sktable{
+    margin:2em;
+}
+
diff --git a/2017-kapok-losevoid/sticker.jpg b/2017-kapok-losevoid/sticker.jpg