<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>Second V-card</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- Css styles -->
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Signika:400,600,700,300" />
<!-- JavaScript lib -->
<script src="lib/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="lib/jquery.easytabs.min.js" type="text/javascript"></script>
<script src="lib/jquery.quicksand.js" type="text/javascript"></script>
<script src="lib/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="lib/jquery.poshytip.min.js" type="text/javascript"></script>
<script src="lib/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<script src="lib/jquery.mousewheel-3.0.4.pack.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="lib/jquery.gmap.min.js" type="text/javascript"></script>
<script src="lib/jquery.validate.js" type="text/javascript"></script>
<script src="lib/custom.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<style>
/* For IE < 8 (trigger hasLayout) */
.clearfix {
zoom:1;
}
</style>
<![endif]-->
<body>
<!--Page Wrraper-->
<div id="wrapper" class="clearfix">
<!--Style switcher-->
<section id="styleSwitcher">
<div id="inset">
<a class="orange" href="Second/orange/index.html"> </a>
<a class="red" href="Second/red/index.html"> </a>
<a class="green" href="Second/green/index.html"> </a>
<a class="switcher" href="#" data-id="1"><img src="images/pattern/patt1.png" alt="" /></a>
<a class="switcher" href="#" data-id="2"><img src="images/pattern/patt2.png" alt="" /></a>
<a class="switcher" href="#" data-id="3"><img src="images/pattern/patt3.png" alt="" /></a>
</div>
</section>
<!--End style switcher-->
<!--Page Header-->
<header id="header" class="clearfix">
<figure id="img"><img src="images/img.png" alt="" /><hgroup>
<h1>John Smith</h1>
<h2>Interactive designer/Photographer</h2>
</hgroup></figure>
<nav id="mainNav">
<ul class="tabs clearfix">
<li><a class="tab-about" href="#about">About</a></li>
<li><a class="tab-portfolio" href="#portfolio">Portfolio</a></li>
<li><a class="tab-blog" href="#blog">Blog</a></li>
<li><a class="tab-contact" href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!--End Page Header-->
<!-- Tabs Container-->
<section id="tabsContainer" class="clearfix">
<figure id="edge"><img src="images/edge.png" alt="" /></figure>
<!--Inner-->
<div id="innerBg">
<!--About Tab-->
<article id="about" class="clearfix">
<!-- Introduction -->
<section id="introduction" class="clearfix">
<h1>/ About me</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<ul class="info">
<li><span>Name</span> : John Smith</li>
<li><span>Date of birth</span> : 5/6/1987</li>
<li><span>Location</span> : Rabat - Morocco</li>
</ul>
<ul class="info">
<li><span>Email</span> : youremail@gmail.com</li>
<li><span>Phone</span> : + 55 81 8666-8867 </li>
<li><span>Website</span> : www.yoursite.com</li>
</ul>
</section>
<!-- End introduction -->
<!-- Skills -->
<section id="skills" class="clearfix">
<div id="skills1">
<h1>/ Graphics skills</h1>
<ul id="graphics">
<li>Photoshop <span class="r1"></span></li>
<li>Indesign<span class="r2"></span></li>
<li>Illustrator<span class="r3"></span></li>
<li>Flash<span class="r4"></span></li>
<li>Aftereffect<span class="r5"></span></li>
</ul>
</div>
<div id="skills2">
<h1>/ Programming skills</h1>
<ul id="programming">
<li>Php/Mysql<span class="r6"> </span> </li>
<li>Javascript <span class="r7"> </span></li>
<li>ASP <span class="r8"> </span></li>
<li>AS3 <span class="r9"> </span></li>
<li>Wordpress <span class="r10"> </span></li>
</ul>
</div>
</section>
<!-- End skills -->
<!-- Experience -->
<section id="experience">
<h1>/ Experience</h1>
<hgroup>
<h4>WebDesigner – Mutation Media </h4>
<h6>2005-2012</h6>
</hgroup>
<p>Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<br />
<hgroup>
<h4>WebDevelopper – Mutation Media </h4>
<h6>2005-2012</h6>
</hgroup>
<p>Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</section>
<!-- End experience -->
<!-- Education -->
<section id="education">
<h1>/ Education</h1>
<hgroup>
<h4>SEO consulting – Mutation Media </h4>
<h6>2005-2012</h6>
</hgroup>
<p>Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<br />
<hgroup>
<h4>Art director – Mutation Media </h4>
<h6>2005-2012</h6>
</hgroup>
<p>Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</section>
<!-- End education -->
<a class="vcardButton" href="#">Download my v-card</a>
<!-- End About Tab-->
</article>
<!--Portfolio Tab-->
<article id="portfolio" class="clearfix">
<!-- Introduction -->
<h1>/ My Works</h1>
<p>Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<!-- End introduction -->
<!-- Filter nav -->
<ul id="category" class="filter">
<li class="current all"><a href="#">All <span> /</span></a></li>
<li class="WebDesign"><a href="#">WebDesign <span> /</span></a></li>
<li class="WebDevelopment"><a href="#">WebDevelopment <span> /</span></a></li>
<li class="Animation"><a href="#">Animation </a></li>
</ul>
<!-- End filter nav -->
<!-- Works list -->
<section id="works">
<ul id="items" class="portfolio">
<li data-id="id-1" data-type="WebDesign" class="item"><a class="folio" href="images/folioimages/preview.jpg"><span class="plus"></span></a><img src="images/folioimages/im1.jpg" alt="" /><span class="border"></span><h3>Project title<span> / In Webdesign</span></h3></li>
<li data-id="id-2" data-type="WebDevelopment" class="item"><a class="folio" href="images/folioimages/preview.jpg"><span class="plus"></span>
前端设计师web简历html模板下载_黑色个人简历web简历窄动画html5网上名片.rar
需积分: 0 77 浏览量
2023-09-12
08:43:20
上传
评论
收藏 3.27MB RAR 举报
前端设计师web简历html模板下载_黑色个人简历web简历窄动画html5网上名片.rar （59个子文件） 
fancybox.png 15KB
im4.jpg 48KB about-ico.png 3KB preview.jpg 124KB pattern1.png 9KB
jquery.fancybox-1.3.4.js 28KB jquery-1.7.1.min.js 92KB
blank.gif 43B main.css 28KB patt1.png 4KB jquery.gmap.min.js 9KB nav-arrow-active.png 3KB im3.jpg 35KB rating-sprite.png 3KB jquery.fancybox-1.3.4.css 8KB im9.jpg 32KB pattern3.png 20KB zoom.png 3KB quote.png 3KB im8.jpg 29KB folio-ico.png 3KB jquery.poshytip.min.js 9KB jquery.validate.js 37KB fancybox-y.png 176B blog-ico.png 3KB jquery.mousewheel-3.0.4.pack.js 1KB fancy_title_over.png 70B im10.jpg 35KB about-ico-active.png 3KB folio-ico-active.png 3KB comment-ico.png 3KB bg-button.png 139B postImage1.jpg 51KB social-sprite.png 5KB im7.jpg 31KB im1.jpg 38KB im5.jpg 32KB patt3.png 4KB
index.html 28KB jquery.easytabs.min.js 9KB im6.jpg 38KB patt2.png 4KB whois-ico.png 3KB cat-ico.png 3KB pattern2.png 174KB contact-ico.png 3KB s.jpg 26KB custom.js 5KB jquery.easing.1.3.js 8KB fancybox-x.png 203B im2.jpg 30KB img.png 36KB small-img.jpg 11KB blog-ico-active.png 3KB postImage2.jpg 48KB edge.png 3KB date-ico.png 3KB contact-ico-active.png 3KB jquery.quicksand.js 14KB资源评论
