{HEADER}

<link href="assets2/css/home2.min.css" rel="stylesheet" />

<main>

    <div class="section-welcome position-relative">
        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active" style="background-image: url(assets2/images/home/welcome/slide-1.jpg);">
                    <div class="content-card">
                        <div class="row">
                            <div class="col-12 col-lg-8 col-xl-6 cuadro-welcome">
                                <img src="assets2/images/home/welcome/mancha.png" alt="mancha">
                                <h1>medialuna.t</h1>
                                <p class="mb-0">Bienvenidos a la nueva web de nuestro restaurante donde podrás encontrar todos los productos y realizar los pedidos de tus menús.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item" style="background-image: url(assets2/images/home/welcome/slide-2.jpg);">
                    <div class="content-card">
                        <div class="row">
                            <div class="col-12 col-lg-8 col-xl-6 cuadro-welcome">
                                <img src="assets2/images/home/welcome/mancha.png" alt="mancha">
                                <h1>Menús</h1>
                                <p class="mb-0">Una dieta variada y equilibrada es posible. Descubre nuestro menú diario para comer fuera de casa.</p>
                                <div class="text-end">
                                    <a class="btn btn-custom btn-rounded btn-blue-white btn-center-out mt-3" href="/menu">mostrar</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item" style="background-image: url(assets2/images/home/welcome/slide-3.jpg);">
                    <div class="content-card">
                        <div class="row">
                            <div class="col-12 col-lg-8 col-xl-6 cuadro-welcome">
                                <img src="assets2/images/home/welcome/mancha.png" alt="mancha">
                                <h1>Catering</h1>
                                <p class="mb-0">Deja que hagamos que tus momentos sean aún más especiales. Nuestro servicio de catering se encargará de todo.</p>
                                <div class="text-end">
                                    <a class="btn btn-custom btn-rounded btn-blue-white btn-center-out mt-3" href="/catering">mostrar</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item" style="background-image: url(assets2/images/home/welcome/slide-4.jpg);">
                    <div class="content-card">
                        <div class="row">
                            <div class="col-12 col-lg-8 col-xl-6 cuadro-welcome">
                                <img src="assets2/images/home/welcome/mancha.png" alt="mancha">
                                <h1>Tienda</h1>
                                <p class="mb-0">Encuentra en nuestra tienda todos los platos y extras necesarios para hacer de tu comida un placer.</p>
                                <div class="text-end">
                                    <a class="btn btn-custom btn-rounded btn-blue-white btn-center-out mt-3" href="/tienda">mostrar</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
        <div class="curva">
            <img src="assets2/images/home/welcome/curva-welcome.svg" alt="curva">
        </div>
        <!--<div class="mancha d-none d-md-block">
            <img src="assets2/images/home/welcome/manchaonda.png" alt="mancha">
        </div> -->
        <a href="#section2" class="box">
            <span></span>
            <span></span>
        </a>
    </div>
    <div id="section2" class="section2 py-5">
        <div class="container">
            <div class="row">
                <div class="col-12 col-lg-6 mb-5 mb-lg-0">
                    <div class="content-img">
                        <img class="img-fluid wow fadeInLeft delay-800" src="assets2/images/home/sec2-5.png" alt="foto5">
                        <img class="img-fluid wow fadeInLeft delay-600" src="assets2/images/home/sec2-4.png" alt="foto4">
                        <img class="img-fluid wow fadeInLeft delay-400" src="assets2/images/home/sec2-1.png" alt="foto1">
                        <img class="img-fluid wow fadeInLeft delay-200" src="assets2/images/home/sec2-2.png" alt="foto2">
                        <img class="img-base img-fluid wow fadeInLeft" src="assets2/images/home/sec2-3.png" alt="foto3">
                    </div>
                </div>
                <div class="col-12 col-lg-5 offset-lg-1 col-right">
                    <div>
                        <p class="title wow fadeInRight">PASIÓN POR LA COMIDA</p>
                        <h2 class="subtitle wow fadeInRight">medialuna</h2>
                        <p class="text wow fadeInRight">En La cocina de Medialuna creemos que es posible hacerte disfrutar de una experiencia saludable y diferente en el día a día.</p>
                        <p class="text wow fadeInRight">Por eso ofrecemos una alimentación rica y sana orientada a las personas que tienen que comer fuera de casa.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section class="banner-menu py-5">
        <div class="container">
            <div class="text-center">
                <h2 class="title wow fadeInUp">¡como un restaurante a domicilio!</h2>
                <p class="text wow fadeInUp">Encuentra platos del día, postres o bebidas entre nuestra gran variedad de productos. Lo difícil será elegir...</p>
            </div>
        </div>
    </section>
    <section class="section-menu py-5">

        <div class="container">

            <style>
                .container-grid {
                    display: grid;
                    grid-template-columns: 5% auto 5%;
                }
                
                .tab-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
                }
                
                .tab-grid button {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                
                .btnlinks {
                    background-color: inherit;
                    border: none;
                    outline: 0;
                    cursor: pointer;
                    padding: .5rem 1rem;
                    transition: all .3s;
                    color: #828282;
                    border-top-left-radius: 5px;
                    border-top-right-radius: 5px;
                }
                
                .btnlinks:hover {
                    color: #90ccc6;
                }
            </style>

            <div class="container-grid">
                <button class="btnlinks" onclick="">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" style="width: 24px;" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                  </svg>
                </button>

                <div id="divOpciones" class="tab tab-grid">
                    <button class="tablinks active" onclick="openCity(event, 'Categoría1')">Plato</button>
                    <button class="tablinks" onclick="openCity(event, 'Categoría2')">Cremas/Sopas</button>
                    <button class="tablinks" onclick="openCity(event, 'Categoría3')">Ensalada</button>
                    <button class="tablinks" onclick="openCity(event, 'Categoría4')">Postre</button>
                    <button class="tablinks" onclick="openCity(event, 'Categoría5')">Bebida</button>
                </div>
                <button id="btnSiguiente" class="btnlinks" onclick="tmpl();">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" style="width: 24px;" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                      </svg>
                </button>
            </div>

            <button onclick="showContent()">Show hidden content</button>
            <template>
                <div class="myClass">I like: </div>
              </template>

            <script>
                var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];

                function showContent() {

                    let opciones = document.querySelector('divOpciones');

                    var temp, item, a, i;
                    temp = document.getElementsByTagName("template")[0];
                    item = temp.content.querySelector("div");
                    for (i = 0; i < myArr.length; i++) {
                        a = document.importNode(item, true);
                        a.textContent += myArr[i];
                        opciones.appendChild(a);
                        //document.body.appendChild(a);
                    }
                }

                function tmpl() {

                    let blogPostMaker = ({
                        title,
                        model
                    }) => `<button class="tablinks" onclick="openCity(event, '${model}')">${title}</button>`

                    let opciones = document.querySelector('divOpciones');

                    cardContent = [{
                        title: 'uno',
                        model: 'm_uno',
                    }, {
                        title: 'dos',
                        model: 'm_dos',
                    }]

                    cardContent.forEach(el => {
                        opciones.innerHTML += blogPostMaker(el);
                    });

                    return
                }

                function btnAnterior() {
                    let opciones = document.querySelector('divOpciones');
                    alert('holamundo');
                }

                function btnSiguiente() {
                    let opciones = document.querySelector('divOpciones');
                    let elemento = document.createElement("button");
                    opciones.appendChild()
                    alert('holamundo');
                }
            </script>


            <hr class="hr-tab">

            <div id="Categoría1" class="tabcontent tab-ppal">
                <div class="content-cards-menu row mt-5 wow fadeIn slow">
                    <!--/categoria_1-->
                    <div class="col-12 col-md-6 col-lg-3 mb-4">
                        <div class="card text-center">
                            <div class="row">
                                <div class="col-6 col-md-12" data-bs-toggle="modal" data-bs-target="#modalPlato" onclick="run('web-plato-{ID}','ModalPlato');">
                                    <img src="/fotos/plato_{ID}.jpg" class="card-img-top" alt="plato">
                                </div>
                                <div class="col-6 col-md-12">
                                    <div class="card-body">
                                        <h5 class="card-title">{NOMBRE}</h5>
                                        <p class="card-text">{PRECIO}€</p>
                                        <a href="javascript:void(0)" onclick="run('menu-add2-{ID}','Seleccionados')" class="btn btn-custom btn-rounded btn-blue-white btn-center-out">Añadir</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--categoria_1/-->
                </div>
                <div class="text-center mt-5 wow fadeInDown">
                    <ul class="pagination">
                        <div>
                            <li><a class="prev" href="#!"><i class="fa fa-angle-left"></i> Anterior</a></li>
                        </div>
                        <div>
                            <li><a class="active" href="#!">1</a></li>
                            <li><a href="#!">2</a></li>
                            <li><a href="#!">3</a></li>
                        </div>
                        <div>
                            <li><a class="next" href="#!">Siguiente <i class="fa fa-angle-right"></i></a></li>
                        </div>
                    </ul>
                </div>
            </div>

            <div id="Categoría2" class="tabcontent">
                <div class="content-cards-menu row mt-5 wow fadeIn slow">
                    <!--/categoria_2-->
                    <div class="col-12 col-md-6 col-lg-3 mb-4">
                        <div class="card text-center">
                            <div class="row">
                                <div class="col-6 col-md-12" data-bs-toggle="modal" data-bs-target="#modalPlato" onclick="run('web-plato-{ID}','ModalPlato');">
                                    <img src="/fotos/plato_{ID}.jpg" class="card-img-top" alt="plato">
                                </div>
                                <div class="col-6 col-md-12">
                                    <div class="card-body">
                                        <h5 class="card-title">{NOMBRE}</h5>
                                        <p class="card-text">{PRECIO}€</p>
                                        <a href="javascript:void(0)" onclick="run('menu-add2-{ID}','Seleccionados')" class="btn btn-custom btn-rounded btn-blue-white btn-center-out">Añadir</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--categoria_2/-->
                </div>
                <div class="text-center mt-5">
                    <ul class="pagination">
                        <div>
                            <li><a class="prev" href="#!"><i class="fa fa-angle-left"></i> Anterior</a></li>
                        </div>
                        <div>
                            <li><a class="active" href="#!">1</a></li>
                            <li><a href="#!">2</a></li>
                            <li><a href="#!">3</a></li>
                        </div>
                        <div>
                            <li><a class="next" href="#!">Siguiente <i class="fa fa-angle-right"></i></a></li>
                        </div>
                    </ul>
                </div>
            </div>

            <div id="Categoría3" class="tabcontent">
                <div class="content-cards-menu row mt-5 wow fadeIn slow">
                    <!--/categoria_3-->
                    <div class="col-12 col-md-6 col-lg-3 mb-4">
                        <div class="card text-center">
                            <div class="row">
                                <div class="col-6 col-md-12" data-bs-toggle="modal" data-bs-target="#modalPlato" onclick="run('web-plato-{ID}','ModalPlato');">
                                    <img src="/fotos/plato_{ID}.jpg" class="card-img-top" alt="plato">
                                </div>
                                <div class="col-6 col-md-12">
                                    <div class="card-body">
                                        <h5 class="card-title">{NOMBRE}</h5>
                                        <p class="card-text">{PRECIO}€</p>
                                        <a href="javascript:void(0)" onclick="run('menu-add2-{ID}','Seleccionados')" class="btn btn-custom btn-rounded btn-blue-white btn-center-out">Añadir</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--categoria_3/-->
                </div>
                <div class="text-center mt-5">
                    <ul class="pagination">
                        <div>
                            <li><a class="prev" href="#!"><i class="fa fa-angle-left"></i> Anterior</a></li>
                        </div>
                        <div>
                            <li><a class="active" href="#!">1</a></li>
                            <li><a href="#!">2</a></li>
                            <li><a href="#!">3</a></li>
                        </div>
                        <div>
                            <li><a class="next" href="#!">Siguiente <i class="fa fa-angle-right"></i></a></li>
                        </div>
                    </ul>
                </div>
            </div>

            <div id="Categoría4" class="tabcontent">
                <div class="content-cards-menu row mt-5 wow fadeIn slow">
                    <!--/categoria_4-->
                    <div class="col-12 col-md-6 col-lg-3 mb-4">
                        <div class="card text-center">
                            <div class="row">
                                <div class="col-6 col-md-12" data-bs-toggle="modal" data-bs-target="#modalPlato" onclick="run('web-plato-{ID}','ModalPlato');">
                                    <img src="/fotos/plato_{ID}.jpg" class="card-img-top" alt="plato">
                                </div>
                                <div class="col-6 col-md-12">
                                    <div class="card-body">
                                        <h5 class="card-title">{NOMBRE}</h5>
                                        <p class="card-text">{PRECIO}€</p>
                                        <a href="javascript:void(0)" onclick="run('menu-add2-{ID}','Seleccionados')" class="btn btn-custom btn-rounded btn-blue-white btn-center-out">Añadir</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--categoria_4/-->
                </div>
                <div class="text-center mt-5">
                    <ul class="pagination">
                        <div>
                            <li><a class="prev" href="#!"><i class="fa fa-angle-left"></i> Anterior</a></li>
                        </div>
                        <div>
                            <li><a class="active" href="#!">1</a></li>
                            <li><a href="#!">2</a></li>
                            <li><a href="#!">3</a></li>
                        </div>
                        <div>
                            <li><a class="next" href="#!">Siguiente <i class="fa fa-angle-right"></i></a></li>
                        </div>
                    </ul>
                </div>
            </div>

            <div id="Categoría5" class="tabcontent">
                <div class="content-cards-menu row mt-5 wow fadeIn slow">
                    <!--/categoria_5-->
                    <div class="col-12 col-md-6 col-lg-3 mb-4">
                        <div class="card text-center">
                            <div class="row">
                                <div class="col-6 col-md-12" data-bs-toggle="modal" data-bs-target="#modalPlato" onclick="run('web-plato-{ID}','ModalPlato');">
                                    <img src="/fotos/plato_{ID}.jpg" class="card-img-top" alt="plato">
                                </div>
                                <div class="col-6 col-md-12">
                                    <div class="card-body">
                                        <h5 class="card-title">{NOMBRE}</h5>
                                        <p class="card-text">{PRECIO}€</p>
                                        <a href="javascript:void(0)" onclick="run('menu-add2-{ID}','Seleccionados')" class="btn btn-custom btn-rounded btn-blue-white btn-center-out">Añadir</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--categoria_5/-->
                </div>
                <div class="text-center mt-5">
                    <ul class="pagination">
                        <div>
                            <li><a class="prev" href="#!"><i class="fa fa-angle-left"></i> Anterior</a></li>
                        </div>
                        <div>
                            <li><a class="active" href="#!">1</a></li>
                            <li><a href="#!">2</a></li>
                            <li><a href="#!">3</a></li>
                        </div>
                        <div>
                            <li><a class="next" href="#!">Siguiente <i class="fa fa-angle-right"></i></a></li>
                        </div>
                    </ul>
                </div>
            </div>

        </div>
    </section>
    <div class="section-delivery">
        <div class="text-center">
            <p class="title-delivery wow fadeInUp">¿en casa o en oficina?</p>
            <div class="content-text wow fadeInUp">
                <p class="text-delivery mb-0">llegamos a donde lo necesites</p>
            </div>
            <div class="d-flex justify-content-center w-75 mx-auto">
                <div class="me-5">
                    <a class="dish" href="https://www.just-eat.es/restaurants-la-cocina-de-medialuna-palmas-de-gran-canaria-las" target="_blank" rel="noopener noreferrer">
                        <img class="wow fadeInRight img-fluid" src="assets2/images/home/delivery1.png" alt="Delivery">
                    </a>
                    <p class="text-gray-light mt-2 wow fadeInRight">Just Eat te lo lleva</p>
                </div>
                <div class="ms-5">
                    <a class="dish" href="#!">
                        <img class="wow fadeInLeft img-fluid" src="assets2/images/home/delivery2.png" alt="Delivery">
                    </a>
                    <p class="text-gray-light mt-2 wow fadeInLeft">Te lo llevamos nosotros</p>
                </div>
            </div>
        </div>
    </div>
    <div class="section-hablamos pt-5">
        <div class="container">
            <div class="row content-map">
                <div class="col-md-7 col-lg-8 p-0">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3519.5093437663604!2d-15.456290149150247!3d28.10050571462516!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xc40944d343e5711%3A0xa330b85a403c9199!2sLa%20Cocina%20de%20MediaLuna!5e0!3m2!1ses!2ses!4v1626798000993!5m2!1ses!2ses"
                        frameborder="0" style="border: 0; width: 100%; height: 350px" allowfullscreen=""></iframe>
                </div>
                <div class="col-md-5 col-lg-4 p-0 content-text-map">
                    <div class="px-5 py-1 text-center">
                        <h3 class="title-map">¿hablamos?</h3>
                        <p class="text-map">
                            <a href="#!">
                            Teléfono local y pedidos
                            <br><span style="font-size: small;">(Horario de lunes a viernes de 8.00 a 16.00)</span>
                        </a>
                        </p>
                        <p class="text-map">
                            <a href="tel:828048232">828 04 82 32</a> - <a href="tel:615054511">615 054511</a>
                        </p>
                        <p class="text-map">
                            <a href="tel:645742697">Teléfono administración:<br>645 742 697</a>
                        </p>
                        <p class="text-map">
                            <a href="mailto:info@medialunacatering.es" class="enlace2">info@medialunacatering.es</a>
                            <br>
                            <a href="mailto:pedidoslacocinademedialuna@gmail.com" class="enlace2" style="font-size: 16px;">pedidoslacocinademedialuna@gmail.com</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="text-instagram text-center">
                <p class="text-ig">sigue nuestro día a día en Instagram</p>
            </div>
            <div class="galeria">
                <a href="https://www.instagram.com/p/CRpHEqlFEQH/" target="_blank" rel="noopener noreferrer" class="img-fluid wow fadeIn">
                    <img class="img-fluid wow fadeIn" style="width: 90%;" src="assets2/images/home/galeria-ig/1.jpeg" alt="foto1">
                </a>
                <a href="https://www.instagram.com/p/CShqWJBH76u/" target="_blank" rel="noopener noreferrer">
                    <img class="img-fluid wow fadeIn" style="width: 90%;" src="assets2/images/home/galeria-ig/2.jpeg" alt="foto2">
                </a>
                <a href="https://www.instagram.com/p/CScmXCGoPxC/" target="_blank" rel="noopener noreferrer">
                    <img class="img-fluid wow fadeIn" style="width: 90%;" src="assets2/images/home/galeria-ig/3.jpeg" alt="foto3">
                </a>
                <a href="https://www.instagram.com/p/CR9T-xwoy8H/" target="_blank" rel="noopener noreferrer">
                    <img class="img-fluid wow fadeIn" style="width: 90%;" src="assets2/images/home/galeria-ig/4.jpeg" alt="foto4">
                </a>
                <a href="https://www.instagram.com/p/CRHHTQRFgKn/" target="_blank" rel="noopener noreferrer">
                    <img class="img-fluid wow fadeIn" style="width: 90%;" src="assets2/images/home/galeria-ig/5.jpeg" alt="foto5">
                </a>
                <a href="https://www.instagram.com/p/CRZTByGFoyf/" target="_blank" rel="noopener noreferrer">
                    <img class="img-fluid wow fadeIn" style="width: 90%;" src="assets2/images/home/galeria-ig/6.jpeg" alt="foto6">
                </a>
            </div>
        </div>
    </div>

    {FOOTER} {SHOPPING} {SUSCRIBE}

</main>