david
76692e0b49
git-svn-id: https://192.168.0.254/svn/Proyectos.Instaldeco_Web/tags/demo@1 d4ca0941-a869-4c45-9eab-2e1fd2dd58c0
253 lines
12 KiB
HTML
253 lines
12 KiB
HTML
<!DOCTYPE HTML>
|
|
<html dir="ltr" lang="en-US">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Broadside | Corporate & Portfolio Template</title>
|
|
<link rel="stylesheet" href="./style.css" type="text/css" media="all" />
|
|
|
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
|
|
<script type="text/javascript" src="./js/custom.js"></script><!-- Various Custom JavaScript including Lightbox Settings -->
|
|
<script type="text/javascript" src="./js/jquery.fancybox.js"></script><!-- Lightbox JavaScript -->
|
|
|
|
<!-- Drop-Down Menu JavaScript -->
|
|
<script type="text/javascript" src="./js/hoverIntent.js"></script>
|
|
<script type="text/javascript" src="./js/superfish.js"></script>
|
|
|
|
<!-- Featured Slider JavaScript and CSS -->
|
|
<script src="./js/jquery.orbit-1.2.3.min.js" type="text/javascript"></script>
|
|
<!--[if IE]>
|
|
<style type="text/css">
|
|
.timer { display: none !important; }
|
|
div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
|
|
</style>
|
|
<![endif]-->
|
|
<!--[if IE 7]>
|
|
<link rel="stylesheet" type="text/css" href="./css/ie7.css" />
|
|
<![endif]-->
|
|
|
|
<!-- Color Picker Styles and JavaScript -->
|
|
<link rel="stylesheet" media="screen" type="text/css" href="./css/colorpicker.css" />
|
|
<link rel="stylesheet" media="screen" type="text/css" href="./css/slider-color-picker.css" />
|
|
<script type="text/javascript" src="./js/colorpicker.js"></script>
|
|
<script type="text/javascript" src="./js/eye.js"></script>
|
|
<script type="text/javascript" src="./js/utils.js"></script>
|
|
<script type="text/javascript" src="./js/layout_e021f963.js"></script>
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
|
|
|
|
<body>
|
|
<!-- FULL BACKGROUND IMAGE -->
|
|
<img src="./images/background-dark.jpg" id="bg" alt="background" />
|
|
|
|
<div id="box-container">
|
|
<div id="page-wrap">
|
|
|
|
<div id="container">
|
|
|
|
|
|
<div id="left-container">
|
|
|
|
<div class="bottom-box">
|
|
<div class="logo-menu">
|
|
<a href="./index.php.html"><img src="./images/logo-space.png" alt="logo" /></a>
|
|
</div><!-- close .logo-menu -->
|
|
</div><!-- close .top-box or .bottom-box -->
|
|
|
|
<div class="side-barheading center-align">
|
|
|
|
</div>
|
|
|
|
<div class="top-box">
|
|
<div class="navigation-menu">
|
|
<div class="hover-box">
|
|
|
|
<h1>Menu</h1>
|
|
|
|
<ul class="sf-menu sf-vertical">
|
|
<li class="sliding-element">
|
|
<a href="./index.php.html">Home</a>
|
|
</li>
|
|
<li class="current">
|
|
<a href="./company.php.html">Company</a>
|
|
</li>
|
|
<li class="sliding-element">
|
|
<a href="./services.php.html">Our Services</a>
|
|
</li>
|
|
<li class="sliding-element">
|
|
<a href="./portfolio.php.html">Portfolio</a>
|
|
<ul>
|
|
<li class="sliding-element">
|
|
<a href="./portfolio-thumbnails.php.html">Thumbnails</a>
|
|
</li>
|
|
<li class="sliding-element">
|
|
<a href="./portfolio.php.html">Scrolling Portfolio</a>
|
|
</li>
|
|
<li class="sliding-element">
|
|
<a href="./portfolio-gallery.php.html">Image Gallery</a>
|
|
</li>
|
|
<li class="sliding-element">
|
|
<a href="./portfolio-full-width.php.html">Full-width</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="sliding-element">
|
|
<a href="./blog.php.html">Blog</a>
|
|
</li>
|
|
<li class="sliding-element">
|
|
<a href="./video.php.html">Video Example</a>
|
|
</li>
|
|
<li class="sliding-element">
|
|
<a href="./contact.php.html">Contact Us</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="navigation-space"> </div>
|
|
|
|
</div><!-- close .hover-box -->
|
|
</div><!-- close .navigation-menu -->
|
|
</div><!-- close .top-box or .bottom-box -->
|
|
|
|
|
|
|
|
</div><!-- close #left-container -->
|
|
|
|
|
|
<div class="content-container">
|
|
<div class="content-heading right-align">
|
|
<h5>Focus on</h5>
|
|
<h1>Web & Design</h1>
|
|
</div>
|
|
<ul class="sub-navigation right-align">
|
|
<li><a href="./company.php.html">About Us</a></li>
|
|
<li><a href="./typography.php.html">Typography</a></li>
|
|
<li><a href="./columns.php.html">Columns</a></li>
|
|
<li class="current"><a href="./lightbox.php.html">Lightbox Examples</a></li>
|
|
</ul>
|
|
|
|
|
|
<div class="scroll-pane" style="height:370px;"><!-- customize the height for the scroll box -->
|
|
|
|
|
|
<div class="col_1_2">
|
|
<h5>Image lightbox</h5>
|
|
<a href="./images/portfolio/lightbox.jpg" class="fancylightbox" title="Title can be filled in or removed easily"><img src="./images/portfolio/lightbox-thumbnail.jpg" alt="Image Lightbox" /></a>
|
|
</div>
|
|
<div class="col_2_2">
|
|
<h5>Video lightbox</h5>
|
|
<a href="http://player.vimeo.com/video/18720171?portrait=0" class="videolightbox"><img src="./images/portfolio/video-thumnail.jpg" alt="Video Lightbox" /></a>
|
|
</div>
|
|
<div class="clear"></div>
|
|
|
|
|
|
<div class="divider"></div>
|
|
|
|
|
|
<h5>Image Alignment</h5>
|
|
<p><a href="./images/portfolio/photo-right.jpg" class="fancylightbox"><img class="alignright" src="./images/photo-right.jpg" alt="" width="140" height="103" /></a>Ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mauris dolor, semper eu commodo consectetur, porttitor ac tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non quam dui, in bibendum tortor. <a href="#">Example link</a></p>
|
|
<p>Nunc at tristique diam. Suspendisse potenti. Duis vel metus lacus, nec adipiscing ipsum. In eget urna est. Nulla faucibus cursus dui non suscipit. Nunc quam odio, consectetur at condimentum sit amet, accumsan sit amet quam. Etiam eu purus nibh. Praesent et nunc sed metus imperdiet dignissim.</p>
|
|
<p><a href="./images/portfolio/photo-left.jpg" class="fancylightbox"><img src="./images/photo-left.jpg" alt="" width="140" height="103" class="alignleft" /></a>Cras sit amet quam mauris. Suspendisse ac purus sed leo tincidunt imperdiet. Integer pulvinar nunc eu eros porta eget sodales nulla imperdiet. Nam semper scelerisque viverra. Sed vitae egestas metus. </p>
|
|
<p>Praesent vel enim est, eu ornare metus. Suspendisse sit amet nisi nunc. Quisque eget justo justo, in iaculis diam. Sed elementum mauris ac urna pharetra sollicitudin. Mauris ut faucibus turpis. Etiam mollis facilisis ligula vitae iaculis. Curabitur eget orci at turpis auctor scelerisque. Donec eget sapien felis. Phasellus ornare tincidunt sem non blandit. Cras turpis odio, porta ut molestie vitae, lacinia vel lacus.</p>
|
|
|
|
|
|
<div class="divider"></div>
|
|
|
|
|
|
<h5>Transparency Hover & Aligned Center</h5><br />
|
|
<div class="aligncenter"><a href="./images/portfolio/photo-center.jpg" class="fancylightbox"><img src="./images/portfolio/photo-center-thumbnail.jpg" alt="Transparency Image" width="300" height="200" class="transparent" /></a></div>
|
|
|
|
<p>Praesent vel enim est, eu ornare metus. Suspendisse sit amet nisi nunc. Quisque eget justo justo, in iaculis diam. Sed elementum mauris ac urna pharetra sollicitudin.</p>
|
|
|
|
|
|
|
|
</div><!-- close .scroll-pane -->
|
|
<!-- the jScrollPane script -->
|
|
<script type="text/javascript" src="./js/jquery.mousewheel.js"></script>
|
|
<script type="text/javascript" src="./js/jquery.jscrollpane.min.js"></script>
|
|
<script type="text/javascript" id="sourcecode">
|
|
$(function()
|
|
{
|
|
$('.scroll-pane').jScrollPane();
|
|
});
|
|
</script>
|
|
|
|
</div><!-- close #content-container -->
|
|
|
|
|
|
|
|
<!-- Background Slides -->
|
|
<div id="featured">
|
|
<img src="./images/backgrounds/company-background.jpg" alt="background image" />
|
|
</div><!-- close #featured -->
|
|
<script type="text/javascript">
|
|
$(window).load(function() {
|
|
$('#featured').orbit({
|
|
animation: 'fade', // fade, horizontal-slide, vertical-slide, horizontal-push
|
|
animationSpeed: 1200, // how fast animtions are
|
|
timer: true, // true or false to have the timer
|
|
advanceSpeed: 4000, // if timer is enabled, time between transitions
|
|
pauseOnHover: false, // if you hover pauses the slider
|
|
startClockOnMouseOut: false, // if clock should start on MouseOut
|
|
startClockOnMouseOutAfter: 1000, // how long after MouseOut should the timer start again
|
|
directionalNav: false, // manual advancing directional navs
|
|
captions: true, // do you want captions?
|
|
captionAnimation: 'fade', // fade, slideOpen, none
|
|
captionAnimationSpeed: 800, // if so how quickly should they animate in
|
|
bullets: false, // true or false to activate the bullet navigation
|
|
bulletThumbs: false, // thumbnails for the bullets
|
|
bulletThumbLocation: '', // location from this file where thumbs will be
|
|
afterSlideChange: function(){} // empty function
|
|
});
|
|
});
|
|
</script>
|
|
<!-- End Background Slides -->
|
|
|
|
</div><!-- close #container -->
|
|
|
|
|
|
<div id="footer">
|
|
<div id="social-icons">
|
|
<a href="http://www.facebook.com/" target="_blank"><img src="./images/social-icons/facebook_16.png" alt="Facebook" class="transparent" /></a>
|
|
<a href="http://www.twitter.com/" target="_blank"><img src="./images/social-icons/twitter_16.png" alt="Twitter" class="transparent" /></a>
|
|
<a href="http://www.flickr.com/" target="_blank"><img src="./images/social-icons/flickr_16.png" alt="Flickr" class="transparent" /></a>
|
|
<a href="http://www.vimeo.com/" target="_blank"><img src="./images/social-icons/vimeo_16.png" alt="Vimeo" class="transparent" /></a>
|
|
<a href="http://www.google.com/" target="_blank"><img src="./images/social-icons/google_16.png" alt="Google" class="transparent" /></a>
|
|
<a href="http://www.stumbleupon.com/" target="_blank"><img src="./images/social-icons/stumbleupon_16.png" alt="StumbleUpon" class="transparent" /></a>
|
|
<a href="http://www.youtube.com/" target="_blank"><img src="./images/social-icons/youtube_16.png" alt="YouTube" class="transparent" /></a>
|
|
<a href="http://themeforest.net/user/ProgressionStudios?ref=ProgressionStudios" target="_blank"><img src="./images/social-icons/email_16.png" alt="E-Mail" class="transparent" /></a>
|
|
</div>
|
|
<div id="copyright">
|
|
Copyright © 2011 – MQ – <a href="http://themeforest.net/user/ProgressionStudios?ref=ProgressionStudios" target="_blank">info@thespace.net</a>
|
|
</div><!--close #copyright -->
|
|
</div><!-- close #footer -->
|
|
|
|
|
|
</div><!-- close #page-wrap -->
|
|
</div><!-- close #box-container -->
|
|
|
|
<!-- Color Picker Code -->
|
|
<div id="toppanel">
|
|
<div id="panel">
|
|
<div class="largeheading">Unlimited Colors</div>
|
|
<div class="heading">Menu Background:</div>
|
|
<div class="colorSelector"><div style="background-color: #000000"></div></div>
|
|
<div class="heading">Headings Color:</div>
|
|
<div class="colorSelector2"><div style="background-color: #b8174d"></div></div>
|
|
<a href="./lightbox.php.html" class="reset">Reset colors</a><span class="reset"> | </span><a href="../Architects-Broadside/index.html" class="reset">Preview 2</a>
|
|
</div><!-- close #panel -->
|
|
<div class="panel_button" style="display: visible;"><img src="./images/expand.png" alt="expand" /></div> <!-- close #panel_button -->
|
|
<div class="panel_button hide_button" style="display: none;"><img src="./images/collapse.png" alt="collapse" /> </div> <!-- close #panel_button -->
|
|
|
|
</div>
|
|
<script src="./js/color-picker-slider.js" type="text/javascript"></script>
|
|
<!-- Close Color Picker Code -->
|
|
|
|
<script>
|
|
$(document).ready(function(){
|
|
$("http://progressionstudios.com/broadside/The-Space-Broadside/ul.sf-menu").superfish({
|
|
animation: {height:'show'}, // slide-down effect without fade-in
|
|
delay: 1200 // 1.2 second delay on mouseout
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |