the readme are updated

Author: pablo-sch

docs/README.de.md

@@ -1,99 +1,99 @@
-## Wählen Sie Ihre Sprache.
+# CSS- und HTML-Projekt-Abgabe
+
+## Wähle deine Sprache
 
 - 🇺🇸 [Englisch](README.md)
-- 🇪🇸 [Spanisch](README.es.md)
+- 🇩🇪 [Deutsch](README.de.md)
 
 ## Projekt-URL
 [https://pablosch26.github.io/keepcoding-html-css-submission-2](https://pablosch26.github.io/keepcoding-html-css-submission-2)
 
-# CSS- und HTML-Projektabgabe
-
-Dieses Projekt wurde mit dem Ziel erstellt, das in den virtuellen Klassen über HTML und CSS erworbene Wissen zu üben und zu demonstrieren.
+Dieses Projekt wurde erstellt, um das Wissen, das in den virtuellen Kursen zu HTML und CSS erworben wurde, zu üben und zu demonstrieren.
 
 ## Das Projekt umfasst die folgenden Schlüsselaspekte:
 
-- Implementierung von strukturiertem **HTML** und dessen Interaktion mit dem **DOM**, begleitet von kaskadierenden Stilen mit **CSS**.
-- Richtige Verwendung der **Semantik** der HTML-Tags, kombiniert mit CSS-Regeln, die die Zugänglichkeit und Leistung verbessern.
+- Implementierung von strukturiertem **HTML** und seiner Interaktion mit dem **DOM**, zusammen mit kaskadierenden Stilen mit **CSS**.
+- Richtiges Verwenden der **HTML**-Tag-Semantik, kombiniert mit CSS-Regeln, die die Zugänglichkeit und Leistung verbessern.
 - Entwicklung von **Media Queries**, um ein **responsives** Design zu gewährleisten, das sich an verschiedene Bildschirmauflösungen anpasst.
-- Erstellung dynamischer **Animationen** und **Übergänge** mit **CSS**, um das Benutzererlebnis zu verbessern.
+- Erstellung von dynamischen **Animationen** und **Übergängen** mit **CSS**, um die Benutzererfahrung zu verbessern.
 - Anpassung von Animationen durch die Verwendung von **Keyframes**, um einzigartige visuelle Effekte zu erzielen.
-- Gestaltung eines **responsiven Layouts** mithilfe von **CSS-Grids** für eine flexible und skalierbare Struktur.
-- Anwendung einer korrekten **CSS-Hierarchie**, um eine korrekte Formatierung und visuelle Konsistenz der Elemente zu gewährleisten.
-- Analyse des Verhaltens der verschiedenen **HTML-Tags** und deren Interaktion mit **CSS**, um die Präsentation des Inhalts zu optimieren.
-- Implementierung von **Eingabefeldern** mit effektiven **Validierungen**, um die korrekte Benutzerinteraktion mit Formularen zu gewährleisten.
-- Einbindung von **Links** zur Navigation zu anderen Websites, um die Konnektivität und Zugänglichkeit zu verbessern.
-- Gewährleistung der **Kohärenz und Sauberkeit des Codes**, mit einer organisierten Struktur, die die Wartung und Skalierbarkeit des Projekts erleichtert.
+- Design eines **responsiven Layouts** mit **Grids** in CSS für eine flexible und skalierbare Struktur.
+- Anwendung einer richtigen **CSS-Hierarchie**, um eine ordnungsgemäße Gestaltung und visuelle Konsistenz der Elemente zu gewährleisten.
+- Analyse des Verhaltens verschiedener **HTML**-Tags und deren Interaktion mit **CSS**, um die Präsentation des Inhalts zu optimieren.
+- Implementierung von **Inputs** mit **Validierungen**, um eine ordnungsgemäße Benutzerinteraktion mit Formularen zu gewährleisten.
+- Einbindung von **Links** zur Navigation zu anderen Webseiten, um die Konnektivität und Zugänglichkeit zu verbessern.
+- Sicherstellung der **Kohärenz und Sauberkeit des Codes** mit einer organisierten Struktur, die die Wartung und Skalierbarkeit des Projekts erleichtert.
 
 ## Projektziel
-
-Das Hauptziel dieses Projekts ist die Entwicklung eines persönlichen **Portfolios** (oder eines für eine fiktive Figur), unter Anwendung des in der Klasse erlernten Wissens. Die Idee ist, eine interaktive und visuell ansprechende Präsentation zu erstellen, die die Fähigkeiten und Projekte unserer gewählten Figur zeigt, unter Verwendung der Technologien und Praktiken, die während des Kurses erlernt wurden.
+Das Hauptziel dieses Projekts ist es, ein persönliches **Portfolio** (oder das Portfolio einer fiktiven Figur) zu entwickeln, wobei das in der Klasse erworbene Wissen angewendet wird. Ziel ist es, eine interaktive und visuell ansprechende Präsentation zu erstellen, die die Fähigkeiten und Projekte unseres gewählten Charakters zeigt, indem die im Kurs erlernten Technologien und Praktiken verwendet werden.
 
 ## Projektdetails
 
-- Ein **Header** muss erstellt werden, in dem die Links einen sanften `hover`-Übergangseffekt haben sollen. Diese Links sind in der mobilen Version nicht notwendig.
-- Ein Abschnitt mit einer **Über uns**-Beschreibung und unseren Fähigkeiten, dargestellt durch **Fortschrittsbalken**. Diese Balken müssen mit **CSS** animiert werden.
-- Ein **Banner**, das ein Hintergrundbild haben muss. Auf mobilen Bildschirmen sollte ein anderes Bild angezeigt werden (Implementierung von **Media Queries** oder **Responsive Images**).
-- Ein Kontaktformular mit **Eingabefeldern**. Alle Felder müssen die richtigen Typen und die korrekte HTML-Validierung verwenden:
-  - **Vorname**, **Nachname**, **Telefonnummer** (Pflichtfelder).
-  - **Radio-Button** zur Beantwortung der Frage "Wie hast du mich kennengelernt?" (Pflichtfeld):
-    - Universität
-    - Keepcoding Kick-off
-    - Schule
-    - Auf GitHub
-  - **GitHub-Tag** (Verwenden Sie den regulären Ausdruck `^@[^\s]+` zur Validierung - `@Benutzername`).
-  - **Textarea** mit weiteren Informationen des Nutzers (maximal 180 Zeichen) (Pflichtfeld).
-  - **Checkbox** für die Anmeldung zum **Newsletter**.
-  - **Speichern**- und **Zurücksetzen**-Schaltflächen.
-- **Footer** mit Links zu unseren sozialen Medien unter Verwendung externer Ressourcen.
-- Eine neue Seite, die ein **Video** enthält, das beim Betreten der Website automatisch abgespielt wird und mit einer **FadeIn**-Animation erscheint.
-- Erstellen Sie eine neue Seite mit einem **Grid**, das unsere Projekte anzeigt.
+- Es muss ein **Header** erstellt werden, bei dem die Links einen sanften `hover`-Zustand mit einer Übergangsanimation haben. Diese Links sind in der mobilen Version nicht erforderlich.
+- Ein Abschnitt mit einer Beschreibung von **uns** und unseren Fähigkeiten, die durch **Fortschrittsbalken** dargestellt werden. Diese Balken müssen mit **CSS** animiert werden.
+- Ein **Banner** mit einem Hintergrundbild. Auf mobilen Bildschirmen sollte ein anderes Bild angezeigt werden (implementiere **Media Queries** oder **responsive Images**).
+- Kontaktformular mit **Inputs**. Alle Felder sollten die richtigen Typen und HTML-Validierungen für jedes Feld haben:
+   - **Name**, **Nachname**, **Telefon** (erforderliche Felder).
+   - **Radio-Input**, um die Frage "Wie hast du mich kennengelernt?" zu beantworten (erforderliches Feld):
+      - Universität
+      - Keepcoding-Kick-off
+      - Schule
+      - Auf GitHub
+   - **GitHub-Tag** (Verwende den regulären Ausdruck `^@[^\s]+` zur Validierung - `@username`).
+   - **Textarea** mit mehr Informationen über den Benutzer (maximal 180 Zeichen) (erforderliches Feld).
+   - **Checkbox** für den Newsletter.
+   - **Speichern**- und **Zurücksetzen**-Schaltflächen.
+- **Footer** mit Links zu unseren sozialen Netzwerken über externe Ressourcen.
+- Eine neue Seite, die ein **Video** enthält, das beim Betreten der Webseite automatisch abgespielt wird und mit einer **fadeIn**-Animation erscheint.
+- Erstelle eine neue Seite mit einem **Grid**, das unsere Projekte anzeigt.
 
 ### Optional
-- Erstellen Sie ein Burger-Menü nur mit CSS und einem Eingabe-Kontrollkästchen, um JS zu vermeiden.
-- Auf Github-Seiten bereitstellen.
+- Erstelle ein Burger-Menü nur mit CSS und einem Checkbox-Input, ohne JS zu verwenden.
+- Deployment auf Github Pages.
 - 404-Seite. Freies Design.
-- Seite 500. freies Design.
+- 500-Seite. Freies Design.
 
 ## Technologien
 
 Dieses Projekt wurde ausschließlich mit den folgenden Technologien entwickelt:
 
-- **HTML**: Zur Strukturierung des Inhalts und der Erstellung des Seitenlayouts.
-- **CSS**: Für das Design und Styling der Seite, um ein attraktives und konsistentes Benutzererlebnis zu gewährleisten.
+- **HTML**: Für die Strukturierung des Inhalts und das Erstellen der Webseitenstruktur.
+- **CSS**: Für das Design und die visuelle Gestaltung der Seite, um ein attraktives und konsistentes Benutzererlebnis zu gewährleisten.
 
 ## Installations- und Nutzungshinweise
 
-### Softwareanforderungen
+### Software-Anforderungen
 
-- **Git** (Erforderlich)
-- **SourceTree** (Optional)
-- **Visual Studio** (Version 1.99.0 verwendet) (Erforderlich)
-- **Live Server** (Visual Studio Addon, Optional)
+- **Git** (erforderlich)
+- **SourceTree** (optional)
+- **Visual Studio** (Ausgeführt in Version 1.99.0) (erforderlich)
+- **Live Server** (Visual Studio Addon, optional)
 
-### Programmbeschreibungen
+### Beschreibung der Programme
 
-- **Git**: Versionskontrollwerkzeug. Essenziell, um das Repository zu klonen.
-- **SourceTree**: Ein visuelles Tool zum Verwalten von Git-Repositories. Ermöglicht die einfache Interaktion mit Git, ohne die Befehlszeile zu verwenden.
-- **Visual Studio**: Integrierte Entwicklungsumgebung (IDE), die notwendig ist, um das Projekt auszuführen. Stellen Sie sicher, dass Sie Version 1.99.0 verwenden, um Kompatibilitätsprobleme zu vermeiden.
-- **Live Server**: Visual Studio-Erweiterung, die es ermöglicht, HTML-Dateien lokal in einem Browser anzuzeigen und Änderungen in Echtzeit zu sehen.
+- **Git**: Versionskontroll-Tool. Erforderlich, um das Repository zu klonen.
+- **SourceTree**: Ein visuelles Tool zur Verwaltung von Git-Repositories. Es ermöglicht eine einfache Interaktion mit Git ohne die Verwendung der Kommandozeile.
+- **Visual Studio**: Die integrierte Entwicklungsumgebung (IDE), die erforderlich ist, um das Projekt auszuführen. Stelle sicher, dass du Version 1.99.0 verwendest, um Kompatibilitätsprobleme zu vermeiden.
+- **Live Server**: Eine Visual Studio-Erweiterung, mit der du HTML-Dateien lokal in einem Browser anzeigen kannst, während Änderungen in Echtzeit angezeigt werden.
 
 ### Schritte zur Nutzung dieses Projekts
 
-1. Klonen Sie das GitHub-Repository mit **SourceTree** oder direkt mit folgendem Git-Befehl:
+1. Klone das Repository von GitHub mit **SourceTree** oder direkt mit dem folgenden Git-Befehl:
+
+```bash
+   git clone https://github.com/PabloSch26/keepcoding-html-css-submission-2.git 
+```
 
-   ```bash
-   git clone https://github.com/PabloSch26/keepcoding-html-css-submission-2.git
-   
-2. Sobald das Repository geklont wurde:
+2. Nachdem das Repository geklont wurde:
 
-2.1 Öffnen Sie das Projekt in Visual Studio, indem Sie den Projektordner zu Ihrem Arbeitsbereich hinzufügen.
+   2.1 Öffne das Projekt in Visual Studio, indem du das Projektverzeichnis zu deinem Arbeitsbereich hinzufügst.
 
-2.2 Öffnen Sie die Dateien index.html, proyect.html, 404.html und 500.html mit Live Server, um sie im Browser vorzuschauen.
+   2.2 Öffne die Dateien `index.html`, `project.html`, `404.html` und `500.html` mit Live Server, um sie im Browser anzuzeigen.
 
 ### Hinweise
 
-- Stellen Sie sicher, dass alle erforderlichen Programme korrekt installiert sind, bevor Sie mit dem Projekt fortfahren.
-- Wenn Sie SourceTree nicht verwenden möchten, können Sie das Repository direkt über das Terminal mit dem git clone-Befehl klonen.
+- Stelle sicher, dass du alle erforderlichen Programme installiert hast, bevor du mit dem Ausführen des Projekts fortfährst.
+- Wenn du SourceTree nicht verwenden möchtest, kannst du das Repository auch direkt mit dem Terminal klonen, indem du den Befehl `git clone` verwendest.
 
 ## Keine Beiträge oder Lizenzen
 

docs/README.es.md

@@ -1,16 +1,17 @@
+# Entrega Proyecto de CSS y HTML
+
 ## Selecciona tu lenguaje
 
 - 🇺🇸 [Inglés](README.md)
 - 🇩🇪 [Alemán](README.de.md)
 
 ## URL del Proyecto
-[https://pablosch26.github.io/keepcoding-html-css-submission-2](https://pablosch26.github.io/keepcoding-html-css-submission-2)
 
-# Entrega Proyecto de CSS y HTML
+[https://pablosch26.github.io/keepcoding-html-css-submission-2](https://pablosch26.github.io/keepcoding-html-css-submission-2)
 
 Este proyecto fue creado con el fin de ejercitar y demostrar los conocimientos adquiridos en clases virtuales sobre HTML y CSS.
 
-## El proyecto abarca los siguientes aspectos clave:
+## El proyecto abarca los siguientes aspectos clave
 
 - Implementación de **HTML** estructurado y su interacción con el **DOM**, acompañado de estilos en cascada mediante **CSS**.
 - Uso adecuado de la **semántica** de las etiquetas HTML, combinado con reglas CSS que mejoran la accesibilidad y el rendimiento.
@@ -25,6 +26,7 @@ Este proyecto fue creado con el fin de ejercitar y demostrar los conocimientos a
 - Garantía de la **cohesión y limpieza del código**, con una estructura organizada que facilita el mantenimiento y la escalabilidad del proyecto.
 
 ## Objetivo del Proyecto
+
 El objetivo principal de este proyecto es desarrollar un **portfolio** personal (o de un personaje de ficción), aplicando los conocimientos adquiridos en clase. La idea es crear una presentación interactiva y visualmente atractiva que muestre las habilidades y proyectos de nuestro personaje elegido, utilizando las tecnologías y prácticas aprendidas durante el curso.
 
 ## Detalles del Proyecto
@@ -33,21 +35,22 @@ El objetivo principal de este proyecto es desarrollar un **portfolio** personal
 - Una sección con una descripción de **nosotros** y nuestras habilidades representadas mediante **barras de progreso**. Estas barras deben estar animadas utilizando **CSS**.
 - Un **banner** que deberá tener una imagen de fondo. En pantallas móviles, debe mostrarse otra imagen diferente (Implementar **media queries** o **Responsive images**).
 - Formulario de contacto mediante **inputs**. Todos deben tener tanto los tipos correctos como la validación HTML de cada campo:
-   - **Nombre**, **Apellidos**, **Teléfono** (campos requeridos).
-   - **Radio input** para responder a la pregunta "¿cómo me conociste?" (campo requerido):
-      - Universidad
-      - Keepcoding kick-off
-      - Colegio
-      - En GitHub
-   - **Tag de GitHub** (Usar expresión regular `^@[^\s]+` para la validación - `@username`).
-   - **Textarea** con más información del usuario (máximo 180 caracteres) (campo requerido).
-   - **Checkbox** para el acceso a la **newsletter**.
-   - Botones de **guardar** y **reset**.
+  - **Nombre**, **Apellidos**, **Teléfono** (campos requeridos).
+  - **Radio input** para responder a la pregunta "¿cómo me conociste?" (campo requerido):
+    - Universidad
+    - Keepcoding kick-off
+    - Colegio
+    - En GitHub
+  - **Tag de GitHub** (Usar expresión regular `^@[^\s]+` para la validación - `@username`).
+  - **Textarea** con más información del usuario (máximo 180 caracteres) (campo requerido).
+  - **Checkbox** para el acceso a la **newsletter**.
+  - Botones de **guardar** y **reset**.
 - **Footer** con enlaces a nuestras redes sociales mediante recursos externos.
 - Nueva página que contenga un **video** que se reproduzca automáticamente al entrar en la web y aparezca con una animación de **fadeIn**.
 - Crear una nueva página con un **grid** que muestre nuestros proyectos.
 
 ### Opcional
+
 - Crear un menú burger con solo CSS y un input checkbox, para no usar JS.
 - Despliegue en Github pages.
 - Página de 404. Libre diseño.
@@ -80,8 +83,9 @@ Este proyecto fue desarrollado utilizando exclusivamente con las siguientes tecn
 
 1. Clona el repositorio de GitHub utilizando **SourceTree** o directamente con el siguiente comando mediante Git:
 
-   ```bash
-   git clone https://github.com/PabloSch26/keepcoding-html-css-submission-2.git
+```bash
+   git clone https://github.com/PabloSch26/keepcoding-html-css-submission-2.git 
+```
 
 2. Una vez clonado el repositorio:
 
@@ -101,14 +105,25 @@ Este proyecto no cuenta con contribuciones externas ni licencia en este momento.
 ## Vista previa del proyecto
 
 ### Index View
+
 ![Index View](../etc/preview_images/index.png)
+
 ### Index Mobile View
+
 ![Index Mobile View](../etc/preview_images/index_mobile.png)
+
 ### Projects View
+
 ![Projects View](../etc/preview_images/projects.png)
+
 ### Projects Mobile View
+
 ![Projects Mobile View](../etc/preview_images/projects_mobile.png)
+
 ### 404 View
+
 ![404 View](../etc/preview_images/404.png)
+
 ### 404 Mobile View
+
 ![404 Mobile View](../etc/preview_images/404_mobile.png)