友链
导航
These are the good times in your life,
so put on a smile and it'll be alright
友链
导航
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> <meta content="IE=edge" http-equiv="X-UA-Compatible"/> <!-- SEO --> <meta content="shannon hickman for DEI Creative, Seattle" name="author"/> <meta content="ten thousand year clock, 10000 year clock, clock, Long Now, Stuart Brand, Danny Hillis, Jeff Bezos, West Texas, Applied Minds, longnow, Penguin Automated Systems, Swaggart Brothers, Machinists Inc, long term thinking" name="keywords"/> <meta content="We are building a 10,000 Year Clock. It's a special Clock, designed to be a symbol, an icon for long term thinking." name="description"/> <meta content="all" name="robots"/> <link media="screen" type="text/css" href="css/styles.css" rel="stylesheet"/> <link href="favicon.ico" rel="Shortcut Icon"/> <script src="scripts/jquery-1.5.1.min.js" type="text/javascript"></script> <script src="scripts/supersized.3.1.3.min.js" type="text/javascript"></script> <title>10,000 Year Clock</title> </head> <body> <!-- 背景图, 由 AJAX 异步加载 --> <div id="supersized" class="quality" style="display: block;"> <a target="_blank" class="activeslide"> <img src="img/bg.jpg" style="width: 1280px; height: 1024px;"/> </a> </div> <div id="supersized-loader" style="display: none;"></div> <!-- 首页 logo --> <a href="index.html"> <img width="867" height="269" id="logo" alt="10,000 Year Clock | Sierra Diablo Mountain Range" src="img/10000YearClock.png"/> </a> <!-- 页边的按钮, 两按钮各用了一张 sprite 显示 hover 的效果 --> <a alt="Learn More" id="learn-more" href="learnmore.html"></a> <a alt="Updates" id="updates" href="updates.html"></a> <!-- 页中的文字 --> <div id="quotes"> <img width="619" height="190" alt="“We are as gods and we might as well get good at it.” - Stewart Brand, 1968, from the Whole Earth Catalog “We are as gods and HAVE to get good at it.” - Stewart Brand, 2009, from his book Whole Earth Discipline" src="img/quotes.png"/> </div> </body> </html>
h1 { color: #AD5218; font: bold 1.4em "Trebuchet MS",Arial,Helvetica,sans-serif; letter-spacing: 0.07em; margin: 0; padding: 0 0 25px; } h2 { color: #636466; font: 0.75em/112% "Trebuchet MS",Arial,Helvetica,sans-serif; letter-spacing: 0.02em; margin: 0; position: relative; } h3 { font-size: 1.5em; font-weight: bold; letter-spacing: 0.07em; margin: 0 0 3px; } h4 { font-size: 1.1em; font-weight: bold; letter-spacing: 0.07em; } #supersized-loader { background: url("../img/progress.gif") no-repeat scroll center center #E6E6E6; border: 1px solid #DDDDDD; border-radius: 5px 5px 5px 5px; height: 60px; left: 50%; margin: -30px 0 0 -30px; position: absolute; text-indent: -999em; top: 50%; width: 60px; z-index: 10; } #supersized { height: 100%; left: 0; overflow: hidden; position: fixed; top: 0; width: 100%; z-index: -999; } #supersized img { border: medium none; display: none; height: auto; outline: medium none; position: relative; width: auto; } #supersized.speed img { image-rendering: -moz-crisp-edges; } #supersized.quality img { image-rendering: optimizequality; } #supersized a { background: none repeat scroll 0 0 #111111; height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; z-index: -30; } #supersized a.prevslide { z-index: -20; } #supersized a.activeslide { z-index: -10; } #supersized a.prevslide img, #supersized a.activeslide img { display: inline; } #logo { font-family: inherit; left: 0; position: absolute; top: 20px; } a#learn-more, a#learn-more:visited { background: url("../img/more.png") no-repeat scroll 0 0 transparent; height: 133px; left: 0; position: absolute; top: 354px; width: 94px; } a#learn-more:hover, a#learn-more.active { background-position: 0 -135px; } a#updates, a#updates:visited { background: url("../img/updates.png") no-repeat scroll 0 0 transparent; height: 133px; left: 0; position: absolute; top: 500px; width: 111px; } a#updates:hover, a#updates.active { background-position: 0 -135px; } #quotes { height: 190px; left: 300px; position: absolute; text-align: left; top: 400px; width: 1000px; } #learnmore { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.94); border: 1px solid #FFFFFF; border-radius: 10px 10px 10px 10px; display: block; height: auto; left: 246px; overflow-x: hidden; overflow-y: auto; padding: 40px; position: absolute; text-align: left; top: 356px; width: 680px; } ul { margin: 0 0 0 50px; } p, li { color: #636466; font: 0.83em/1.75em "Trebuchet MS",Arial,Helvetica,sans-serif; padding: 0 0 30px; } li { padding: 0 0 12px; } p.beforeUL { padding: 0 0 12px; } p a { background: none repeat scroll 0 0 transparent; color: #444444; font-family: "Trebuchet MS",Arial,Helvetica,sans-serif; outline: medium none; text-decoration: underline; } p a:hover, p a:visited { background: none repeat scroll 0 0 transparent; color: #000000; text-decoration: none; } #learnmore img { border: 2px solid #999966; display: inline; margin-bottom: 25px; } #learnmore img.noborder { border: medium none; margin-bottom: 0; } img.rtspace { margin-right: 10px; } .clear { clear: both; display: block; margin: 0; padding: 0; }
jQuery(function($){ $.supersized({ //Functionality slideshow : 0, //Slideshow on/off keyboard_nav : 0, //Keyboard navigation on/off performance : 2, //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit) image_protect : 1, //Disables image dragging and right click with Javascript image_path : 'img/', //Default image path //Size & Position min_width : 1080, //Min width allowed (in pixels) min_height : 1024, //Min height allowed (in pixels) vertical_center : 0, //Vertically center background horizontal_center : 0, //Horizontally center background fit_portrait : 1, //Portrait images will not exceed browser height fit_landscape : 0, //Landscape images will not exceed browser width //Components navigation : 0, //Slideshow controls on/off thumbnail_navigation : 0, //Thumbnail navigation slide_counter : 0, //Display slide numbers slide_captions : 0, //Slide caption (Pull from "title" in slides array) slides : [ //Slideshow Images {image : 'img/bg.jpg', title : 'An arial photo of the site for the 10,000 Year Clock', url : ''} ] }); });