diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/foto-perfil.jpg b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/foto-perfil.jpg new file mode 100644 index 0000000..50ac9a9 Binary files /dev/null and b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/foto-perfil.jpg differ diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen-hero.jpg b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen-hero.jpg new file mode 100644 index 0000000..009602c Binary files /dev/null and b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen-hero.jpg differ diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen02.jpg b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen02.jpg new file mode 100644 index 0000000..a5b5de8 Binary files /dev/null and b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen02.jpg differ diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen03.jpg b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen03.jpg new file mode 100644 index 0000000..a134cd8 Binary files /dev/null and b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen03.jpg differ diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen04.jpg b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen04.jpg new file mode 100644 index 0000000..4d292e1 Binary files /dev/null and b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen04.jpg differ diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen05.jpg b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen05.jpg new file mode 100644 index 0000000..9e8bd9d Binary files /dev/null and b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen05.jpg differ diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen06.jpg b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen06.jpg new file mode 100644 index 0000000..989ee40 Binary files /dev/null and b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen06.jpg differ diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen07.jpg b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen07.jpg new file mode 100644 index 0000000..8b67b4a Binary files /dev/null and b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen07.jpg differ diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen08.jpg b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen08.jpg new file mode 100644 index 0000000..f7e653d Binary files /dev/null and b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen08.jpg differ diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/index.html b/bitacoras/Tessbb/encargo-05/Portafolio/index.html new file mode 100644 index 0000000..9f67472 --- /dev/null +++ b/bitacoras/Tessbb/encargo-05/Portafolio/index.html @@ -0,0 +1,106 @@ + + + + + + Portafolio de Diseño + + + +
+ +

Diseño gráfico

+ +
+
+ +
+
+ + Foto de perfil +
+
+ +

Mi nombre ...

+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Id ut, incidunt voluptas perferendis, rem impedit molestias possimus quam laboriosam ratione repellendus molestiae vel delectus, dolore quo nemo voluptate fuga quas?Lorem ipsum dolor sit amet consectetur adipisicing elit. Id ut, incidunt voluptas perferendis, rem impedit molestias possimus quam laboriosam ratione repellendus molestiae vel delectus, dolore quo nemo voluptate fuga quas?Lorem ipsum dolor sit amet consectetur adipisicing elit. Id ut, incidunt voluptas perferendis, rem impedit molestias possimus quam laboriosam ratione repellendus molestiae vel delectus, dolore quo nemo voluptate fuga quas?Lorem ipsum dolor sit amet consectetur adipisicing elit. Id ut, incidunt voluptas perferendis, rem impedit molestias possimus quam laboriosam ratione repellendus molestiae vel delectus, dolore quo nemo voluptate fuga quas?

+
+
+ +
+

Portafolio

+ + +
+ +
+

Contacto

