-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
163 lines (154 loc) · 6.75 KB
/
index.html
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
<!DOCTYPE html>
<html lang="es">
<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">
<!-- CSS Stylesheet -->
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="footer-style.css">
<!-- Google Fonts -->
<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=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500&display=swap"
rel="stylesheet">
<!-- Font Awesome icons -->
<script src="https://kit.fontawesome.com/11bb635b00.js" crossorigin="anonymous"></script>
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="57x57" href="images/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="images/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="images/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="images/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
<link rel="manifest" href="images/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="images/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<title>Grupo Montecasino</title>
</head>
<body>
<header>
<nav class="navbar">
<div class="content">
<div class="logo"><a href="#"><img src="images/grupo-montecasino-light-black.png" alt="Grupo Montecasino"
class="logo-img" id="logo-image"></a></div>
<ul class="menu-list">
<li>
<div class="icon cancel-btn close-btn">
<i class="fas fa-times"></i>
</div>
</li>
<li class="dropdown">
<a href="#" class="selected">Inicio</a>
<ul>
<li class="space"></li>
<li class="element"><a href="#">Nuestra Historia</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">Restaurante</a>
<ul>
<li class="space"></li>
<li class="element"><a href="menu.html">Menú</a></li>
<li class="element"><a href="#">Reservaciones</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">Eventos</a>
<ul>
<li class="space"></li>
<li class="element"><a href="#">Catering & Degustaciones</a></li>
<li class="element"><a href="#">Reservaciones</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">Hostal</a>
<ul>
<li class="space"></li>
<li class="element"><a href="#">Muy pronto...</a></li>
</ul>
</li>
<li><a href="#">Contacto</a></li>
<li><a href="#" class="action-button">Encuéntranos</a></li>
</ul>
<div class="div icon menu-btn">
<i class="fas fa-bars hamburger"></i>
</div>
</div>
</nav>
</header>
<main>
<section class="intro">
<div class="intro-div">
<div class="intro-banner">
<h1 class="relax">Un lugar para relajarte</h1>
<div class="intro-btn"><a href="#presentation">Explorar</a></div>
</div>
</div>
</section>
<section class="presentation" id="presentation">
<div class="grid-area">
<div class="color-block" id="restaurant-color-block">
<div class="invitation-container">
<h2 class="invitation">Acompáñanos a inaugurar esta nueva etapa</h2>
</div>
<div class="paragraph-container">
<hr class="small-separator" id="white-separator">
<p class="share">Comparte, respira y relájate en <strong class="montecasino-small">montecasino</strong>.</p>
</div>
<a href="#"><img src="images/Restaurante_Logo_BlancoSinFondo.png" class="logo-restaurante"
alt="logo restaurante"></a>
</div>
<div class="picture-block"></div>
</div>
<div class="grid-area">
<div class="picture-block" id="respira">
</div>
<div class="color-block" id="jardines-color-block">
<div class="text-container">
<h2 id="green-breathe">Un lugar para respirar</h2>
<hr class="small-separator" id="cream-separator">
<img src="images/montecasino-off-white.png" alt="montecasino" class="montecasino-title">
</div>
<div class="small-text-container">
<img src="images/iconografia/cabana-off-white.png" alt="ícono cabaña" class="cabin">
<div class="another-container">
<div class="vertical-separator"></div>
<div class="mini-div">
<h4 class="tiny-title">Respirar</h4>
<p class="cabin-text">La respiración sirve como una fuente primaria de energía que le brinda vitalidad a
todos los seres vivos.</p>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer-bar">
<div class="footer-logo"><img class="footer-image" src="images/grupo-montecasino-cream.png" alt="Logo Montecasino">
</div>
<div class="footer-text">
<a href="tel:+502-4614-9855" class="phone-number"><i class="fas fa-phone"></i> +(502) 4614-9855</a>
<a href="#"><i class="fas fa-map-marker"></i> Km. 34 Carretera de Antigua a Ciudad Guatemala, Santa Lucía Milpas
Altas</a>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-square"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fab fa-instagram-square"></i></a>
</div>
</div>
</footer>
<!--JavaScript file-->
<script src="main.js"></script>
</body>
</html>