diff --git a/contacto.html b/contacto.html new file mode 100644 index 0000000..ab726ff --- /dev/null +++ b/contacto.html @@ -0,0 +1,42 @@ + + + + + + Contacto | Mi Portafolio + + + + +
+ +
+ +
+ +
+
+

Si estás aquí es porque te gusta lo que ves así, que no tardes mucho en escribirme que necesito comer.

+

Si tienes alguna pregunta, no dudes en ponerte en contacto conmigo. Estaré encantado de ayudarte.

+
+

Teléfono: +34 626 76 23 96

+

Email: dg.carlossalado@gmail.com

+
+
+
+ +
+ + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..e647d91 --- /dev/null +++ b/index.html @@ -0,0 +1,55 @@ + + + + + + Inicio | Mi Portafolio + + + + +
+ +
+ +
+ + +
+ 
+            
ESTO SE SUELE
+LLAMAR PORTFOLIO

+            
+
+
+
+

+ Buenas tardes ciudadan@, soy Carlos Salado Palmar, diseñador gráfico freelance. Mi carrera comenzó en el IES Murillo de Sevilla, donde cursé un Bachillerato Artístico (no, no solo hacía dibujitos). Luego decidí ponerme serio y me gradué en dos Grados Superiores de Diseño Gráfico en el IES Llanes, porque por mucho talento que tenga, necesito títulos para que la gente me tome en serio. +
+
+ Me encanta seguir aprendiendo nuevas tecnologías y novedades en cuanto al diseño gráfico, lo que básicamente significa que me meto en tutoriales interminables para entender esas "nuevas tecnologías" que prometen hacerme la vida más fácil, pero solo la complican más. +
+
+ Así que ya sabes, si necesitas un diseño funcional, profesional y que puedas mostrar con orgullo (te prometo que no siempre soy sarcástico), aquí estoy para transformar tus ideas en algo que realmente destaque. +

