david
76692e0b49
git-svn-id: https://192.168.0.254/svn/Proyectos.Instaldeco_Web/tags/demo@1 d4ca0941-a869-4c45-9eab-2e1fd2dd58c0
306 lines
12 KiB
HTML
306 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 class="current"><a href="./typography.php.html">Typography</a></li>
|
|
<li><a href="./columns.php.html">Columns</a></li>
|
|
<li><a href="./lightbox.php.html">Lightbox Examples</a></li>
|
|
</ul>
|
|
|
|
|
|
<div class="scroll-pane" style="height:370px;"><!-- customize the height for the scroll box -->
|
|
<h1>Heading 1</h1>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacus orci, convallis cursus rutrum cursus, facilisis convallis ante. Nunc non imperdiet purus. </p>
|
|
<h2>Heading 2</h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacus orci, convallis cursus rutrum cursus, facilisis convallis ante. Nunc non imperdiet purus. </p>
|
|
<h3>Heading 3</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacus orci, convallis cursus rutrum cursus, facilisis convallis ante. Nunc non imperdiet purus. </p>
|
|
<h4>Heading 4</h4>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacus orci, convallis cursus rutrum cursus, facilisis convallis ante. Nunc non imperdiet purus. </p>
|
|
<h5>Heading 5</h5>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacus orci, convallis cursus rutrum cursus, facilisis convallis ante. Nunc non imperdiet purus. </p>
|
|
<h6>Heading 6</h6>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacus orci, convallis cursus rutrum cursus, facilisis convallis ante. Nunc non imperdiet purus. </p>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<h3>Block quote</h3>
|
|
<blockquote>Aliquam ipsum sapien, ultrices et dapibus a, volutpat suscipit orci. Etiam eu mauris nulla, non dapibus arcu. Nullam pretium enim sed lectus pulvinar accumsan. Donec placerat nisl sit amet mi varius varius. Nulla diam nisl, convallis in facilisis.</blockquote>
|
|
|
|
|
|
<div class="divider"></div>
|
|
|
|
<h3>List Styles</h3>
|
|
|
|
<div class="col_1_2">
|
|
<ul class="checkmark">
|
|
<li>Lorem ipsum dolar</li>
|
|
<li>Dolar sit ametas</li>
|
|
<li>Consectetur eliten</li>
|
|
<li>Curabitur Lacues</li>
|
|
<li>Integur acrisus massa</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col_2_2">
|
|
<ul class="arrow">
|
|
<li>Lorem ipsum dolar</li>
|
|
<li>Dolar sit ametas</li>
|
|
<li>Consectetur eliten</li>
|
|
<li>Curabitur Lacues</li>
|
|
<li>Integur acrisus massa</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="clear"></div>
|
|
|
|
<div class="col_1_2">
|
|
<ul>
|
|
<li>Lorem ipsum dolar</li>
|
|
<li>Dolar sit ametas</li>
|
|
<li>Consectetur eliten</li>
|
|
<li>Curabitur Lacues</li>
|
|
<li>Integur acrisus massa</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col_2_2">
|
|
<ol>
|
|
<li>Lorem ipsum dolar</li>
|
|
<li>Dolar sit ametas</li>
|
|
<li>Consectetur eliten</li>
|
|
<li>Curabitur Lacues</li>
|
|
<li>Integur acrisus massa</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="clear"></div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
|
|
<h3>Button Styles</h3>
|
|
<p>The buttons are created by just adding one class to a text link. All of the background images and hover effects are added automatically!</p>
|
|
|
|
|
|
<div class="col_1_2">
|
|
<h5>Default Button</h5>
|
|
<p><a href="#" class="button">Learn more ›</a></p>
|
|
</div>
|
|
<div class="col_2_2">
|
|
<h5>Dark Button</h5>
|
|
<p><a href="#" class="big-button">Read more ›</a></p>
|
|
</div>
|
|
|
|
<div class="clear"></div>
|
|
|
|
|
|
</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="./typography.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> |