<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
});
});
</script>
</head>
<body>
<!---start-wrap--->
<!---start-header--->
<div class="header">
<div class="wrap">
<!---start-logo--->
<div class="logo">
<a href="index.html"><img src="images/logo.png"> </a>
</div>
<!---End-logo--->
<!---start-top-nav--->
<div class="top-nav">
<ul>
<li class="active"><a href="#me" class="scroll">Me</a></li>
<li><a href="#skills" class="scroll">Skills</a></li>
<li><a href="#works" class="scroll">Work</a></li>
<li><a href="#contact" class="scroll">Contact</a></li>
</ul>
</div>
<div class="clear"> </div>
<!---End-top-nav--->
</div>
</div>
<!---End-wrap--->
<div class="content">
<div class="grid1" id="me">
<a href="#"><img src="images/pic1.jpg" title="name" /></a>
<h3>Hi,I'm lipsum</h3>
</div>
<div class="grid2" id="skills">
<h3>Skill set</h3>
<p>be distracted by the readable content of a page when looking at its layout.</p>
<div class="main">
<ul id="bk-list" class="bk-list clearfix">
<li>
<div class="bk-book book-1 bk-bookdefault">
<div class="bk-front">
<div class="bk-cover">
<h2>
<span>The standard Lorem Ipsum passage</span>
<span>A Catwork Orange</span>
</h2>
</div>
<div class="bk-cover-back"></div>
</div>
<div class="bk-page">
<div class="bk-content bk-content-current">
<p>Red snapper Kafue pike fangtooth humums slipmouth, salmon cutlassfish; swallower European perch mola mola sunfish, threadfin bream</p>
</div>
<div class="bk-content">
<p>Whale catfish leatherjacket deep sea anglerfish grenadier sawfish pompano dolphinfish carp large-eye bream, squeaker amago. Sandroller;</p>
</div>
<div class="bk-content">
<p>Trahira giant wels cutlassfish snapper koi blackchin mummichog mustard eel rock bass whiff murray cod. Bigmouth buffalo ling cod giant </p>
</div>
<nav><span class="bk-page-prev"><</span><span class="bk-page-next">></span></nav></div>
<div class="bk-back">
<p>In this nightmare vision of cats in revolt, fifteen-year-old Alex and his friends set out on a diabolical orgy of robbery, rape, torture </p>
</div>
<div class="bk-right"></div>
<div class="bk-left">
<h2>
<span>Anthony Burghiss</span>
<span>A Catwork Orange</span>
</h2>
</div>
<div class="bk-top"></div>
<div class="bk-bottom"></div>
</div>
<div class="bk-info">
<button class="bk-bookback">Flip</button>
<button class="bk-bookview">View inside</button>
<h3>
<span>The standard Lorem Ipsum</span>
<span>A Catwork Orange</span>
</h3>
<p>Social prophecy? Black comedy? Study of freewill? A Clockwork Orange is all of these. </p>
</div>
<div class="bk-content">
<p>Trahira giant wels cutlassfish snapper koi blackchin mummichog mustard eel rock bass whiff murray cod. Bigmouth buffalo ling cod giant </p>
</div>
</li>
<li>
<div class="bk-book book-2 bk-bookdefault">
<div class="bk-front">
<div class="bk-cover">
<h3>
<span>The standard Lorem Ipsum</span>
<span>A Catwork Orange</span>
</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</p>
</div>
<div class="bk-cover-back"></div>
</div>
<div class="bk-page">
<div class="bk-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</p>
</div>
<div class="bk-content">
<p>Trahira giant wels cutlassfish snapper koi blackchin mummichog mustard eel .</p>
</div>
<div class="bk-content bk-content-current">
<p>Red snapper Kafue pike fangtooth humums's slipmouth, salmon cutlassfish;</p>
</div>
<nav><span class="bk-page-prev"><</span><span class="bk-page-next">></span></nav></div>
<div class="bk-back">
<p>Tyrant, blackmailer, racketeer, murderer - his influence reaches every level of American society.</p>
</div>
<div class="bk-right"></div>
<div class="bk-left">
<h2>
<span>J.C. Salinger</span>
<span>Donec mattis erat nec tellus</span>
</h2>
</div>
<div class="bk-top"></div>
<div class="bk-bottom"></div>
</div>
<div class="bk-info">
<button class="bk-bookback">Flip</button>
<button class="bk-bookview">View inside</button>
<h3>
<span>J.C. Salinger</span>
<span>Donec mattis erat</span>
</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</li>
<li>
<div class="bk-book book-3 bk-bookdefault">
<div class="bk-front">
<div class="bk-cover">
<h2>
<span>J.C. Salinger</span>
<span>Vestibulum vel nunc vitae</span>
</h2>
</div>
<div class="bk-cover-back"></div>
</div>
<div class="bk-page">
<div class="bk-content bk-content-current">
<p>Oceanic flyingfish spotted danio fingerfish leaffish, Billfish halibut Atlantic cod threadsail poacher slender mola. Swallower muskellunge, turbot needlefish yellow perch trout dhufish dwarf gourami false moray southern smelt cod dwarf gourami. Betta blue catfish bottlenose electric ray sablefish.</p>
</div>
<div class="bk-content">
<p>Whale catfish leatherjacket deep sea anglerfish grenadier sawfish pompano dolphinfish carp large-eye bream, squeaker amago. Sandroller; rough scad, tiger shovelnose catfish snubnose parasitic eel? Black bass soldierfish duckbill--Rattail Atlantic saury Blind shark California halibut; false trevally warty angler!</p>
</div>
<div class="bk-content">
<p>Trahira giant wels cutlassfish snapper koi blackchin mummichog mustard eel rock bass whiff murray cod. Bigmouth buffalo ling cod giant wels, sauger pink salmon. Clingfish luderick treefish flatfish Cherubfish oldwife Indian mul gizzard shad hagfish zebra danio. Butterfly ray lizardfish ponyfish muskellunge Long-finned sand diver mullet swordfish limia ghost carp filefish.</p>
</div>
<nav><span class="bk-page-prev"><</span><span class="bk-page-next">></span></nav></div>
<div class="bk-back">
<img src="images/3.png" alt="cat">
<p>Holden Catfield is a seventeen-year-old dropout who has just been kicked out of his fourth school. Navigating his way through the challenges of growing up, Holden dissects the 'phony' aspects of society.</p>
</div>
<div class="bk-right"></div>
<div class="bk-left">
<h2>
<span>J.C. Salinger</span>
<span>The Catcher in the Rye</span>
</h2>
</div>
<div class="bk-top"></div>
<div class="bk-bottom"></div>
</div>
<div class="bk-info">
<button class="bk-bookback">Flip</b
个人技能介绍.rar （24个子文件） 
个人技能介绍 js 
books1.js 2KB jquery-1.8.3.min.js 91KB modernizr.custom.js 9KB jquery.min.js 90KB css style.css 10KB default.css 3KB component.css 11KB
index.html 11KB images 
Black Photoshop.png 12KB twitt.png 2KB icon1.png 1KB logo.png 6KB
pic4.jpg 42KB bg1.jpg 84KB pic2.jpg 17KB logo.psd 42KB pic3.jpg 12KB pic1.jpg 9KB bg.png 112KB facebook.png 2KB rss.png 5KB icon3.png 658B googlepluse.png 7KB icon2.png 2KB资源评论
