Вы находитесь на странице: 1из 11

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

<link href="css/estilos.css" rel="stylesheet">

<style type="text/css">
#contenedor {
position: absolute;
height: 950px;
z-index: 1;
width: 800px;
left: 50%;
margin-left: -400px;
background-color: #CCCCCC;
}
#banner_superior {
position: absolute;
width: 800px;
height: 300px;
z-index: 1;
background-color: #666666;
}
#contenido {
position: absolute;
width: 800px;
height: 650px;
z-index: 2;
background-color: #F6F6F6;
margin-top: 300px;
}
#logo {
position: absolute;
width: 800px;
height: 100px;
z-index: 3;
background-color: #000000;
}
#logo_1 {
position: absolute;
width: 250px;
height: 80px;
z-index: 1;
margin-top: 10px;
margin-left: 10px;
}
#slogan {
position: absolute;
width: 250px;
height: 30px;
z-index: 2;
margin-top: 55px;
margin-left: 10px;
}
.slogan {
font-size: 40px;
color: #FFF;
text-align: center;
}
#texto_derecho {
position: absolute;
width: 390px;
height: 40px;
z-index: 3;
margin-top: 10px;
margin-left: 400px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 5px;
padding-left: 5px;
}
.slogan_logo {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFF;
text-align: center;
}
#banner_centro {
position: absolute;
width: 800px;
height: 200px;
z-index: 2;
background-color: #006699;
margin-top: 100px;
}
#img_slide {
position: absolute;
width: 600px;
height: 200px;
z-index: 1;
background-color: #00CCCC;
margin-left: 100px;
}
#barra_menu {
position: absolute;
width: 550px;
height: 40px;
z-index: 4;
margin-left: 125px;
margin-top: 80px;
background-color: #A11111;
background-image: url(img/barra_menu_superior.jpg);
}
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet"
type="text/css" />
<style type="text/css">
#contenendor_inferior {
position: absolute;
width: 550px;
height: 300px;
z-index: 1;
margin-left: 125px;
margin-top: 50px;
background-color: #E7E7E7;
-moz-box-shadow: 0px -10px 25px #ABABAB;
-webkit-box-shadow: 0px -10px 25px #ABABAB;
box-shadow: 0px -10px 25px #ABABAB;
}
#img_chica_centro {
position: absolute;
width: 150px;
height: 50px;
z-index: 2;
margin-left: 325px;
}
#img_sust {
position: absolute;
width: 80px;
height: 30px;
z-index: 1;
margin-left: 35px;
margin-top: -8px;
}
#pie {
position: absolute;
width: 550px;
height: 250px;
z-index: 3;
background-color: #303030;
margin-left: 125px;
margin-top: 370px;
-moz-box-shadow: 0px -10px 25px #ABABAB;
-webkit-box-shadow: 0px -10px 25px #ABABAB;
box-shadow: 0px -10px 25px #ABABAB;
background-image: url(img/pie.jpg);
}
.pie {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #999;
font-weight: normal;
}
#img_menu_1 {
position: absolute;
width: 155px;
height: 100px;
z-index: 1;
background-color: #999999;
margin-left: 15px;
margin-top: 40px;
}
#img_menu_3 {
position: absolute;
width: 155px;
height: 100px;
z-index: 2;
background-color: #666666;
margin-left: 380px;
margin-top: 40px;
}
#img_menu_2 {
position: absolute;
width: 155px;
height: 100px;
z-index: 3;
background-color: #666666;
margin-top: 40px;
margin-left: 198px;
}
#cuadro_text_1 {
position: absolute;
width: 155px;
height: 50px;
z-index: 4;
margin-left: 15px;
margin-top: 150px;
}
#cuadro_text_2 {
position: absolute;
width: 155px;
height: 50px;
z-index: 5;
margin-left: 198px;
margin-top: 150px;
}
#cuadro_text_3 {
position: absolute;
width: 155px;
height: 50px;
z-index: 6;
margin-top: 150px;
margin-left: 380px;
}
.text_info {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #333;
}
#cuadro_info_1 {
position: absolute;
width: 125px;
height: 22px;
z-index: 7;
margin-left: 30px;
margin-top: -8px;
background-color: #CC0000;
padding-top: 8px;
}
.cuadro_info {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #FFF;
text-align: center;
}
#cuadro_info_2 {
position: absolute;
width: 125px;
height: 22px;
z-index: 8;
background-color: #CC0000;
margin-left: 213px;
margin-top: -8px;
padding-top: 8px;
}
#cuadro_info_3 {
position: absolute;
width: 125px;
height: 22px;
z-index: 9;
background-color: #CC0000;
margin-left: 395px;
padding-top: 8px;
margin-top: -8px;
}
#pie_info_1 {
position: absolute;
width: 138px;
height: 250px;
z-index: 1;
}
#pie_info_2 {
position: absolute;
width: 137px;
height: 250px;
z-index: 2;
margin-left: 139px;
}
#pie_info_3 {
position: absolute;
width: 137px;
height: 250px;
z-index: 3;
margin-left: 277px;
}
#pie_info_4 {
position: absolute;
width: 138px;
height: 250px;
z-index: 4;
margin-left: 413px;
}
#contacto_text {
position: absolute;
width: 80px;
height: 20px;
z-index: 1;
margin-top: 25px;
margin-left: 10px;
padding-top: 5px;
}
#redes_sociales {
position: absolute;
width: 120px;
height: 35px;
z-index: 2;
margin-left: 9px;
margin-top: 65px;
}
.texto_pie {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #999;
}
#otros_text {
position: absolute;
width: 80px;
height: 20px;
z-index: 1;
margin-top: 25px;
margin-left: 10px;
}
#mapa {
position: absolute;
width: 80px;
height: 20px;
z-index: 1;
margin-left: 10px;
margin-top: 25px;
}
#horario {
position: absolute;
width: 80px;
height: 20px;
z-index: 1;
margin-top: 25px;
margin-left: 10px;
}
#horario_info {
position: absolute;
width: 122px;
height: 60px;
z-index: 2;
margin-top: 65px;
padding-right: 8px;
padding-left: 8px;
}
.texto_pie1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #999;
}
#cuadro_mapa {
position: absolute;
width: 120px;
height: 125px;
z-index: 2;
margin-top: 65px;
margin-left: 8px;
}
#horario_info_2 {
position: absolute;
width: 122px;
height: 60px;
z-index: 3;
margin-top: 130px;
padding-right: 8px;
padding-left: 8px;
}
#telefono {
position: absolute;
width: 128px;
height: 25px;
z-index: 3;
margin-top: 110px;
padding-left: 10px;
}
#mail {
position: absolute;
width: 128px;
height: 25px;
z-index: 4;
margin-top: 140px;
padding-left: 10px;
}
#direccion {
position: absolute;
width: 128px;
height: 20px;
z-index: 5;
margin-top: 170px;
padding-left: 10px;
}
</style>
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr;
for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0;
i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image;
d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01


