Merge pull request #17 from OpenTechne/16-clean-code

16 clean code
OpenTechne · Jul 22, 2023 · 45721e8 · 45721e8
2 parents 249de7f + 15938d6
commit 45721e8
Show file tree

Hide file tree

Showing 24 changed files with 153 additions and 559 deletions.
diff --git a/arles.html b/arles.html
@@ -1,14 +1,6 @@
-<!-- 
-  Descripción: Este archivo HTML contiene tres obras pintadas por el autor en 1888 en Arles
-Estructure general:
--Encabezado
--Barra de navegación
--Contenido principal que consiste en tres imágenes que al hacer click el usuario puede acceder a más información
-  -->
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <!-- Metadata con la descripción de la página incluida para redes sociales teniendo en cuenta el SEO -->
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -25,10 +17,6 @@
     <title>Vincent's Art - Arles</title>
   </head>
   <body>
-    <!-- Sección de barra de navegación:
-    -Icono a la izquierda que lleva a la página principal durante el flujo de la página web
-    -Imagen central a modo de decoración
-    -Menú hamburguesa a la derecha que lleva a las otras páginas: menú, la vida de Vicent, el arte de Vincent, eventos relacionados con el autor y un formulario para contactar conmigo -->
     <header class="Header">
       <div class="Header-left">
         <a class="Header-link" href="index.html" rel="noreferrer">
@@ -69,12 +57,7 @@
         </div>
       </nav>
     </header>
-    <!-- Contenido principal: 
-      -Contenedor con cada sección posicionada de tal manera que tenga el resultado final en pantalla
-      -Secciones ocultas que saldrán cuando el usuario haga click en una de las tres imágenes
-    -->
     <main class="Main">
-      <!-- Contenedor principal que el usuario ve cuando entra en la galería -->
       <div class="Grid-container">
         <h1 class="Main-h1">vincent's art</h1>
         <div class="Location">
@@ -90,15 +73,13 @@ <h1 class="Main-h1">vincent's art</h1>
         <div class="Down-container">
           <img class="Grid-image" src="./assets/vincentsart/cafe-vincentvangogh.webp" alt="the Night Café by Vincent Van Gogh" loading="lazy" >
         </div>
-        <!-- El usuario podrá ir hacia la siguiente sección de la galería -->
         <a class="Forward" href="provence.html" rel="noreferrer" aria-label="See more paintings">
           <div class="Forward-btn" aria-label="Go to next year">
             <svg class="Forward-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
               <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
             </svg>
           </div>
         </a>
-        <!-- El usuario podrá ir hacia la sección anterior de la galería -->
         <a class="Backwards" href="paris.html" rel="noreferrer" aria-label="See more paintings">
           <div class="Backwards-btn" aria-label="Go to previous year">
             <svg class="Backwards-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
@@ -107,7 +88,6 @@ <h1 class="Main-h1">vincent's art</h1>
           </div>
         </a>
       </div>
-      <!-- Contenido que el usuario podrá ver cuando haga click en una de las imágenes, la estructura es exactamente la misma en los tres casos pero el conteniedo es diferent -->
       <div class="Image-container isHidden" id="Portrait">
         <h1 class="Main-h1">vincent's art</h1>
         <div class="Image-info">
@@ -126,7 +106,6 @@ <h1 class="Main-h1">vincent's art</h1>
         </div>
         <div class="Right-container">
           <img class="Grid-image" src="./assets/vincentsart/roulin-vincentvangogh.webp" alt="Portrait of Joseph Roulin by Vincent Van Gogh" loading="lazy" >
-          <!-- El usuario podrá volver hacia atrás en la galería para continuar explorando las otras imágenes -->
           <div class="Close-container isHidden">
             <button class="Close-btn">
               <svg class="Close-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
@@ -157,7 +136,6 @@ <h1 class="Main-h1">vincent's art</h1>
         </div>
         <div class="Right-container">
           <img class="Grid-image" src="./assets/vincentsart/rhone-vincentvangogh.webp" alt="Starry Night over the Rhône by Vincent Van Gogh" loading="lazy" >
-          <!-- El usuario podrá volver hacia atrás en la galería para continuar explorando las otras imágenes -->
           <div class="Close-container isHidden">
             <button class="Close-btn">
               <svg class="Close-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