+ +
+ + +
+ + + + \ No newline at end of file diff --git a/proyecto1.html b/proyecto1.html new file mode 100644 index 0000000..76ac785 --- /dev/null +++ b/proyecto1.html @@ -0,0 +1,39 @@ + + + + + + DCAM | Proyecto + + + + +
+ +
+ +
+ +
+ DCAM + DCAM +
+ + +
+ + + + \ No newline at end of file diff --git a/proyecto2.html b/proyecto2.html new file mode 100644 index 0000000..2f150e0 --- /dev/null +++ b/proyecto2.html @@ -0,0 +1,50 @@ + + + + + + DCAM | Proyecto + + + + +
+ +
+ +
+ +
+ wrappel1 +
+
+ wrappel2 +
+
+ wrappel3 +
+
+ insta +
+
+ mascota +
+ + +
+ + + + \ No newline at end of file diff --git a/proyecto3.html b/proyecto3.html new file mode 100644 index 0000000..1618033 --- /dev/null +++ b/proyecto3.html @@ -0,0 +1,44 @@ + + + + + + DCAM | Proyecto + + + + +
+ +
+ +
+ +
+ yewerly +
+
+ yewerlylogos2 +
+
+ yewerlysimbolo +
+ + +
+ + + + \ No newline at end of file diff --git a/proyecto4.html b/proyecto4.html new file mode 100644 index 0000000..9c50029 --- /dev/null +++ b/proyecto4.html @@ -0,0 +1,44 @@ + + + + + + DCAM | Proyecto + + + + +
+ +
+ +
+ +
+ sangre +
+
+ sangre2 +
+
+ mockup +
+ + +
+ + + + \ No newline at end of file diff --git a/proyecto5.html b/proyecto5.html new file mode 100644 index 0000000..330009b --- /dev/null +++ b/proyecto5.html @@ -0,0 +1,44 @@ + + + + + + DCAM | Proyecto + + + + +
+ +
+ +
+ +
+ logo +
+
+ motivo +
+
+ mockup +
+ + +
+ + + + \ No newline at end of file diff --git a/proyecto6.html b/proyecto6.html new file mode 100644 index 0000000..83bf992 --- /dev/null +++ b/proyecto6.html @@ -0,0 +1,55 @@ + + + + + + DCAM | Proyecto + + + + +
+ +
+ +
+ +
+
+ logo +
+
+ motivo +
+
+ mockup +
+
+ logo +
+
+ motivo +
+
+ mockup +
+
+ + +
+ + + + \ No newline at end of file diff --git a/proyectos.html b/proyectos.html new file mode 100644 index 0000000..d60b116 --- /dev/null +++ b/proyectos.html @@ -0,0 +1,53 @@ + + + + + + Proyectos | Mi Portafolio + + + + +
+ +
+ +
+ +
+ + DCAM + + + WRAPPEL + + + YV + + + Sangre Sanluqueña + + + borne + + + carteles +
Cartelería
+ +
+ +
+ + + + \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css new file mode 100644 index 0000000..7a258e4 --- /dev/null +++ b/static/css/style.css @@ -0,0 +1,332 @@ +/* Aplica la tipografía de Google Fonts (Roboto) a todo el body */ +body { + font-family: 'Roboto', sans-serif; + margin: 0; + padding: 0; + background-color: #000000; +} + +.salmon { + color: #F2D0BD; + font-family: 'Roboto', sans-serif; + font-style: italic; + letter-spacing: 1px; +} + +/* Estilo para el menú de navegación */ +header nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + background-color: transparent; /* Fondo transparente */ +} + +/* Estilo para la lista a la izquierda (ícono) */ +.nav-left { + display: flex; + align-items: center; +} + +.nav-left li { + margin-right: 20px; /* Espaciado entre el ícono y los otros elementos */ +} + +/* Estilo para la lista a la derecha (enlaces) */ +.nav-right { + display: flex; + justify-content: flex-end; + align-items: center; +} + +.nav-right li { + margin-left: 20px; /* Espaciado entre los enlaces */ +} + +/* Estilo para los enlaces */ +.nav-right li a { + text-decoration: none; + color: rgb(255, 255, 255); /* Color del texto */ + font-size: 1.2rem; + position: relative; /* Necesario para colocar la línea debajo */ +} + +/* Efecto de la línea debajo de los enlaces */ +.nav-right li a::after { + content: ''; + position: absolute; + bottom: -5px; /* Distancia debajo del texto */ + left: 0; + width: 0%; + height: 2px; + background-color: white; + transition: width 0.3s ease; /* Animación suave */ +} + +/* Cuando se pasa el ratón sobre el enlace */ +.nav-right li a:hover::after { + width: 100%; /* Hace que la línea se expanda de izquierda a derecha */ +} + +/* El hover ya no cambia el color */ +.nav-right li a:hover { + color: rgb(255, 255, 255); /* El color se mantiene igual */ +} + +#hero { + text-align: left; + padding: 50px 0px 0px; + background-image: url('../images/.jpg'); + background-size: cover; + background-position: center; +} + +#hero h1 { + margin-top: 450px; + font-size: 9rem; + color: #fff; +} + +#hero p { + font-size: 1.2rem; + color: #fff; +} + +#about, #projects, #contact { + padding: 50px; + background-color: #fff; +} + +#about img.profile-pic { + width: 150px; + border-radius: 50%; + margin-bottom: 20px; +} + +.proyectos { + color:red; +} + +#sobre_mi{ + background-color: #F2D0BD; + padding: 0px 0px 300px; +} + +#sobre_mi p{ + width: 680px; + color:rgb(0, 0, 0); + font-size: 27px; + text-align: justify; + padding: 130px 100px 20px; + float: left; +} + +#sobre_mi img{ + position: relative; + left: 100px; + top: 180px; +} + +div p span { + font-size: 40px; + font-weight: bold; + font-style: italic; +} + +footer { + clear: both; +} + +footer p { + color:rgb(255, 255, 255); + text-align: center; + font-weight: bold; + padding: 20px; + margin:0px; +} + +.diseños { + display: grid; + grid-template-columns: repeat(2, 1fr); /* 2 columnas */ + grid-template-rows: repeat(3, 1fr); /* 3 filas */ + gap: 0px; + margin: auto; + background-color: rgb(0, 0, 0); +} + +/* Establecemos el aspect-ratio a los elementos dentro de la cuadrícula */ +.diseños a { + position: relative; + display: block; + background-color: #ccc; + text-decoration: none; + transition: background-color 0.3s ease; + overflow: hidden; + aspect-ratio: 1; /* Esto asegura que el enlace se mantenga cuadrado */ + width: 100%; /* Ajusta el ancho del enlace para ocupar todo el espacio disponible */ + height: 100%; /* Ajusta la altura del enlace */ +} + +.diseños a:hover { + background-color: #888; +} + +.diseños a img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease, filter 0.3s ease; /* Agregamos la transición para el filtro */ + filter: grayscale(100%); /* Aplica la escala de grises por defecto */ +} + +.diseños a:hover img { + transform: scale(1.1); + filter: grayscale(0%); /* Elimina el filtro de escala de grises al pasar el ratón */ +} + +.text-overlay { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; + font-size: 2rem; + font-weight: bold; +} + +/* Sección de contacto */ +.contact-section { + display: flex; + justify-content: space-between; + align-items: flex-start; + padding: 50px; + background-color: #f7f7f7; +} + +/* Información de contacto */ +.contact-info { + width: 40%; +} + +.contact-info h2 { + font-size: 2.5rem; + margin-bottom: 20px; + color: #333; +} + +.contact-info p { + font-size: 1.2rem; + color: #666; +} + +.contact-details p { + font-size: 1.1rem; + color: #333; +} + +.proyecto1 { + background-color: #80336E; +} + +.proyecto1 img{ + margin: 0px; + width: 1900px; + object-fit: cover; +} + +.proyecto2 { + background-color: #FAC060; +} + +.proyecto2 img{ + margin: 0px; + width: 1900px; + object-fit: cover; +} + +.wrappel { + background-color: #ffffff; +} + +.wrappel img{ + margin: 0px; + width: 1900px; + object-fit: cover; +} + +.proyecto3 { + background-color: #C998C5; +} + +.proyecto3 img{ + margin: 0px; + width: 1900px; + object-fit: cover; +} + +.yewerly { + background-color: #ffffff; +} + +.yewerly img{ + margin: 0px; + width: 1900px; + object-fit: cover; +} + +.proyecto4 { + background-color: #000000; +} + +.proyecto4 img{ + margin: 0px; + width: 1900px; + object-fit: cover; +} + +.sangre { + background-color: #ffffff; +} + +.sangre img{ + margin: 0px; + width: 1900px; + object-fit: cover; +} + +.proyecto5 { + background-color: #ffffff; +} + +.proyecto5 img{ + margin: 0px; + width: 1900px; + object-fit: cover; +} + +/* Contenedor de las imágenes */ +.proyecto6-container { + width: 80%; /* Establece el ancho total del contenedor */ + margin: 0 auto; /* Centra el contenedor */ + overflow: hidden; /* Limpia los flotantes */ +} + +/* Estilo para cada contenedor de imagen */ +.proyecto6 { + width: 48%; /* 48% de ancho para dejar espacio entre las imágenes */ + float: left; /* Flota las imágenes a la izquierda */ + box-sizing: border-box; /* Asegura que los márgenes se manejen correctamente */ +} + +/* Limpieza de flotantes para el contenedor */ +.proyecto6-container::after { + content: ""; + display: table; + clear: both; /* Asegura que los flotantes no rompan el diseño */ +} + +/* Estilo para las imágenes */ +.proyecto6 img { + width: 100%; /* Las imágenes ocupan todo el ancho del contenedor */ + height: auto; /* Mantener la relación de aspecto */ +} diff --git a/static/images/bienvenida.jpg b/static/images/bienvenida.jpg new file mode 100644 index 0000000..fda0660 Binary files /dev/null and b/static/images/bienvenida.jpg differ diff --git a/static/images/borne.png b/static/images/borne.png new file mode 100644 index 0000000..8d98757 Binary files /dev/null and b/static/images/borne.png differ diff --git a/static/images/borne2.png b/static/images/borne2.png new file mode 100644 index 0000000..19de42f Binary files /dev/null and b/static/images/borne2.png differ diff --git a/static/images/borne3.png b/static/images/borne3.png new file mode 100644 index 0000000..d031f40 Binary files /dev/null and b/static/images/borne3.png differ diff --git a/static/images/cartel1.png b/static/images/cartel1.png new file mode 100644 index 0000000..dc783fc Binary files /dev/null and b/static/images/cartel1.png differ diff --git a/static/images/cartel2.png b/static/images/cartel2.png new file mode 100644 index 0000000..7d9452c Binary files /dev/null and b/static/images/cartel2.png differ diff --git a/static/images/cartel3.png b/static/images/cartel3.png new file mode 100644 index 0000000..f354937 Binary files /dev/null and b/static/images/cartel3.png differ diff --git a/static/images/cartel4.png b/static/images/cartel4.png new file mode 100644 index 0000000..fbe426c Binary files /dev/null and b/static/images/cartel4.png differ diff --git a/static/images/cartel5.png b/static/images/cartel5.png new file mode 100644 index 0000000..30b4eb7 Binary files /dev/null and b/static/images/cartel5.png differ diff --git a/static/images/cartel6.png b/static/images/cartel6.png new file mode 100644 index 0000000..f43520f Binary files /dev/null and b/static/images/cartel6.png differ diff --git a/static/images/custom-icon.png b/static/images/custom-icon.png new file mode 100644 index 0000000..2e1626f Binary files /dev/null and b/static/images/custom-icon.png differ diff --git a/static/images/dcam1.png b/static/images/dcam1.png new file mode 100644 index 0000000..84f6b63 Binary files /dev/null and b/static/images/dcam1.png differ diff --git a/static/images/dcam2.png b/static/images/dcam2.png new file mode 100644 index 0000000..989f55a Binary files /dev/null and b/static/images/dcam2.png differ diff --git a/static/images/imagen1.jpg b/static/images/imagen1.jpg new file mode 100644 index 0000000..07489db Binary files /dev/null and b/static/images/imagen1.jpg differ diff --git a/static/images/imagen1.png b/static/images/imagen1.png new file mode 100644 index 0000000..821ae8c Binary files /dev/null and b/static/images/imagen1.png differ diff --git a/static/images/imagen2.jpg b/static/images/imagen2.jpg new file mode 100644 index 0000000..736494c Binary files /dev/null and b/static/images/imagen2.jpg differ diff --git a/static/images/imagen2.png b/static/images/imagen2.png new file mode 100644 index 0000000..f6239c5 Binary files /dev/null and b/static/images/imagen2.png differ diff --git a/static/images/imagen3.jpg b/static/images/imagen3.jpg new file mode 100644 index 0000000..90e6fa9 Binary files /dev/null and b/static/images/imagen3.jpg differ diff --git a/static/images/imagen3.png b/static/images/imagen3.png new file mode 100644 index 0000000..cbcbfec Binary files /dev/null and b/static/images/imagen3.png differ diff --git a/static/images/imagen4.jpg b/static/images/imagen4.jpg new file mode 100644 index 0000000..ed5e00f Binary files /dev/null and b/static/images/imagen4.jpg differ diff --git a/static/images/imagen4.png b/static/images/imagen4.png new file mode 100644 index 0000000..596e24f Binary files /dev/null and b/static/images/imagen4.png differ diff --git a/static/images/imagen5.png b/static/images/imagen5.png new file mode 100644 index 0000000..e41e164 Binary files /dev/null and b/static/images/imagen5.png differ diff --git a/static/images/imagen6.png b/static/images/imagen6.png new file mode 100644 index 0000000..e610562 Binary files /dev/null and b/static/images/imagen6.png differ diff --git a/static/images/instawrappel.png b/static/images/instawrappel.png new file mode 100644 index 0000000..4018027 Binary files /dev/null and b/static/images/instawrappel.png differ diff --git a/static/images/logo-bio.png b/static/images/logo-bio.png new file mode 100644 index 0000000..dbb4edc Binary files /dev/null and b/static/images/logo-bio.png differ diff --git a/static/images/logowrappel.png b/static/images/logowrappel.png new file mode 100644 index 0000000..f231eb0 Binary files /dev/null and b/static/images/logowrappel.png differ diff --git a/static/images/mascotawrappel.png b/static/images/mascotawrappel.png new file mode 100644 index 0000000..2533940 Binary files /dev/null and b/static/images/mascotawrappel.png differ diff --git a/static/images/minilogowrappel.png b/static/images/minilogowrappel.png new file mode 100644 index 0000000..28987d9 Binary files /dev/null and b/static/images/minilogowrappel.png differ diff --git a/static/images/mockupsangre.png b/static/images/mockupsangre.png new file mode 100644 index 0000000..66d5c77 Binary files /dev/null and b/static/images/mockupsangre.png differ diff --git a/static/images/motivowrappel.png b/static/images/motivowrappel.png new file mode 100644 index 0000000..8187bf9 Binary files /dev/null and b/static/images/motivowrappel.png differ diff --git a/static/images/sangre.png b/static/images/sangre.png new file mode 100644 index 0000000..5e03392 Binary files /dev/null and b/static/images/sangre.png differ diff --git a/static/images/sangre2.png b/static/images/sangre2.png new file mode 100644 index 0000000..0731c53 Binary files /dev/null and b/static/images/sangre2.png differ diff --git a/static/images/yewerlylogo.png b/static/images/yewerlylogo.png new file mode 100644 index 0000000..7615d98 Binary files /dev/null and b/static/images/yewerlylogo.png differ diff --git a/static/images/yewerlylogos2.png b/static/images/yewerlylogos2.png new file mode 100644 index 0000000..4529df0 Binary files /dev/null and b/static/images/yewerlylogos2.png differ diff --git a/static/images/yewerlysimbolo.png b/static/images/yewerlysimbolo.png new file mode 100644 index 0000000..99da53e Binary files /dev/null and b/static/images/yewerlysimbolo.png differ diff --git a/static/js/script.js b/static/js/script.js new file mode 100644 index 0000000..96fe8fe --- /dev/null +++ b/static/js/script.js @@ -0,0 +1,24 @@ +document.querySelectorAll('.nav-link').forEach(link => { + link.addEventListener('mouseenter', () => { + link.classList.add('hovered'); + }); + link.addEventListener('mouseleave', () => { + link.classList.remove('hovered'); + }); +}); + +// Agregar evento para registrar clics en los enlaces +document.querySelectorAll('.container a').forEach((link) => { + link.addEventListener('click', (event) => { + console.log(`Se hizo clic en: ${link.querySelector('img').alt}`); + }); +}); + +// Animación para la carga de imágenes +document.querySelectorAll('.container a img').forEach((img) => { + img.style.opacity = 0; + img.addEventListener('load', () => { + img.style.transition = 'opacity 0.5s ease'; + img.style.opacity = 1; + }); +}); \ No newline at end of file