Merge pull request #7 from OpenTechne/5-add-comments-for-each-section…

…-in-my-code 5 add comments for each section in my code
OpenTechne · Jul 21, 2023 · a0de40f · a0de40f
2 parents 50d80f5 + 631372c
commit a0de40f
Show file tree

Hide file tree

Showing 39 changed files with 1,203 additions and 328 deletions.
diff --git a/arles.html b/arles.html
@@ -1,6 +1,14 @@
+<!-- 
+  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" />
@@ -17,6 +25,10 @@
     <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">
@@ -57,8 +69,12 @@
         </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">
@@ -74,13 +90,15 @@ <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">
@@ -89,7 +107,7 @@ <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">
@@ -108,6 +126,7 @@ <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">
@@ -138,6 +157,7 @@ <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">
@@ -171,6 +191,7 @@ <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,6 +1,13 @@
-<!DOCTYPE html>
+<!-- 
+  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>
 <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" />
@@ -17,6 +24,10 @@
     <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">
@@ -57,8 +68,12 @@
         </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">
@@ -74,6 +89,7 @@ <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">
@@ -82,7 +98,7 @@ <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">
@@ -101,6 +117,7 @@ <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">
@@ -131,6 +148,7 @@ <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">
@@ -161,6 +179,7 @@ <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/career.html b/career.html
@@ -1,6 +1,14 @@
+<!-- 
+  Descripción: Este archivo HTML contiene información sobre la carrera artística del artista.
+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" />
@@ -17,6 +25,10 @@
     <title>Vincent's Life - Artistic Career</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">
@@ -57,8 +69,12 @@
         </div>
       </nav>
     </header>
-
+    <!-- Contenido principal: 
+      -Encabezado de sección
+      -Contenedor con la línea temporal de la carrera artística dividida por años
+    -->
     <main class="Main">
+      <!-- Encabezado de sección -->
       <div class="Main-header">
         <a class="Prev-link" href="vincentslife.html" title="Go to Vincent's life page">
           <div class="Prev-btn" aria-label="Previous">
@@ -77,6 +93,7 @@ <h2 class="Title-h2">artistic career</h2>
         </div>
       </div>
       <span class="Background-container"></span>
+      <!-- Contenedor que contiene una lista con sus list items para crear una línea temporal ordenada por años-->
       <div class="Container-ul">
         <ul class="Info-ul">
           <li class="Info-li">

diff --git a/contact.html b/contact.html
@@ -1,13 +1,21 @@
+<!-- 
+  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" />
     <meta
-    name="description"
-    content="Embark on a journey through the colorful and emotional world of Van Gogh's art. Explore his life story, his techniques, and the inspiration behind his masterpieces. Discover the passion, the pain, and the creativity behind his art."
-  />
+      name="description"
+      content="Embark on a journey through the colorful and emotional world of Van Gogh's art. Explore his life story, his techniques, and the inspiration behind his masterpieces. Discover the passion, the pain, and the creativity behind his art."
+    />
     <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=Playfair+Display:wght@400;500;800;900&display=swap" rel="stylesheet" />
@@ -17,6 +25,10 @@
     <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">
@@ -57,9 +69,14 @@
         </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">
@@ -69,11 +86,14 @@ <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/irises.webp" alt="Irises image done with Illustrator" class="Irises-image" />
           </div>
+          <!-- Formulario -->
           <form class="Form">
             <div class="Form-input">
+              <!-- Ambos input  y el textarea tienen el atributo required para que no puedan enviar una consulta a menos que introduzcan el correo -->
               <input class="Form-name" type="text" name="yourname" placeholder="Name" required />
               <input class="Form-email" type="email" name="youremail" placeholder="Email" required />
               <textarea class="Form-textarea" name="textarea" placeholder="I think we could create awesome stuff together!" rows="3" required></textarea>
@@ -87,6 +107,7 @@ <h1 class="Container-h1">contact me</h1>
               </div>
             </div>
           </form>
+          <!-- Redes sociales -->
           <div class="Rrss">
             <span class="Rrss-span">Check out my art</span>
             <ul class="Rrss-ul">
@@ -110,11 +131,6 @@ <h1 class="Container-h1">contact me</h1>
                   ><img class="Rrss-img" src="./assets/contact/behance.webp" alt="Blue and Yellow Behance Logo " loading="lazy"
                 /></a>
               </li>
-              <li class="Rrss-li">
-                <a class="Rrss-a" href="https://www.instagram.com/artentii/" target="_blank" rel="noreferrer"
-                  ><img class="Rrss-img" src="./assets/contact/instagram.webp" alt="Blue and Yellow Instagram Logo " loading="lazy"
-                /></a>
-              </li>
             </ul>
           </div>
         </div>