@@ -191,7 +169,6 @@ <h1 class="Main-h1">vincent's art</h1>
         </div>
         <div class="Right-container">
           <img class="Grid-image" src="./assets/vincentsart/cafe-vincentvangogh.webp" alt="The Night Café by Vincent Van Gogh" loading="lazy" >
-          <!-- El usuario podrá volver hacia atrás en la galería para continuar explorando las otras imágenes -->
           <div class="Close-container isHidden">
             <button class="Close-btn">
               <svg class="Close-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">

diff --git a/auvers.html b/auvers.html
@@ -1,13 +1,6 @@
-<!-- 
-  Descripción: Este archivo HTML contiene tres obras pintadas por el autor en 1890 en Aurvers-Sur-Oise
-Estructure general:
--Encabezado
--Barra de navegación
--Contenido principal que consiste en tres imágenes que al hacer click el usuario puede acceder a más información
-  --><!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    <!-- Metadata con la descripción de la página incluida para redes sociales teniendo en cuenta el SEO -->
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -24,10 +17,6 @@
     <title>Vincent's Art - Auvers-sur-Oise</title>
   </head>
   <body>
-    <!-- Sección de barra de navegación:
-    -Icono a la izquierda que lleva a la página principal durante el flujo de la página web
-    -Imagen central a modo de decoración
-    -Menú hamburguesa a la derecha que lleva a las otras páginas: menú, la vida de Vicent, el arte de Vincent, eventos relacionados con el autor y un formulario para contactar conmigo -->
     <header class="Header">
       <div class="Header-left">
         <a class="Header-link" href="index.html" rel="noreferrer">
@@ -68,12 +57,7 @@
         </div>
       </nav>
     </header>
-    <!-- Contenido principal: 
-      -Contenedor con cada sección posicionada de tal manera que tenga el resultado final en pantalla
-      -Secciones ocultas que saldrán cuando el usuario haga click en una de las tres imágenes
-    -->
     <main class="Main">
-      <!-- Contenedor principal que el usuario ve cuando entra en la galería -->
       <div class="Grid-container">
         <h1 class="Main-h1">vincent's art</h1>
         <div class="Location">
@@ -89,7 +73,6 @@ <h1 class="Main-h1">vincent's art</h1>
         <div class="Down-container">
           <img class="Grid-image" src="./assets/vincentsart/gachet-vincentvangogh.webp" alt="Portrait of Dr.Gachet by Vincent Van Gogh" loading="lazy" >
         </div>
-        <!-- El usuario podrá ir hacia la sección anterior de la galería -->
         <a class="Backwards" href="provence.html" rel="noreferrer" aria-label="See more paintings">
           <div class="Backwards-btn" aria-label="Go to previous year">
             <svg class="Backwards-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
@@ -98,7 +81,6 @@ <h1 class="Main-h1">vincent's art</h1>
           </div>
         </a>
       </div>
-      <!-- Contenido que el usuario podrá ver cuando haga click en una de las imágenes, la estructura es exactamente la misma en los tres casos pero el conteniedo es diferent -->
       <div class="Image-container isHidden" id="Church">
         <h1 class="Main-h1">vincent's art</h1>
         <div class="Image-info">
@@ -117,7 +99,6 @@ <h1 class="Main-h1">vincent's art</h1>
         </div>
         <div class="Right-container">
           <img class="Grid-image" src="./assets/vincentsart/church-vincentvangogh.webp" alt="The Church in Auvers-sur-Oise by Vincent Van Gogh" loading="lazy" >
-          <!-- El usuario podrá volver hacia atrás en la galería para continuar explorando las otras imágenes -->
           <div class="Close-container isHidden">
             <button class="Close-btn">
               <svg class="Close-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
@@ -148,7 +129,6 @@ <h1 class="Main-h1">vincent's art</h1>
         </div>
         <div class="Right-container">
           <img class="Grid-image" src="./assets/vincentsart/crows-vincentvangogh.webp" alt="Wheatfield with Crows by Vincent Van Gogh" loading="lazy" >
-          <!-- El usuario podrá volver hacia atrás en la galería para continuar explorando las otras imágenes -->
           <div class="Close-container isHidden">
             <button class="Close-btn">
               <svg class="Close-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
