index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <title>Verano Feel - Alquileres en costa atlantica</title>

    <link rel="shortcut icon" href="./images/favicon.svg" type="image/x-icon" />

    <meta name="description" content="Alquileres de cabañas o ranchos en costa atlantica muy cerca de la playa" />
    <meta name="keywords" content="alquileres, costa, playa, cabaña, rancho" />
    <meta name="title" content="VeranoFeel">
    <meta name="robots" content="index, follow">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="Spanish">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <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=Quicksand:wght@300;400;500;600;700&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=Caveat:wght@600&display=swap" rel="stylesheet" />

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />

    <!-- libreria de animacion aos -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />

    <!-- css local -->
    <link rel="stylesheet" href="./css/styles_merged.css" />
</head>


<body>

    <!-- HEADER -->
    <header>
        <div class="encabezado">

            <!-- PARTE IZQUIERDA DE LA BARRA DE NAVEGACION -->
                <div class="navbar_title">

                    <!-- IMAGEN LOGO DE LA PARTE IZQUIERDA DE LA BARRA DE NAVEGACION -->
                    <a href="./index.html"><img class="navbar_icon" src="./images/logo.svg" alt="Ir a inicio" /></a>
                    
                    <!-- TITULO LOGO DE LA PARTE IZQUIERDA DE LA BARRA DE NAVEGACION -->
                    <a href="./index.html">Verano Feel</a>
                </div>
                <!-- MENU DE NAVEGACION BORRADO PARA CONVERTIR EL HOME EN UNA LANDING PAGE SIN NADA PARA EL PROYECTO -->
        </div>
    </header>

    <!-- CUERPO MAIN -->
    <main>

        <!-- BANNER HERO -->

        <div class="carousel slide carousel-fade" 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>
            </div>
            <div class="carousel-inner">
              <div class="carousel-item active align-middle">
                <img src="./images/banner0.jpg" alt="Foto de playa">
                <div class="carousel-caption">
                    <p>Animate a clavar la sombrilla</p>
                    <h1>DESCONECTÁ</h1>
                </div>
              </div>
              <div class="carousel-item align-middle">
                <img src="./images/banner1.jpg" alt="Foto de playa">
                <div class="carousel-caption">
                    <p>Animate a clavar la sombrilla</p>
                    <h1>DESCONECTÁ</h1>
                </div>
              </div>
              <div class="carousel-item align-middle">
                <img src="./images/banner2.jpeg" alt="Foto de playa">
                <div class="carousel-caption">
                    <p>Animate a clavar la sombrilla</p>
                    <h1>DESCONECTÁ</h1>
                </div>
              </div>
            </div>
        </div>

        <!-- FRASE SEPARADORA DESPUES DE BANNER HERO -->
        <section>
                <div class="separador_frase">
                    <hr class="separador_frase-linea" />
                    <h6 class="separador_frase-frase">Recuerdos sin fronteras</h6>
                    <hr class="separador_frase-linea" />
                </div>
        </section>

        <!-- CUBOS DE INFORMACION SOBRE EMPRESA (x4) -->
        <section class="separador_cubos">            
            <div class="separador_cubos__titulo">
                <p>Quienes somos...</p>
            </div>
            <div class="separador_cubos__texto">
                <p>Nacimos como una empresa familiar desde hace 4 años, y queremos seguir creciendo para poder brindar nuestras localidades con el mayor sentido de calidad y precio.</p>
            </div>
            <div class="separador_cubos__texto">
                <p>Nos especializamos en ofrecer alquileres de casas vacacionales, a solo metros de la costa, con un énfasis en hacer que nuestros clientes se lleven recuerdos inolvidables.</p>
            </div>     
            <div class="separador_cubos__titulo">
                <p>...y que ofrecemos</p>
            </div>
        </section>

        <!-- TARJETA CONTENEDORA DE ARTICULOS --->
        <section>   
            <div class="contenedor_tarjeta">
                <article data-aos="fade-up" class="tarjeta">
                    <h6 class="tarjeta__label">PH</h6>
                    <div class="tarjeta__contenido">
                        <a href="">
                            <!-- ESTO DEBERIA SER UN SLIDE DE IMAGENES -->
                            <figure class="tarjeta__contenido--imagen1">Imagen Rancho Kika</figure>
                        </a>
                        <h3 class="tarjeta__contenido--titulo">RANCHO KIKA</h3>
                        <p class="tarjeta__contenido--texto">Excelente Departamento con vista a la laguna de 3 ambientes en alquiler anual.
                        Totalmente Refaccionado a NUEVO! Mucha luz y amplitud.
                        Alacenas amplias y mucho lugar de guardado.
                        Gran living comedor con aire acondicionado recién instalado.
                        Dos dormitorios, principal en suite con vestidor, y el otro con placard y baño completo.
                        </p>
                        <!-- ESTE BOTON EJECUTA EL SCRIPT PARA RESERVAS -->
                        <a class="tarjeta__contenido--boton" href="">Reservar</a>
                    </div>
                </article>

                <!-- TARJETA CONTENEDORA DE ARTICULOS -->
                <article data-aos="fade-up" class="tarjeta">
                    <h6 class="tarjeta__label">Casa</h6>
                    <div class="tarjeta__contenido">
                        <a href="">      
                            <!-- ESTO DEBERIA SER UN SLIDE DE IMAGENES --> 
                            <figure class="tarjeta__contenido--imagen2">Imagen Cabaña Rosita</figure>
                        </a>
                        <h3 class="tarjeta__contenido--titulo">CABAÑA ROSITA</h3>
                        <p class="tarjeta__contenido--texto">Departamento muy luminoso con vista al lago central.
                        Cuenta con gran living/comedor con salida al balcón, cocina semi integrada con barra de madera.
                        Balcón/terraza con parrilla y una vista increíble al lago central.
                        </p>
                        <!-- ESTE BOTON EJECUTA EL SCRIPT PARA RESERVAS -->
                        <a class="tarjeta__contenido--boton" href="">Reservar</a>
                    </div>
                </article>
            </div>
        </section>

        <!-- SEPARADOR DISEÑO EN CIRCULOS CON PALABRAS -->
        <section class="container-fluid">
            <div class="row align-items-center justify-content-center">
                <div class="col text-center">                    
                    <img class="separador_circulos__img" src="./images/silla.gif" alt="Familia" />                    
                    <h4 class="separador_circulos__txt">Familia</h4>
                </div>
                <div class="col text-center">                    
                    <img class="separador_circulos__img" src="./images/sol.gif" alt="Verano" />                    
                    <h4 class="separador_circulos__txt">Verano</h4>
                </div>
                <div class="col text-center">
                    <img class="separador_circulos__img" src="./images/pila-de-fotos.gif" alt="Recuerdos" />
                    <h4 class="separador_circulos__txt">Recuerdos</h4>
                </div>
            </div>
        </section>
    </main>

    <!-- FOOTER -->
    <footer>
        <section class="pie">

        <!-- SECCION DE CONTACTO DEL FOOTER -->
        <div class="footer__links">
                <h5 class="footer__links--titulo">Contacto</h5>
                <a href="">
                    <img class="footericons" src="./images/wsapp-icon.svg" alt="Whatsapp" />
                    <p>+54 11 6 XXX XXXX</p>
                </a>
                <a href="">
                    <img class="footericons" src="./images/email-icon.svg" alt="Email" />
                    <p>veranofeel@veranofeel.com.ar</p>
                </a>
        </div>

        <!-- SECCION DE REDES (SEGUINOS) DEL FOOTER -->
        <div class="footer__redes">
                <h5 class="footer__redes--titulo">¡Seguinos!</h5>
                <a href="">
                    <img class="footericons" src="./images/insta-icon.svg" alt="Instagram" />
                </a>
                <a href="">
                    <img class="footericons" src="./images/facebook-icon.svg" alt="Facebook" />
                </a>
                <a href="">
                    <img class="footericons" src="./images/twitter-icon.svg" alt="Twitter" />
                </a>
                <a href="">
                    <img class="footericons" src="./images/youtube-icon.svg" alt="Youtube" />
                </a>
        </div>
        </section>
    </footer>
    <!-- Script de bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>

    <!-- script de la libreria de animacion aos -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        AOS.init();
    </script>

    <!-- Javascript de reservas -->
    <script src="./js/reservas.js"></script>
</body>
</html>