Download as pdf or txt
Download as pdf or txt
You are on page 1of 8

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bulma.min.css">
<link rel="stylesheet" href="css/material-design-iconic-font.css">
<link rel="stylesheet" href="css/styles.css">
<title>Document</title>
</head>

<body>
<!-- Barra de navegación -->
<header>
<nav class="navbar-top">
<ul class="navbar-top-ul">
<li class="navbar-top-item">
<a href="login.html" class="navbar-top-
links">Registro</a>
</li>
<li class="navbar-top-item">
<a href="login.html" class="navbar-top-
links">Iniciar sesión</a>
</li>
<li class="navbar-top-item">
<a href="#" class="navbar-top-links">
<i class="zmdi zmdi-shopping-cart"></i> Carrito
<!-- <i class="zmdi zmdi-chevron-down"></i> -->
</a>
</li>
</ul>
</nav>
<nav class="navbar">
<header class="nabvar-mobile is-size-5-mobile">
<a class="navbar-mobile-link has-text-
white" href="#" id="btn-mobile"></a>
</header>
<nav class="nav-menu" id="mySidenav">
<form class="form-group " action="#">
<div class="form-group-container">
<span class="form-group-
icon"><i class="zmdi zmdi-search"></i></span>
<input type="text" class="form-group-
input" placeholder="Buscar...">
</div>
</form>
<a class="is-hidden-mobile brand is-uppercase has-text-
weight-bold has-text-dark"
href="index.html">PERFECT BRAND </a>
<ul class="nav-menu-ul">
<li class="nav-menu-item" id="men">
<a class="nav-menu-link link-
submenu active" href="hombres.html">Hombre <i
class="zmdi zmdi-chevron-down"></i></a>
<div class="container-sub-menu">
<ul class="sub-menu-ul">
<li class="nav-menu-item ">
<a class="nav-menu-link" href="#">
<strong>Casual</strong>
<i class="zmdi zmdi-chevron-
down "></i>
</a>
<ul class="sub-menu-ul">
<li class="nav-menu-
item"><a class="nav-menu-link"
href="hom_chaquetas.html"
>Chaquetas</a></li>
<li class="nav-menu-
item"><a class="nav-menu-link"
href="hom_cami_polos.html
">Camisas Polos</a>
</li>
<li class="nav-menu-
item"><a class="nav-menu-link"
href="hom_pantalones.html
">Pantalones</a></li>
<li class="nav-menu-
item"><a class="nav-menu-link"
href="hom_polos.html">Cam
isetas</a></li>
</ul>
</li>
</ul>
<ul class="sub-menu-ul">
<li class="nav-menu-item"><a class="nav-
menu-link" href="#">
<strong>Formal</strong>
<i class="zmdi zmdi-chevron-
down "></i>
</a>
<ul class="sub-menu-ul">
<li class="nav-menu-
item"><a class="nav-menu-link"
href="hom_chaqueta_for.ht
ml">Chaquetas</a></li>
<li class="nav-menu-
item"><a class="nav-menu-link"
href="hom_camisas_for.htm
l">Camisas</a></li>
<li class="nav-menu-
item"><a class="nav-menu-link"
href="hom_trajes_for.html
">Trajes</a></li>
<li class="nav-menu-
item"><a class="nav-menu-link"
href="hom_pantalon_for.ht
ml">Pantalones</a></li>
</ul>
</li>
</ul>
<div class="ads is-hidden-touch">
<h1 class="ads-h1">Ofertas de Verano</h1>
<h2 class="ads-
h2">Desde el 50% de descuento</h2>
</div>
</div>
</li>
<li class="nav-menu-item" id="women">
<a href="#" class="nav-menu-link link-
submenu">Mujer <i class="zmdi zmdi-chevron-down"></i> </a>
<div class="container-sub-menu">

