<!DOCTYPE HTML>
<html class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>BIGFAT - Single page portfolio template</title>
<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
<link rel="stylesheet" type="text/css" href="style/switcher.css" media="all" />
<script type="text/javascript" src="js/modernizr.js"></script>
</head>
<body class="BGribbons">
<div id="overlay"></div>
<div id="lightbulb"></div>
<div id="container">
<div id="nav" class="unit static twoWide threeHigh">
<div id="logo"></div>
<ul class="filter">
<li class="selected" id="all"><a href="#" data-filter="*"><span>All</span></a></li>
<li id="info"><a href="#" data-filter=".info"><span>Info</span></a></li>
<li id="photography"><a href="#" data-filter=".photography"><span>Photography</span></a></li>
<li id="illustration"><a href="#" data-filter=".illustration"><span>Illustration</span></a></li>
<li id="video"><a href="#" data-filter=".video"><span>Video</span></a></li>
</ul>
</div>
<div class="unit static threeWide" id="social">
<ul class="social">
<li id="stumbleupon"><a href="#"></a></li>
<li id="soundcloud"><a href="#"></a></li>
<li id="deviantart"><a href="#"></a></li>
<li id="delicious"><a href="#"></a></li>
<li id="flickr"><a href="#"></a></li>
<li id="vimeo"><a href="#"></a></li>
<li id="youtube"><a href="#"></a></li>
<li id="facebook"><a href="#"></a></li>
<li id="twitter"><a href="#"></a></li>
</ul>
</div>
<div class="unit item oneWide oneHigh info open" id="hello">
<h4 class="infoHeader">Hello</h4>
<div class="content">
<div class="column-three last">
<h1 class="center">My Name is JOE BLOGS</h1>
<p class="tagline center">I Make things</p>
</div>
</div>
</div>
<div class="unit item oneWide oneHigh info" id="who">
<h4 class="infoHeader">Who?</h4>
<div class="content cf">
<div class="column-three last">
<h1 class="center">We are BIGFAT</h1>
</div>
<div class="column">
<img src="images/bigfat4.png" />
</div>
<div class="column-two last">
<h3>Large & Loud</h3>
<p class="tagline">Design that screams</p>
<p class="bottomSection">Porttitor pulvinar elementum porttitor velit in? Facilisis tristique, pid lacus velit. Lacus
hac et vel ac cursus elementum! Porttitor magna lorem egestas platea etiam porta sagittis mattis
vut habitasse amet integer mid, nunc adipiscing nisi massa.</p>
</div>
<div class="column">
<div class="backgroundNumber"><h1>1</h1></div>
<h4 class="center">Ultra Modern</h4>
<p class="center">Using HTML5 and CSS3 technologies, BIGFAT is ahead of the game.</p>
</div>
<div class="column">
<div class="backgroundNumber"><h1>2</h1></div>
<h4 class="center">Wonderfully Unique</h4>
<p class="center">Ever seen anything like it? Thought not.</p>
</div>
<div class="column last">
<div class="backgroundNumber"><h1>3</h1></div>
<h4 class="center">Super Simple</h4>
<p class="center bottomSection">All HTML is contained in a single file, easy to edit.</p>
</div>
</div>
</div>
<div class="unit item oneWide oneHigh print illustration" id="road">
<h4>On the Road</h4>
<h5 class="categories">print, illustration</h5>
<h5 class="caption includesLink"><a href="#" class="projectLink"></a>This is a long caption that has <strong>basic</strong> <em>formatting</em>. The captions can be as long as you like. They will drop to as many lines as the image is high. Fun times. </h5>
<img class="backdrop" src="images/ontheroadthumb.jpg" />
<div class="content" image-id="images/ontheroad.png"></div>
</div>
<div class="unit item oneWide oneHigh info" id="profile">
<h4 class="infoHeader">Profile</h4>
<div class="content cf">
<div class="column-three last">
<h1>Joe Blogs</h1>
<p class="tagline">A young designer from London who can also dance.</p>
</div>
<div class="column-two">
<p>Porttitor pulvinar elementum porttitor velit in? Facilisis tristique, pid lacus velit. Lacus
hac et vel ac cursus elementum! Porttitor magna lorem egestas platea etiam porta sagittis mattis.</p>
<p class="bottomSection">Vut habitasse amet integer mid, nunc adipiscing nisi massa. Dictumst natoque, ultricies urna, nunc.</p>
</div>
<div class="column last">
<img src="images/profilepic.png" alt="me"/>
</div>
<div class="column">
<h4>Skills</h4>
<ul class="tick">
<li><strong>HTML 5</strong><br/><small>Expert</small></li>
<li><strong>CSS 3</strong><br/><small>Intermediate</small></li>
<li><strong>jQuery</strong><br/><small>Basic Knowledge</small></li>
</ul>
</div>
<div class="column">
<h4>Employment</h4>
<ul class="employment">
<li><strong>Chief Executive</strong><br/><small>Facebook<br/><span class="dark">2007-2010</span></small></li>
<li><strong>Senior Developer</strong><br/><small>Yahoo<br/><span class="dark">2005-2010</span></small></li>
<li><strong>Junior Developer</strong><br/><small>Microsoft<br/><span class="dark">2002-2005</span></small></li>
</ul>
</div>
<div class="column last">
<h4>Education</h4>
<ul class="education">
<li><strong>School of Hard Knocks</strong><br/><small>2.1 in Psychology<br/><span class="dark">1990-1993</span></small></li>
<li><strong>Winners College</strong><br/><small>A, A, B<br/><span class="dark">1988-1990</span></small></li>
</ul>
</div>
</div>
</div>
<div class="unit item oneWide oneHigh illustration print" id="nakedlunch">
<h4>Naked Lunch</h4>
<h5 class="categories">print, illustration</h5>
<h5 class="caption">This is a caption without a project link.</h5>
<img class="backdrop" src="images/nakedlunchthumb.jpg" />
<div class="content" image-id="images/nakedlunch.png"></div>
</div>
<div class="unit item oneWide oneHigh info" id="backgrounds">
<h4 class="infoHeader">Backgrounds</h4>
<div class="content">
<div class="column-three last">
<h1>Change it up</h1>
<p class="tagline">Pick a background</p>
</div>
<div class="column marginBottom">
<img src="images/ribbonsthumb.png" id="ribbons" />
</div>
<div class="column marginBottom">
<img src="images/splatthumb.png" id="splat" />
</div>
<div class="column marginBottom last">
<img src="images/squaresthumb.png" id="squares" />
</div>
<div class="column marginBottom ">
<img src="images/diamondthumb.png" id="diamond" />
</div>
<div class="column marginBottom ">
<img src="images/bubblesthumb.png" id="bubbles" />
</div>
<div class="column marginBottom last">
<img src="images/crossesthumb.png" id="crosses" />
</div>
</div>
</div>
<div class="unit item oneWide oneHigh illustration" id="man">
<h4>Man</h4>
<h5 class="categories">illustration</h5>
<h5 class="caption">This is a caption without a project link. It is also on two lines. Yay.</h5>
<img class="backdrop" src="images/manthumb.jpg" />
<div class="content" image-id="images/man.png"></div>
</div>
<div class="unit item oneWide twoHigh photography" id="alex">
<h4>Alex</h4>
<h5 class="categories">photography</h5>
<h5 class="caption includesLink"><a href="#" class="projectLink"></a>This is a caption with a project link and is also on two lines, yes it is, I think.</h5>
<img class="backdrop" src="images/alexthumb.jpg" />
<div class="content" image-id="images/alex.png"></div>
</div>
<div class="unit item oneWide oneHigh info" id="features">
<h4 class="infoHeader">Features</h4>
<div class="content cf">
<div class="column-three last">
<h1 class="center">Wowzer!</h1>
<p class="tagline center">BIGFAT is fun. Learn below.</p>
</div>
<div class="column">
<img src="images/abstra
基于HTML实现的非响应式黑紫设计酷炫音乐网站网页(含HTML源代码).zip
107 浏览量
2024-04-29
02:31:51
上传
评论
收藏 3.23MB ZIP 举报
基于HTML实现的非响应式黑紫设计酷炫音乐网站网页(含HTML源代码).zip （70个子文件） 
非响应式黑紫设计酷炫音乐网站 js 
jquery.tubeplayer.min.js 8KB bigfat.js 7KB jquery.scrollTo-1.4.2-min.js 2KB jquery.easing.min.js 7KB jquery.mousewheel.js 2KB jquery.isotope.min.js 15KB modernizr.js 47KB switcher.js 170B jquery.waitforimages.js 5KB style style.css 23KB switcher.css 899B images 
ribbons4.png 18KB spin.png 436B blacktransparent.png 921B lightbulb.png 2KB squares.png 46KB link.png 2KB splat02.png 560KB tick.png 1KB bigfat3.png 9KB playpause.png 1KB education.png 1KB ribbonsbottom.png 56KB whitetransparent.png 924B diamond.png 4KB cross.png 1KB crosses.png 3KB bubbles.png 57KB socialspritelight.png 10KB bgdark.png 12KB employment.png 1KB fonts BEBAS___-webfont.ttf 20KB
BEBAS___-webfont.svg 22KB 1to4.me.url 117B BEBAS___-webfont.eot 20KB BEBAS___-webfont.woff 10KB BEBAS___-webfontd41d.eot 20KB
index.html 17KB images splatthumb.png 25KB nyan.png 7KB man.png 357KB sleep.png 327KB
porquesithumb.jpg 7KB abstract02.png 4KB abstract03.png 4KB targetthumb.jpg 7KB ribbonsthumb.png 13KB nakedlunchthumb.jpg 15KB alexthumb.jpg 17KB ontheroadthumb.jpg 9KB simonthumb.jpg 12KB sam.png 336KB squaresthumb.png 13KB samthumb.jpg 18KB donthugmethumb.jpg 6KB alex.png 353KB bubblesthumb.png 5KB womanthumb.jpg 10KB benthumb.jpg 15KB bigfat4.png 22KB charmerthumb.jpg 22KB profilepic.png 49KB target.png 201KB manthumb.jpg 8KB ben.png 276KB diamondthumb.png 2KB charmer.png 285KB crossesthumb.png 3KB abstract01.png 4KB sleepthumb.jpg 11KB资源评论