var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0


var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
</script>

<!-- Start WOWSlider.com HEAD section -->


<link rel="stylesheet" type="text/css"
href="engine1//style.css" media="screen" />
<style type="text/css">
#btn_1 {
position: absolute;
width: 70px;
height: 25px;
z-index: 10;
margin-left: 15px;
margin-top: 215px;
background-color: #999999;
}
#btn_2 {
position: absolute;
width: 70px;
height: 25px;
z-index: 11;
background-color: #666666;
margin-top: 215px;
margin-left: 198px;
}
#btn_3 {
position: absolute;
width: 70px;
height: 25px;
z-index: 12;
margin-left: 380px;
margin-top: 215px;
background-color: #999999;
}
#creditos {
position: absolute;
width: 550px;
height: 25px;
z-index: 4;
margin-left: 125px;
margin-top: 623px;
}
.creditos {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
text-align: center;
}
</style>
<script type="text/javascript"
src="engine1//jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->

</head>

<body onload="MM_preloadImages('img/img_sustitucion_2.png')">
<div id="contenedor">
<div id="banner_superior">
<div id="logo">
<div id="logo_1"><img src="img/logo.png" width="250" height="80"
/></div>
<div class="slogan_logo" id="slogan">The ultimate restaurant
theme</div>
<div id="texto_derecho"><br />
<span class="slogan">Timely the best restaurant town - The New
York Times</span></div>
<div id="barra_menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#" class="MenuBarItemSubmenu">Home</a>
<ul>
<li><a href="#"
class="MenuBarItemSubmenu">Misi&oacute;n</a>
<ul>
<li><a href="#">Franquicia</a></li>
</ul>
</li>
<li><a href="#">Visi&oacute;n</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Pages</a>
<ul>
<li><a href="#" class="MenuBarItemSubmenu">Postres</a>
<ul>
<li><a href="#">Dulces</a></li>
<li><a href="#">Salados</a></li>
</ul>
</li>
<li><a href="#">Chocolate</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Fresas</a>
<ul>
<li><a href="#">Cheesecake</a></li>
</ul>
</li>
<li><a href="#">Cupcakes</a></li>
</ul>
</li>
<li><a href="#">Menu</a> </li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="banner_centro">

