marcosWeb/index.html at main · alanfx1/marcosWeb · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reservas - IE Santa Rosa Sullana</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <!-- NAV -->
    <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
        <div class="container">
            <a class="navbar-brand fw-bold" href="#">IE Santa Rosa Sullana</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navmenu">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a href="#reservas" class="nav-link">Reservas</a></li>
                    <li class="nav-item"><a href="#galeria" class="nav-link">Galería</a></li>
                    <li class="nav-item"><a href="#contacto" class="nav-link">Contacto</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- HERO -->
    <section class="hero">
        <div class="container">
            <h1><b>RESERVA PISCINAS Y CANCHAS</b></h1>
            <p class="lead">Disfruta nuestras instalaciones de manera fácil y rápida.</p>
        </div>
    </section>

    <!-- BUSCADOR -->
    <section id="reservas" class="container search-box">
        <h4 class="mb-3">Buscar disponibilidad</h4>
        <form class="row g-3">
            <div class="col-md-4">
                <label for="fecha" class="form-label">Día</label>
                <input type="date" class="form-control" id="fecha" required>
            </div>
            <div class="col-md-4">
                <label for="hora" class="form-label">Hora</label>
                <input type="time" class="form-control" id="hora" required>
            </div>
            <div class="col-md-4 d-flex align-items-end">
                <button type="submit" class="btn btn-primary w-100">Buscar</button>
            </div>
        </form>
    </section>

    <!-- GALERÍA -->
    <section id="galeria" class="container my-5">
        <h3 class="text-center mb-4">Galería de Instalaciones</h3>
        <div class="row g-4 gallery">
            <div class="col-md-4">
                <img src="https://novofibras.pe/wp-content/uploads/2022/06/Deberia-adquirir-una-piscina-de-fibra-de-vidrio-con-spa-1024x623.jpg"
                    class="img-fluid" alt="Piscina">
            </div>
            <div class="col-md-4">
                <img src="https://www.piscinadecor.com/wp-content/uploads/2025/03/piscina-playa.jpg" class="img-fluid"
                    alt="Cancha">
            </div>
            <div class="col-md-4">
                <img src="https://scontent.fpiu2-1.fna.fbcdn.net/v/t39.30808-6/485025114_976244707982308_6356420206166887130_n.jpg?_nc_cat=100&ccb=1-7&_nc_sid=127cfc&_nc_eui2=AeF8Vs_gwmKTLg6ybATW3I2jGnScWupPY3oadJxa6k9jevuxdtCvOST4gAOziuOP9d3HHsuoU97QgylSvhHG4DIX&_nc_ohc=XHwEilJipiUQ7kNvwEoMVMy&_nc_oc=Adm2UodjWZEY0VeQFwE26mesB8DkAeQ67mqq3Gas7Z7as1DQ50E27knx8z2gUwU5yTc&_nc_zt=23&_nc_ht=scontent.fpiu2-1.fna&_nc_gid=3PmlHGaUrq8d9ksMgTf7RA&oh=00_AfWVc18MQDQVCRG5eaoShbLiaJ8Hzp6p-HHQIrTxnvAx8g&oe=68BC6E7A"
                    class="img-fluid" alt="Piscina Nocturna">
            </div>
        </div>
    </section>

    <!-- FOOTER -->
    <footer id="contacto" class="bg-dark text-light text-center p-3">
        <p class="mb-0">© 2025 IE Santa Rosa Sullana | Reservas de Piscinas y Canchas</p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>