<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>個(gè)人簡(jiǎn)歷</title>
<link rel="stylesheet" href="./a.css">
<script src="http://at.alicdn.com/t/font_767859_nkxtqfhtya.js"></script>
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<div class="topNavBar">
<div class="topNavBar-inner clearfix">
<a class="logo" href="#" alt="logo" style="float: left;">
<span class="rs">RS</span><span class="card">card</span>
</a>
<nav>
<ul class="clearfix" style="float: right;">
<li><a href="#">ABOUT</a></li>
<li><a href="#">SKILLS</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">EXPERIENCE</a></li>
<li><a href="#">PRICING</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CALENDAR</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">OTHER</a></li>
</ul>
</nav>
</div>
</div>
<div class="banner">
<div class="mask"></div>
</div>
<main>
<div class="userCard">
<div class="pictureAndText clearfix">
<div class="picture">
<img src="./img/image2.jpg" width=295 height=318 alt="頭像">
</div>
<div class="text">
<span class="welcome">HELLO
<span class="triangle"></span>
</span>
<h1>I'm Robert Smith</h1>
<p>Developer and Startup entrepreneur</p>
<dl>
<dt>AGE</dt>
<dd>29</dd>
<dt>ADDRESS</dt>
<dd>24058, Belgium, Brussels, Liutte 27, BE</dd>
<dt>E-MAIL</dt>
<dd>robertsmith@company.com</dd>
<dt>PHONE</dt>
<dd>+1 256 254 84 56</dd>
<dt>FREELANCE</dt>
<dd>till March 25, 2018</dd>
<dt>Vacation</dt>
<dd>till April 15, 2018</dd>
</dl>
</div>
</div>
<footer class="media">
<a href="#">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-ins"></use>
</svg>
</a>
<a href="#">
<<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-google"></use>
</svg>
</a>
<a href="#">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-facebook"></use>
</svg>
</a>
<a href="#">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dribbble"></use>
</svg>
</a>
<a href="#">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-twitter"></use>
</svg>
</a>
<a href="#">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-linkedin"></use>
</svg>
</a>
</footer>
</div>
<p class="downloadResume-wrapper">
<a class="downloadResume" href="./下載.pdf" target="_blank" download="">DOWNLOAD RESUME</a>
</p>
<p class="selfIntroduction">
Hello! I’m Robert Smith. Senior Web Developer specializing in front end development. Experienced with all stages of the development cycle for dynamic web projects. Well-versed in numerous programming languages including JavaScript, SQL, and C. Stng background in project management and customer relations.
</p>
</main>
<section class="skills">
<h2>Professional Skills</h2>
<ol class="clearfix">
<li>
<h3>WordPress</h3>
<div class="progressBar">
<div class="progress"></div>
</div>
</li>
<li>
<h3>HTML & CSS</h3>
<div class="progressBar">
<div class="progress"></div>
</div>
</li>
<li>
<h3>JavaScript</h3>
<div class="progressBar">
<div class="progress"></div>
</div>
</li>
<li>
<h3>PHP & MySQL</h3>
<div class="progressBar">
<div class="progress"></div>
</div>
</li>
<li>
<h3>Drupal</h3>
<div class="progressBar">
<div class="progress"></div>
</div>
</li>
<li>
<h3>Photoshop</h3>
<div class="progressBar">
<div class="progress"></div>
</div>
</li>
</ol>
</section>
<section class="portfolio">
<h2>Portfolio</h2>
<nav>
<ol class="clearfix">
<li id="portfolio1">ALL</li>
<li id="portfolio2">PHOTOGRAPHY</li>
<li id="portfolio3">UX DESIGN</li>
</ol>
<div id="portfolioBar" class="bar state-1">
<div class="bar-inner"></div>
</div>
</nav>
<script>
portfolio1.onclick=function(){
portfolioBar.className = 'bar state-1'
}
portfolio2.onclick=function(){
portfolioBar.className = 'bar state-2'
}
portfolio3.onclick=function(){
portfolioBar.className = 'bar state-3'
}
</script>
<div class="works" style="height: 597px;">
<div class="big" style="top: 0; left: 0;">
<img src="./img/1.jpg" alt="作品1">
</div>
<div class="small" style="top: 0; left: 645px;">
<img src="./img/2.jpg" alt="作品2">
</div>
<div class="small" style="top: 312px; left: 645px;">
<img src="./img/3.jpg" alt="作品3">
</div>
</div>
</section>
</body>
</html>
