Skip to content

Instantly share code, notes, and snippets.

@JGallardo

JGallardo/index.html

Created December 2, 2012 09:47
Show Gist options
  • Save JGallardo/4187982 to your computer and use it in GitHub Desktop.
Save JGallardo/4187982 to your computer and use it in GitHub Desktop.
Download ZIP
home page for VidTalk landing page (under review)
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VidTalk</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Video Walkie Talkie App">
<meta name="author" content="Juan Gallardo">
<!-- styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/lightbox.css" rel="stylesheet" />
<link href="css/setup_panel.css" rel="stylesheet" />
<link href="css/jquery.thumbnailScroller.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/wmuSlider.css" type="text/css" media="screen" />
<link href="css/stylezz.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- fav and touch icons -->
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
<!-- don't move this to external css cause that may cause styling problems after ajax load
roundabout plugin
-->
<style>
.roundabout-holder { list-style: none; padding: 0; margin: 0 auto; _height: 5em; width: 500px; }
.roundabout-moveable-item { _height: 4em; width: 600px; cursor: pointer; }
.roundabout-moveable-item img{ box-shadow: 0px 10px 35px rgba(0,0,0,0.65); }
.roundabout-in-focus { cursor: auto; }
.roundD{ _height: 500px; }
.roundD ul{ _position: relative; top:40px; }
.firrrst{ _height:500px; }
@media (min-width: 768px) and (max-width: 979px) {
.roundabout-holder { list-style: none; padding: 0; margin: 0 auto; _height: 5em; width: 300px; }
.roundabout-moveable-item { _height: 4em; width: 500px; }
.roundD { height: 430px; }
.firrrst{ _height:500px; } }
@media (max-width: 480px) {
.roundabout-holder { list-style: none; padding: 0; margin: 0 auto; _height: 5em; width: 150px; }
.roundabout-moveable-item { _height: 4em; width: 300px; }
.roundD { height: 300px; }
.firrrst{ _height:260px; } }
</style>
</head>
<body>
<div class="scroll_me"></div>
<div class="header_bg">
<div class="container">
<header class="row">
<div class="span12">
<p class="logo">
<img src="img/logo.png" alt="logo">
VidTalk
<span><a href="signup.html">SIGN UP </a></span>
<span><a href="login.html">LOGIN</a></span>
</p>
</div>
</header>
</div> <!-- end container -->
</div> <!-- end header_bg -->
<div class="slider_bg_tile">
<div class="slider_bg">
<div class="container">
<section class="row slider">
</section> <!-- end section row -->
</div> <!-- end container -->
</div> <!-- end slider_bg -->
</div> <!-- end slider_bg_tile -->
<div class="container fontChoose">
<div class="row features_title">
<div class="span12">
<h2>FEATURES</h2>
</div>
</div> <!-- end row -->
<div class="row features1">
<div class="span4">
<img src="img/icon7.png" alt="">
<h4>Fast Video Chat</h2>
<p>Share video fast with push-to-talk video sharing.</p>
</div>
<div class="span4">
<img src="img/icon3.png" alt="">
<h4>Message Options</h2>
<p>Send pics, text, or voice.</p>
</div>
<div class="span4">
<img src="img/icon1.png" alt="">
<h4>Contact Imports</h2>
<p>Import contacts from your phonebook, Facebook, or add them from within the app.</p>
</div>
</div> <!-- end row features1 -->
<!-- <hr> -->
<!-- lightbox is here -->
<h2 class="features_title">SHARE YOUR MOMENTS</h2>
<div id="tS2" class="jThumbnailScroller">
<div class="jTscrollerContainer">
<div class="jTscroller">
<div class="single first">
<a href="img/filler1.png" rel="lightbox[plants]" title="Click on the right side of the image to move forward."><img src="img/thumbs/john.png" /></a>
</div>
<div class="single">
<a href="img/filler2.png" rel="lightbox[plants]" title="Click on the right side of the image to move forward."><img src="img/thumbs/natalia.png"/></a>
</div>
<div class="single">
<a href="img/filler3.png" rel="lightbox[plants]" title="Click on the right side of the image to move forward."><img src="img/thumbs/irina-dog.png" /></a>
</div>
<div class="single">
<a href="img/filler4.png" rel="lightbox[plants]" title="Alternately you can press the right arrow key." ><img src="img/thumbs/iris.png" /></a>
</div>
<div class="single">
<a href="img/filler5.png" rel="lightbox[plants]" title="The script preloads the next image in the set as you're viewing."><img src="img/thumbs/siobhan.png" /></a>
</div>
<div class="single last">
<a href="img/filler6.png" rel="lightbox[plants]" title="Click the X or anywhere outside the image to close"><img src="img/thumbs/taryn.png" /></a>
</div>
</div>
</div>
<a href="#" class="jTscrollerPrevButton"></a>
<a href="#" class="jTscrollerNextButton"></a>
</div>
<!-- <hr> -->
<div class="row features2">
<div class="span6">
<h2>Desktop Dashboard</h2>
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Desktop Features</a></li>
<li><a href="#tab2" data-toggle="tab">Organization</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<p>Our desktop version has the following powerful features for <strong>Added Value</strong>
<ul>
<li>Video Chat</li>
<li>Send files</li>
<li>Share pictures </li>
</ul>
</p>
</div>
<div class="tab-pane fade" id="tab2">
<p>You can neatly store your conversations, pictures, and videos and share them.</p>
</div>
</div>
</div>
<div class="span6">
<img src="img/display.png" alt="">
</div>
</div> <!-- end row -->
</div> <!-- /container -->
<div class="footer_bg">
<div class="lower_footer">
<div class="container">
<div class="row fontChoose">
<div class="span12">
<p>&copy; VidTalk 2012</p>
<div class="social">
<a href="http://www.facebook.com/vidtalk" target="_blank"><span class="facebook_ico hover_trans icon_defaults"></span></a>
<a href="http://www.twitter.com/vidtalkme"target="_blank" ><span class="twitter_ico hover_trans icon_defaults"></span></a>
</div>
</div>
</div>
</div>
</div>
</div><!-- end footer_bg -->
<!-- javascript
==================================================
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/lightbox.js"></script>
<script src="js/jQuery.flexslider.js"></script>
<script src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script src="js/jquery.thumbnailScroller.js"></script>
<script src="js/jquery.roundabout.min.js"></script>
<script src="js/jquery.wmuSlider.min.js"></script>
<script src="js/setup.js"></script>
<script>
//ajax load content to slider section
// edit the load('to_load/...') to the page you want
$('.slider').load('to_load/static.html', function() {
console.log('Load was performed.');
});
$("#accordion").accordion();
$("[rel=tooltip]").tooltip(); //bootstrap's tooltip activation
$('#myTab').tab(); //bootstrap's tabs activation
//$('.roundD ul').roundabout();
// flex slider (slider in bottom part of page) activation
$('.flexslider').flexslider({
animation: "slide",
slideshowSpeed: 10000
});
// scroll to top functionality
$(window).scroll(function(){
if ($(this).scrollTop() > 2400) {
$('.scroll_me').fadeIn();
} else {
$('.scroll_me').fadeOut();
}
});
$('.scroll_me').click(function(){
$("html, body").animate({ scrollTop: 0 }, 1600, 'easeInOutCirc');
return false;
});
//content scroller
//jQuery.noConflict();
(function($){
window.onload=function(){
$("#tS2").thumbnailScroller({
scrollerType:"clickButtons",
scrollerOrientation:"horizontal",
scrollSpeed:2,
scrollEasing:"easeOutExpo",
scrollEasingAmount:600,
acceleration:4,
scrollSpeed:800,
noScrollCenterSpace:10,
autoScrolling:0,
autoScrollingSpeed:2000,
autoScrollingEasing:"easeInOutQuad",
autoScrollingDelay:500
});
}
})(jQuery);
$(document).ajaxComplete(function(){
// 3d rotating carousel activation
$('.roundD ul').roundabout({
autoplay: true,
autoplayDuration: 5000,
autoplayPauseOnHover: true
});
// standard responsive slider activation
$('.example1').delay(200).wmuSlider({
slideshowSpeed: 5000,
touch: true
});
//slider bug on ajax load remover. You can remove this code if you're not using ajax load with wmu slider in your project
$('.wmuSliderWrapper article:first-child').addClass('firrrst');
var bugRemove = setTimeout(function(){
$('.wmuSliderWrapper article:first-child').removeClass('firrrst');
},2000)
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment