js部分做了一些修改
css方面没有修改
html方面自己做的
参考网址（
![]()
http://www.paulineosmont.com/
）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Person Website / HR designer</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="icon" href="img/favicon.png" />
<link rel="stylesheet" href="css/index/pc.css" />
<link rel="stylesheet" href="css/index/pad.css" media="all and (max-940px)" />
<link rel="stylesheet" href="css/index/mobile.css" media="all and (max-635px)" />
</head>
<body>
<section id="introduce">
<div class="awwards"></div>
<div id="web_designer" class="web_designer">
<span>WEB DESIGNER</span>
</div>
<div id="beautiful_page" class="beautiful_page">
<span>BEAUTIFUL PAGE</span>
</div>
<div id="logo" class="logo">
<img src="img/logo.png" alt="logo">
</div>
</section>
<div class="openmenu" onclick="openMenu()"></div>
<nav id="nav">
<div class="menu menuworks">
<span class="number">01</span>
<hr />
<span class="label">WORKS</span>
</div>
<div class="menu menuabout">
<span class="number">02</span>
<hr />
<span class="label">ABOUT</span>
</div>
<div id="logosmall" class="logosmall">
<img src="img/logo_small.png" alt="Logo Pauline Osmont" />
</div>
<div id="close" onclick="closeMenu()"></div>
<div class="menu menublog">
<span class="number">03</span>
<hr />
<span class="label">BLOG</span></div>
<div class="menu menucontact">
<span class="number">04</span>
<hr />
<span class="label">CONTACT</span>
</div>
</nav>
<div id="love_bg"></div>
<section id="love">
<div class="content">
<div class="item item1 maram">
<img src="img/maram.jpg" />
<div class="roll">
<div class="left">
<div></div>
</div>
<div class="right">
<div></div>
</div>
<div class="info_container">
<div class="info">
<h2>Maram <br>Paris</h2>
<div class="line"></div>
<div class="role">
<span class="role1">art direction</span>
<span class="role2">, logotype</span>
</div>
</div>
</div>
</div>
</div>
<div class="item item1 zoo">
<img src="img/zooecomuseum.jpg" />
<div class="roll">
<div class="left">
<div></div>
</div>
<div class="right">
<div></div>
</div>
<div class="info_container">
<div class="info">
<h2>Zoo Eco <br>Museum</h2>
<div class="line"></div>
<div class="role">
<span class="role1">art direction</span>
<span class="role2">, print</span>
</div>
</div>
</div>
</div>
</div>
<div class="item item2 clear cgi">
<img src="img/cgi.jpg" />
<div class="roll">
<div class="left">
<div></div>
</div>
<div class="right">
<div></div>
</div>
<div class="info_container">
<div class="info">
<h2>CGI</h2>
<div class="line"></div>
<div class="role">
<span class="role1">art direction</span>
<span class="role2">, web design</span>
</div>
</div>
</div>
</div>
</div>
<div class="item item3 antoinelestage">
<img src="img/antoinelestage.jpg" />
<div class="roll">
<div class="left">
<div></div>
</div>
<div class="right">
<div></div>
</div>
<div class="info_container">
<div class="info">
<h2>Antoine <br>L'Estage</h2>
<div class="line"></div>
<div class="role">
<span class="role1">art direction</span>
<span class="role2">, t-shirt design</span>
</div>
</div>
</div>
</div>
</div>
<div class="item item3 clear tokkun">
<img src="img/tokkun.jpg" />
<div class="roll">
<div class="left">
<div></div>
</div>
<div class="right">
<div></div>
</div>
<div class="info_container">
<div class="info">
<h2>Tokkun <br>Academy</h2>
<div class="line"></div>
<div class="role">
<span class="role1">art direction</span>
<span class="role2">, webdesign</span>
</div>
</div>
</div>
</div>
</div>
<div class="item item2 soulofthedeadtree">
<img src="img/soulofthedeadtree.jpg" />
<div class="roll">
<div class="left">
<div></div>
</div>
<div class="right">
<div></div>
</div>
<div class="info_container">
<div class="info">
<h2>Soul of the <br>Dead Tree</h2>
<div class="line"></div>
<div class="role">
<span class="role1">illustration</span>
</div>
</div>
</div>
</div>
</div>
<div class="item item1 clear pmmt">
<img src="img/pmmt.jpg" />
<div class="roll">
<div class="left">
<div></div>
</div>
<div class="right">
<div></div>
</div>
<div class="info_container">
<div class="info">
<h2>PMMT</h2>
<div class="line"></div>
<div class="role">
<span class="role1">Web Design</span>
</div>
</div>
</div>
</div>
</div>
<div class="item item1 dixon">
<img src="img/dixon.jpg" />
<div class="roll">
<div class="left">
<div></div>
</div>
<div class="right">
<div></div>
</div>
<div class="info_container">
<div class="info">
<h2>Batteries <br>Dixon</h2>
<div class="line"></div>
<div class="role">
<span class="role1">art direction</span>
<span class="role2">, web design</span>
</div>
</div>
</div>
</div>
</div>
<div class="item item2 clear artspire">
<img src="img/artspire.jpg" />
<div class="roll">
<div class="left">
<div></div>
</div>
<div class="right">
<div></div>
</div>
<div class="info_container">
<div class="info">
<h2>Art-Spire</h2>
<div class="line"></div>
<div class="role">
<span class="role1">art direction</span>
<span class="role2">, web design</span>
</div>
</div>
</div>
</div>
</div>
<div class="item item3 departementevenement">
<img src="img/depevt.jpg" />
<div class="roll">
<div class="left">
<div></div>
</div>
<div class="right">
<div></div>
</div>
<div class="info_container">
<div class="info">
<h2>Département <br>Evénements</h2>
<div class="line"></div>
<div class="role">
<span class="role1">art direction</span>
<span class="role2">, logotype</span>
<span class="role3">, print</span>
</div>
</div>
</div>
</div>
</div>
<div class="item item3 clear lerecyclagepasapas">
<img src="img/lerecyclagepasapas.jpg" />
<div class="roll">
<div class="left">
<div></div>
</div>
<div class="right">
<div></div>
</div>
<div class="info_container">
<div class="info">
<h2>Le recyclage <br>pas à pas</h2>
<div class="line"></div>
<div class="role">
<span class="role1">art direction</span>
<span class="role2">, illustration</span>
<span class="role3">, print</span>
<span class="role4">, writing</span>
</div>
</div>
</div>
</div>
</div>
<div class="item item2 inlogia">
<img src="img/inlogia.jpg" />
<div class="roll">
<div class="left">
<div></div>
</div>
<div class="right">
<div></div>
</div>
<div class="info_container">
<div class="info">
<h2>InLogia</h2>
<div class="line"></div>
<div class="role">
<span class="role1">web design</span>
</div>
</div>
</div>
</div>
</div>
<div class="item item1 clear witchatt">
<img src="img/witchatt.jpg" />
<div class="roll">
<div class="left">
<div></div>
</div>
<div class="right">
<div></div>
</div>
<div class="info_container">
<div class="info">
<h2>Witchatt</h2>
<div class="line"></div>
<div class="role">
<span class="role1">art direction</span>
<span class="role2">, logotype</span>
</div>
</div>
</div>
</div>
</div>
<div class="item item1 antro">
<img src="img/antro.jpg" />
<div class="roll">
<div class="left">
<div></div>
</div>
<div class="right">
<div></div>
</div>
<div class="info_container">
<div class="info">
<h2>Antro</h2>
<div class="line"></div>
<div class="role">
<span class="role1">art direction</span>
<span class="role2">, illustration</span>
</div>
</div>
</div>
</div>
</div>
<div class="item item2 clear origami">
<img src="img/origami.jpg" />
<div class="roll">
<div class="left">
<div></div>
</div>
<div class="right">
<div></div>
</div>
<div class="info_container">
<div class="info">
<h2>Origami 3D</h2>
<div class="line"></div>
<div class="role">
<span class="role1">art direction</span>
<span class="role2">, craft</span>
</div>
</div>
</div>
</div>
</div>
<div class="item item3 legrandbal">
<img src="img/legrandbal.jpg" />
<div class="roll">
<div class="left">
<div></div>
</div>
<div class="right">
<div></div>
</div>
<div class="info_container">
<div class="info">
<h2>Le Grand Bal</h2>
<div class="line"></div>
<div class="role">
<span class="role1">art direction</span>
<span class="role2">, print</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer id="footer">
<div class="container">
<div id="footerleft">
<span>Status</span>
<span class="work">I'm currently looking for a full-time job in Shanghai, china.<br></span>
<span class="contactme"><a>Contact me</a></span>
</div>
<div id="footerright">
<span>Oh and by the way...</span>
<span class="work">© 2015 All rights reserved Pauline Osmont. <br>Brands mentionned above are property of their respective owner.<br></span>
<span class="work">Coded by</span> <a>Nicolas Tarier</a>
</div>
</div>
</footer>
</body>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</html>