Essenza Frontend

Pages 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Preview Layout</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="module" src="/assets/js/index.js" defer></script>
    <link rel="stylesheet" href="/assets/css/style.css" />
</head>

<body>
    <header class="site-header" id="site-header">
        <search-overlay v-cloak>
            <div class="search-box">
                <form action="#" class="search-box__form">
                    <input type="text" name="s" placeholder="Escribe lo que estás buscando" aria-label="Buscar">
                    <button type="submit">
                        <i data-icon="magnifying-glass"></i>
                    </button>
                </form>
                <p>Puedes buscar por número de referencia. Lorem ipsum dolor sit amet, consectetur.</p>
            </div>
        </search-overlay>
        <site-announcements>

            <div>
                <div class="site-announcements__item">
                    <p>10 años de garantía. <a href="#">Leer más</a></p>
                </div>
            </div>

            <div>
                <div class="site-announcements__item">
                    <p>100 noches de prueba <i data-icon="moon" data-icon-style="regular"></i></p>
                </div>
            </div>

        </site-announcements>

        <section class="site-header-wrapper">
            <div class="container">
                <figure class="site-header__branding">
                    <img src="../../assets/img/essenza-logo.svg" alt="Essenza Logo">
                </figure>
                <nav class="site-header__nav" :class="{'is-open': isMenuOpen}">
                    <ul class="header-menu">

                        <li class="header-menu-item ">
                            <a href="#">Colchones</a>

                            <section class="header-mega-menu">
                                <div class="header-mega-menu__content">
                                    <h3 class="title">Colchones</h3>

                                    <ul class="mega-menu-submenu">
                                        <li class="title is-5 is-sans">Tamaños</li>

                                        <li>
                                            <a href="#">Sencillo</a>
                                        </li>

                                        <li>
                                            <a href="#">Semidoble</a>
                                        </li>

                                        <li>
                                            <a href="#">Doble</a>
                                        </li>

                                        <li>
                                            <a href="#">Queen</a>
                                        </li>

                                        <li>
                                            <a href="#">King</a>
                                        </li>

                                    </ul>

                                    <ul class="mega-menu-submenu">
                                        <li class="title is-5 is-sans">Líneas</li>

                                        <li>
                                            <a href="#">Balanzze</a>
                                        </li>

                                        <li>
                                            <a href="#">Royal</a>
                                        </li>

                                        <li>
                                            <a href="#">Pocket</a>
                                        </li>

                                        <li>
                                            <a href="#">Eden</a>
                                        </li>

                                        <li>
                                            <a href="#">Majestic</a>
                                        </li>

                                    </ul>

                                </div>
                                <figure class="header-mega-menu__highlight">
                                    <img src="../../assets/img/categories/essenza-colchones.jpeg" alt="">
                                </figure>
                            </section>

                        </li>

                        <li class="header-menu-item ">
                            <a href="#">Camas</a>

                        </li>

                        <li class="header-menu-item header-menu-item--accent">
                            <a href="#">SALE</a>

                        </li>

                    </ul>
                </nav>
                <div class="site-header__actions">
                    <button class="site-header-action" id="header-action-search" @click="openSearch">
                        <i data-icon="magnifying-glass"></i>
                    </button>
                    <a href="#" class="site-header-action" id="header-action-cart">
                        <i data-icon="cart"></i>
                    </a>
                    <button class="site-header-action" id="header-action-menu" @click="toggleMenu">
                        <span class="nav-burger" :class="{'is-open': isMenuOpen}">
                            <span></span>
                            <span></span>
                            <span></span>
                        </span>
                    </button>
                </div>
            </div>
        </section>
    </header>

    <footer class="site-footer">
        <div class="container site-footer__container">
            <div class="columns is-multiline">
                <div class="column is-6">
                    <form action="" class="essenza-form columns is-mobile is-multiline">
                        <div class="column is-12">
                            <label for="essenza-nl-email">Recibe nuestras ofertas y tips para un buen descanso</label>
                        </div>
                        <div class="column is-7">
                            <input type="email" placeholder="Email" id="essenza-nl-email">
                        </div>
                        <div class="column is-5">
                            <button class="button button--alt is-fullwidth" type="submit">Subscribe</button>
                        </div>
                    </form>
                </div>
                <div class="column is-6">
                    <figure class="site-footer__branding">
                        <img src="../../assets/img/essenza-logo-tagline.svg" alt="Essenza Logo">
                    </figure>
                </div>
            </div>
        </div>
    </footer>
</body>

</html>
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Preview Layout</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {{ 'src/index.js' | vite | safe }}
    {{ 'src/style.css' | vite('css') | safe }}
</head>
<body>
    {% render '@header' %}
    {{ yield | safe }}
    {% render '@footer' %}
</body>
</html>
 
/* No context defined. */

No notes defined.