david
76692e0b49
git-svn-id: https://192.168.0.254/svn/Proyectos.Instaldeco_Web/tags/demo@1 d4ca0941-a869-4c45-9eab-2e1fd2dd58c0
334 lines
12 KiB
HTML
334 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="sliding-element">
|
|
<a href="./company.php.html">Company</a>
|
|
</li>
|
|
<li class="sliding-element">
|
|
<a href="./services.php.html">Our Services</a>
|
|
</li>
|
|
<li class="current">
|
|
<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 light-fonts">
|
|
|
|
|
|
<br /><br /><br /><br />
|
|
|
|
<div class="scroll-pane" style="height:330px;"><!-- customize the height for the scroll box -->
|
|
|
|
<div class="portfolio_carousel"> <!-- begin carousel -->
|
|
<ul id="rotating-services">
|
|
<li>
|
|
<a class="fancylightbox" href="./images/portfolio/img_1.jpg">
|
|
<img src="./images/portfolio/portfolio-item1-thumb.jpg" alt="portoflio item" />
|
|
<div class="description">
|
|
<h5>Sample Title01</h5>
|
|
<p>This is a sample short description.</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="fancylightbox" href="./images/portfolio/img_2.jpg">
|
|
<img src="./images/portfolio/portfolio-item2-thumb.jpg" alt="portoflio item" />
|
|
<div class="description">
|
|
<h5>Sample Title2</h5>
|
|
<p>This is a sample short description.</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="./images/portfolio/img_3.jpg" class="fancylightbox">
|
|
<img src="./images/portfolio/portfolio-item3-thumb.jpg" alt="portoflio item" />
|
|
<div class="description">
|
|
<h5>Sample Title3</h5>
|
|
<p>This is a sample short description.</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="./images/portfolio/img_4.jpg" class="fancylightbox">
|
|
<img src="./images/portfolio/portfolio-item4-thumb.jpg" alt="portoflio item" />
|
|
<div class="description">
|
|
<h5>Sample Title4</h5>
|
|
<p>This is a sample short description.</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="./images/portfolio/img_5.jpg" class="fancylightbox">
|
|
<img src="./images/portfolio/portfolio-item5-thumb.jpg" alt="portoflio item" />
|
|
<div class="description">
|
|
<h5>Sample Title5</h5>
|
|
<p>This is a sample short description.</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="./images/portfolio/img_6.jpg" class="fancylightbox">
|
|
<img src="./images/portfolio/portfolio-item6-thumb.jpg" alt="portoflio item" />
|
|
<div class="description">
|
|
<h5>Sample Title6</h5>
|
|
<p>This is a sample short description.</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="./images/portfolio/img_7.jpg" class="fancylightbox">
|
|
<img src="./images/portfolio/portfolio-item7-thumb.jpg" alt="portoflio item" />
|
|
<div class="description">
|
|
<h5>Sample Title7</h5>
|
|
<p>This is a sample short description.</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="./images/portfolio/img_8.jpg" class="fancylightbox">
|
|
<img src="./images/portfolio/portfolio-item8-thumb.jpg" alt="portoflio item" />
|
|
<div class="description">
|
|
<h5>Sample Title8</h5>
|
|
<p>This is a sample short description.</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="clearfix"></div>
|
|
<a id="previous_link-arrow" class="prev" href="#">← <span>Previous</span></a>
|
|
<a id="next_link-arrow" class="next" href="#"><span>Next</span> →</a>
|
|
<div id="foo2_pag" class="pagination"></div>
|
|
|
|
</div> <!-- end carousel html -->
|
|
|
|
<!-- Begin CAROUSEL JavaScript -->
|
|
<script type="text/javascript">
|
|
$(function() {
|
|
$('#rotating-services').carouFredSel({
|
|
items: {
|
|
visible: 4
|
|
},
|
|
circular: false,
|
|
infinite: false,
|
|
auto : false,
|
|
scroll: 2,
|
|
prev : {
|
|
button : "#previous_link-arrow",
|
|
key : "left"
|
|
},
|
|
next : {
|
|
button : "#next_link-arrow",
|
|
key : "right"
|
|
}
|
|
|
|
});
|
|
});
|
|
</script>
|
|
<script type="text/javascript" src="./js/jquery.carouFredSel-4.1.0-packed.js"></script>
|
|
|
|
<!-- END CAROUSEL JavaScript -->
|
|
|
|
|
|
</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 class="content-heading right-align">
|
|
<h3>Latest</h3>
|
|
<h1>Projects</h1>
|
|
</div>
|
|
|
|
|
|
|
|
</div><!-- close #content-container -->
|
|
|
|
|
|
|
|
|
|
<!-- Background Slides -->
|
|
<div id="featured">
|
|
<img src="./images/backgrounds/projects-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="./portfolio.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> |