<!DOCTYPE html>
<html lang="es-ar">
<head>
<title>Vogue Trucha</title>
<meta charset="utf-8">
<link rel=stylesheet type="text/css" href="Estilos.css">
<link rel=stylesheet type="text/css" href="normalize.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,600;1,100;1,500&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,800;1,400;1,800&display=swap" rel="stylesheet">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="icon" href="Imagenes/Icono_Voghe.png" type="image/png" sizes="62x25">
<script src="https://kit.fontawesome.com/5749e1a07c.js" crossorigen="anomymous"></script>
</head>
<body>
<header class="header">
<div class="nav-toggle" aria-label="Abrir Menú">
<i class="fas fa-bars fa-2x"></i>
</div>

<div class="contenedor">
<nav class="navegacion">
<img src="Imagenes/Logo.png" class="logo nav-link" alt="Icono">

<ul class="nav-menu">
<li class="nav-menu-item">
<a href="#" class="nav-menu-link nav-link nav-menu-link_active">EL ESPACIO</a>
</li>
<li class="nav-menu-item">
<a href="#" class="nav-menu-link nav-link nav-menu-link_active">PRODUCTOS</a>
</li>
<li class="nav-menu-item">
<a href="#" class="nav-menu-link nav-link nav-menu-link_active">OFERTAS</a>
</li>
<li class="nav-menu-item">
<a href="#" class="nav-menu-link nav-link nav-menu-link_active">RESERVAS</a>
</li>
<li class="nav-menu-item">
<a href="#" class="nav-menu-link nav-link nav-menu-link_active">CONTACTO</a>
</li>
</ul>
<ul class="nav-busqueda">
<li>
<a href="#">
<i class="fas fa-search"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="contenedor-textos-header">
<h3>RECIÉN HECHO,<br>
TODOS LOS DÍAS
</h3>
<div class="linea"></div>
<p class="texto-header">Chocalate cake chocolate cake pie candy canes chocolate cake bonbon. I love marzipan liquorice I love cake chupa chups. Pie danish macaroon ice cream ice cream. Bonbon sweet bonbon jelly beans jelly-o I love lollipop</p>
</div>
</header>
<main>
<section class="seccion-doble">
<div>
<h3>ven al brunch de</h3>
<h3>los domingos</h3><br>
<p>Sesame snaps icing chocolate bar. I love donut powder sesame snaps. Jelly-o topping caramels. Sugar plum I lov gummi bears</p>
</div>
<div>
<h3>celebra tus fiestas</h3>
<h3>con nosotros</h3><br>
<p>Bonbon sweet jelly beans jelly-o I love lollipop. Cookie sesame snaps bear claw. Cake dragée danish. Powder I love liquorice macaroon</p>
</div>
</section>

<section class="seccion-simple">
<div>
<h3>ven a desayunar</h3><br>
<hr><br>
<p>Bonbon topping I love sweet roll I love candy icing chocolate jelly. Pie soufflé sweet. Apple pie bonbon caramels powder</p><br>
<a href="#" class="btn">descubre nuestros productos</a>
</div>
</section>

<section class="seccion-cuadruple">
<div>
<img src="Imagenes/Icono1.png" alt="Icono Uno"/>
<h3>pan recién hecho</h3><br>
<p>Cupcake danish I love halvah bonbon icing donut. Sweet caramels gingerbread bear claw jujubes chocolate cake pudding sesame snaps bonbon. Chocolate cake wafer pudding muffing wafer sweet roll I love chupa chups. Apple pie jujubes ice cream sugar plum topping</p>
</div>
<div>
<img src="Imagenes/Icono2.png" alt="Icono Dos"/>
<h3>tartas para cada día</h3><br>
<p>Cookie cake jelly beans chocolate cake carriot cake croissant icing. Caramels liquorace sesame snaps sugar plum I love bonbon. I love I love halvah</p>
</div>
<div>
<img src="Imagenes/Icono3.png" alt="Icono Tres"/>
<h3>prueba nuestros dulces</h3><br>
<p>Caramels liquorace sesame snaps sugar plum I love bonbon. I love halvah. I love marzipan cake I love donut tiramisu pudding cotton candy liquorace. Jelly beans chocolate brownie gummi bears dragée jelly-o</p>
</div>
<div>
<img src="Imagenes/Icono4.png" alt="Icono Cuatro"/>
<h3>ingredientes ecológicos</h3><br>
<p>Carrot cake fruitcake cheescake muffin lollipoop croissant dessert halvah. Cake pie bear claw marshmallow marzipan cake. Carrot cake I love cotton candy ice cream chupa chups donut. Lemon drops sweet marhsmallow gummies I love dragée danish cake. Tart caramels sweet roll jelly-o liquorace tart</p>
</div>
</section>

