272 lines
12 KiB
HTML
272 lines
12 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta name="description" content ="place your description here"/>
|
||
|
|
<meta name = "viewport" content = "width = device-width;" />
|
||
|
|
<!-- define the width of the page as no wider than the width of the viewport -->
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="styles.css" />
|
||
|
|
<link rel="stylesheet" href="css/css/main.css">
|
||
|
|
<link rel="stylesheet" href="css/css/_print/main.css" media="print">
|
||
|
|
<!--[if IE]><link rel="stylesheet" href="_/css/_patches/win-ie-all.css" media="all" /><![endif]-->
|
||
|
|
<!--[if IE 7]><link rel="stylesheet" href="_/css/_patches/win-ie7.css" media="all" /><![endif]-->
|
||
|
|
<!--[if lt IE 7]><link rel="stylesheet" href="_/css/_patches/win-ie-old.css" media="all" /><![endif]-->
|
||
|
|
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||
|
|
|
||
|
|
<link href='http://fonts.googleapis.com/css?family=Michroma' rel='stylesheet' type='text/css'>
|
||
|
|
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
|
||
|
|
<link href="http://fonts.googleapis.com/css?family=Mako:regular" rel="stylesheet" type="text/css" >
|
||
|
|
<link href="http://fonts.googleapis.com/css?family=Waiting+for+the+Sunrise:regular" rel="stylesheet" type="text/css" >
|
||
|
|
<link rel="icon" href="favicon.png" />
|
||
|
|
<!--[if IE ]><link rel="stylesheet" href="ie.css" media="all"/><![endif]-->
|
||
|
|
<title>Bar template</title>
|
||
|
|
</head>
|
||
|
|
<body class="index">
|
||
|
|
|
||
|
|
<div id="inner-wrap">
|
||
|
|
<header>
|
||
|
|
<section id="logo">
|
||
|
|
<h1><a href="#"><span class="coloured">Arribas</a></span></h1>
|
||
|
|
<p>★ desde. 1980 ★</p>
|
||
|
|
</section><!--logo ends here-->
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div id="main-content-index">
|
||
|
|
<div id="colours">
|
||
|
|
<span class="color color-1"></span>
|
||
|
|
<span class="color color-2"></span>
|
||
|
|
<span class="color color-3"></span>
|
||
|
|
<span class="color color-4"></span>
|
||
|
|
<span class="color color-5"></span>
|
||
|
|
</div><!--colours ends here-->
|
||
|
|
|
||
|
|
<div id="hero-slider">
|
||
|
|
<ul>
|
||
|
|
<!--li><a href="#" rel="#panel-1" class="active">The story of cuppyBar</a></li>
|
||
|
|
<li><a href="#" rel="#panel-2" class="active">The philosophy</a></li>
|
||
|
|
<li><a href="#" rel="#panel-3" class="active">Our staff</a></li>
|
||
|
|
<li><a href="#" rel="#panel-4" class="active">CuppyBar Interior</a></li>
|
||
|
|
<li><a href="#" rel="#panel-5" class="active">Testimonials</a></li-->
|
||
|
|
</ul>
|
||
|
|
<div class="mask">
|
||
|
|
<div class="slider-body">
|
||
|
|
<div class="panel" id="panel-1">
|
||
|
|
<section class="panelinfo">
|
||
|
|
<h2>Our long and successful history</h2>
|
||
|
|
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
|
||
|
|
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
|
||
|
|
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. </p>
|
||
|
|
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
|
||
|
|
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p>
|
||
|
|
</section>
|
||
|
|
<div class="divider"></div>
|
||
|
|
<!--section class="panelinfo2">
|
||
|
|
<h3>Want to know how did we grow? See history in pictures!</h3>
|
||
|
|
<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
|
||
|
|
Donec eu libero sit amet quam egestas semper. Vestibulum tortor quam, feugiat vitae, ultricies
|
||
|
|
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p>
|
||
|
|
<a href="additional3.html" class="button">View Photo story</a>
|
||
|
|
</section-->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!--div class="panel" id="panel-2">
|
||
|
|
<section class="panelinfo">
|
||
|
|
<h2>Our philosophy and principles</h2>
|
||
|
|
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
|
||
|
|
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
|
||
|
|
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. </p>
|
||
|
|
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
|
||
|
|
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
|
||
|
|
Vestibulum tortor quam, feugiat vitae, ultricies
|
||
|
|
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p>
|
||
|
|
</section>
|
||
|
|
</div-->
|
||
|
|
|
||
|
|
<div class="panel" id="panel-3">
|
||
|
|
<section class="panelinfo">
|
||
|
|
<h2>Our staff</h2>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="panel-image">
|
||
|
|
<div class="slideOutTip openLeft green" style="left:260px;top:16px">
|
||
|
|
<div class="tipVisible">
|
||
|
|
<div class="tipIcon">
|
||
|
|
<div class="plusIcon"></div>
|
||
|
|
</div><!--tipicon ends here-->
|
||
|
|
<p class="tipTitle">Mary Smith—Chief</p>
|
||
|
|
</div><!--tipvisisble ends here-->
|
||
|
|
|
||
|
|
<div class="slideOutContent">
|
||
|
|
<p>
|
||
|
|
<a href="additional.html">
|
||
|
|
<img class="spaceBottom" src="images/1.jpg" width="400" height="200" alt="name and role" /></a>
|
||
|
|
Vestibulum tortor quam, feugiat vitae, ultricies
|
||
|
|
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <br/>
|
||
|
|
Read interview with Mary <a href="additional.html">here</a>.
|
||
|
|
</p>
|
||
|
|
</div><!--slideoutcontent ends here-->
|
||
|
|
</div><!--slideouttip openleft ends here-->
|
||
|
|
|
||
|
|
<!--next slideout tip-->
|
||
|
|
<div class="slideOutTip openLeft green" style="left:160px;top:120px">
|
||
|
|
<div class="tipVisible">
|
||
|
|
<div class="tipIcon">
|
||
|
|
<div class="plusIcon"></div>
|
||
|
|
</div><!--tipicon ends here-->
|
||
|
|
<p class="tipTitle">Mary Smith—Chief</p>
|
||
|
|
</div><!--tipvisisble ends here-->
|
||
|
|
|
||
|
|
<div class="slideOutContent">
|
||
|
|
<p>
|
||
|
|
<a href="additional.html">
|
||
|
|
<img class="spaceBottom" src="images/2.jpg" width="300" height="80" alt="name and role" /></a>
|
||
|
|
Vestibulum tortor quam, feugiat vitae, ultricies
|
||
|
|
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <br/>
|
||
|
|
Read interview with Mary <a href="additional.html">here</a>.</p>
|
||
|
|
</div><!--slideoutcontent ends here-->
|
||
|
|
</div><!--slideouttip openleft ends here-->
|
||
|
|
|
||
|
|
<!--next slideout tip-->
|
||
|
|
<div class="slideOutTip openLeft green" style="left:440px;top:66px">
|
||
|
|
<div class="tipVisible">
|
||
|
|
<div class="tipIcon">
|
||
|
|
<div class="plusIcon"></div>
|
||
|
|
</div><!--tipicon ends here-->
|
||
|
|
<p class="tipTitle">Mary Smith—Chief</p>
|
||
|
|
</div><!--tipvisisble ends here-->
|
||
|
|
|
||
|
|
<div class="slideOutContent">
|
||
|
|
<p>
|
||
|
|
<a href="additional.html">
|
||
|
|
<img class="spaceBottom" src="images/3.jpg" width="400" height="140" alt="name and role" /></a>
|
||
|
|
Vestibulum tortor quam, feugiat vitae, ultricies
|
||
|
|
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <br/>
|
||
|
|
Read interview with Mary <a href="additional.html">here</a>.</p>
|
||
|
|
</div><!--slideoutcontent ends here-->
|
||
|
|
</div><!--slideouttip openleft ends here-->
|
||
|
|
</section>
|
||
|
|
</div><!--panel ends here-->
|
||
|
|
|
||
|
|
|
||
|
|
<div class="panel" id="panel-4">
|
||
|
|
<section class="panelinfo">
|
||
|
|
<h2>Our interior</h2>
|
||
|
|
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
|
||
|
|
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Read <a href="#">more about the interior</a> and view <a href="gallery.html">Gallery Of Images</a>.</p>
|
||
|
|
<figure><img src="images/interior.jpg" width="710" height="240" alt="interior"/></figure>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="panel" id="panel-5">
|
||
|
|
<section class="panelinfo">
|
||
|
|
<h2>Our clients say...</h2>
|
||
|
|
<section id="quotes-wrap">
|
||
|
|
<div class="quotes">
|
||
|
|
<blockquote><figure><img src="images/left-quotes.png" alt="left quotes"/></figure>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius sapien at dolor sagittis vel
|
||
|
|
suscipit arcu auctor. Mauris ullamcorper commodo libero, eget rutrum est tincidunt sit amet.
|
||
|
|
Lorem ipsum dolor sit amet, consectetur elit. ”<span class="name">—John Smith</span></p></blockquote>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="quotes">
|
||
|
|
<blockquote><figure><img src="images/left-quotes.png" alt="left quotes"/></figure>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius sapien at dolor sagittis vel
|
||
|
|
suscipit arcu auctor. Mauris ullamcorper commodo libero, eget rutrum est tincidunt sit amet.
|
||
|
|
Lorem ipsum dolor sit amet, consectetur elit. ” <span class="name">—John Smith</span></p></blockquote>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="quotes">
|
||
|
|
<blockquote><figure><img src="images/left-quotes.png" alt="left quotes"/></figure>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius sapien at dolor sagittis vel
|
||
|
|
suscipit arcu auctor. Mauris ullamcorper commodo libero, eget rutrum est tincidunt sit amet.
|
||
|
|
Lorem ipsum dolor sit amet, consectetur elit. ”<span class="name">—John Smith</span></p></blockquote>
|
||
|
|
</div>
|
||
|
|
</section><!--quotes-wrap ends here-->
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div> <!-- .mask -->
|
||
|
|
<div class="clear"></div>
|
||
|
|
</div> <!-- #hero-slider -->
|
||
|
|
|
||
|
|
<nav id="side">
|
||
|
|
<a href="index.html">Inicio</a>
|
||
|
|
<a href="#">Quienes somos </a>
|
||
|
|
<a href="gallery.html">Galería</a>
|
||
|
|
<a href="menu.html">Ofertas</a>
|
||
|
|
<a href="location.html">Localización</a>
|
||
|
|
<a href="contact.html">Contacto</a>
|
||
|
|
<!--a href="service.html">services</a-->
|
||
|
|
</nav>
|
||
|
|
<section id="social">
|
||
|
|
<figure><a href="#"><img src="images/facebook.png" alt="facebook"/></a></figure>
|
||
|
|
<figure><a href="#"><img src="images/skype.png" alt="facebook"/></a></figure>
|
||
|
|
<figure><a href="#"><img src="images/gmail.png" alt="facebook"/></a></figure>
|
||
|
|
<figure><a href="#"><img src="images/favorites.png" alt="facebook"/></a></figure>
|
||
|
|
</section>
|
||
|
|
</div><!--main-content-index ends here-->
|
||
|
|
|
||
|
|
<section id="hours">
|
||
|
|
<div id="panel-hours">
|
||
|
|
<div class="panelblock">
|
||
|
|
<article id="opening-hours">
|
||
|
|
<p>Lunes—Viernes: 10:00—14:00 y 17:00—20:00 | Sábados: 10:00—14:00</p>
|
||
|
|
</article>
|
||
|
|
</div><!--panelblock ends here-->
|
||
|
|
</div><!--panel-hours ends here-->
|
||
|
|
<div id="bottom-nav"><a class="btn-slide" href="#">
|
||
|
|
<div id="triangle-down"></div>
|
||
|
|
Horario</a></div>
|
||
|
|
</section><!--section hours ends here-->
|
||
|
|
|
||
|
|
</div><!--inner-wrap ends here-->
|
||
|
|
<div id="body-background"><img src="images/bg1.jpg" alt="interior full-size photo"/></div>
|
||
|
|
|
||
|
|
<!--scripts-->
|
||
|
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
|
||
|
|
<script src="js/jquery.scrollTo-1.4.2-min.js"></script>
|
||
|
|
<script src="js/jquery.ez-bg-resize.js" charset="utf-8"></script>
|
||
|
|
<script src="js/lib.js" charset="utf-8"></script>
|
||
|
|
<script src="js/scriptslideout.js"></script>
|
||
|
|
<script>
|
||
|
|
$(document).ready(function() {
|
||
|
|
$("#body-background").ezBgResize();
|
||
|
|
});
|
||
|
|
|
||
|
|
$(window).bind("resize", function(){
|
||
|
|
$("#body-background").ezBgResize();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
//append click event to the UL list anchor tag
|
||
|
|
$('#hero-slider ul a').click(function () {
|
||
|
|
|
||
|
|
//reset all the items
|
||
|
|
$('#hero-slider ul a').removeClass('active');
|
||
|
|
|
||
|
|
//set current item as active
|
||
|
|
$(this).addClass('active');
|
||
|
|
|
||
|
|
//scroll it to the right position
|
||
|
|
$('.mask').scrollTo($(this).attr('rel'), 300);
|
||
|
|
|
||
|
|
//disable click event
|
||
|
|
return false;
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
$(document).ready(function(){
|
||
|
|
$(".btn-slide").click(function(){
|
||
|
|
$("#panel-hours").slideToggle("slow");
|
||
|
|
$(this).toggleClass("active"); return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|