Contenido

Artística - Escuela de arte

URI: http://proyectodiw-msg.alwaysdata.net/

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <!-- Stefanova Golemanova Mariya; NIE: Y4985530-H -->
  4.  
  5. <head>
  6. <meta charset="UTF-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <title>Artística - Escuela de arte</title>
  9. <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  10. <!-- favicon -->
  11. <link rel="icon" type="image/png" href="img/fav.png" sizes="64x64">
  12. <!-- estilos propios -->
  13. <link rel="stylesheet" href="css/style.css">
  14. <!-- link a fontello.css para el uso de iconos -->
  15. <link rel="stylesheet" href="css/fontello.css">
  16. <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  17. </head>
  18. <body>
  19. <div class="container-fluid">
  20. <!-- Cabecera de la página -->
  21. <div class="row">
  22. <header>
  23. <div class="row d-none d-md-flex" id="top">
  24. <div class="col col-md-9">
  25. <a href="index.html#inicio">Descúbrenos</a>
  26. <span class="icon-mail" id="topmail"></span> <a href="mailto:artistica@mail.es" id="topmail_a">artistica@mail.es</a>
  27. <span class="icon-phone" id="topphone"></span>+34 999-999-999
  28. </div>
  29. <div class="col col-md-3" id="cdos">
  30. <a href="https://www.facebook.com/" target="_blank" aria-label="Facebook"><span class="icon-facebook-official" title="Facebook"></span><span class="sr-only">Facebook</span></a>
  31. <a href="https://twitter.com/" target="_blank" aria-label="Twitter"><span class="icon-twitter-squared" title="Twitter"></span><span class="sr-only">Twitter</span></a>
  32. <a href="https://www.instagram.com/" target="_blank" aria-label="Instagram"><span class="icon-instagram" title="Instagram"></span><span class="sr-only">Instagram</span></a>
  33. <a href="https://www.pinterest.es/" target="_blank" aria-label="Pinterest"><span class="icon-pinterest-squared" title="Pinterest"></span><span class="sr-only">Pinterest</span></a>
  34. </div>
  35. </div>
  36. <div class="row hero">
  37. <div class="col-12 col-sm-12 col-md-3 col-lg-2" id="izquierda">
  38. <a href="index.html"><img src="img/logo3.png" alt="Logotipo de la academia" id="logo"></a>
  39. </div>
  40. <div class="col-12 col-sm-12 col-md-9 col-lg-10" id="derecha">
  41. <h1 id="titulo" class="cursiva headings">Artística</h1>
  42. <h2 id="subtitulo" class="cursiva headings">Escuela de arte y creatividad</h2>
  43. </div>
  44. </div>
  45. </header>
  46. </div>
  47. <!-- Fin cabecera -->
  48. <!-- Barra de navegación principal -->
  49. <div class="row" id="menuprincipal">
  50. <nav class="navbar navbar-brand navbar-expand-lg navbar-light bg-light">
  51. <div class="container-fluid">
  52. <a id="inicio" aria-keyshortcuts="I" title="Volver al inicio" class="navbar-brand" href="index.html#menuprincipal" onclick="clearActive()">~ Inicio ~</a>
  53. <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  54. <span class="navbar-toggler-icon"></span>
  55. </button>
  56. <div class="collapse navbar-collapse" id="navbarSupportedContent">
  57. <ul class="navbar-nav me-auto mb-2 mb-lg-0">
  58. <li class="nav-item">
  59. <a class="nav-link active" aria-current="page" href="about.html#menuprincipal" aria-keyshortcuts="N" title="Acerca de la academia">Nosotros</a>
  60. </li>
  61. <li class="nav-item dropdown custom-dropdown">
  62. <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="Actividades de la academia">
  63. Actividades
  64. </a>
  65. <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
  66. <li><a class="dropdown-item" href="actividades_pintura.html#menuprincipal" aria-keyshortcuts="P" title="Actividades de dibujo y pintura">Dibujo y pintura</a></li>
  67. <li><a class="dropdown-item" href="actividades_musica.html#menuprincipal" aria-keyshortcuts="M" title="Actividades de música">Música</a></li>
  68. <li><a class="dropdown-item" href="actividades_danza.html#menuprincipal" aria-keyshortcuts="D" title="Actividades de danzas">Danzas</a></li>
  69. <li><a class="dropdown-item" href="listado_cursos.html#menuprincipal" aria-keyshortcuts="L" title="Listado de cursos impartidos">Listado de cursos</a></li>
  70. </ul>
  71. </li>
  72. <li class="nav-item">
  73. <a class="nav-link" href="eventos.html#menuprincipal" aria-keyshortcuts="E" title="Eventos-conciertos,exposiciones,talleres">Eventos</a>
  74. </li>
  75. <li class="nav-item">
  76. <a class="nav-link" href="galeria.html#menuprincipal" aria-keyshortcuts="G" title="Galería de imágenes">Galería</a>
  77. </li>
  78. <li class="nav-item">
  79. <a class="nav-link" href="contacto.html#menuprincipal" aria-keyshortcuts="C" title="Formulario de contacto">Contacto</a>
  80. </li>
  81. </ul>
  82. <form class="d-flex">
  83. <input id="buscarcontenido" class="form-control me-2" type="search" placeholder="Escribe texto a buscar" aria-label="Search">
  84. <button class="btn buton bordcolor" type="submit" onclick="buscar(event,1)">Buscar</button>
  85. </form>
  86. </div>
  87. </div>
  88. </nav>
  89. </div>
  90. <!-- Fin barra de navegación -->
  91. <main>
  92. <div class="container" id="contenidoprincipal">
  93. <!-- Título -->
  94. <div class="row" id="main_title">
  95. <img src="img/vintage-1817561_1280.png" alt="Imagen de bailarina" id="bailarina_animacion" class="spin3D">
  96. <div class="col-12 col-md-12 col-lg-9">
  97. <h1 class="headings cursiva margined normal fade-in" id="tituloprincipal">Bienvenido a Artística - donde las artes cobran vida</h1>
  98. </div>
  99. <div class="col-12 col-md-12 col-lg-3"></div>
  100. </div>
  101. <div class="row">
  102. <div class="col-12 col-md-12 col-lg-9" >
  103. <!-- Slider de imágenes -->
  104. <div>
  105. <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  106. <div class="carousel-indicators">
  107. <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  108. <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
  109. <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  110. </div>
  111. <div class="carousel-inner">
  112. <div class="carousel-item active">
  113. <img src="img/01.jpg" class="d-block w-100" alt="Imágen de pasteles y lápices de colores">
  114. </div>
  115. <div class="carousel-item">
  116. <img src="img/02.jpg" class="d-block w-100" alt="Imágen de manos infantiles encima de un teclado de piano">
  117. </div>
  118. <div class="carousel-item">
  119. <img src="img/03.jpg" class="d-block w-100" alt="Imágen de alumnas ensayando ballet">
  120. </div>
  121. </div>
  122. <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
  123. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  124. <span class="visually-hidden">Previous</span>
  125. </button>
  126. <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
  127. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  128. <span class="visually-hidden">Next</span>
  129. </button>
  130. </div>
  131. </div>
  132. <!-- Fin slider -->
  133. <!-- Sección contenido principal - Información general -->
  134. <section>
  135. <div class="row">
  136. <p class="capletter"><span class="capital">E</span>n nuestra academia creamos un espacio inspirador donde la creatividad se convierte en una experiencia única. Desde la pintura que da color a tus pensamientos hasta la danza que libera tus emociones y la música que eleva tu espíritu, ofrecemos un viaje completo a través de las artes.</p>
  137. <h2 class="subrayado">Explora tu potencial artístico:</h2>
  138. <p><strong>Pintura: </strong> Sumérgete en la paleta de colores y descubre tu propio lienzo de posibilidades con nuestras clases de pintura. Desde acuarelas hasta óleo, te guiaremos en el viaje de expresar tu creatividad visual.</p>
  139. <p><strong>Danza: </strong>Descubre el ritmo de tu cuerpo en nuestras clases de danza. Desde el clásico ballet hasta la exuberante salsa y las danzas folklóricas, encontrarás un estilo que te hará bailar con alegría.</p>
  140. <p><strong>Música:</strong>Despierta tu talento musical en nuestras clases de música. Desde el suave sonido del piano hasta la energía de la guitarra o las melódicas notas del violín, te ayudaremos a desbloquear tu potencial musical.</p>
  141. <h2 class="subrayado">¿Por qué elegir Artística?</h2>
  142. <p><strong>Instructores apasionados: </strong>Nuestro equipo está formado por instructores apasionados y experimentados, comprometidos con nutrir tu amor por las artes.</p>
  143. <p><strong>Ambiente creativo:</strong>Crea, baila y toca en un ambiente enriquecedor donde la creatividad fluye y las ideas se transforman en obras maestras.</p>
  144. <p><strong>Diversidad de estilos: </strong> Desde las formas clásicas hasta las expresiones más contemporáneas, ofrecemos una amplia variedad de estilos para que encuentres el que resuene contigo.</p>
  145. <p><strong>Clases para todas las edades: </strong>Sea cual sea tu edad o nivel de habilidad, nuestras clases están diseñadas para adaptarse a todos, desde los más pequeños hasta los adultos apasionados por las artes.</p>
  146. <p><strong>Únete a Artística y descubre tu potencial artístico hoy. ¡Sumérgete en el arte, inspírate en la creatividad!</strong></p>
  147. </div>
  148. </section>
  149. <!-- Fin contenido principal -->
  150. </div>
  151. <div class="col-12 col-md-12 col-lg-3 aside_col">
  152. <!-- Barra de navegación lateral con enlaces a eventos -->
  153. <h3>Próximos eventos</h3>
  154. <nav class="nav flex-column lateral">
  155. <a href="eventos.html#conciertos">Conciertos</a>
  156. <a href="eventos.html#exposiciones">Exposiciones</a>
  157. <a href="eventos.html#talleres">Talleres</a>
  158. </nav>
  159. <!-- Fin barra lateral -->
  160. <!-- Fecha y hora actual -->
  161. <div id="fechahora">
  162. <div id="currentDate"></div>
  163. <div id="reloj"></div>
  164. </div>
  165. <!-- Fin fecha/hora -->
  166. </div>
  167. </div>
  168. <!-- Flecha para ir arriba -->
  169. <a id="go-up" href="#"><span class="icon-up-open"></span><span class="sr-only">Arriba</span></a>
  170. </div>
  171. </main>
  172. <!-- Pie de página -->
  173. <footer>
  174. <div class="row text-center">
  175. <div class="col-12 col-md-4 footer1">
  176. <img src="img/logo3bw.png" alt="Logotipo en blanco y negro" width="180" class="d-none d-md-block">
  177. <div class="col text-center">
  178. <p>Maria Stefanova Golemanova</p>
  179. </div>
  180. </div>
  181. <div class="col-12 col-md-4 footer1 f1">
  182. <ul>
  183. <li><span class="icon-location"></span>c.Antonio Machado s/n</li>
  184. <li><span class="icon-phone"></span>+34 999-999-999</li>
  185. <li><span class="icon-mail"></span> <a id="correo" href="mailto:artistica@mail.es">artistica@mail.es</a></li>
  186. </ul>
  187. </div>
  188. <div class="col-12 col-md-4 footer1 f1">
  189. <a href="privacidad.html" target="_blank">Política de privacidad</a>
  190. <a href="mapa.html" target="_blank">Mapa web</a>
  191. <p id="redes">
  192. <a href="https://www.facebook.com/" target="_blank" aria-label="Facebook"><span class="icon-facebook-official" title="Facebook"></span><span class="sr-only">Facebook</span></a>
  193. <a href="https://twitter.com/" target="_blank" aria-label="Twitter"><span class="icon-twitter-squared" title="Twitter"></span><span class="sr-only">Twitter</span></a>
  194. <a href="https://www.instagram.com/" target="_blank" aria-label="Instagram"><span class="icon-instagram" title="Instagram"></span><span class="sr-only">Instagram</span></a>
  195. <a href="https://www.pinterest.es/" target="_blank" aria-label="Pinterest"><span class="icon-pinterest-squared" title="Pinterest"></span><span class="sr-only">Pinterest</span></a>
  196. </p>
  197. </div>
  198. </div>
  199. <div class="row text-center" id="end">
  200. <small> &copy; DAW Distancia ~ Curso académico 2023/2024</small>
  201. </div>
  202. </footer>
  203. </div>
  204. <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
  205. <script src="js/script.js"></script>
  206. </body>
  207. </html>