<section class="seccion-doble-2">
<div>
<h3>contacta con</h3>
<h3>nosotros</h3><br>
<p>Si queres hacer una reserva, tienes alguna sugerencia o simplemente quieres saludar, escríbenos a:</p>
<a href="mailto:cafeoslo@cafeoslo.es">cafeoslo@cafeoslo.es</a>
</div>
<div>
<h3>¿sabes donde</h3>
<h3>estamos?</h3><br>
<p>C/Mayor, 15</p>
<p>00000 Barcelona</p>
<p class="mapa-google">(Google Maps)</p>
</div>
</section>
</main>
<footer class="footer">
<div>
<p>Setiembre 2015 - Todos los derechos reservados</p>
</div>
</footer>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="main.js"></script>
</body>
</html>

*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
@font-face{
font-family: "BabyScript";
src:url(Fonts/Baby Script.ttf);
format("ttf");
font-weight: bold;
font-style: normal;
}
@font-face{
font-family: "Lobster";
src: url(Fonts/Lobster 1.4.otf);
format("otf");
font-weight: bold;
font-style: none;
}

body{
font-family: sans-serif;
}

.header, .footer{
}

.header{
padding: 10px;
background-image: url(Imagenes/Fondo1.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: #ffffff;
}

.contenedor{
width: 100%;
margin: auto;
}
.navegacion{
font-size: 12px;
height: 50px;

display: flex;
justify-content: space-between;
align-items: center;
}

.navegacion img{
width: 90px;
}

.navegacion ul{
display: flex;
list-style: none;
}

.navegacion ul li{
padding: 10px;
}

.navegacion ul li a{
padding: 2px;
text-decoration: none;
color: #ffffff;
}

.navegacion ul li a:hover{
color: #034574;
background: none;
background-color: #fff;
transition: 0.5s;
}

.navegacion ul.nav-menu{
flex: 1;
margin-left: 20px;
justify-content: flex-end;
}

.nav-toggle{
cursor: pointer;
position: absolute;
top: 15px;
right: 30px;
z-index: 2;
display: none;
}

.contenedor-textos-header{
display: block;
margin: 60px 0 0 0;
color: #f5f0ed;
flex-wrap: nowrap;
justify-content: center;
max-height: 50vh;
padding-top: 30px;
padding-bottom: 70px;
min-width: 300px;
}

.contenedor-textos-header h3{
font-size: 28px;
font-family: sans-serif;
text-align: center;
}

.texto-header{
font-size: 16px;
font-family: sans-serif;
text-align: center;
max-width: 40%;
margin-left: auto;
margin-right: auto;
}

.linea{
width: 50px;
height: 2px;
background-color: #f5f0ed;
margin: 10px auto 20px auto;
}

.seccion-doble{
display: grid;
grid-template-columns: repeat(2, 1fr);
align-content: center;
}

.seccion-doble div{
min-width: 150px;
text-align: center;
min-height: 30vh;
padding-top: 60px;
}

.seccion-doble h3{
font-size: 24px;
text-transform: uppercase;
}

.seccion-doble p{
font-size: 16px;
margin: auto;
max-width: 75%;
}

.seccion-doble div:nth-child(1){
color: #f5f0ed;
background: #d03b40;
}

.seccion-doble div:nth-child(2){
color: #d03b40;
background: #ded6c0;
}

.seccion-simple{
display: flex;
flex-direction: column;
min-height: 50vh;
width: 100%;
background-image: url(Imagenes/Fondo2.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
align-items: center;
text-align: center;
justify-content: space-around;
color: #ffffff;
}

.seccion-simple div{
min-width: 150px;
text-align: center;
}

.seccion-simple h3{
font-size: 24px;
text-transform: uppercase;
}

.seccion-simple p{
font-size: 14px;
margin: auto;
max-width: 75%;
}

.seccion-simple hr{
height: 1px;
width: 50px;
background-color: #f5f0ed;
margin-left: auto;
margin-right: auto;
}

.btn{
cursor: pointer;
display: inline-block;
border: 0;
text-decoration: none;
padding: 10px 20px;
border: 1px solid #fff;
color: #ffffff;

font-size: 18px;
text-transform: uppercase;
}

.btn:hover{
opacity: 0.5;
}

.seccion-cuadruple{
display: grid;
grid-template-columns: repeat(2, 1fr);
min-height: 35vh;
min-width: 150px;
text-align:left;
padding-top: 35px;
background: #f5f5dc;
padding-left: 10px;
}

.seccion-cuadruple img{
width: 90px;
float: left;
}

.seccion-cuadruple h3{
font-size: 16px;
text-transform: uppercase;
color: #000000;
margin-left: 100px;
}

.seccion-cuadruple p{
font-size: 12px;
margin: auto auto auto 100px;
max-width: 75%;
color: #241d1b;
}

.seccion-doble-2{
display: grid;
grid-template-columns: repeat(2, 1fr);
min-height: 30vh;
}

.seccion-doble-2 div{
min-width: 150px;
text-align: center;
padding-top: 70px;
}

.seccion-doble-2 h3{
font-size: 20px;
text-transform: uppercase;
}

.seccion-doble-2 p{
font-size: 14px;
margin: auto;
max-width: 75%;
}

.seccion-doble-2 div:nth-child(1){
color: #d03b40;
background: #ded6c0;
}

.seccion-doble-2 div:nth-child(2){
color: #f5f0ed;
background: #d03b40;
}

.seccion-doble-2 a{
font-size: 14px;
font-weight: bold;
}

.mapa-google{
font-weight: bold;
}

.footer{
background: #000000;
display: block;
min-height: 9vh;

padding-left: 20px;

/* padding-top: 9vh; */
}

.footer div{
padding-top: 3.5vh;
}

.footer p{
color: #ffffff;
font-size: 12px;
}

/* */
/* Responsive <<<<< 768px >>>>> */
/* */

@media screen and (max-width: 768px){
body{
}

.header{
}

.nav-toggle{
display: block;
}

.nav-toggle:hover{
opacity: 0.5;
}

.navegacion ul.nav-menu{
display: block;
position: absolute;
top: 0;
left: 0;
background: #2f3640;
width: 50%;
height: 100%;
border-right: #ccc 1px solid;
opacity: 0.9;
padding: 30px;
transform: translateX(-500px);
transition: transform 0.5s ease-in-out;
}

.navegacion ul.nav-menu li:last-child{
border-bottom: 0;
}

.navegacion ul.nav-menu.show{
transform: translateX(-20px);
}

.navegacion ul.nav-busqueda{
margin-right: 50px;
}

/* */

.contenedor-textos-header{
margin: 40px 0 0 0;
min-height: 40vh;
padding-top: 20px;
padding-bottom: 50px;
min-width: 200px;
}

.contenedor-textos-header h3{
font-size: 20px;
}

.texto-header{
font-size: 14px;
}

/* */

.seccion-doble div{
min-width: 100px;
padding-top: 5vh;

min-height: 25vh;
padding-top: 50px;
}

.seccion-doble h3{
font-size: 20px;
}

.seccion-doble p{
font-size: 14px;
}

/* */

.seccion-simple{
height: 40vh;
width: 100%;
}

.seccion-simple div{
min-width: 100px;
}

.seccion-simple h3{
font-size: 20px;
}

.seccion-simple p{
font-size: 12px;
}

.seccion-simple hr{
height: 1px;
width: 45px;
}

.btn{
padding: 8px 16px;
font-size: 14px;
}

/* */

.seccion-cuadruple{
min-height: 30vh;
min-width: 100px;
text-align: left;
padding-top: 25px;
padding-left: 8px;
}

.seccion-cuadruple img{
width: 70px;
}

.seccion-cuadruple h3{
font-size: 14px;
margin-left: 80px;
}

.seccion-cuadruple p{
font-size: 10px;
margin: auto auto auto 80px;
}

/* */

.seccion-doble-2{
min-height: 25vh;
}

.seccion-doble-2 div{
min-width: 100px;
padding-top: 50px;
}

.seccion-doble-2 h3{
font-size: 16px;
}

.seccion-doble-2 p{
font-size: 12px;
}

.seccion-doble-2 a{
font-size: 12px;
}

/* */

.footer{
min-height: 7vh;
padding-left: 15px;
}

.footer div{
padding-top: 3vh;
}

.footer p{
font-size: 10px;
}

}

/* */
/* Responsive <<<<< 320px >>>>> */
/* */

@media screen and (max-width: 320px){
body{
}

.header{
}

.nav-toggle{
display: block;
}

.nav-toggle:hover{
opacity: 0.5;
}

.navegacion ul.nav-menu{
display: block;
position: absolute;
top: 0;
left: 0;
background: #2f3640;
width: 50%;
height: 100%;
border-right: #ccc 1px solid;
opacity: 0.9;
padding: 30px;
transform: translateX(-500px);
transition: transform 0.5s ease-in-out;
}

.navegacion ul.nav-menu li:last-child{
border-bottom: 0;
}

.navegacion ul.nav-menu.show{
transform: translateX(-20px);
}

.navegacion ul.nav-busqueda{
margin-right: 50px;
}

/* */

.contenedor-textos-header{
margin: 0 0 20px 0;
min-height: 25vh;
min-width: 100px;
padding-top: 18px;
padding-bottom: 50px;
}

.contenedor-textos-header h3{
font-size: 15px;
}

.texto-header{
font-size: 10px;
}

/* */

.seccion-doble{
display: grid;
grid-template-columns: repeat(1, 1fr);
}

.seccion-doble div{
min-height: 25vh;
min-width: 80px;
padding-top: 40px;
padding-bottom: 30px;
text-align: center;
}

.seccion-doble h3{
font-size: 16px;
}

.seccion-doble p{
font-size: 10px;
max-width: 75%;
}

/* */

.seccion-simple{
min-height: 40vh;
width: 100%;
}

.seccion-simple div{
padding-top: 30px;
min-width: 80px;
}

.seccion-simple h3{
font-size: 16px;
}

.seccion-simple p{
font-size: 10px;
text-align: center;
}

.seccion-simple hr{
height: 1px;
width: 40px;
}

.btn{
padding: 5px 12px;
font-size: 10px;
}

/* */

.seccion-cuadruple{
grid-template-columns: repeat(1, 1fr);
min-height: 25vh;
min-width: 130px;
padding-top: 25px;
padding-bottom: 20px;
text-align: center;
padding-left: 5px;
grid-gap: 20px;
}

.seccion-cuadruple img{
width: 70px;
float: none;
}

.seccion-cuadruple h3{
font-size: 12px;
text-align: center;
margin: auto;
}

.seccion-cuadruple p{
font-size: 10px;
text-align: center;
margin: auto;
}

/* */

.seccion-doble-2{
display: grid;
grid-template-columns: repeat(1, 1fr);
min-height: 25vh;
}

.seccion-doble-2 div{
min-width: 80px;
padding-top: 40px;
padding-bottom: 20px;
}

.seccion-doble-2 h3{
font-size: 16px;
}

.seccion-doble-2 p{
font-size: 10px;
max-width: 75%;
}

.seccion-doble-2 a{
font-size: 10px;
}

/* */

.footer{
min-height: 8vh;
padding-left: 10px;
}

.footer div{
padding-top: 3vh;
}

.footer p{
font-size: 10px;
}

}

document.querySelector(".nav-toggle").addEventListener("click", () => {
document.querySelector(".nav-menu").classList.toggle("show");
});

ScrollReveal().reveal('.showcase');
ScrollReveal().reveal('.news-cards', { delay: 500 });
ScrollReveal().reveal('.cards-banner-one', { delay: 500 });
ScrollReveal().reveal('.cards-banner-two', { delay: 500 });