<ul class="sub-menu-ul">
<li class="nav-menu-item ">
<a class="nav-menu-link" href="#">
<strong>Casual</strong>
<i class="zmdi zmdi-chevron-
down "></i>
</a>
<ul class="sub-menu-ul">
<li class="nav-menu-
item"><a class="nav-menu-
link" href="muj_chaquetas.html">Chaquetas</a></li>
<li class="nav-menu-
item"><a class="nav-menu-link" href="muj_blusas.html">Camisas Polo</a>
</li>
<li class="nav-menu-
item"><a class="nav-menu-
link" href="muj_pantalones.html">Pantalones</a></li>
<li class="nav-menu-
item"><a class="nav-menu-link" href="muj_polos.html">Camisetas</a></li>
</ul>
</li>
</ul>
<ul class="sub-menu-ul">
<li class="nav-menu-item"><a class="nav-
menu-link" href="#">
<strong>Formal</strong>
<i class="zmdi zmdi-chevron-
down "></i>
</a>
<ul class="sub-menu-ul">
<li class="nav-menu-
item"><a class="nav-menu-
link" href="muj_chaqueta_for.html">Chaquetas</a></li>
<li class="nav-menu-
item"><a class="nav-menu-
link" href="muj_blusas_for.html">Camisetas</a></li>
<li class="nav-menu-
item"><a class="nav-menu-link" href="muj_trajes_for.html">Trajes</a></li>
<li class="nav-menu-
item"><a class="nav-menu-
link" href="muj_pantalones_for.html">Pantalones</a></li>
</ul>
</li>
</ul>
<div class="ads is-hidden-touch">
<h1 class="ads-h1">Ofertas de Verano</h1>
<h2 class="ads-
h2">Desde el 50% de descuento</h2>
</div>
</div>
</li>
<li class="nav-menu-
item"><a href="brand.html" class="nav-menu-link">La Marca</a></li>
<li class="nav-menu-
item"><a href="lookbook.html" class="nav-menu-link">Look Book</a></li>
<li class="nav-menu-
item"><a href="login.html" class="nav-menu-link">Registro</a></li>
<li class="nav-menu-
item"><a href="login.html" class="nav-menu-link">Iniciar Sesión</a></li>
</ul>
</nav>
</nav>
</header>
<!-- Banner -->
<div class="banner banner-cover">
<div class="banner-container ">
<h1 class="title-cover">BRAND</h1>
</div>
</div>
<div class="container container-full">
<div class="columns is-centered is-multiline">
<div class="column is-full">
<div class="separator"></div>
</div>
<div class="column is-half-tablet is-one-third-
desktop column-half">
<div class="card card-second">
<img class="card-second-image" src="img/lookbook-
men.png" alt="">
<div class="card-second-body --text-right">
<h1 class="has-text-right is-size-4 has-text-
weight-semibold-bold">Catálogo para hombres</h1>
<p class="has-text-
right">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptatum labore quae reiciendis, corrupti d
ebitis dicta
</p>
<div>
<a href="hombres.html" class="btn btn-
default is-size-7">Ver ahora</a>
</div>
</p>

</div>
</div>
</div>
<div class="column is-half-tablet is-one-third-
desktop column-half">
<div class="card card-second">
<img class="card-second-image" src="img/lookbook-
women.png" alt="">
<div class="card-second-body --text-right">
<h1 class="has-text-right is-size-4 has-text-
weight-semibold-bold">Catálogo para mujeres</h1>
<p class="has-text-
right">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptatum labore quae reiciendis, corrupti d
ebitis dicta
</p>
<div>
<a href="#" class="btn btn-default is-size-
7">Ver ahora</a>
</div>
</div>
</div>
</div>
<div class="column is-half-tablet is-one-third-desktop">
<div class="card card-second">
<img class="card-second-image" src="img/lookbook-
you.png" alt="">
<div class="card-second-body --text-right">
<h1 class="has-text-right is-size-4 has-text-
weight-semibold-bold">Catálogo en general :-)</h1>
<p class="has-text-
right">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptatum labore quae reiciendis, corrupti d
ebitis dicta
</p>
<div>
<a href="#" class="btn btn-default is-size-
7">Ver ahora</a>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="columns is-multiline">
<div class="column">
<ul class="footer-ul">
<li class="footer-item">
<h3 class="has-text-weight-
bold">Información</h3>
</li>
<li class="footer-item"><a class="footer-
link" href="#">La marca</a></li>
<li class="footer-item"><a class="footer-
link" href="#">Local stores</a></li>
<li class="footer-item"><a class="footer-
link" href="#">Servicios </a></li>
<li class="footer-item"><a class="footer-
link" href="#">Privacidad y cookies</a></li>
<li class="footer-item"><a class="footer-
link" href="#">Mapa del sitio</a></li>
</ul>
</div>

