Hotel-Villavicencio-Project/index.html at main · Camlo01/Hotel-Villavicencio-Project · 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description"
        content="Sitio web sobre el Hotel Villavicencio  donde encontrará fotos, información sobre los servicios y podrá ponerse en contacto por cualquier motivo">
    <meta name="keywords" content="Hotel, Villavicencio, Vacaciones, Hospedaje, Piscina, Llano, Meta,">
    <meta name="author" content="Camilo Beltrán">
    <title>Hotel Villavicencio</title>
    <link rel="stylesheet" href="Styles/Styles.css">
    <link rel="stylesheet" href="Styles/Tablet.css" media="(min-width: 500px)">
    <link rel="stylesheet" href="Styles/Pc.css" media="(min-width: 885px)">
</head>

<body>
    <!-- HEADER -->
    <header>
        <!-- barra superior azul -->
        <div class="header-nav">
            <p class="Hotelcom">Hotel.com</p>
            <input type="checkbox" id="check-navbar">
            <label for="check-navbar" class="button-responsive-menu">
                <img src="Assets/Icons/bars-solid-normal.svg" alt="icono-menú">
            </label>
            <nav class="header-navbar" id="menu">
                <ul>
                    <li class="main-nav-item"> <a href="#menu-services">Servicios</a></li>
                    <li class="main-nav-item"> <a href="#menu-fotos">Fotos</a></li>
                    <li class="main-nav-item"> <a href="#menu-events">Eventos</a></li>
                    <li class="main-nav-item"> <a href="#menu-contact">Contacto</a></li>
                </ul>
            </nav>
        </div>
        <!-- header con foto y título -->
        <div class="header-title">
            <div class="header-title--capa"></div>

            <h1>Hotel Villavicencio</h1>
            <p>Completa renovación Completamente comodidad</p>
        </div>
        <a class="header--button" href="#menu-contact">
            <p>Contactar</p>
        </a>
    </header>
    <!-- CONTENIDO DEL SITIO WEB -->
    <main>
        <section id="menu-services" class="main-section-services">
            <hr class="section-separator">
            <h2>Servicios</h2>
            <!-- Contenedor con scroll de tarjetas -->
            <section class="services-cards-container">
                <article class="services-card">
                    <span class="logo-services bed"></span>
                    <p class="services--card-title">Hospedaje</p>
                    <p class="services--card-body">Con una comodidad excepcional que te permitirá disfrutar y descansar
                        durante la noche en nuestras
                        habitaciones con camas de pino, televisión, baño de lujo, y aire acondicionado... para disfrutar
                        al siguiente dia de las instalaciones del hotel y los atractivos de la ciudad </p>
                </article>
                <article class="services-card">
                    <span class="logo-services menu"></span>
                    <p class="services--card-title">Diversión</p>
                    <p class="services--card-body">Dentro de nuestro menú existe una gran variedad de platos que te
                        darán la oportunidad de gustar la comuda del llano, variedades del río y del mar, desayunos
                        nutritivos y cena de tu preferencia... con servicio a todos los lugares del hotel</p>
                </article>
                <article class="services-card">
                    <span class="logo-services park"></span>
                    <p class="services--card-title">Diversión</p>
                    <p class="services--card-body">Cada baño cuenta con jaccuzi, nuestras instalaciones cuentan con dos
                        piscinas, con zona para niños para que todos puedan disfrutar, salón de eventos, zonas húmedas,
                        canchas para realizar deporte y gimnasio privado del hotel</p>
                </article>
                <article class="services-card">
                    <span class="logo-services key"></span>
                    <p class="services--card-title">Seguridad</p>
                    <p class="services--card-body">Vigilancia continua en las zonas del hotel con cámras de seguridad,
                        salvavidas en las piscinas, personal de limpieza a cuarto de confianza, atención de primeros
                        auxilios en caso de cualquier emergencia </p>
                </article>
            </section>
            <hr class="section-separator section-services-separator-down">
        </section>
        <!-- Fin section services -->
        <section id="menu-fotos" class="main-section-photos-dinamic">
            <!-- contenidos a agregar -->
        </section>
        <!-- Fin section photos-->
        <hr class="section-separator section-services-separator-down">
        <section id="menu-events" class="main-section-events">

            <article class="event-container first-container">
                <div class="picture boda"></div>
                <div class="event-body left-body">
                    <h2>Eventos</h2>
                    <hr class="first-body-hr">
                    <p>En nuestro salón de eventos tendrás la oportunidad para compartir con tus seres queridos,
                        ceremonias
                        especiales como las sueñas</p>
                </div>
            </article>
            <article class="event-container">
                <div class="picture seminarios"></div>
                <div class="event-body right-body">
                    <h2>Seminarios</h2>
                    <hr class="second-body-hr">
                    <p>Cumple tus objetivos de llegar a tu audiencia deseada y transmitirle tus conociminetos de la
                        mejor
                        manera posible</p>
                </div>
            </article>
            <article class="event-container">
                <div class="picture gala"></div>
                <div class="event-body left-body">
                    <h2>Reuniones de gala</h2>
                    <hr class="third-body-hr">
                    <p>Juntamos todo a nuestra alcanse para ponerlo a tu disposición con el objetivo de hacer tus
                        eventos
                        memorables</p>
                </div>
            </article>
        </section>

        <section class="main-section-logo">
            <div class="section-logo-img"><img src="./Assets/images/phone/logo-icono.png" alt="logo hotel"></div>
        </section>

        <section id="menu-contact" class="main-section-contact">

            <div class="contacto-formulario">
                <h2>Contactanos</h2>
                <p>Contáctanos para agendar tus eventos o resolver tus dudas</p>
                <form action="">
                    <input type="text" placeholder="Nombre">
                    <input type="text" placeholder="Número">
                    <input type="text" placeholder="Asunto">
                    <textarea name="mensaje" placeholder="Mensaje..." id="" cols="30" rows="10"></textarea>
                    <button>Enviar</button>
                </form>
            </div>

            <div class="contacto-visitanos">
                <h2>Visitanos</h2>
                <p>Con la ayuda del mapa nos podrás encontrar facilmente</p>
                <iframe src="" frameborder="0"></iframe>
                <div class="visitanos--texto">
                    <p>Dirección: Hotel Villavicencio - Meta</p>
                    <p>Teléfono: 322 682 3615</p>
                    <p>Correo: contacto@hotel.com</p>
                    <p>Website: www.website.com</p>
                </div>
            </div>
        </section>

    </main>
    <footer>

    </footer>
</body>

</html>