Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eugenia1984/profile-page
Página de perfil, tarea realizada en dupla, para el curso de CILSA
https://github.com/eugenia1984/profile-page
bootstrap5 css3 html5 javascript
Last synced: about 2 months ago
JSON representation
Página de perfil, tarea realizada en dupla, para el curso de CILSA
- Host: GitHub
- URL: https://github.com/eugenia1984/profile-page
- Owner: eugenia1984
- Created: 2024-07-18T10:43:09.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-07-23T15:51:03.000Z (5 months ago)
- Last Synced: 2024-07-23T22:25:04.842Z (5 months ago)
- Topics: bootstrap5, css3, html5, javascript
- Language: HTML
- Homepage: https://eugenia1984.github.io/profile-page/
- Size: 1.05 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tarea en duplas * Creación de una página de perfil
## Consigna:
1. Crear una página utilizando Bootstrap y los elementos que hemos visto durante las últimas dos clases.
2. La página debe incluir lo siguiente:
- **Barra de Navegación**: utiliza la barra de navegación de Bootstrap para crear un menú simple con al menos tres secciones: Inicio, Perfil, y Contacto.
- **Carrusel de Imágenes**: agrega un carrusel con al menos tres imágenes representativas en la sección de "Inicio". Utiliza las clases de Bootstrap para el carrusel y deben asegurarse de incluir controles de navegación.
- **Tarjeta de perfil:** En la sección de "Perfil", deben crear una tarjeta con una imagen de perfil, tu nombre como título y una breve descripción acerca de tu persona en el cuerpo de la tarjeta. Pueden agregar un botón para ver más información.
- **Formulario de Contacto**: en la sección de "Contacto", deben utilizar un formulario básico de Bootstrap con campos para Nombre, Correo Electrónico y Mensaje. A su vez, deben agregar un botón de enviar con el estilo de Bootstrap.
*Importante*: deben asegurarse que la página sea responsiva utilizando las clases de grid de Bootstrap para distribuir los elementos correctamente en diferentes tamaños de pantalla.
---
## Integrantes:
- [María Eugenia Costa](https://github.com/eugenia1984)
- [Ricardo Ramos](https://github.com/elequipoderiki)
---
## Tecnologias utilizadas:
- HTML5
- CSS3
- JavaScript
- Bootstrap
---
## Demostración:
[https://eugenia1984.github.io/profile-page/](https://eugenia1984.github.io/profile-page/)
- **Home page** con el carousel de imágenes.
-Vista Tablet / Desktop en modo claro:
- **Header** y **Footer** con **Barra de navegación** responsiva y con el **icono** para cambiar el tema entre claro / oscuro:
-Vista Mobile en modo oscuro:
- **Página de Perfil** en tablet / desktop, en modo oscuro:
- **Página de perfil** en mobile, modo claro.
- **Formulario de contacto** con validaciones:
---
## Modo de trabajo:
Al trabajar en dupla, creamos la rama principal, nombrada m`main` y a partir de la misma creamos las ramas para ir agregando las funcionalidades a la página.
Para organizar y dividir las tareas creamos **issues**:
![image](https://github.com/user-attachments/assets/adfb0871-46d2-4388-84ae-b9eda44847ce)
Una vez que el issue era completado se iban creanod los **pull request** para actualizar la branch `main`.
![image](https://github.com/user-attachments/assets/ce230772-ab8d-4819-b696-17d3ae77e242)