saulteafarmer/Robohash
1
0
Fork 0
mirror of https://github.com/e1ven/Robohash.git synced 2025-06-23 21:35:02 +00:00
Code Issues Packages Projects Releases Wiki Activity
Robohash/source/Slate_Finals/HTML FILES/Green/index.html

466 lines
17 KiB
HTML
Raw Normal View History

fixes
2011-07-07 18:49:57 -04:00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Slate - Landing Page</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" />
<!-- JavaScript Files -->
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script src="js/twitter.js" type="text/javascript" charset="utf-8"></script>
<script src="js/tipsy.js" type="text/javascript" charset="utf-8"></script>
<!-- *************************************************************************
********************* THIS IS THE PRETTY PHOTO JS **************************
************************************************************************** -->
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("#wrapper a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'facebook',slideshow:5000, autoplay_slideshow: true});
});
</script>
<!-- *************************************************************************
*****************TWITTER FEED CHANGE THE USERNAME HERE! ********************
************************************************************************** -->
<script type='text/javascript'>
$(document).ready(function(){
$(".tweet").tweet({
username: "twsjonathan",
join_text: "auto",
avatar_size: 0,
count: 1,
auto_join_text_default: "we said,",
auto_join_text_ed: "we",
auto_join_text_ing: "we were",
auto_join_text_reply: "we replied to",
auto_join_text_url: "we were checking out",
loading_text: "loading tweets..."
});
});
</script>
<!-- *************************************************************************
************************* SCROLL TO TOP SCRIPT *****************************
************************************************************************** -->
<script type='text/javascript'>
$(document).ready(function(){
$(".scroll").click(function(event){
//prevent the default action for the click event
event.preventDefault();
//get the full url - like mysitecom/index.htm#home
var full_url = this.href;
//split the url by # and get the anchor target name - home in mysitecom/index.htm#home
var parts = full_url.split("#");
var trgt = parts[1];
//get the top offset of the target anchor
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;
//goto that anchor by setting the body scroll top to anchor top
$('html, body').animate({scrollTop:target_top}, 800);
});
});
</script>
</head>
<body>
<!-- *************************************************************************
************************* TIPSY SCRIPT LEAVE HERE! *************************
************************************************************************** -->
<script type='text/javascript'>
$(function() {
$('#example-1').tipsy();
$('#north').tipsy({gravity: 'n'});
$('#south').tipsy({gravity: 's'});
$('#east').tipsy({gravity: 'e'});
$('#west').tipsy({gravity: 'w'});
$('#auto-gravity').tipsy({gravity: $.fn.tipsy.autoNS});
$('.fade').tipsy({fade: true});
$('#example-custom-attribute').tipsy({title: 'id'});
$('#example-callback').tipsy({title: function() { return this.getAttribute('original-title').toUpperCase(); } });
$('#example-fallback').tipsy({fallback: "?" });
$('#example-html').tipsy({html: true });
});
</script>
<!-- *************************************************************************
****************************** HEADER SECTION ******************************
************************************************************************** -->
<!-- start of header full width-->
<div id="header_fullwidth">
<!-- start of header-->
<div id="header">
<!-- start of top logo -->
<div id="top_logo">
<img src="img/top_logo.png" width="375" height="151" alt="logo" id="toc"/></div><!-- end of top logo -->
</div><!-- end of header-->
</div><!-- end of header full width-->
<!-- *************************************************************************
****************************** MAIN PAGE WRAPPER ***************************
************************************************************************** -->
<!-- start of page wrapper -->
<div id="wrapper">
<!-- *************************************************************************
****************************** INTRO SECTION *******************************
************************************************************************** -->
<!-- start of content section -->
<div class="intro_section">
<h1>Some Amazing Intro Line Goes Here</h1>
<p class="intro_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. </p>
</div><!-- end of content section -->
<!-- *************************************************************************
****************************** IPAD SECTION ******************************
************************************************************************** -->
<!-- start of content section -->
<div class="content_section">
<!-- start of left content section -->
<div class="left_content">
<img src="img/ipad.jpg" width="465" height="202" alt="ipad" class="left" />
</div><!-- end of left content section -->
<!-- start of right content section -->
<div class="right_content">
<div class="section_title">How cool is this?</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. </p>
<p><a href="#" title="Buy today while we have 20% off!" class="fade"><img src="img/buy_button.png" width="328" height="54" alt="buy now" /></a></p>
</div><!-- end of right content section -->
</div><!-- end of content section -->
<div class="clear"></div>
<!-- *************************************************************************
****************************** QUOTE SECTION *******************************
************************************************************************** -->
<!-- start of quotes wrapper -->
<div class="quotes_wrapper">
<!-- start of left quote -->
<div class="left_quote">
<img src="img/star.png" width="33" height="31" alt="1 star" /><img src="img/star.png" width="33" height="31" alt="1 star" /><img src="img/star.png" width="33" height="31" alt="1 star" /><img src="img/star.png" width="33" height="31" alt="1 star" /><img src="img/star.png" width="33" height="31" alt="1 star" />
<br />
<span class="large_quote">"One of the best #&%#*$ apps ever!"</span>
<br />
<span class="small_quote">somewebsite.com</span>
</div><!-- end of left quote -->
<!-- start of right quote -->
<div class="right_quote">
<img src="img/indented_star.png" width="27" height="25" alt="1 star" /><img src="img/indented_star.png" width="27" height="25" alt="1 star" /><img src="img/indented_star.png" width="27" height="25" alt="1 star" /><img src="img/indented_star.png" width="27" height="25" alt="1 star" /><img src="img/indented_star.png" width="27" height="25" alt="1 star" />
<br />
<span class="large_quote">"The Swiss Army Knife of the app world"</span>
<br />
<span class="small_quote">someotherwebsite.com</span>
</div><!-- end of right quote -->
</div><!-- end of quotes wrapper -->
<div class="hr"></div>
<!-- *************************************************************************
****************************** GALLERY SECTION *****************************
************************************************************************** -->
<!-- start of content section -->
<div class="content_section">
<div class="section_title">Movies, Images and pages oh my!</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. </p>
<ul class="gallery">
<li><a href="img/1.jpg" rel="prettyPhoto[gallery1]" title="Click to enlarge this image!" class="fade"><img src="img/image_well.jpg" width="154" height="101" alt="Some great title" /></a></li>
<li><a href="img/1.jpg" rel="prettyPhoto[gallery1]" title="This can be any text you want!" class="fade"><img src="img/image_well.jpg" width="154" height="101" alt="Some great title" /></a></li>
<li><a href="img/1.jpg" rel="prettyPhoto[gallery1]" title="Click to enlarge this image!" class="fade"><img src="img/image_well.jpg" width="154" height="101" alt="Some great title" /></a></li>
<li><a href="img/1.jpg" rel="prettyPhoto[gallery1]" title="This can be any text you want!" class="fade"><img src="img/image_well.jpg" width="154" height="101" alt="Some great title" /></a></li>
<li><a href="img/1.jpg" rel="prettyPhoto[gallery1]" title="Click to enlarge this image!" class="fade"><img src="img/image_well.jpg" width="154" height="101" alt="Some great title" /></a></li>
</ul>
</div><!-- end of content section -->
<div class="hr"></div>
<!-- *************************************************************************
****************************** VIDEO SECTION *******************************
************************************************************************** -->
<!-- start of content section -->
<div class="content_section">
<!-- start of left content section -->
<div class="left_content">
<div class="section_title">LOOK A VIDEO... nice!</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra.</p>
<p><a href="http://www.youtube.com/watch?v=d1_JBMrrYw8" rel="prettyPhoto" title="Go ahead and click to view our awesome video!"><img src="img/video_link.jpg" alt="click to view video" width="429" height="98" /></a></p>
<p><a href="#" title="Buy today while we have 20% off!" class="fade"><img src="img/buy_button.png" width="328" height="54" alt="buy now" /></a></p>
</div><!-- end of left content section -->
<!-- start of right content section -->
<div class="right_content">
<img src="img/imac_iphone.jpg" alt="mac and iphone" width="426" height="374" class="right" />
</div><!-- end of right content section -->
</div><!-- end of content section -->
<div class="hr"></div>
<!-- *************************************************************************
****************************** BENEFITS SECTION ****************************
************************************************************************** -->
<!-- start of content section -->
<div class="content_section">
<div class="section_title">it's all about the benefits - did i mention benefits?</div>
<!-- start of left content section -->
<div class="left_content">
<!-- ********** BENEFITS ITEM 1 ********** -->
<!-- start of benefit item -->
<div class="benefit">
<img src="img/star_icon.jpg" width="73" height="72" alt="stunning interface" class="left"/>
<!-- start of benefit right -->
<div class="benefit_right">
<span class="benefit_header">Stunning Interface</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta.</p>
</div><!-- end of benefit right -->
</div><!-- end of benefit item -->
<!-- ********** BENEFITS ITEM 2 ********** -->
<!-- start of benefit item -->
<div class="benefit">
<img src="img/report_icon.jpg" width="73" height="72" alt="Precise Reports" class="left"/>
<!-- start of benefit right -->
<div class="benefit_right">
<span class="benefit_header">Precise Reports</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta.</p>
</div><!-- end of benefit right -->
</div><!-- end of benefit item -->
<!-- ********** BENEFITS ITEM 3 ********** -->
<!-- start of benefit item -->
<div class="benefit">
<img src="img/tut_icon.jpg" width="73" height="72" alt="Online Tutorials" class="left"/>
<!-- start of benefit right -->
<div class="benefit_right">
<span class="benefit_header">Online Tutorials</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta.</p>
</div><!-- end of benefit right -->
</div><!-- end of benefit item -->
</div><!-- end of left content section -->
<!-- start of right content section -->
<div class="right_content">
<!-- ********** BENEFITS ITEM 1 ********** -->
<!-- start of benefit item -->
<div class="benefit">
<img src="img/share_icon.jpg" width="73" height="72" alt="stunning interface" class="left"/>
<!-- start of benefit right -->
<div class="benefit_right">
<span class="benefit_header">Create, Edit and Share</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta.</p>
</div><!-- end of benefit right -->
</div><!-- end of benefit item -->
<!-- ********** BENEFITS ITEM 2 ********** -->
<!-- start of benefit item -->
<div class="benefit">
<img src="img/usability_icon.jpg" width="73" height="72" alt="Precise Reports" class="left"/>
<!-- start of benefit right -->
<div class="benefit_right">
<span class="benefit_header">Spotlight On Usability</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta.</p>
</div><!-- end of benefit right -->
</div><!-- end of benefit item -->
<!-- ********** BUY NOW BUTTON ********** -->
<!-- start of benefit item -->
<div class="benefit">
<!-- start of benefit right -->
<div class="benefit_right">
<p><a href="#" title="Buy today while we have 20% off!" class="fade"><img src="img/buy_button.png" width="328" height="54" alt="buy now" /></a></p>
</div><!-- end of benefit right -->
</div><!-- end of benefit item -->
</div><!-- end of right content section -->
</div><!-- end of content section -->
<div class="hr"></div>
<!-- *************************************************************************
****************************** SOCIAL SECTION ******************************
************************************************************************** -->
<!-- start of content section -->
<div class="content_section">
<div class="section_title">Join Us On The SOcial Networks</div>
<ul class="social">
<li><a href="#" title="facebook" class='fade'><img src="img/facebook_color.png" width="73" height="72" alt="facebook" /></a></li>
<li><a href="#" title="Delicious" class='fade'><img src="img/delicious_color.png" width="73" height="72" alt="Delicious" /></a></li>
<li><a href="#" title="Digg" class='fade'><img src="img/digg_color.png" width="73" height="72" alt="Digg" /></a></li>
<li><a href="#" title="Twitter" class='fade'><img src="img/twitter_color.png" width="73" height="72" alt="Twitter" /></a></li>
<li><a href="#" title="Stumbleupon" class='fade'><img src="img/stumbleupon_color.png" width="73" height="72" alt="Stumbleupon" /></a></li>
<li><a href="#" title="LinkedIn" class='fade'><img src="img/linkedin_color.png" width="73" height="72" alt="Stumbleupon" /></a></li>
</ul>
</div><!-- end of content section -->
</div><!-- end of wrapper -->
<!-- *************************************************************************
****************************** FOOTER SECTION ******************************
************************************************************************** -->
<!-- start of footer wrapper -->
<div id="footer_wrapper">
<!-- start of footer container -->
<div id="footer_container">
<!-- start of footer left -->
<div id="footer_left"> <a href="#top" class="scroll"><img src="img/bottom_logo.png" width="140" height="55" alt="logo" /></a>
</div><!-- end of footer left -->
<!-- start of footer right -->
<div id="footer_right">
<span class="footer_heading">Twitter</span>&nbsp;&nbsp;<span class="follow"><a href="http://www.twitter.com/twsjonathan" class="fade" title="Simply click here to follow us on Twitter!">Follow Us</a></span>
<div class="tweet"></div>
</div><!-- end of footer right -->
</div><!-- end of footer container -->
</div><!-- end of footer wrapper -->
</body>
</html>
Reference in New Issue Copy Permalink