<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>大王的简历 3rd</title>
<link rel="stylesheet" href="style.css">
<script src="//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js"></script>
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: white;
overflow: hidden;
}
</style>
</head>
<body>
<!-- topNavBar start -->
<div class="topNavBar clearfix">
<div class="topNavBarinner">
<a href="###" class="logo">
<span class="rs">RS</span>
<span class="card">card</span>
</a>
<nav>
<ul class="clearfix">
<li><a href="#">关于</a></li>
<li><a href="#skills">技能</a></li>
<li><a href="#portfolio">作品</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">日历</a></li>
<li><a href="#">联系方式</a></li>
<li><a href="#">其他</a></li>
</ul>
</nav>
</div>
</div>
<!-- topNavBar end -->
<!-- banner start -->
<div class="banner">
<div class="mask"></div>
</div>
<!-- banner end -->
<!-- card & downloadResume & selfIntroduction start-->
<main>
<!-- cardPerson start -->
<div class="cardPerson">
<div class="pictureAndText clearfix">
<div class="picture">
<img src="img/my.jpg" width=299 height=347 alt="头像">
</div>
<div class="text">
<span class="welcome">Hello
<span class="triangle"></span>
</span>
<h1>大王</h1>
<p>前端开发工程师</p>
<hr>
<dl >
<dt>年龄</dt>
<dd>
18</dd>
<dt>所在城市</dt>
<dd>北京</dd>
<dt>邮箱</dt>
<dd>yanggseo@foxmail.com</dd>
<dt>手机</dt>
<dd>13519870949</dd>
</dl>
</div>
</div>
<footer class="media">
<a href="#">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-github"></use>
</svg>
</a>
<a href="#">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weibo"></use>
</svg>
</a>
<a href="#">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-qq"></use>
</svg>
</a>
</footer>
</div>
<!-- cardPerson ending -->
<p class="downloadResume">
<a href="./resume.pdf" class="button" target="_blank" download="">下载 PDF 简历</a>
</p>
<p class="selfIntroduction">
大王, 现在在 饥人谷 学习前端课程。<br>
技能:前端开发,Node.js 开发, webpack
</p>
</main>
<!-- card & downloadResume & selfIntroduction end-->
<!-- 技能 -->
<section class="skills">
<h2><a name="skills"></a>技能</a></h2>
<ol class="clearfix">
<li>
<h3>HTML 5 & CSS 3</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>jQuery</h3>
<div class="progressBar">
<div class="progress"></div>
</div>
</li>
<li>
<h3>Vue</h3>
<div class="progressBar">
<div class="progress"></div>
</div>
</li>
<li>
<h3>React</h3>
<div class="progressBar">
<div class="progress"></div>
</div>
</li>
<li>
<h3>Angular</h3>
<div class="progressBar">
<div class="progress"></div>
</div>
</li>
</ol>
</section >
<!-- 作品集 -->
<section class="portfolio">
<h2> <a name="portfolio">作品集</a></h2>
<nav>
<ol class="clearfix">
<li id="portfolio1">所有</li>
<li id="portfolio2">框架</li>
<li id="portfolio3">原生JS&CSS</li>
</ol>
<div class="portfolioBar">
<div id="barInner" class="bar-inner"></div>
</div>
</nav>
<script>
portfolio1.onclick=function(){
barInner.className ="bar-inner state-1";
}
portfolio2.onclick=function(){
barInner.className ="bar-inner state-2";
}
portfolio3.onclick=function(){
barInner.className ="bar-inner state-3";
}
</script>
<div class="jobs">
<div class="big">
<img src="img/1.jpg" alt="作品1">
</div>
<div class="small">
<img src="img/2.jpg" alt="作品2">
</div>
<div class="small small2">
<img src="img/3.jpg" alt="作品3">
</div>
</div>
</section>
</body>
</html>