-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (126 loc) · 6.17 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
<!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">
<meta name="description" content="Peluqueria lo de Sonia">
<title>Lo de Sonia - Inicio</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="./css/estilos.css">
<!-- Favicon -->
<link rel="shortcut icon" href="./assets/img/favicon.png">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/cbea712936.js" crossorigin="anonymous"></script>
<!--Animaciones-->
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
</head>
<body>
<!-- Navbar de Bootstrap con sticky position -->
<nav class="navbar navbar-expand-lg navbar-light bg-primary navbar sticky-top">
<div class="container-fluid">
<a class="navbar-brand fw-bold" href="#">
<img src="./assets/img/logo-sony.png" alt="La Peluqueria de Sonia" class="d-inline-block align-text-center">
La Peluqueria de Sonia
</a>
</div>
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active text-uppercase fs-5 fw-bold" aria-current="page" href="/index.html">Inicio</a>
<a class="nav-link text-uppercase fs-5 fw-bold" href="./pages/nosotros.html">Nosotros</a>
<a class="nav-link text-uppercase fs-5 fw-bold" href="./pages/servicios.html">Servicios</a>
<a class="nav-link text-uppercase fs-5 fw-bold" href="./pages/galeria.html">Galeria</a>
<a class="nav-link text-uppercase fs-5 fw-bold" href="./pages/contacto.html">Contacto</a>
</div>
</div>
</div>
</nav>
<!-- Clase para el Header del Index -->
<header class="headerIndex">
<section>
<!-- Clase para el manejo del texto en banner -->
<div class="container-fluid tituloBanner">
<h1>¡Bienvenidos a la peluquería de Sonia!</h1>
<p>Tu estilo a tu medida</p>
</div>
</section>
</header>
<main>
<section>
<div class="container">
<div class="row accesos">
<div class="col-md-6 col-lg-6 mb-4 mb-lg-0">
<div class="image-wrapper">
<a href="./pages/servicios.html"><img data-aos="fade-right" data-aos-duration="1500" src="./assets/img/hairdresser-does-hair-style-woman.jpg" alt="Servicios" class="img-fluid"></a>
</div>
<p>Servicios</p>
</div>
<div class="col-md-6 col-lg-6 mb-4 mb-lg-0">
<div class="image-wrapper">
<a href="./pages/nosotros.html"><img data-aos="fade-left" data-aos-duration="1500" src="./assets/img/inicioNosotros.jpg" alt="Nosotros" class="img-fluid"></a>
</div>
<p>Nosotros</p>
</div>
<div class="col-md-6 col-lg-6 mb-4 mb-lg-0">
<div class="image-wrapper">
<a href="./pages/galeria.html"><img data-aos="fade-right" data-aos-duration="1500" src="./assets/img/young-girl-chair-hairdresser.jpg" alt="Galeria" class="img-fluid"></a>
</div>
<p>Galeria</p>
</div>
<div class="col-md-6 col-lg-6 mb-4 mb-lg-0">
<div class="image-wrapper">
<a href="./pages/contacto.html"><img data-aos="fade-left" data-aos-duration="1500" src="./assets/img/annie-spratt-goholCAVTRs-unsplash.jpg" alt="Contacto" class="img-fluid"></a>
</div>
<p>Contacto</p>
</div>
</div>
</div>
</section>
</main>
<footer>
<!-- Se separa cada sección del footer en divs y clases para poder posicionarlos de forma correcta -->
<div class="container elementsFooter">
<div class="row">
<div class="col-lg-4 col-md-4 listaRedes">
<h3 class="redes">Redes Sociales</h3>
<div class="row">
<div class="col">
<a class="redes" href=""><img src="./assets/img/baseline-facebook.svg" alt="facebook">Facebook</a>
</div>
</div>
<div class="row">
<div class="col">
<a class="redes" href=""><img src="./assets/img/instagram-fill.svg" alt="instagram">Instagram</a>
</div>
</div>
<div class="row">
<div class="col">
<a class="redes" href=""><img src="./assets/img/twitter.svg" alt="twitter">Twitter</a>
</div>
</div>
</div>
<div class="col-lg-4 contactoFooter">
<h3>Contacto</h3>
<p>Telefono: 112424242</p>
<p>Direccion: Debenedetti 5205</p>
<p>Correo: [email protected]</p>
</div>
<div class="col-lg-4 mapsFooter">
<h3>Ubicacion</h3>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52617.684824281125!2d-58.546477658381235!3d-34.48753577010305!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcb10d9b1a0fcf%3A0xf24f564f43204bed!2sPeluquer%C3%ADa%20Sonia!5e0!3m2!1ses!2sar!4v1678405831333!5m2!1ses!2sar" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<p>Todos los derechos reservados© - Ariel Curuchaga</p>
</div>
</div>
</div>
</footer>
<script src="./js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script> AOS.init();</script>
</body>
</html>