@@ -179,7 +159,6 @@ <h1 class="Main-h1">vincent's art</h1>
         </div>
         <div class="Right-container">
           <img class="Grid-image" src="./assets/vincentsart/gachet-vincentvangogh.webp" alt="Portrait of Dr.Gachet by Vincent Van Gogh" loading="lazy" >
-          <!-- El usuario podrá volver hacia atrás en la galería para continuar explorando las otras imágenes -->
           <div class="Close-container isHidden">
             <button class="Close-btn">
               <svg class="Close-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">

diff --git a/contact.html b/contact.html
@@ -1,14 +1,6 @@
-<!-- 
-  Descripción: Este archivo HTML contiene un formulario para que el usuario pueda contactar conmigo para futuras colaboraciones o para consultar mis redes
-Estructure general:
--Encabezado
--Barra de navegación
--Contenido principal
-  -->
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <!-- Metadata con la descripción de la página incluida para redes sociales teniendo en cuenta el SEO -->
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -20,15 +12,11 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;800;900&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="./css/contact.css" />
-    <script src="./js/contact.js" defer></script>
+    <script src="./js/index.js" defer></script>
     <link rel="icon" type="image/x-icon" href="./assets/homepage/favicon-vincentvangogh.webp" />
     <title>Discover Van Gogh - Contact</title>
   </head>
   <body>
-    <!-- Sección de barra de navegación:
-    -Icono a la izquierda que lleva a la página principal durante el flujo de la página web
-    -Imagen central a modo de decoración
-    -Menú hamburguesa a la derecha que lleva a las otras páginas: menú, la vida de Vicent, el arte de Vincent, eventos relacionados con el autor y un formulario para contactar conmigo -->
     <header class="Header">
       <div class="Header-left">
         <a class="Header-link" href="index.html" rel="noreferrer">
@@ -69,14 +57,8 @@
         </div>
       </nav>
     </header>
-    <!-- Contenido principal: 
-      -Contenedor una breve conclusión después de hacer la página web
-      -Formulario
-      -Lista con las redes sociales
-    -->
     <main class="Main">
       <div class="Main-container">
-        <!-- Contenedor una breve conclusión después de hacer la página web -->
         <h1 class="Container-h1">contact me</h1>
         <div class="Container-text">
           <p class="Container-p">
@@ -86,11 +68,9 @@ <h1 class="Container-h1">contact me</h1>
           <p class="Container-p">Thank you for visiting my page & for sharing my love for Van Gogh and art! Check other of my works or contact me if you’d like to create art together.</p>
         </div>
         <div class="Bottom-content">
-          <!-- Contenido inferior con la imagen, formulario y redes sociales -->
           <div class="Irises-container">
             <img src="./assets/contact/lirios.png" alt="Irises image done with Illustrator" class="Irises-image" />
           </div>
-          <!-- Formulario -->
           <form class="Form">
             <input class="Form-name" type="text" name="yourname" placeholder="Name" required />
             <input class="Form-email" type="email" name="youremail" placeholder="Email" required />
@@ -104,7 +84,6 @@ <h1 class="Container-h1">contact me</h1>
               <input class="Form-send" type="submit" value="Let's Talk!" />
             </div>
           </form>
-          <!-- Redes sociales -->
           <div class="Rrss">
             <span class="Rrss-span">Check out my art</span>
             <ul class="Rrss-ul">

