<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>郭元霄的网站</title>
<!-- CSS -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/nivo-slider.css">
<link rel="stylesheet" href="css/validation.css">
<!-- Jquery magic -->
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>
<script src="js/jquery.scrollTo-min.js"></script>
<script src="js/zoombox.js"></script>
<script src="js/validation.js"></script>
<script src='js/main.js'></script>
</head>
<body>
<!-- Show loading gif image while page loads -->
<div class="loading"></div>
<!-- Top dark bar -->
<header id="banner">
<div class="center-wrap">
<div id="logo">
<h1><a href="#"><img src="images/logo.png" alt="Kallan" /></a></h1>
</div>
<nav id="menu"><ul>
<li class="current"><a href="#">首页</a></li>
<li><a href="#about">关于我</a></li>
<li><a href="#portfolio">案例</a></li>
<li><a href="#features">工作</a></li>
<li><a href="#contact">联系我</a></li>
<li><a href="http://guoyuanxiao.cn/blog">博客</a></li>
</ul></nav>
</div>
</header>
<!-- Home section -->
<section id="home">
<!-- Change slider images here -->
<div id="slider" class="nivoSlider">
<a href="#"><img src="images/slide1.jpg" alt="sliderImg1" title="<p>Flexible and functional</p> <span>Easy to modify and customize</span>" /></a>
<a href="#"><img src="images/slide2.jpg" alt="sliderImg2" title="<p>Modern minimalist portfolio</p> <span>Packed with HTML5 and CSS3 goodness</span>" /></a>
<a href="#"><img src="images/slide3.jpg" alt="sliderImg3" title="<p>Grid 960 System</p> <span>Suoer easy layout customization</span>" /></a>
<a href="#"><img src="images/slide4.jpg" alt="sliderImg4" title="<p>Okay you get the hang of it</p> <span>Another caption here</span>" /></a>
</div>
<div id="shadow"></div>
<div class="padding">
<div class="one-third">
<a href="images/slide3.jpg" class="zoombox">
<img src="images/img3.jpg" alt="Insanely Great" />
<div class="zoomHome">
<img src="images/zoomHome.png" alt="zoom icon" />
</div>
</a>
<h2>关于我</h2>
<p>您好。我的名字是郭元霄，我是一个来自山东的网页设计师。我专注于网页设计，插图和摄影。在创建网站的首选工具PS图象处理软件创造设计，然后用NotePad++做出优越HTML 5 / CSS 3网站。</p>
</div>
<div class="one-third">
<a href="images/slide1.jpg" class="zoombox">
<img src="images/img1.jpg" alt="Showcase like never before" />
<div class="zoomHome">
<img src="images/zoomHome.png" alt="zoom icon" />
</div>
</a>
<h2>我的工作</h2>
<p>我的工作是帮助你计划你的想法，然后创造出独特设计，优化和seo。感兴趣我能做些什么？你可以看到我在这里工作，如果你喜欢，你可以更多的了解我。如果你想与我联系，我会很乐意回答你。</p>
</div>
<div class="one-third">
<a href="portfolio/images/p4_full.jpg" class="zoombox">
<img src="images/img2.jpg" alt="Showcase like never before" />
<div class="zoomHome">
<img src="images/zoomHome.png" alt="zoom icon" />
</div>
</a>
<h2>联系我吗？</h2>
<p>guoyuanxiao.cn是一个个人网站，一个寄托着我们梦想的地方。我们的团队BlueDino，主要承接程序设计以及网站开发设计。如果你有关于这方面的意向，那请联系QQ：139616263或者电话：+8618265069127.</p>
</div>
</div>
<div class="intro-section margin clear">
<div class="padding">
<div class="two-third">
<h1><span>Stunning designs</span> and webapps</h1>
<p class="half-tiny-margin">Say something catchy over here. Yeah, go on, don't hesitate</p>
</div>
<div class="one-third">
<div class="tiny-margin">
<a class="scrollTo" href="#portfolio"><div class="button-red right">Portfolio</div></a>
</div>
</div>
</div>
</div>
<div class="next-section margin"><a href="#about" class="scrollTo">
<img src="images/down.png" title="Scroll to next section" alt="scroll" />
</a></div>
</section>
<!-- About Section -->
<section id="about">
<div class="intro-section">
<div class="padding">
<div class="one-third sep half-tiny-margin">
<h1><span>关于我</span></h1>
</div>
<div class="two-third">
<p>guoyuanxiao.cn is a small creative design agency located in ShanDong. We are a well knit team of designers and programmers that always takes it the extra mile for you.</p>
</div>
</div>
</div>
<div class="half-margin padding">
<div class="two-third">
<img class="left" src="images/about.jpg" alt="about" />
<h2>亲爱的游客， <span>您好！</span></h2>
<p>我是本站的主人，我的名字是郭元霄，我是一个来自山东的网页设计师。我专注于网页设计，插图和摄影。在创建网站的首选工具PS图象处理软件创造设计，然后用NotePad++做出优越HTML 5 / CSS 3网站。</p>
<p>我的工作是帮助你计划你的想法，然后创造出独特设计，优化和seo。感兴趣我能做些什么？你可以看到我在这里工作，如果你喜欢，你可以更多的了解我。如果你想与我联系，我会很乐意回答你。</p>
<p>guoyuanxiao.cn是一个个人网站，一个寄托着我们梦想的地方。我们的团队BlueDino，主要承接程序设计以及网站开发设计。如果你有关于这方面的意向，那请联系QQ：139616263或者电话：+8618265069127.</p>
<h2 class="tiny-margin">最后的话</h2>
<p>guoyuanxiao.cn是一个个人网站，一个寄托着我们梦想的地方。我们的团队BlueDino，主要承接程序设计以及网站开发设计。如果你有关于这方面的意向，那请联系QQ：139616263或者电话：+8618265069127.</p>
</div>
<div class="one-third">
<h2>专业领域</h2>
<p>这些始终是值得记住的技能，你可以做你最擅长的，特别是当它涉及到工作。这里是我的小自我检讨。</p>
<ul class="custom-list tick">
<li>网页/平面设计</li>
<li>用户界面设计</li>
<li>HTML5/CSS3</li>
<li>WordPress</li>
<li>photoshop cs6</li>
<li>seo</li>
</ul>
<a class="button-red" style="width: 140px;" href="#">下载简历</a>
</div>
</div>
<div class="next-section margin"><a href="#portfolio" class="scrollTo">
<img src="images/down.png" title="Scroll to next section" alt="scroll" />
</a></div>
</section>
<!-- Portfolio Section -->
<section id="portfolio">
<div class="intro-section">
<div class="padding">
<div class="one-third sep half-tiny-margin">
<h1><span>案例</span></h1>
</div>
<div class="two-third">
<p>这里是我的一些工作案例，你可以点开看看他们每一项，看看我们团队可以为您做些什么。如果有需要，那么请联系我。</p>
</div>
</div>
</div>
<div class="tiny-margin padding">
<div class="full-width">
<ul class="portHolder">
<li class="port">
<a title="Portfolio Item" href="portfolio/images/p1_full.jpg" class="zoomboxP">
<img src="images/p1.jpg" alt="item1" />
<div class="zoomHomeP">
<img src="images/zoomHomeP.png" alt="zoom icon" />
</div>
</a>
</li>
<li class="port">
<a title="Link to video" href="portfolio/p2.html" class="zoomboxP">
<img src="images/p2.jpg" alt="item2" />
<div class="zoomHomeP">
<img src=
html5 个人网站源码
5星 · 超过95%的资源 需积分: 47 201 浏览量
2013-01-02
17:33:03
上传
评论 7
收藏 3.44MB ZIP 举报 
BlueDino.zip （92个子文件） 
index.html 16KB
images 
youtube.png 1KB
p10.jpg 31KB phone.png 3KB slide1.jpg 106KB p8.jpg 26KB shadow.png 13KB zoomHome.png 4KB pointer.png 3KB p6.jpg 29KB bullet.png 3KB img3.jpg 22KB p12.jpg 22KB zoomHomeP.png 4KB p4.jpg 22KB address.png 3KB p9.jpg 28KB facebook.png 755B line1.png 3KB twitter.png 760B p2.jpg 22KB vimeo.png 991B p1.jpg 35KB p5.jpg 35KB arrowRight.png 4KB mail.png 3KB fbzl.png 12KB flickr.png 780B p3.jpg 16KB
loading.gif 2KB slide3.jpg 42KB p7.jpg 27KB bg 新建文件夹 bg1.png 10KB slide4.jpg 362KB stumbleupon.png 1KB img1.jpg 30KB li_tick.png 3KB arrowLeft.png 4KB img2.jpg 18KB slide2.jpg 68KB logo.png 4KB about.jpg 34KB line2.png 3KB blackBg.png 6KB bullet_active.png 3KB down.png 3KB sep.png 3KB p11.jpg 33KB js 
jquery.scrollTo-min.js 4KB main.js 5KB validation.js 7KB jquery.nivo.slider.pack.js 32KB jquery.easing.1.3.js 8KB jquery-1.6.4.min.js 90KB zoombox.js 22KB portfolio images p10_full.jpg 129KB p9_full.jpg 68KB p11_full.jpg 1.25MB p4_full.jpg 42KB p3_full.jpg 40KB bg1.png 10KB p12_full.jpg 105KB p1_full.jpg 106KB p6_full.jpg 89KB p5_full.jpg 362KB p7_full.jpg 84KB p8_full.jpg 103KB p2.html 818B css style.css 542B p3.html 2KB css normalize.css 8KB img simpleclose.png 1KB prev.png 2KB next.png 2KB simplenav.png 3KB lightclose.gif 700B ppnext.png 845B close.png 2KB loader.png 12KB lightnext.gif 812B loading.gif 2KB lightprev.gif 832B ppprev.png 828B ppsprite.png 4KB validation.css 198B romeral-webfont.eot 49KB romeral-webfontd41d.eot 49KB nivo-slider.css 2KB romeral-webfont.woff 27KB romeral-webfont.ttf 49KB
romeral-webfont.svg 59KB style.css 18KB
郭某某某
- 粉丝: 1
- 资源: 29
最新资源
- Fortran语言语法快速入门.pdf
- 明日方舟 年 鼠标指针.rar
- 全国银行经济监管可视化系统
- e商小二-供应链管理物流交仓创业商业计划书.rar
- Edge浏览器下载文件提示 “无法安全下载” 的解决方法
- 基于springboot+layui的医院日常耗材管理系统.zip
- Emkex亿迈克思新型互联网磁材供应链商业计划书.rar
- 计算机毕业设计-ASP.NET某店POS积分管理系统-销售情况，会员卡再发行数据生成(源代码+)-毕设源码实例.zip
- 计算机毕业设计-asp.net某店POS积分管理系统-清除履历表、日志表、月购买额(源代码+)-毕设源码实例.zip
- 计算机毕业设计-ASP.NET某店POS积分管理系统-积分实绩更新及销售状况统计(源代码+)-毕设源码实例.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
- 3
- 4
前往页