<div id="img_slide">

<!-- Start WOWSlider.com BODY section id=wowslider-container1 -->


<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/img_slide_1.jpg" alt="img_slide_1"
title="Postres" id="wows1_0"/></li>
<li><img src="data1/images/img_slide_2.jpg" alt="img_slide_2"
title="Deliciosos Dulces" id="wows1_1"/></li>
<li><img src="data1/images/img_slide_3.jpg" alt="img_slide_3"
title="Los más ricos postres" id="wows1_2"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="img_slide_1"><img
src="data1/tooltips/img_slide_1.jpg" alt="img_slide_1"/>1</a>
<a href="#" title="img_slide_2"><img
src="data1/tooltips/img_slide_2.jpg" alt="img_slide_2"/>2</a>
<a href="#" title="img_slide_3"><img
src="data1/tooltips/img_slide_3.jpg" alt="img_slide_3"/>3</a>
</div></div><span class="wsl"><a
href="http://wowslider.com">slider</a> by WOWSlider.com v5.6</span>
<a href="#" class="ws_frame"></a>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript"
src="engine1//wowslider.js"></script>
<script type="text/javascript"
src="engine1//script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
<img src="img/fondo_banner.jpg" width="800" height="200" />
</div>
</div>
<div id="contenido">
<div id="contenendor_inferior">
<div id="img_menu_1"><img src="img/img_text_1.jpg" width="155"
height="100" /></div>
<div id="img_menu_3"><img src="img/img_text_3.jpg" width="155"
height="100" /></div>
<div id="img_menu_2"><img src="img/img_text_2.jpg" width="155"
height="100" /></div>
<div class="text_info" id="cuadro_text_1">Lorem ipsum dolor sit
amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. </div>
<div class="text_info" id="cuadro_text_2">Lorem ipsum dolor sit
amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa.</div>
<div class="text_info" id="cuadro_text_3">Lorem ipsum dolor sit
amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa.</div>
<div class="cuadro_info" id="cuadro_info_1">Sliding
menucard</div>
<div class="cuadro_info" id="cuadro_info_2">Best seller</div>
<div class="cuadro_info" id="cuadro_info_3">Reservations</div>
<div id="btn_1"><a href="#"><img src="img/btn_1.jpg" width="70"
height="25" /></a></div>
<div id="btn_2"><a href="#"><img src="img/btn_2.jpg" width="70"
height="25" /></a></div>
<div id="btn_3"><a href="#"><img src="img/btn_3.jpg" width="70"
height="25" /></a></div>
</div>
<div id="img_chica_centro">
<div id="img_sust"><a href="#" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('img_sustitucion_web','','img/img_sustitucio
n_2.png',1)"><img src="img/img_sustitucion.png" width="80" height="30"
id="img_sustitucion_web" /></a></div>
<img src="img/ornamento.png" width="150" height="50" /> </div>
<div id="pie">
<div id="pie_info_1">
<div class="pie" id="contacto_text">Contact us!</div>
<div id="redes_sociales"><img src="img/redes_sociales.png"
width="120" height="35" /></div>
<div class="texto_pie" id="telefono">+031 5478 587415</div>
<div class="texto_pie" id="mail">info@correoelec.com</div>
<div class="texto_pie" id="direccion">Lima - Perú</div>
</div>
<div id="pie_info_2">
<div class="pie" id="otros_text">Our Tweets</div>
</div>
<div id="pie_info_3">
<div class="pie" id="mapa">Our location</div>
<div id="cuadro_mapa"><img src="img/ubicacion_mapa.jpg"
width="120" height="125" /></div>
</div>
<div id="pie_info_4">
<div class="pie" id="horario">Open daily</div>
<div class="texto_pie" id="horario_info">Lorem : 17:00 - 21:00
Lorem : 17:00 - 21:00 Lorem : 17:00 - 21:00 Lorem : 17:00 -
21:00</div>
<div class="texto_pie" id="horario_info_2">Lorem ipsum dolor
sit amet, consectetuer adipiscing elit.</div>
</div>
</div>
<div class="creditos" id="creditos">Creado por Martin Torres
Dominguez 2015</div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Оценить