<div class="column">
<ul class="footer-ul">
<li class="footer-item">
<h3 class="has-text-weight-
bold">Porqué comprar</h3>
</li>
<li class="footer-item"><a class="footer-
link" href="#">Envios y retornos</a></li>
<li class="footer-item"><a class="footer-
link" href="#">Envios seguros</a></li>
<li class="footer-item"><a class="footer-
link" href="#">Testimonios </a></li>
<li class="footer-item"><a class="footer-
link" href="#">Award waining</a></li>
<li class="footer-item"><a class="footer-
link" href="#">Etival trading</a></li>
</ul>
</div>
<div class="column">
<ul class="footer-ul">
<li class="footer-item">
<h3 class="has-text-weight-
bold">Tu cuenta</h3>
</li>
<li class="footer-item"><a class="footer-
link" href="#">Iniciar sesión</a></li>
<li class="footer-item"><a class="footer-
link" href="#">Registro</a></li>
<li class="footer-item"><a class="footer-
link" href="#">Ver carrito </a></li>
<li class="footer-item"><a class="footer-
link" href="#">Ver catálogo</a></li>
<li class="footer-item"><a class="footer-
link" href="#">Track an order</a></li>
</ul>
</div>
<div class="column">
<ul class="footer-ul">
<li class="footer-item">
<h3 class="has-text-weight-
bold">Catalogo</h3>
</li>
<li class="footer-item"><a class="footer-
link" href="#">Catálogo para hombres</a></li>
<li class="footer-item"><a class="footer-
link" href="#">Catálogo para mujeres</a></li>
<li class="footer-item"><a class="footer-
link" href="#">Ver tu Catalogo </a></li>
<li class="footer-item"><a class="footer-
link" href="#">Privacidad y cookies</a></li>
<li class="footer-item"><a class="footer-
link" href="#">Borrar tu catalogo</a></li>
</ul>
</div>
<div class="column">

<ul class="footer-ul">
<li class="footer-item">
<h3 class="has-text-weight-
bold">Datos de contacto</h3>
</li>
<li class="footer-item"><a class="footer-
link" href="#">Head</a></li>
<li class="footer-item"><a class="footer-
link" href="#">Catálogo para mujeres</a></li>
<li class="footer-item"><a class="footer-
link" href="#">Ver tu Catalogo </a></li>
<li class="footer-item"><a class="footer-
link" href="#">Privacidad y cookies</a></li>
<li class="footer-item"><a class="footer-
link" href="#">Borrar tu catalogo</a></li>
</ul>
</div>
<div class="column is-full">
<div class="footer-socials">
<a class="footer-solcials-
link" href="#"><i class="zmdi zmdi-facebook"></i></a>
<a class="footer-solcials-
link" href="#"><i class="zmdi zmdi-twitter"></i></a>
<a class="footer-solcials-
link" href="#"><i class="zmdi zmdi-instagram"></i></a>
<a class="footer-solcials-
link" href="#"><i class="zmdi zmdi-pinterest"></i></a>
</div>
</div>
</div>
</div>
<div class="footer-bar-top">
<div class="container">
<a class="footer-bar-top-
links" href="#">2019 Perfect Brand</a>
</div>
</div>
</footer>
<script src="js/main.js"></script>

</body>

</html>

You might also like