diff --git a/css/arles.css b/css/arles.css
@@ -1,4 +1,3 @@
-
 /* RESET */
 * {
   margin: 0;

diff --git a/css/index.css b/css/index.css
@@ -11,6 +11,19 @@
 /* ---- RESET empieza aquí ---- */
 /* Descripción: Estilos de reseteo para la normalización de estilos predeterminados del navegador. */
 /* Reset general para todos los elementos */
+
+/* Estructura RESET */
+/* 
+-Global
+-Elementos multimedia
+-Enlaces y enlaces dentro de párrafos
+-Listas
+-Elementos de texto
+-Formularios
+-Svg
+-Html (oculto en este caso para que no sobresalga contenido)
+-Body
+ */
 * {
   margin: 0;
   padding: 0;
@@ -101,6 +114,27 @@ body {
 /* Descripción: Estilos para el encabezado del sitio web. */
 
 /* Estilos para el contenedor del encabezado */
+/* Estructura HEADER - igual para todas las páginas que tengas la barra de navegación
+-Header
+-Header-left
+-Header-img
+-Header-signature
+-Header-ul
+-Header-ul.isActive
+-Header-li
+-Nav-link
+-Header-li:hover .Nav-link
+-Nav-img
+-Header-li:hover .Nav-img
+-Nav-link.notActive:not(:hover)
+-Hamburger
+-Circle
+-Circle.isActive
+-Bar
+-Hamburger.isActive .Bar:nth-child(2)
+-Hamburger.isActive .Bar:nth-child(3)
+-Hamburger.isActive .Bar:nth-child(4)
+ */
 .Header {
   max-width: 95%;
   margin: auto;
@@ -266,6 +300,32 @@ body {
 
 /* MAIN */
 /* Estilos para el contenedor principal */
+/* Estructura MAIN
+-Main
+-Grid-container
+-Container
+-Image
+-Frame
+-Starry-night
+-Starry-h1
+-Almond-blossom
+-Almond-h2
+-Cypresses
+-Portrait
+-Quote
+-Quote-p
+-Quote-author
+-Quote-p,
+-Quote-author
+-Quote .Frame
+-Sunflowers
+-Introduction
+-Introduction-p
+-Introduction .Frame,
+-Quote .Frame
+-Postman
+-Introduction .Frame
+ */
 .Main {
   margin: 0.7rem;
   height: 87vh;
@@ -766,4 +826,4 @@ body {
   .Header-li:hover .Nav-link{
     animation: none;
   }
-}
+}
diff --git a/css/vicentslife.css b/css/vicentslife.css
@@ -598,7 +598,7 @@ body {
     border-color: #ffd147;
   }
   .Main{
-    height: 75vh;
+    height: 80vh;
   }
 }
 /* ---- Fin de las Media Queries ---- */
diff --git a/discover.html b/discover.html
@@ -1,14 +1,6 @@
-<!-- 
-  Descripción: Este archivo HTML contiene una breve introducción al legado de Van Gogh y enlaces a experiencias que los usuarios pueden realizar para conocer más en profundidad al artista
-Estructure general:
--Encabezado
--Barra de navegación
--Contenido principal el cual consta de dos seccions: loving Vincent y immersive experience
-  -->
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <!-- Metadata con la descripción de la página incluida para redes sociales teniendo en cuenta el SEO -->
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -20,16 +12,12 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;800;900&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="./css/discover.css" media="screen" />
-    <script src="./js/discover.js" defer async></script>
+    <script src="./js/index.js" defer async></script>
     <link rel="icon" type="image/x-icon" href="./assets/homepage/favicon-vincentvangogh.webp" media="screen" />
     <title>Discover Van Gogh - Discover</title>
   </head>
 
   <body>
-    <!-- Sección de barra de navegación:
-    -Icono a la izquierda que lleva a la página principal durante el flujo de la página web
-    -Imagen central a modo de decoración
-    -Menú hamburguesa a la derecha que lleva a las otras páginas: menú, la vida de Vicent, el arte de Vincent, eventos relacionados con el autor y un formulario para contactar conmigo -->
     <header class="Header">
       <div class="Header-left">
         <a class="Header-link" href="index.html" rel="noreferrer">
@@ -70,9 +58,6 @@
         </div>
       </nav>
     </header>
-    <!-- Contenido principal: 
-      -Grid con la introducción y dos contenedores con los eventos mencionados anteriormente
-    -->
     <main class="Main">
       <div class="Grid-container">
         <div class="Text-container">
@@ -86,7 +71,6 @@ <h1 class="Column-h1">discover</h1>
             <h2 class="Column-h2">loving <br />vincent</h2>
           </div>
         </a>
-        <!-- Enlance a sección sobre la visita -->
         <a class="Immersive" href="immersive.html" rel="noreferrer">
           <img class="Column-img" src="./assets/discover/vangogh-immersivexperience.webp" alt="Van Gogh Immersive Experience" loading="lazy" />
           <div class="Column-frame">