+ + Instagram +
+
+ + + + + + diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/proyecto-01.css b/bitacoras/Tessbb/encargo-05/Portafolio/proyecto-01.css new file mode 100644 index 0000000..974aaa6 --- /dev/null +++ b/bitacoras/Tessbb/encargo-05/Portafolio/proyecto-01.css @@ -0,0 +1,154 @@ +/* ---------------------------------------------- +Manual de Estilos para proyecto-01.html + ---------------------------------------------- */ + +/* Reset de estilos por defecto */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Estilos del cuerpo de la página */ +body { + font-family: Arial, sans-serif; /* Familia de fuente */ + line-height: 1.6; /* Altura de línea */ + color: rgb(131, 0, 0); /* Color principal del texto */ +} + +/* Estilos del encabezado */ +header { + text-align: center; /* Alinear texto al centro */ + padding: 1rem; /* Relleno interior */ + background: rgb(131, 0, 0); /* Color de fondo */ + color: rgb(255, 239, 239); /* Color del texto */ +} + +/* Estilos del contenedor de proyecto */ +.project-container { + display: flex; /* Mostrar como flexbox */ + flex-direction: column; /* Dirección de los elementos */ + max-width: 1200px; + /*flex-wrap: wrap;Arreglo para resposividad ----------------------------------------------------------------------------------------------------------*/ + /*-width: 1200px; Ancho máximo */ + margin: 2rem auto; /* Márgenes */ + padding: 1rem; /* Relleno interior */ + background: rgb(255, 239, 239); /* Color de fondo */ + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra */ +} + +/* Estilos de la sección de imágenes del proyecto */ +.project-images { + /* flex: 1; Flexibilidad */ + display: flex; /* Mostrar como flexbox */ + flex-direction: column; /* Dirección de los elementos */ + align-items: center; /* Alinear elementos */ + padding: 1rem; /* Relleno interior */ + border-right: 1px solid rgb(255, 239, 239); /* Borde derecho */ +} + +/* Estilos de las imágenes del proyecto */ +.project-images img { + max-width: 100%; /* Ancho máximo del 100% */ + height: auto; /* Altura automática */ + margin-bottom: 1rem; /* Margen inferior */ + border-radius: 10px; /* Borde redondeado */ +} + +/* Estilos de los detalles del proyecto */ +.project-details { + /* flex: 1;Flexibilidad */ + padding: 1rem; /* Relleno interior */ +} + +.project-details h2 { + margin-bottom: 1rem; /* Margen inferior */ + font-size: 2rem; /* Tamaño de fuente */ +} + +.project-details p { + margin-bottom: 1rem; /* Margen inferior */ +} + +.project-details ul { + list-style: none; /* Quitar viñetas */ + padding: 0; /* Padding cero */ +} + +.project-details ul li { + margin-bottom: 0.5rem; /* Margen inferior */ +} + +.thumbnail-container { + display: flex; /* Mostrar como flexbox */ + justify-content: center; /* Justificar al centro */ + align-items: center; /* Alinear al centro */ + margin-top: 10px; /* Margen superior */ +} + +.thumbnail { + width: 80px; /* Ancho de miniatura */ + height: 60px; /* Alto de miniatura */ + margin: 0 5px; /* Margen */ + cursor: pointer; /* Cursor tipo puntero */ + border: 1px solid #ccc; /* borde estatico */ + border-radius: 5px; /* Borde redondeado */ +} + +.thumbnail:hover { + border-color: rgb(131, 0, 0); /* Color del borde al pasar el mouse */ +} + +footer { + text-align: center; /* Alinear texto al centro */ + padding: 1rem 0; /* Relleno interior */ + background: rgb(131, 0, 0); /* Color de fondo */ + color: rgb(255, 239, 239); /* Color del texto */ + margin-top: 2rem; /* Margen superior */ +} + +/*Resposividad*/ + +/* Media Queries para Responsividad */ +@media (max-width: 768px) { + .project-container { + flex-direction: column; + padding: 1rem; + } + .project-images { +/* border-right: none;*/ + border-bottom: 1px solid #ddd; + padding-bottom: 1rem; + } + .thumbnail { + width: 60px; + height: 45px; + } +} + +/* Media Queries para Pantallas Grandes */ +@media (min-width: 769px) { + .project-container { + flex-direction: row; + padding: 2rem; + } + .project-images { + flex: 1; + border-right: 1px solid #ddd; + border-bottom: none; + padding-right: 2rem; + } + .project-details { + flex: 1; + padding-left: 2rem; + } +} + +/* Ajustes de imagen principal */ +.main-image img { + width: 100%; + height: auto; + max-height: 400px; /* Ajustar según la altura deseada */ + object-fit: cover; + border-radius: 10px; +} \ No newline at end of file diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/proyecto-01.html b/bitacoras/Tessbb/encargo-05/Portafolio/proyecto-01.html new file mode 100644 index 0000000..9778b14 --- /dev/null +++ b/bitacoras/Tessbb/encargo-05/Portafolio/proyecto-01.html @@ -0,0 +1,54 @@ + + + + + + Proyecto 1 + + + +
+ +

Evolución gráfica en Chile

+
+ +
+
+
+ + Imagen del Proyecto 1 +
+
+ + Miniatura 1 + Miniatura 2 + + Miniatura 3 + Miniatura 4 +
+
+ +
+ +

Evolución gráfica en Chile

+ +

El proyecto consistía en crear un fanzine sobre un tema de libre elección. Nuestro equipo eligió enfocarse en la gráfica en Chile desde 1973 hasta el 2020.

+ +
+
+ + + + + + diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/proyecto-01.js b/bitacoras/Tessbb/encargo-05/Portafolio/proyecto-01.js new file mode 100644 index 0000000..7b5b34f --- /dev/null +++ b/bitacoras/Tessbb/encargo-05/Portafolio/proyecto-01.js @@ -0,0 +1,15 @@ +// Espera a que el contenido del DOM esté completamente cargado +document.addEventListener('DOMContentLoaded', function() { + // Selecciona todas las miniaturas + const thumbnails = document.querySelectorAll('.thumbnail'); + + // Agrega un evento de clic a cada miniatura + thumbnails.forEach(thumbnail => { + thumbnail.addEventListener('click', function() { + // Obtiene la fuente de la imagen desde el atributo data-src + const imageSrc = this.getAttribute('data-src'); + // Cambia la imagen principal a la fuente de la miniatura seleccionada + document.getElementById('mainImg').src = imageSrc; + }); + }); +}); diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/script.js b/bitacoras/Tessbb/encargo-05/Portafolio/script.js new file mode 100644 index 0000000..3c795e1 --- /dev/null +++ b/bitacoras/Tessbb/encargo-05/Portafolio/script.js @@ -0,0 +1,11 @@ +// Selecciona todos los enlaces dentro del nav y agrega un evento de clic a cada uno +document.querySelectorAll('nav a').forEach(anchor => { + anchor.addEventListener('click', function(e) { + // Previene el comportamiento predeterminado del enlace + e.preventDefault(); + // Obtiene el destino del enlace a través del atributo href + const target = document.querySelector(this.getAttribute('href')); + // Desplaza suavemente hasta el destino + target.scrollIntoView({ behavior: 'smooth' }); + }); +}); diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/styles.css b/bitacoras/Tessbb/encargo-05/Portafolio/styles.css new file mode 100644 index 0000000..67b58bc --- /dev/null +++ b/bitacoras/Tessbb/encargo-05/Portafolio/styles.css @@ -0,0 +1,236 @@ +/* ---------------------------------------------- +Manual de Estilos para index.html + ---------------------------------------------- */ + +/* Reset de estilos por defecto */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Estilos del cuerpo de la página */ +body { + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + line-height: 1.6; + background-color: rgb(255, 239, 239); /* Color de fondo del cuerpo */ + color: rgb(131, 0, 0); /* Color principal del texto */ +} + +/* Estilos del encabezado hero */ +header.hero { + background: url("imagenes/imagen-hero.jpg"); /* Imagen de fondo del encabezado */ + background-size: cover; + background-position: center top; /* Posición de la imagen de fondo */ + background-attachment: fixed; + height: 100vh; /* Altura del encabezado hero, ajustable según preferencias */ + color: rgb(255, 239, 239); /* Color del texto en el encabezado */ + text-align: center; + display: flex; + font-size: 30px; /* Tamaño de fuente del texto principal */ + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; + z-index: 1; +} + +/* Oscurecer un poco la imagen de fondo */ +header.hero::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: -1; +} + +/* Estilos de la navegación en el encabezado */ +header nav ul { + list-style: none; /* Eliminar viñetas de la lista */ + margin-top: 20px; /* Margen superior */ +} + +header nav ul li { + display: inline; /* Mostrar elementos en línea */ + margin: 0 15px; /* Margen entre elementos */ +} + +header nav ul li a { + color: rgb(255, 239, 239); /* Color de los enlaces */ + text-decoration: none; /* Quitar subrayado de los enlaces */ + font-size: 1.2rem; /* Tamaño de fuente de los enlaces */ + font-weight: bold; +} + +/* Estilos de la sección "Sobre Mí" */ +.about-section { + display: flex; + flex-direction: column; + align-items: center; /* Centrar verticalmente los elementos */ + margin-bottom: 30px; /* Espacio bajo la sección */ + padding: 20px; /*Agregado para responsividad ----------------------------------------------------------------------------------*/ +} +/*Agregado para responsividad ----------------------------------------------------------------------------------*/ +.about-content { + text-align: center; + max-width: 600px; +} + +.profile-wrapper { + flex-shrink: 0; /* Evitar que la imagen se reduzca */ + margin-right: 40px; /* Margen a la derecha de la imagen */ + margin-bottom: 20px; +} + +.about-content { + flex-grow: 1; /* Ocupar espacio restante */ +} + +/* -------------------------Media Queries para Pantallas Grandes */ +@media (min-width: 769px) { + .about-section { + flex-direction: row; + align-items: flex-start; + justify-content: center; + } + .profile-wrapper { + margin-right: 40px; + margin-bottom: 0; + } + .about-content { + text-align: left; + max-width: none; + } +} + +.profile-pic { + width: 300px; /* Ancho de la imagen */ + height: 300px; /* Alto de la imagen */ + border-radius: 50%; /* Borde redondeado */ + border: 5px solid rgb(131, 0, 0); /* Borde blanco */ + object-fit: cover; /* Ajuste de la imagen */ +} + +/* Estilos del contenido principal */ +main { + background: rgb(255, 239, 239); /* Color de fondo del contenido principal */ + padding: 2rem; /* Relleno interior */ +} + +section { + padding: 2rem 0; /* Relleno superior e inferior de las secciones */ +} + +/* Estilos del formulario */ +form label { + display: block; /* Mostrar etiquetas en bloque */ + margin-top: 10px; /* Margen superior */ +} + +form input, form textarea, form button { + width: 100%; /* Ancho completo */ + padding: 10px; /* Relleno interior */ + margin-top: 5px; /* Margen superior */ +} + +form button { + background: rgb(131, 0, 0); /* Color de fondo del botón */ + color: rgb(255, 239, 239); /* Color del texto del botón */ + border: none; /* Quitar borde del botón */ + cursor: pointer; /* Cursor tipo puntero */ + padding: 10px 20px; /* Relleno interior */ +} + +/* Estilos del pie de página */ +footer { + text-align: center; /* Alinear texto al centro */ + padding: 1rem 0; /* Relleno interior */ + background: rgb(131, 0, 0); /* Color de fondo */ + color: rgb(255, 239, 239); /* Color del texto */ +} + +/* Estilos de las imágenes */ +img { + max-width: 100%; /* Ancho máximo del 100% */ + margin-bottom: 30px; /* Margen inferior */ + display: block; /* Mostrar como bloque */ + border-radius: 5px; /* Borde redondeado */ +} + +/* Estilos del contenedor de proyectos */ +.container { + columns: 3 320px; /* Distribución en columnas */ + column-gap: 40px; /* Espacio entre columnas */ +} + +/* Estilos de las cajas de proyecto */ +.box { + position: relative; /* Posición relativa */ + border-radius: 5px; /* Borde redondeado */ + box-shadow: 0 0 20px 0 #0007; /* Sombra */ +} + +/* Efecto de superposición al pasar el mouse */ +.box:hover .overlay { + height: 100%; /* Altura al 100% */ + cursor: pointer; /* Cursor tipo puntero */ +} + +.overlay h2 { + color: rgb(255, 239, 239); /* Color del texto */ + font-size: 30px; /* Tamaño de fuente */ + position: absolute; /* Posición absoluta */ + top: 50%; /* Alineación vertical */ + left: 50%; /* Alineación horizontal */ + text-align: center; /* Alinear texto al centro */ + transform: translate(-50%,-50%); /* Centrar */ +} + +.overlay { + position: absolute; /* Posición absoluta */ + bottom: 0; /* Alinear abajo */ + left: 0; /* Alinear a la izquierda */ + background: #000000b2; /* Color de fondo semi-transparente */ + width: 100%; /* Ancho completo */ + height: 0%; /* Altura inicial al 0% */ + border-radius: 3px; /* Borde redondeado */ + transition: .5s ease; /* Transición suave */ + overflow: hidden; /* Ocultar contenido sobrante */ +} + +/*resposividad--------------------------------------------------------------------------------------*/ + +/* Media Queries para Responsividad */ +@media (max-width: 768px) { + header.hero { + font-size: 20px; + } + header nav ul { + display: flex; + flex-direction: column; + align-items: center; + } + header nav ul li { + margin: 10px 0; + } + .about-section { + flex-direction: column; + text-align: center; + } + .profile-wrapper { + margin: 0 0 20px 0; + } + .profile-pic { + width: 200px; + height: 200px; + } + .container { + columns: 1 100%; + } + .box { + margin-bottom: 20px; + } +} \ No newline at end of file diff --git a/bitacoras/Tessbb/encargo-05/README.md b/bitacoras/Tessbb/encargo-05/README.md index 6910219..226979f 100644 --- a/bitacoras/Tessbb/encargo-05/README.md +++ b/bitacoras/Tessbb/encargo-05/README.md @@ -1 +1,31 @@ # encargo-05 + +## 2024-06-28 quinto encargo + +## **Template: portafolio final** + +### - [Plantilla portafolio](https://tessbb.github.io/portafolio-01/) + +La plantilla, podría ser la base para los portafolios, es un primer acercamiento a una posible página web de un portafolio. + +### **Visualización portafolio** + +![captura-1](imagenes-final/captura-01.png) +![captura-2](imagenes-final/captura-02.png) +![captura-3](imagenes-final/captura-03.png) +![captura-4](imagenes-final/captura-04.png) +![captura-05](imagenes-final/captura-05.png) +![captura-06](imagenes-final/captura-06.png) +![captura-07](imagenes-final/captura-07.png) +![captura-08](imagenes-final/captura-08.png) +![captura-09](imagenes-final/captura-09.png) +![captura-10](imagenes-final/captura-10.png) +![captura-11](imagenes-final/captura-11.png) + +La página web es responsiva, respecto al tamaño de la pantalla de donde sea abierta, todo es editable. Dentro del mismo código van las instrucciones de uso, además de algunas “recomendaciones”. + +![captura-12](imagenes-final/captura-12.png) + + + + diff --git a/bitacoras/Tessbb/encargo-05/imagenes-final/captura-01.png b/bitacoras/Tessbb/encargo-05/imagenes-final/captura-01.png new file mode 100644 index 0000000..04441b9 Binary files /dev/null and b/bitacoras/Tessbb/encargo-05/imagenes-final/captura-01.png differ diff --git a/bitacoras/Tessbb/encargo-05/imagenes-final/captura-02.png b/bitacoras/Tessbb/encargo-05/imagenes-final/captura-02.png new file mode 100644 index 0000000..06f0fa9 Binary files /dev/null and b/bitacoras/Tessbb/encargo-05/imagenes-final/captura-02.png differ diff --git a/bitacoras/Tessbb/encargo-05/imagenes-final/captura-03.png b/bitacoras/Tessbb/encargo-05/imagenes-final/captura-03.png new file mode 100644 index 0000000..a22d7b2 Binary files /dev/null and b/bitacoras/Tessbb/encargo-05/imagenes-final/captura-03.png differ diff --git a/bitacoras/Tessbb/encargo-05/imagenes-final/captura-04.png b/bitacoras/Tessbb/encargo-05/imagenes-final/captura-04.png new file mode 100644 index 0000000..f7c721d Binary files /dev/null and b/bitacoras/Tessbb/encargo-05/imagenes-final/captura-04.png differ diff --git a/bitacoras/Tessbb/encargo-05/imagenes-final/captura-05.png b/bitacoras/Tessbb/encargo-05/imagenes-final/captura-05.png new file mode 100644 index 0000000..8aaa3d4 Binary files /dev/null and b/bitacoras/Tessbb/encargo-05/imagenes-final/captura-05.png differ diff --git a/bitacoras/Tessbb/encargo-05/imagenes-final/captura-06.png b/bitacoras/Tessbb/encargo-05/imagenes-final/captura-06.png new file mode 100644 index 0000000..61b14b8 Binary files /dev/null and b/bitacoras/Tessbb/encargo-05/imagenes-final/captura-06.png differ diff --git a/bitacoras/Tessbb/encargo-05/imagenes-final/captura-07.png b/bitacoras/Tessbb/encargo-05/imagenes-final/captura-07.png new file mode 100644 index 0000000..73f2939 Binary files /dev/null and b/bitacoras/Tessbb/encargo-05/imagenes-final/captura-07.png differ diff --git a/bitacoras/Tessbb/encargo-05/imagenes-final/captura-08.png b/bitacoras/Tessbb/encargo-05/imagenes-final/captura-08.png new file mode 100644 index 0000000..e947157 Binary files /dev/null and b/bitacoras/Tessbb/encargo-05/imagenes-final/captura-08.png differ diff --git a/bitacoras/Tessbb/encargo-05/imagenes-final/captura-09.png b/bitacoras/Tessbb/encargo-05/imagenes-final/captura-09.png new file mode 100644 index 0000000..7b928e9 Binary files /dev/null and b/bitacoras/Tessbb/encargo-05/imagenes-final/captura-09.png differ diff --git a/bitacoras/Tessbb/encargo-05/imagenes-final/captura-10.png b/bitacoras/Tessbb/encargo-05/imagenes-final/captura-10.png new file mode 100644 index 0000000..d634c59 Binary files /dev/null and b/bitacoras/Tessbb/encargo-05/imagenes-final/captura-10.png differ diff --git a/bitacoras/Tessbb/encargo-05/imagenes-final/captura-11.png b/bitacoras/Tessbb/encargo-05/imagenes-final/captura-11.png new file mode 100644 index 0000000..f703b9d Binary files /dev/null and b/bitacoras/Tessbb/encargo-05/imagenes-final/captura-11.png differ diff --git a/bitacoras/Tessbb/encargo-05/imagenes-final/captura-12.png b/bitacoras/Tessbb/encargo-05/imagenes-final/captura-12.png new file mode 100644 index 0000000..54090a2 Binary files /dev/null and b/bitacoras/Tessbb/encargo-05/imagenes-final/captura-12.png differ