-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (136 loc) · 6.62 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
<!DOCTYPE html>
<html lang="es-AR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ROMA</title>
<!--font awesome-->
<script src="https://kit.fontawesome.com/bf97adab35.js" crossorigin="anonymous"></script>
<!--estilos-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header id="main-header">
<h1 id="logo">Roma</h1>
<nav class="main-navigation fondo-oscuro">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="historia.html">Historia</a></li>
<li><a href="tours.html">Tours</a></li>
<li><a href="error404.html">Alojamientos</a></li>
<li><a href="contact.html">Contacto</a></li>
</ul>
</nav>
</header>
<section id="section-1"> <!--section 1-->
<div class="coliseo">
<p class="p-1"><strong>Roma</strong> <br> Donde cada calle cuenta una historia y cada rincón es una obra maestra.</p>
</div>
</section>
<section id="section-2"> <!--section 2-->
<h2>La ciudad eterna</h2>
<p class="p-3">Conocida así gracias a los numerosos e importantes monumentos que en ella se hayan y que han pervivido desde el antiguo Imperio Romano</p>
<img class="img-david" src="img/img-miguel-angel3.png" alt="el david de miguel angel rodeado de una forma geométrica de neon">
<p class="p-4">Gran parte de aquellos que miran estusiasmados hacia cualquier rincón que abarca sus ojos <br> planea pasar en la ciudad el tiempo que considere suficiente para visitarla. Esto se traduce en una <br> intensa ruta de tres dias en la que conseguir admirarla en todas sus escenas mientras se ingnora el resto <br> de turistas cuya afluencia es imposible de dominar: el encanto de roma es imparable.<a class="btn-1" href="#">Conocer más</a></p>
<img class="flecha-boton" src="img/flecha-png.png" alt="imagen de flecha">
</section>
<section id="section-3"> <!--section 3-->
<h2 class="visita-roma">Visitá Roma</h2>
<p class="p-5"><i>Una de las capitales con más historia de toda Europa</i></p>
<img src="img/estatuas-png.png" alt="imagen de estatuas de mármol blancas">
</section>
<section id="section-4"> <!--section 4-->
<h2>Puntos turísticos</h2>
<div class="rectangulos">
<div class="rectangulo-1">
<h3>Coliseo Romano</h3>
<img src="img/coliseo-mobile1.jpg" alt="imagen del coliseo romano">
<p>anfiteatro de la epoca del impero romano construido en el siglo 1 ubicado al este del foro romano</p>
<a class="icono" href="#"><i class="fa-solid fa-circle-chevron-left"></i></a>
<a href="#" class="btn-info">info</a>
</div>
<div class="rectangulo-1">
<h3>Fontana DiTrevi</h3>
<img class="img-2" src="img/lugar-1.jpg" alt="imagen de la fontana DiTrevi">
<p>Una de las mayores fuentes monumentales del Barroco en Roma</p>
<a class="icono" href="#"><i class="fa-solid fa-circle-chevron-left"></i></a>
<a href="#" class="btn-info">info</a>
</div>
</div>
<footer>
<img src="img/logo.png" alt="logo de la página">
<p>Roma, Italia. Derechos reservados. Creado por Alexandra 👻🌵</p>
<div class="redes">
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="mailto:alexandra.ramirez@davinci.edu.ar" target="_blank" rel="noopener noreferrer"><i class="fa-regular fa-envelope"></i></a>
<a href="#"><i class="fa-brands fa-facebook-f"></i></a>
</div>
</footer>
</section>
<!--ul class="slider">
<li id="slide1">
<img src="img/lugar-5.jpg" alt="imagen de un lugar turistico de roma">
</li>
<li id="slide2">
<img src="img/coliseo-mobile1.jpg" alt="imagen de un lugar turistico de roma">
</li>
<li id="slide3">
<img src="img/lugar-3.jpg" alt="imagen de un lugar turistico de roma">
</li>
<li id="slide4">
<img src="img/lugar-2.jpg" alt="imagen de un lugar turistico de roma">
</li>
<li id="slide5">
<img src="img/lugar-1.jpg" alt="imagen de un lugar turistico de roma">
</li>
</ul>
<ul class="menu">
<li>
<a href="#slide1"></a>
</li>
<li>
<a href="#slide2"></a>
</li>
<li>
<a href="#slide3"></a>
</li>
<li>
<a href="#slide4"></a>
</li>
<li>
<a href="#slide5"></a>
</li>
</ul>
</section>
<section>
<div class="carrusel">
<span id="item-1"></span>
<span id="item-2"></span>
<span id="item-3"></span>
<div class="carrusel-item item-1">
<a href="#item-3" class="arrow-prev arrow"></a>
<a href="#item-2" class="arrow-next arrow"></a>
</div>
<div class="carrusel-item item-2">
<a href="#item-1" class="arrow-prev arrow"></a>
<a href="#item-3" class="arrow-next arrow"></a>
</div>
<div class="carrusel-item item-3">
<a href="#item-2" class="arrow-prev arrow"></a>
<a href="#item-1" class="arrow-next arrow"></a>
</div>
</div>
</section--> <!--fin carrusel-->
<!--div class="redes-sociales">
<a href="#"><img src="img/whatsapp-logo.png" alt="logo de whatsapp"></a>
<a href="#"><img src="img/instagram-logo.png" alt="logo de instagram"></a>
<a href="#"><img src="img/email-logo.png" alt="logo de email"></a>
</div>
<footer id="footer">
<img src="img/logo.png" alt="logo de la página">
<p>Derechos reservados Roma, Italia. Creado por alexandra ramirez 2024.</p>
</footer-->
</div>
</body>
</html>