-
diff --git a/css/career.css b/css/career.css
index 6ebfdf5..601b0b9 100644
--- a/css/career.css
+++ b/css/career.css
@@ -1,24 +1,10 @@
-/*career.css*/
-/*
--Reset: estilos de reseteo iguales para todas las páginas de la web
--Header: estilos del encabezado iguales para todas las páginas de la web.
--Main-header: Encabezado igual para todas las secciones de la página de Vincent's life
--Botones: botón anterior para regresar a la página de Vincent's life
--Container
--Animaciones
--Media Queries
-*/
-
-/* ---- RESET empieza aquí ---- */
-/* Descripción: Estilos de reseteo para la normalización de estilos predeterminados del navegador. */
-/* Reset general para todos los elementos */
+/* RESET */
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
-/* Estilos para elementos multimedia */
img,
picture,
video,
@@ -28,22 +14,18 @@ figure {
width: 100%;
display: block;
}
-/* Estilos para enlaces */
a {
display: block;
text-decoration: none;
color: inherit;
font-size: inherit;
}
-/* Estilos especiales para enlaces dentro de párrafos */
p a {
display: inline;
}
-/* Estilos para listas sin viñetas */
li {
list-style-type: none;
}
-/* Estilos para elementos de texto */
h1,
h2,
h3,
@@ -63,7 +45,6 @@ em {
text-decoration: none;
color: inherit;
}
-/* Estilos para formularios y elementos de formulario */
form,
input,
textarea,
@@ -82,25 +63,17 @@ label {
-moz-appearance: none;
appearance: none;
}
-/* Estilos para elementos SVG */
svg {
display: block;
fill: #ffd147;
}
-/* Estilos para el cuerpo del documento */
body {
min-height: 100vh;
font-size: 100%;
- max-width: 98%;
margin: auto;
font-family: "Playfair Display", serif;
}
-/* ---- RESET acaba aquí ---- */
-
-/* ---- HEADER empieza aquí ---- */
-/* Descripción: Estilos para el encabezado del sitio web. */
-
-/* Estilos para el contenedor del encabezado */
+/* HEADER */
.Header {
max-width: 95%;
margin: auto;
@@ -112,7 +85,6 @@ body {
border-bottom: 0.1563rem solid #ffd147;
}
/* HEADER LEFT */
-/* Estilos para el lado izquierdo del encabezado */
.Header-left {
width: calc(3.5rem + 0.0625rem);
height: 3.5rem;
@@ -123,7 +95,6 @@ body {
border-radius: 50%;
border: 2.5px solid #ffd147;
}
-/* Estilos para la imagen del encabezado */
.Header-img {
width: 3rem;
height: 3rem;
@@ -134,12 +105,10 @@ body {
transform: translate(-50%, -50%);
}
/* HEADER CENTER */
-/* Estilos para la firma en el centro del encabezado */
.Header-signature {
max-width: 8.5rem;
}
/* HEADER NAV */
-/* Estilos para el menú de navegación */
.Header-ul {
opacity: 0;
background-color: #ffd147;
@@ -162,29 +131,24 @@ body {
transition: all 0.6s ease-in-out;
animation: menuSliderOff 0.6 ease;
}
-/* Estilos para activar el menú de navegación */
.Header-ul.isActive {
opacity: 1;
right: 0%;
animation: menuSliderOn 0.6s ease;
}
-/* Estilos para los elementos de lista en el menú de navegación */
.Header-li {
transition: all 0.5s ease;
}
-/* Estilos para los enlaces en el menú de navegación */
.Nav-link {
font-size: 5rem;
font-weight: 900;
text-transform: uppercase;
text-shadow: 0.5px 0.5px 1px rgb(136, 136, 136);
}
-/* Estilos de animación al pasar el mouse sobre los enlaces */
.Header-li:hover .Nav-link {
animation: imageAnimation .3s ease-in-out both 1;
}
-/* Estilos para las imágenes de fondo en los enlaces */
.Nav-img {
opacity: 0;
width: 100%;
@@ -199,21 +163,17 @@ body {
pointer-events: none;
transition: all .5s ease;
}
-/* Estilos de animación al pasar el mouse sobre las imágenes de fondo */
.Header-li:hover .Nav-img {
opacity: .75;
}
-/* Estilos para los enlaces no activos que no tienen el mouse sobre ellos */
.Nav-link.notActive:not(:hover) {
opacity: 0.5;
}
-/* Estilos para el icono "hamburguesa" */
.Hamburger {
cursor: pointer;
position: relative;
z-index: 2;
}
-/* Estilos para el círculo que rodea el icono "hamburguesa" */
.Circle {
opacity: 0;
width: 3rem;
@@ -231,12 +191,10 @@ body {
transition: all 0.5s ease;
pointer-events: none;
}
-/* Estilos para activar el círculo que rodea el icono "hamburguesa" */
.Circle.isActive {
opacity: 1;
pointer-events: auto;
}
-/* Estilos para las barras del icono "hamburguesa" */
.Bar {
display: block;
width: 1.5625rem;
@@ -246,7 +204,6 @@ body {
transition: all 0.5s ease-in-out;
filter: drop-shadow(0.25px 0.25px 0.5px #c59403);
}
-/* Estilos para las barras al activar el icono "hamburguesa" */
.Hamburger.isActive .Bar:nth-child(2) {
transform: translateY(8px) rotate(45deg);
background-color: white;
@@ -259,14 +216,9 @@ body {
transform: translateY(-8px) rotate(-45deg);
background-color: white;
}
-/* ---- HEADER acaba aquí ---- */
-
-/* ---- MAIN empieza aquí ---- */
-/* Descripción: Estilos para el contenido principal del sitio web. */
-
/* MAIN*/
.Main {
- margin: 1rem auto;
+ margin: .5rem;
position: relative;
@@ -291,7 +243,6 @@ body {
align-items: center;
gap: 2.5rem;
}
-
/* PREV BUTTON */
.Prev-btn {
width: 4rem;
@@ -320,7 +271,6 @@ body {
.Prev-btn:hover {
transform: scale(1.2);
}
-
/* MAIN-HEADER IMAGE */
.Header-image {
min-width: 50vw;
@@ -343,9 +293,6 @@ body {
border-radius: 1.5rem;
transform: translate(-50%, 50%) scale(.95);
}
-.Image {
- transform: translateY(-20%);
-}
.Title-container {
display: flex;
flex-flow: column nowrap;
@@ -366,19 +313,6 @@ body {
font-weight: 600;
text-shadow: .5px .5px 1px #5a4304;
}
-
-/* YELLOW BACKGROUND */
-.Background-container {
- width: 97%;
- height: 100vh;
- background-color: #ffd147;
-
- position: fixed;
- top: 30%;
- right: 0%;
- z-index: -1;
-}
-
/* YELLOW BACKGROUND */
.Background-container {
position: absolute;
@@ -556,10 +490,10 @@ body {
width: 100%;
float: none;
clear: none;
- margin-bottom: 3rem;
+ margin-bottom: 1rem;
}
.Info-li:nth-child(odd) {
- transform: translateX(0);
+ transform: translateX(5%);
text-align: left;
}
.Info-li:nth-child(odd) .Circle-ul {
@@ -567,10 +501,10 @@ body {
transform: translate(-50%, -50%);
}
.Info-li:nth-child(even) {
- transform: translateX(0);
+ transform: translateX(5%);
}
.Container-ul::after {
- left: -2rem;
+ left: -1rem;
}
}
/* Timeline font */
diff --git a/css/death.css b/css/death.css
index 573e671..d746944 100644
--- a/css/death.css
+++ b/css/death.css
@@ -1,24 +1,10 @@
-/*death.css*/
-/*
--Reset: estilos de reseteo iguales para todas las páginas de la web
--Header: estilos del encabezado iguales para todas las páginas de la web.
--Main-header: Encabezado igual para todas las secciones de la página de Vincent's life
--Botones: botón anterior para regresar a la página de Vincent's life
--Container
--Animaciones
--Media Queries
-*/
-
-/* ---- RESET empieza aquí ---- */
-/* Descripción: Estilos de reseteo para la normalización de estilos predeterminados del navegador. */
-/* Reset general para todos los elementos */
+/* RESET */
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
-/* Estilos para elementos multimedia */
img,
picture,
video,
@@ -28,22 +14,18 @@ figure {
width: 100%;
display: block;
}
-/* Estilos para enlaces */
a {
display: block;
text-decoration: none;
color: inherit;
font-size: inherit;
}
-/* Estilos especiales para enlaces dentro de párrafos */
p a {
display: inline;
}
-/* Estilos para listas sin viñetas */
li {
list-style-type: none;
}
-/* Estilos para elementos de texto */
h1,
h2,
h3,
@@ -63,7 +45,6 @@ em {
text-decoration: none;
color: inherit;
}
-/* Estilos para formularios y elementos de formulario */
form,
input,
textarea,
@@ -82,28 +63,17 @@ label {
-moz-appearance: none;
appearance: none;
}
-/* Estilos para elementos SVG */
svg {
display: block;
fill: #ffd147;
}
-/* Estilos para el cuerpo del documento */
-html {
- overflow: hidden;
-}
body {
min-height: 100vh;
font-size: 100%;
- max-width: 98%;
margin: auto;
font-family: "Playfair Display", serif;
}
-/* ---- RESET acaba aquí ---- */
-
-/* ---- HEADER empieza aquí ---- */
-/* Descripción: Estilos para el encabezado del sitio web. */
-
-/* Estilos para el contenedor del encabezado */
+/* HEADER */
.Header {
max-width: 95%;
margin: auto;
@@ -115,7 +85,6 @@ body {
border-bottom: 0.1563rem solid #ffd147;
}
/* HEADER LEFT */
-/* Estilos para el lado izquierdo del encabezado */
.Header-left {
width: calc(3.5rem + 0.0625rem);
height: 3.5rem;
@@ -126,7 +95,6 @@ body {
border-radius: 50%;
border: 2.5px solid #ffd147;
}
-/* Estilos para la imagen del encabezado */
.Header-img {
width: 3rem;
height: 3rem;
@@ -137,12 +105,10 @@ body {
transform: translate(-50%, -50%);
}
/* HEADER CENTER */
-/* Estilos para la firma en el centro del encabezado */
.Header-signature {
max-width: 8.5rem;
}
/* HEADER NAV */
-/* Estilos para el menú de navegación */
.Header-ul {
opacity: 0;
background-color: #ffd147;
@@ -165,29 +131,24 @@ body {
transition: all 0.6s ease-in-out;
animation: menuSliderOff 0.6 ease;
}
-/* Estilos para activar el menú de navegación */
.Header-ul.isActive {
opacity: 1;
right: 0%;
animation: menuSliderOn 0.6s ease;
}
-/* Estilos para los elementos de lista en el menú de navegación */
.Header-li {
transition: all 0.5s ease;
}
-/* Estilos para los enlaces en el menú de navegación */
.Nav-link {
font-size: 5rem;
font-weight: 900;
text-transform: uppercase;
text-shadow: 0.5px 0.5px 1px rgb(136, 136, 136);
}
-/* Estilos de animación al pasar el mouse sobre los enlaces */
.Header-li:hover .Nav-link {
animation: imageAnimation .3s ease-in-out both 1;
}
-/* Estilos para las imágenes de fondo en los enlaces */
.Nav-img {
opacity: 0;
width: 100%;
@@ -202,21 +163,17 @@ body {
pointer-events: none;
transition: all .5s ease;
}
-/* Estilos de animación al pasar el mouse sobre las imágenes de fondo */
.Header-li:hover .Nav-img {
opacity: .75;
}
-/* Estilos para los enlaces no activos que no tienen el mouse sobre ellos */
.Nav-link.notActive:not(:hover) {
opacity: 0.5;
}
-/* Estilos para el icono "hamburguesa" */
.Hamburger {
cursor: pointer;
position: relative;
z-index: 2;
}
-/* Estilos para el círculo que rodea el icono "hamburguesa" */
.Circle {
opacity: 0;
width: 3rem;
@@ -234,12 +191,10 @@ body {
transition: all 0.5s ease;
pointer-events: none;
}
-/* Estilos para activar el círculo que rodea el icono "hamburguesa" */
.Circle.isActive {
opacity: 1;
pointer-events: auto;
}
-/* Estilos para las barras del icono "hamburguesa" */
.Bar {
display: block;
width: 1.5625rem;
@@ -249,7 +204,6 @@ body {
transition: all 0.5s ease-in-out;
filter: drop-shadow(0.25px 0.25px 0.5px #c59403);
}
-/* Estilos para las barras al activar el icono "hamburguesa" */
.Hamburger.isActive .Bar:nth-child(2) {
transform: translateY(8px) rotate(45deg);
background-color: white;
@@ -262,14 +216,9 @@ body {
transform: translateY(-8px) rotate(-45deg);
background-color: white;
}
-/* ---- HEADER acaba aquí ---- */
-
-/* ---- MAIN empieza aquí ---- */
-/* Descripción: Estilos para el contenido principal del sitio web. */
-
/* MAIN */
.Main {
- margin: 1rem auto;
+ margin: .5rem;
position: relative;
@@ -455,7 +404,6 @@ body {
opacity: 1;
}
}
-/* Animación de escala para las imágenes */
@keyframes imageAnimation {
0% {
transform: scale(1);
@@ -535,9 +483,6 @@ body {
}
/* Changed into column */
@media screen and (max-width: 1100px) {
- html {
- overflow: auto;
- }
.Text-container {
flex-flow: column;
}
@@ -574,6 +519,7 @@ body {
}
.Main-header{
gap: 1rem;
+ min-height: auto;
}
.Section-p{
font-size: 1rem;
diff --git a/css/earlylife.css b/css/earlylife.css
index 3f225a3..18ed308 100644
--- a/css/earlylife.css
+++ b/css/earlylife.css
@@ -1,24 +1,11 @@
-/*earlylife.css*/
-/*
--Reset: estilos de reseteo iguales para todas las páginas de la web
--Header: estilos del encabezado iguales para todas las páginas de la web.
--Main-header: Encabezado igual para todas las secciones de la página de Vincent's life
--Botones: botón anterior para regresar a la página de Vincent's life
--Container
--Animaciones
--Media Queries
-*/
-
-/* ---- RESET empieza aquí ---- */
-/* Descripción: Estilos de reseteo para la normalización de estilos predeterminados del navegador. */
-/* Reset general para todos los elementos */
+
+/*RESET*/
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
-/* Estilos para elementos multimedia */
img,
picture,
video,
@@ -28,22 +15,18 @@ figure {
width: 100%;
display: block;
}
-/* Estilos para enlaces */
a {
display: block;
text-decoration: none;
color: inherit;
font-size: inherit;
}
-/* Estilos especiales para enlaces dentro de párrafos */
p a {
display: inline;
}
-/* Estilos para listas sin viñetas */
li {
list-style-type: none;
}
-/* Estilos para elementos de texto */
h1,
h2,
h3,
@@ -63,7 +46,6 @@ em {
text-decoration: none;
color: inherit;
}
-/* Estilos para formularios y elementos de formulario */
form,
input,
textarea,
@@ -82,25 +64,18 @@ label {
-moz-appearance: none;
appearance: none;
}
-/* Estilos para elementos SVG */
svg {
display: block;
fill: #ffd147;
}
-/* Estilos para el cuerpo del documento */
body {
min-height: 100vh;
font-size: 100%;
- max-width: 98%;
margin: auto;
font-family: "Playfair Display", serif;
}
-/* ---- RESET acaba aquí ---- */
-
-/* ---- HEADER empieza aquí ---- */
-/* Descripción: Estilos para el encabezado del sitio web. */
-/* Estilos para el contenedor del encabezado */
+/* HEADER */
.Header {
max-width: 95%;
margin: auto;
@@ -112,7 +87,6 @@ body {
border-bottom: 0.1563rem solid #ffd147;
}
/* HEADER LEFT */
-/* Estilos para el lado izquierdo del encabezado */
.Header-left {
width: calc(3.5rem + 0.0625rem);
height: 3.5rem;
@@ -123,7 +97,6 @@ body {
border-radius: 50%;
border: 2.5px solid #ffd147;
}
-/* Estilos para la imagen del encabezado */
.Header-img {
width: 3rem;
height: 3rem;
@@ -134,12 +107,10 @@ body {
transform: translate(-50%, -50%);
}
/* HEADER CENTER */
-/* Estilos para la firma en el centro del encabezado */
.Header-signature {
max-width: 8.5rem;
}
/* HEADER NAV */
-/* Estilos para el menú de navegación */
.Header-ul {
opacity: 0;
background-color: #ffd147;
@@ -162,29 +133,24 @@ body {
transition: all 0.6s ease-in-out;
animation: menuSliderOff 0.6 ease;
}
-/* Estilos para activar el menú de navegación */
.Header-ul.isActive {
opacity: 1;
right: 0%;
animation: menuSliderOn 0.6s ease;
}
-/* Estilos para los elementos de lista en el menú de navegación */
.Header-li {
transition: all 0.5s ease;
}
-/* Estilos para los enlaces en el menú de navegación */
.Nav-link {
font-size: 5rem;
font-weight: 900;
text-transform: uppercase;
text-shadow: 0.5px 0.5px 1px rgb(136, 136, 136);
}
-/* Estilos de animación al pasar el mouse sobre los enlaces */
.Header-li:hover .Nav-link {
animation: imageAnimation .3s ease-in-out both 1;
}
-/* Estilos para las imágenes de fondo en los enlaces */
.Nav-img {
opacity: 0;
width: 100%;
@@ -199,21 +165,17 @@ body {
pointer-events: none;
transition: all .5s ease;
}
-/* Estilos de animación al pasar el mouse sobre las imágenes de fondo */
.Header-li:hover .Nav-img {
opacity: .75;
}
-/* Estilos para los enlaces no activos que no tienen el mouse sobre ellos */
.Nav-link.notActive:not(:hover) {
opacity: 0.5;
}
-/* Estilos para el icono "hamburguesa" */
.Hamburger {
cursor: pointer;
position: relative;
z-index: 2;
}
-/* Estilos para el círculo que rodea el icono "hamburguesa" */
.Circle {
opacity: 0;
width: 3rem;
@@ -231,12 +193,10 @@ body {
transition: all 0.5s ease;
pointer-events: none;
}
-/* Estilos para activar el círculo que rodea el icono "hamburguesa" */
.Circle.isActive {
opacity: 1;
pointer-events: auto;
}
-/* Estilos para las barras del icono "hamburguesa" */
.Bar {
display: block;
width: 1.5625rem;
@@ -246,7 +206,6 @@ body {
transition: all 0.5s ease-in-out;
filter: drop-shadow(0.25px 0.25px 0.5px #c59403);
}
-/* Estilos para las barras al activar el icono "hamburguesa" */
.Hamburger.isActive .Bar:nth-child(2) {
transform: translateY(8px) rotate(45deg);
background-color: white;
@@ -259,17 +218,10 @@ body {
transform: translateY(-8px) rotate(-45deg);
background-color: white;
}
-/* ---- HEADER acaba aquí ---- */
-
-
-/* ---- MAIN empieza aquí ---- */
-/* Descripción: Estilos para el contenido principal del sitio web. */
-
-/* ---- MAIN - Contenedor principal ---- */
-/* Estilos del contenedor principal */
+/* MAIN */
.Main {
- margin: 1rem auto;
+ margin: .5rem;
position: relative;
@@ -278,13 +230,9 @@ body {
justify-content: center;
align-items: center;
}
-
-/* ---- MAIN-HEADER - Parte del elemento principal debajo del encabezado - Igual para todas las subpáginas en la vida de Vincent ---- */
-
-/* Estilos del encabezado principal */
.Main-header {
width: 85%;
- padding-top: 1rem;
+ margin: .5rem;
min-height: 25vh;
max-height: 30vh;
@@ -295,10 +243,6 @@ body {
align-items: center;
gap: 2.5rem;
}
-
-/* ---- BOTÓN PREVIO ---- */
-
-/* Estilos del botón "previo" */
.Prev-btn {
width: 4rem;
height: 4rem;
@@ -312,7 +256,6 @@ body {
transition: all 0.7s ease;
cursor: pointer;
}
-/* Estilos del icono SVG del botón "previo" */
.Prev-svg {
fill: #594306;
width: 3rem;
@@ -324,14 +267,9 @@ body {
transition: all 0.7s ease;
filter: drop-shadow(1px 1px 1px #3b3b3b);
}
-/* Efecto de escala al hacer hover en el botón "previo" */
.Prev-btn:hover {
transform: scale(1.2);
}
-
-/* ---- IMAGEN DEL ENCABEZADO ---- */
-
-/* Estilos del contenedor de la imagen del encabezado */
.Header-image {
min-width: 50vw;
max-height: 30vh;
@@ -341,13 +279,6 @@ body {
overflow: hidden;
box-shadow: 1px 1px 1px #3b3b3b;
}
-/* Estilos de la imagen del encabezado */
-.Image {
- height: 100%;
- width: 100%;
- object-fit: cover;
-}
-/* Marco de la imagen del encabezado */
.Frame-image {
border: 0.25rem #ffd147 solid;
width: 100%;
@@ -360,36 +291,28 @@ body {
border-radius: 1.5rem;
transform: translate(-50%, 50%) scale(0.95);
}
-/* Contenedor para el título y detalles de la imagen del encabezado */
.Title-container {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: start;
}
-/* Título, fecha y lugar de la imagen del encabezado */
.Title-h2,
.Date-span,
.Place-span {
color: #594306;
text-transform: capitalize;
}
-/* Título de la imagen del encabezado */
.Title-h2 {
font-size: 5rem;
font-weight: 900;
text-shadow: 0.5px 0.5px 1px #5a4304;
}
-/* Fecha y lugar de la imagen del encabezado */
.Date-span,
.Place-span {
font-size: 1.8rem;
font-weight: 600;
}
-
-/* ---- FONDO AMARILLO ---- */
-
-/* Contenedor del fondo amarillo */
.Background-container {
position: absolute;
top: 0;
@@ -402,43 +325,33 @@ body {
box-shadow: inset 5px 5px 25px 25px #e6b82f;
}
-/* ---- CONTENIDO PRINCIPAL ---- */
-
-/* Contenedor del texto principal */
+/* TEXT CONTENT */
.Text-container {
- width: 90%;
position: relative;
+ margin: 0 1rem;
}
-
-/* ---- TEXTO INTRODUCTORIO SUPERIOR ---- */
-
-/* Contenedor del texto introductorio superior */
.Intro-container {
- width: 60%;
-
+ width: 70%;
+
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
gap: 1rem;
- margin: 2rem 0;
+ margin: 1rem 0;
}
-/* Título del texto introductorio superior */
.Intro-h3 {
font-size: 4rem;
color: #594306;
text-shadow: 0.5px 0.5px 1px #5a4304;
}
-/* Párrafo del texto introductorio superior */
.Intro-p {
color: #594306;
font-size: 1.3rem;
}
-/* ---- SECCIONES IZQUIERDA Y DERECHA ---- */
-
-/* Contenedor de las columnas de texto */
+/* LEFT SECTION */
.Text-columns {
display: flex;
flex-flow: row nowrap;
@@ -446,7 +359,6 @@ body {
align-items: center;
gap: 1rem;
}
-/* Secciones izquierda y derecha */
.Left-section,
.Right-section {
display: flex;
@@ -454,10 +366,8 @@ body {
justify-content: center;
align-items: start;
gap: 1rem;
-
- margin-bottom: 1rem;
+ padding-bottom: 1rem;
}
-/* Contenedor del texto de cada sección */
.Section-text {
display: flex;
flex-flow: column wrap;
@@ -465,11 +375,9 @@ body {
align-items: start;
gap: 1rem;
}
-/* Contenedor de la imagen */
.Image-container {
min-width: 12rem;
}
-/* Imágenes izquierda y derecha */
.Left-image,
.Right-image {
width: 100%;
@@ -479,22 +387,18 @@ body {
border-radius: 1.5rem;
box-shadow: 1px 1px 1px #5a4304;
}
-/* Título de cada sección */
.Section-h4 {
font-size: 2.5rem;
color: #594306;
text-shadow: 0.5px 0.5px 1px #5a4304;
}
-/* Párrafos de cada sección */
.Left-p,
.Right-p {
font-size: 1.1rem;
color: #594306;
}
-/* ---- INFORMACIÓN SOBRE LAS PINTURAS (título, año, ubicación) ---- */
-
-/* Contenedores izquierdo y derecho */
+/* PAINTINGS INFO */
.Left-container,
.Right-container {
display: flex;
@@ -503,21 +407,16 @@ body {
align-items: start;
color: #594306;
}
-/* Tamaño de títulos, años y ubicaciones */
.Left-container span,
.Right-container span {
font-size: 1rem;
}
-/* Título de la pintura (en cursiva) */
.Left-title,
.Right-title {
font-style: italic;
}
-/* ---- MAIN acaba aquí ---- */
-
-/* ---- Animaciones para el Encabezado (Header) ---- */
-/* Animación para que el menú se desasparezca */
+/* ANIMATIONS */
@keyframes menuSliderOff {
from {
opacity: 1;
@@ -526,7 +425,6 @@ body {
opacity: 0;
}
}
-/* Animación para que el menú aparezca */
@keyframes menuSliderOn {
from {
opacity: 0;
@@ -535,7 +433,6 @@ body {
opacity: 1;
}
}
-/* Animación de escala para las imágenes */
@keyframes imageAnimation {
0% {
transform: scale(1);
@@ -545,69 +442,39 @@ body {
}
}
-/* ---- Media Queries ---- */
-
-/* Media Query para el encabezado compartido por todas las páginas /
-/ Menú y encabezado */
+/* MEDIA QUERIES */
@media screen and (max-width: 770px) {
- /* Ocultar la firma en el encabezado */
.Header-signature {
display: none;
}
- /* Estilos de tamaño de fuente para los enlaces del menú de navegación */
.Nav-link {
font-size: 4rem;
}
}
-/* Media Query para pantallas con un ancho máximo de 600px */
@media screen and (max-width: 600px) {
- /* Estilos de tamaño de fuente para los enlaces del menú de navegación */
.Nav-link {
font-size: 4rem;
}
- /* Ocultar la imagen del menú en pantallas pequeñas */
.Nav-img {
display: none;
}
- /* Deshabilitar la animación del enlace del menú al pasar el mouse en pantallas pequeñas */
.Header-li {
transition: none;
}
- /* Deshabilitar la animación del enlace del menú al pasar el mouse en pantallas pequeñas */
.Header-li:hover .Nav-link {
animation: none;
}
}
-/* Media Query para pantallas con un ancho máximo de 525px */
@media screen and (max-width: 525px) {
- /* Tamaño de letra del enlace del menú en pantallas más pequeñas */
.Nav-link {
font-size: 3rem;
}
}
-/* Media Query para pantallas con un ancho máximo de 400px */
@media screen and (max-width: 400px) {
- /* Tamaño de letra del enlace del menú en pantallas muy pequeñas */
.Nav-link {
font-size: 2.5rem;
}
}
-
-/* ---- BACKGROUND CONTAINER - Vincent's Life sections ---- */
-
-/* Descripción: Estilos para el contenedor de fondo en las secciones de la vida de Vincent en dispositivos con un ancho de pantalla máximo de 900px. */
-@media screen and (max-width: 900px) {
- .Background-container {
- top: 12%;
- left: 0%;
- margin: auto;
- width: 95%;
- border-radius: 1.5rem;
- }
-}
-/* ---- Botón anterior ---- */
-
-/* Descripción: Estilos para el botón de navegación "anterior" en dispositivos con un ancho de pantalla máximo de 900px. */
@media screen and (max-width: 900px) {
.Prev-btn {
background-color: transparent;
@@ -617,14 +484,7 @@ body {
box-shadow: 0.25px 0.25px 0.5px #5a4304;
}
}
-
-/* ---- Estilos solo para la sección de Early Life ---- */
-
-/* Pantallas grandes - Media Query para pantallas con un ancho mínimo de 1550px */
@media screen and (min-width: 1550px) {
- html {
- overflow: auto;
- }
.Intro-p {
font-size: 1.8rem;
}
@@ -639,16 +499,12 @@ body {
min-width: 18rem;
}
}
-/* Pantalla mediana - Media Query para pantallas con un ancho máximo de 1200px */
@media screen and (max-width: 1200px) {
- html {
- overflow: auto;
- }
.Text-columns {
flex-flow: row wrap;
}
.Intro-container {
- width: 80%;
+ width: 90%;
margin: 1rem auto;
text-align: center;
}
@@ -659,7 +515,6 @@ body {
max-height: 20vh;
}
.Title-h2 {
- margin-top: 0.5rem;
font-size: 4rem;
}
.Date-span,
@@ -671,7 +526,6 @@ body {
gap: 0.5rem;
}
}
-/* Sin imagen principal para pantallas pequeñas - Media Query para pantallas con un ancho máximo de 700px */
@media screen and (max-width: 700px) {
.Header-image {
display: none;
@@ -721,9 +575,13 @@ body {
font-size: 0.9rem;
}
.Title-h2 {
- font-size: 3.8rem;
+ font-size: 3rem;
+ }
+ .Intro-h3{
+ font-size: 2.5rem;
}
- .Main-header {
+ .Main-header{
gap: 1rem;
+ min-height: auto;
}
}
diff --git a/css/illness.css b/css/illness.css
index cb8a6d8..899f807 100644
--- a/css/illness.css
+++ b/css/illness.css
@@ -1,24 +1,10 @@
-/*illness.css*/
-/*
--Reset: estilos de reseteo iguales para todas las páginas de la web
--Header: estilos del encabezado iguales para todas las páginas de la web.
--Main-header: Encabezado igual para todas las secciones de la página de Vincent's life
--Botones: botón anterior para regresar a la página de Vincent's life
--Container
--Animaciones
--Media Queries
-*/
-
-/* ---- RESET empieza aquí ---- */
-/* Descripción: Estilos de reseteo para la normalización de estilos predeterminados del navegador. */
-/* Reset general para todos los elementos */
+/* RESET */
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
-/* Estilos para elementos multimedia */
img,
picture,
video,
@@ -28,22 +14,18 @@ figure {
width: 100%;
display: block;
}
-/* Estilos para enlaces */
a {
display: block;
text-decoration: none;
color: inherit;
font-size: inherit;
}
-/* Estilos especiales para enlaces dentro de párrafos */
p a {
display: inline;
}
-/* Estilos para listas sin viñetas */
li {
list-style-type: none;
}
-/* Estilos para elementos de texto */
h1,
h2,
h3,
@@ -63,7 +45,6 @@ em {
text-decoration: none;
color: inherit;
}
-/* Estilos para formularios y elementos de formulario */
form,
input,
textarea,
@@ -82,25 +63,18 @@ label {
-moz-appearance: none;
appearance: none;
}
-/* Estilos para elementos SVG */
svg {
display: block;
fill: #ffd147;
}
-/* Estilos para el cuerpo del documento */
body {
min-height: 100vh;
font-size: 100%;
- max-width: 98%;
margin: auto;
font-family: "Playfair Display", serif;
}
-/* ---- RESET acaba aquí ---- */
-/* ---- HEADER empieza aquí ---- */
-/* Descripción: Estilos para el encabezado del sitio web. */
-
-/* Estilos para el contenedor del encabezado */
+/* HEADER */
.Header {
max-width: 95%;
margin: auto;
@@ -112,7 +86,6 @@ body {
border-bottom: 0.1563rem solid #ffd147;
}
/* HEADER LEFT */
-/* Estilos para el lado izquierdo del encabezado */
.Header-left {
width: calc(3.5rem + 0.0625rem);
height: 3.5rem;
@@ -123,7 +96,6 @@ body {
border-radius: 50%;
border: 2.5px solid #ffd147;
}
-/* Estilos para la imagen del encabezado */
.Header-img {
width: 3rem;
height: 3rem;
@@ -134,12 +106,10 @@ body {
transform: translate(-50%, -50%);
}
/* HEADER CENTER */
-/* Estilos para la firma en el centro del encabezado */
.Header-signature {
max-width: 8.5rem;
}
/* HEADER NAV */
-/* Estilos para el menú de navegación */
.Header-ul {
opacity: 0;
background-color: #ffd147;
@@ -163,29 +133,24 @@ body {
animation: menuSliderOff 0.6 ease;
overflow: hidden;
}
-/* Estilos para activar el menú de navegación */
.Header-ul.isActive {
opacity: 1;
right: 0%;
animation: menuSliderOn 0.6s ease;
}
-/* Estilos para los elementos de lista en el menú de navegación */
.Header-li {
transition: all 0.5s ease;
}
-/* Estilos para los enlaces en el menú de navegación */
.Nav-link {
font-size: 5rem;
font-weight: 900;
text-transform: uppercase;
text-shadow: 0.5px 0.5px 1px rgb(136, 136, 136);
}
-/* Estilos de animación al pasar el mouse sobre los enlaces */
.Header-li:hover .Nav-link {
animation: imageAnimation .3s ease-in-out both 1;
}
-/* Estilos para las imágenes de fondo en los enlaces */
.Nav-img {
opacity: 0;
width: 100%;
@@ -200,21 +165,17 @@ body {
pointer-events: none;
transition: all .5s ease;
}
-/* Estilos de animación al pasar el mouse sobre las imágenes de fondo */
.Header-li:hover .Nav-img {
opacity: .75;
}
-/* Estilos para los enlaces no activos que no tienen el mouse sobre ellos */
.Nav-link.notActive:not(:hover) {
opacity: 0.5;
}
-/* Estilos para el icono "hamburguesa" */
.Hamburger {
cursor: pointer;
position: relative;
z-index: 2;
}
-/* Estilos para el círculo que rodea el icono "hamburguesa" */
.Circle {
opacity: 0;
width: 3rem;
@@ -232,12 +193,10 @@ body {
transition: all 0.5s ease;
pointer-events: none;
}
-/* Estilos para activar el círculo que rodea el icono "hamburguesa" */
.Circle.isActive {
opacity: 1;
pointer-events: auto;
}
-/* Estilos para las barras del icono "hamburguesa" */
.Bar {
display: block;
width: 1.5625rem;
@@ -247,7 +206,6 @@ body {
transition: all 0.5s ease-in-out;
filter: drop-shadow(0.25px 0.25px 0.5px #c59403);
}
-/* Estilos para las barras al activar el icono "hamburguesa" */
.Hamburger.isActive .Bar:nth-child(2) {
transform: translateY(8px) rotate(45deg);
background-color: white;
@@ -260,15 +218,10 @@ body {
transform: translateY(-8px) rotate(-45deg);
background-color: white;
}
-/* ---- HEADER acaba aquí ---- */
-
-
-/* ---- MAIN empieza aquí ---- */
-/* Descripción: Estilos para el contenido principal del sitio web. */
/* MAIN */
.Main {
- margin: 1rem auto;
+ margin: .5rem;
position: relative;
@@ -620,7 +573,7 @@ body {
min-height: auto;
}
.Intro-p {
- font-size: 1.3rem;
+ font-size: 1rem;
width: 100%;
}
.Image-container {
diff --git a/css/journeys.css b/css/journeys.css
index 1109833..c7979b0 100644
--- a/css/journeys.css
+++ b/css/journeys.css
@@ -1,24 +1,10 @@
-/*journeys.css*/
-/*
--Reset: estilos de reseteo iguales para todas las páginas de la web
--Header: estilos del encabezado iguales para todas las páginas de la web.
--Main-header: Encabezado igual para todas las secciones de la página de Vincent's life
--Botones: botón anterior para regresar a la página de Vincent's life
--Container
--Animaciones
--Media Queries
-*/
-
-/* ---- RESET empieza aquí ---- */
-/* Descripción: Estilos de reseteo para la normalización de estilos predeterminados del navegador. */
-/* Reset general para todos los elementos */
+/* RESET */
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
-/* Estilos para elementos multimedia */
img,
picture,
video,
@@ -28,22 +14,18 @@ figure {
width: 100%;
display: block;
}
-/* Estilos para enlaces */
a {
display: block;
text-decoration: none;
color: inherit;
font-size: inherit;
}
-/* Estilos especiales para enlaces dentro de párrafos */
p a {
display: inline;
}
-/* Estilos para listas sin viñetas */
li {
list-style-type: none;
}
-/* Estilos para elementos de texto */
h1,
h2,
h3,
@@ -63,7 +45,6 @@ em {
text-decoration: none;
color: inherit;
}
-/* Estilos para formularios y elementos de formulario */
form,
input,
textarea,
@@ -82,25 +63,17 @@ label {
-moz-appearance: none;
appearance: none;
}
-/* Estilos para elementos SVG */
svg {
display: block;
fill: #ffd147;
}
-/* Estilos para el cuerpo del documento */
body {
min-height: 100vh;
font-size: 100%;
- max-width: 98%;
margin: auto;
font-family: "Playfair Display", serif;
}
-/* ---- RESET acaba aquí ---- */
-
-/* ---- HEADER empieza aquí ---- */
-/* Descripción: Estilos para el encabezado del sitio web. */
-
-/* Estilos para el contenedor del encabezado */
+/* HEADER */
.Header {
max-width: 95%;
margin: auto;
@@ -112,7 +85,6 @@ body {
border-bottom: 0.1563rem solid #ffd147;
}
/* HEADER LEFT */
-/* Estilos para el lado izquierdo del encabezado */
.Header-left {
width: calc(3.5rem + 0.0625rem);
height: 3.5rem;
@@ -123,7 +95,6 @@ body {
border-radius: 50%;
border: 2.5px solid #ffd147;
}
-/* Estilos para la imagen del encabezado */
.Header-img {
width: 3rem;
height: 3rem;
@@ -134,12 +105,10 @@ body {
transform: translate(-50%, -50%);
}
/* HEADER CENTER */
-/* Estilos para la firma en el centro del encabezado */
.Header-signature {
max-width: 8.5rem;
}
/* HEADER NAV */
-/* Estilos para el menú de navegación */
.Header-ul {
opacity: 0;
background-color: #ffd147;
@@ -162,29 +131,24 @@ body {
transition: all 0.6s ease-in-out;
animation: menuSliderOff 0.6 ease;
}
-/* Estilos para activar el menú de navegación */
.Header-ul.isActive {
opacity: 1;
right: 0%;
animation: menuSliderOn 0.6s ease;
}
-/* Estilos para los elementos de lista en el menú de navegación */
.Header-li {
transition: all 0.5s ease;
}
-/* Estilos para los enlaces en el menú de navegación */
.Nav-link {
font-size: 5rem;
font-weight: 900;
text-transform: uppercase;
text-shadow: 0.5px 0.5px 1px rgb(136, 136, 136);
}
-/* Estilos de animación al pasar el mouse sobre los enlaces */
.Header-li:hover .Nav-link {
animation: imageAnimation .3s ease-in-out both 1;
}
-/* Estilos para las imágenes de fondo en los enlaces */
.Nav-img {
opacity: 0;
width: 100%;
@@ -199,21 +163,17 @@ body {
pointer-events: none;
transition: all .5s ease;
}
-/* Estilos de animación al pasar el mouse sobre las imágenes de fondo */
.Header-li:hover .Nav-img {
opacity: .75;
}
-/* Estilos para los enlaces no activos que no tienen el mouse sobre ellos */
.Nav-link.notActive:not(:hover) {
opacity: 0.5;
}
-/* Estilos para el icono "hamburguesa" */
.Hamburger {
cursor: pointer;
position: relative;
z-index: 2;
}
-/* Estilos para el círculo que rodea el icono "hamburguesa" */
.Circle {
opacity: 0;
width: 3rem;
@@ -231,12 +191,10 @@ body {
transition: all 0.5s ease;
pointer-events: none;
}
-/* Estilos para activar el círculo que rodea el icono "hamburguesa" */
.Circle.isActive {
opacity: 1;
pointer-events: auto;
}
-/* Estilos para las barras del icono "hamburguesa" */
.Bar {
display: block;
width: 1.5625rem;
@@ -246,7 +204,6 @@ body {
transition: all 0.5s ease-in-out;
filter: drop-shadow(0.25px 0.25px 0.5px #c59403);
}
-/* Estilos para las barras al activar el icono "hamburguesa" */
.Hamburger.isActive .Bar:nth-child(2) {
transform: translateY(8px) rotate(45deg);
background-color: white;
@@ -259,14 +216,9 @@ body {
transform: translateY(-8px) rotate(-45deg);
background-color: white;
}
-/* ---- HEADER acaba aquí ---- */
-
-/* ---- MAIN empieza aquí ---- */
-/* Descripción: Estilos para el contenido principal del sitio web. */
-
/* MAIN */
.Main {
- margin: 1rem auto;
+ margin: .5rem;
position: relative;
@@ -275,7 +227,6 @@ body {
justify-content: center;
align-items: center;
}
-
/* MAIN-HEADER - part of the main element below the header - same for all the sub-pages in Vincent's life*/
.Main-header {
width: 85%;
@@ -290,7 +241,6 @@ body {
align-items: center;
gap: 2.5rem;
}
-
/* PREV BUTTON */
.Prev-btn {
width: 4rem;
@@ -319,7 +269,6 @@ body {
.Prev-btn:hover {
transform: scale(1.2);
}
-
/* MAIN-HEADER IMAGE */
.Header-image {
min-width: 50vw;
@@ -358,7 +307,6 @@ body {
color: #594306;
text-transform: capitalize;
}
-
/* TOP INTRODUCTORY TEXT */
.Text-container {
width: 98%;
@@ -376,7 +324,6 @@ body {
color: #594306;
font-size: 1.5rem;
}
-
/* YELLOW BACKGROUND */
.Background-container {
position: absolute;
@@ -513,7 +460,6 @@ body {
opacity: 1;
}
}
-/* Animación de escala para las imágenes */
@keyframes imageAnimation {
0% {
transform: scale(1);
@@ -522,8 +468,6 @@ body {
transform: scale(1.05);
}
}
-
-
/* MEDIA QUERIES */
/* MEDIA QUERY FOR HEADER SHARED BY ALL PAGES */
@@ -635,7 +579,7 @@ body {
}
.Intro-p {
text-align: center;
- font-size: 1.2rem;
+ font-size: 1rem;
padding-bottom: 1rem;
}
.Title-h2 {
@@ -643,6 +587,8 @@ body {
}
.Main-header{
gap: 1rem;
+ padding: 1rem 0;
+ min-height: auto;
}
.Date-span,
.Place-span {
diff --git a/css/vicentslife.css b/css/vicentslife.css
index ec05ee0..d0873f4 100644
--- a/css/vicentslife.css
+++ b/css/vicentslife.css
@@ -1,24 +1,10 @@
-/*vincentslife.css*/
-/*
--Reset: estilos de reseteo iguales para todas las páginas de la web
--Header: estilos del encabezado iguales para todas las páginas de la web.
--Main
--Botones: next y previous para poderse desplazar por las categorías
--Container: grid para las imágenes y diferentes secciones
--Animaciones
--Media Queries
-*/
-
-/* ---- RESET empieza aquí ---- */
-/* Descripción: Estilos de reseteo para la normalización de estilos predeterminados del navegador. */
-/* Reset general para todos los elementos */
+/* RESET */
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
-/* Estilos para elementos multimedia */
img,
picture,
video,
@@ -28,22 +14,18 @@ figure {
width: 100%;
display: block;
}
-/* Estilos para enlaces */
a {
display: block;
text-decoration: none;
color: inherit;
font-size: inherit;
}
-/* Estilos especiales para enlaces dentro de párrafos */
p a {
display: inline;
}
-/* Estilos para listas sin viñetas */
li {
list-style-type: none;
}
-/* Estilos para elementos de texto */
h1,
h2,
h3,
@@ -63,7 +45,6 @@ em {
text-decoration: none;
color: inherit;
}
-/* Estilos para formularios y elementos de formulario */
form,
input,
textarea,
@@ -82,27 +63,17 @@ label {
-moz-appearance: none;
appearance: none;
}
-/* Estilos para elementos SVG */
svg {
display: block;
fill: #ffd147;
}
-/* Estilos para el cuerpo del documento */
-html {
- overflow: hidden;
-}
body {
min-height: 100vh;
font-size: 100%;
margin: auto;
font-family: "Playfair Display", serif;
}
-/* ---- RESET acaba aquí ---- */
-
-/* ---- HEADER empieza aquí ---- */
-/* Descripción: Estilos para el encabezado del sitio web. */
-
-/* Estilos para el contenedor del encabezado */
+/* HEADER */
.Header {
max-width: 95%;
margin: auto;
@@ -114,7 +85,6 @@ body {
border-bottom: 0.1563rem solid #ffd147;
}
/* HEADER LEFT */
-/* Estilos para el lado izquierdo del encabezado */
.Header-left {
width: calc(3.5rem + 0.0625rem);
height: 3.5rem;
@@ -125,7 +95,6 @@ body {
border-radius: 50%;
border: 2.5px solid #ffd147;
}
-/* Estilos para la imagen del encabezado */
.Header-img {
width: 3rem;
height: 3rem;
@@ -136,12 +105,10 @@ body {
transform: translate(-50%, -50%);
}
/* HEADER CENTER */
-/* Estilos para la firma en el centro del encabezado */
.Header-signature {
max-width: 8.5rem;
}
/* HEADER NAV */
-/* Estilos para el menú de navegación */
.Header-ul {
opacity: 0;
background-color: #ffd147;
@@ -164,29 +131,24 @@ body {
transition: all 0.6s ease-in-out;
animation: menuSliderOff 0.6 ease;
}
-/* Estilos para activar el menú de navegación */
.Header-ul.isActive {
opacity: 1;
right: 0%;
animation: menuSliderOn 0.6s ease;
}
-/* Estilos para los elementos de lista en el menú de navegación */
.Header-li {
transition: all 0.5s ease;
}
-/* Estilos para los enlaces en el menú de navegación */
.Nav-link {
font-size: 5rem;
font-weight: 900;
text-transform: uppercase;
text-shadow: 0.5px 0.5px 1px rgb(136, 136, 136);
}
-/* Estilos de animación al pasar el mouse sobre los enlaces */
.Header-li:hover .Nav-link {
animation: imageAnimation .3s ease-in-out both 1;
}
-/* Estilos para las imágenes de fondo en los enlaces */
.Nav-img {
opacity: 0;
width: 100%;
@@ -201,21 +163,17 @@ body {
pointer-events: none;
transition: all .5s ease;
}
-/* Estilos de animación al pasar el mouse sobre las imágenes de fondo */
.Header-li:hover .Nav-img {
opacity: .75;
}
-/* Estilos para los enlaces no activos que no tienen el mouse sobre ellos */
.Nav-link.notActive:not(:hover) {
opacity: 0.5;
}
-/* Estilos para el icono "hamburguesa" */
.Hamburger {
cursor: pointer;
position: relative;
z-index: 2;
}
-/* Estilos para el círculo que rodea el icono "hamburguesa" */
.Circle {
opacity: 0;
width: 3rem;
@@ -233,12 +191,10 @@ body {
transition: all 0.5s ease;
pointer-events: none;
}
-/* Estilos para activar el círculo que rodea el icono "hamburguesa" */
.Circle.isActive {
opacity: 1;
pointer-events: auto;
}
-/* Estilos para las barras del icono "hamburguesa" */
.Bar {
display: block;
width: 1.5625rem;
@@ -248,7 +204,6 @@ body {
transition: all 0.5s ease-in-out;
filter: drop-shadow(0.25px 0.25px 0.5px #c59403);
}
-/* Estilos para las barras al activar el icono "hamburguesa" */
.Hamburger.isActive .Bar:nth-child(2) {
transform: translateY(8px) rotate(45deg);
background-color: white;
@@ -261,14 +216,7 @@ body {
transform: translateY(-8px) rotate(-45deg);
background-color: white;
}
-/* ---- HEADER acaba aquí ---- */
-
-
-/* ---- MAIN empieza aquí ---- */
-/* Descripción: Estilos para el contenido principal del sitio web. */
-
/* MAIN */
-/* Estilos para el contenedor principal */
.Main {
margin: 0.7rem;
height: 87vh;
@@ -278,10 +226,6 @@ body {
justify-content: center;
align-items: center;
}
-
-/* ---- Botones Siguiente y Anterior ---- */
-
-/* Estilos para los contenedores de los botones Siguiente y Anterior */
.Next-container,
.Prev-container {
border-radius: 50%;
@@ -296,11 +240,9 @@ body {
box-shadow: 1px 1px 2px #503b02;
}
-/* Estilos para el contenedor del botón Siguiente */
.Next-container {
left: 96%;
}
-/* Estilos para los botones Siguiente y Anterior */
.Next-btn,
.Prev-btn {
width: 4.7rem;
@@ -316,7 +258,6 @@ body {
transition: all ease 0.7s;
cursor: pointer;
}
-/* Estilos para las imágenes de los botones Siguiente y Anterior */
.Next-svg,
.Prev-svg {
fill: #775906;
@@ -329,12 +270,10 @@ body {
transition: all ease 0.7s;
filter: drop-shadow(1px 1px 1px #c59403);
}
-/* Efecto de escala al hacer hover en las imágenes de los botones Siguiente y Anterior */
.Next-svg:hover,
.Prev-svg:hover {
transform: scale(1.2);
}
-/* Estilos para los botones Siguiente y Anterior activos */
.Prev-container.isActive {
opacity: 1;
pointer-events: auto;
@@ -343,19 +282,12 @@ body {
opacity: 1;
pointer-events: auto;
}
-/* ---- Fin de los estilos de los botones Siguiente y Anterior ---- */
-
-/* ---- Cuadrícula de cuatro columnas ---- */
-
-/* Estilos para el contenedor principal de la cuadrícula */
.Grid-container {
min-height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.625rem;
}
-
-/* Estilos para la primera columna con texto */
.Column-text {
display: flex;
flex-flow: column nowrap;
@@ -363,7 +295,6 @@ body {
align-items: start;
gap: 3rem;
}
-/* Estilos para el título de la primera columna */
.Column-h1 {
font-size: 6.5rem;
font-weight: 900;
@@ -373,14 +304,12 @@ body {
text-shadow: 0.5px 0.5px 0.5px #434343;
color: #ffd147;
}
-/* Estilos para el párrafo de la primera columna */
.Column-p {
width: 75%;
color: #775906;
max-width: 80%;
font-size: 1.8rem;
}
-/* Estilos para las otras columnas con imágenes */
.Column-images {
border-radius: 1.5rem;
@@ -390,11 +319,9 @@ body {
box-shadow: 1px 1px 1px #8a8a8a;
}
-/* Estilos para ocultar las otras columnas con imágenes */
.Column-images.isHidden {
display: none;
}
-/* Estilos para las imágenes de las columnas */
.Column-img {
min-height: 100%;
-webkit-filter: grayscale(60%);
@@ -403,7 +330,6 @@ body {
object-fit: cover;
transition: all 0.5s ease;
}
-/* Estilos para el marco de las imágenes de las columnas */
.Column-frame {
border: 0.25rem solid #ffd147;
width: 100%;
@@ -416,7 +342,6 @@ body {
transform: translate(-50%, 50%) scale(0.96);
transition: all ease 0.8s;
}
-/* Estilos para el título de las imágenes de las columnas */
.Column-h2 {
opacity: 0;
font-size: 4.8rem;
@@ -424,25 +349,19 @@ body {
text-align: center;
}
-/* Estilos para mostrar el título cuando la imagen se activa (hover) */
.Column-h2.isActive {
opacity: 1;
}
-/* Efecto al hacer hover en las imágenes de las columnas */
.Column-images:hover .Column-img {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
transform: scale(1.1);
}
-/* Efecto al hacer hover en las imágenes de las columnas */
.Column-images:hover .Column-h2 {
color: #ffd147;
animation: slideDown 0.5s ease both;
}
-/* ---- MAIN acaba aquí ---- */
-
-/* ---- Animaciones para el Encabezado (Header) ---- */
-/* Animación para que el menú se desasparezca */
+/* ANIMATIONS */
@keyframes menuSliderOff {
from {
opacity: 1;
diff --git a/death.html b/death.html
index d81711c..402f30a 100644
--- a/death.html
+++ b/death.html
@@ -1,14 +1,6 @@
-
-
@@ -25,10 +17,6 @@
Vincent's life - Death & Legacy -- - -On July 27, 1890, at the age of 37, he died from a self-inflicted gunshot wound in the chest. Van Gogh had struggled with mental illness for much of his life, and his death is widely believed to have been a result of his struggles with depression, anxiety, and other mental health issues.
-
diff --git a/earlylife.html b/earlylife.html
index 8499577..adf710e 100644
--- a/earlylife.html
+++ b/earlylife.html
@@ -1,14 +1,6 @@
-
-
@@ -25,10 +17,6 @@
Vincent's life - Early Life -- - -1853
As a child, Vincent was described as serious and thoughtful. After leaving school, Vincent worked for an art dealer in The Hague, and later, for an art dealer in London.
Vincent's Life - Personal Life -- - -Vincent's difficult relationship with his parents may have contributed to his emotional and psychological struggles later in life. He suffered from depression, anxiety, and other mental @@ -100,9 +81,7 @@
personal life
--
@@ -121,7 +100,6 @@ social interaction
@@ -140,7 +118,6 @@ hospitalization
diff --git a/journeys.html b/journeys.html
index fa677c1..18fd0c8 100644
--- a/journeys.html
+++ b/journeys.html
@@ -1,14 +1,6 @@
-
-
@@ -25,10 +17,6 @@
Vincent's life - Journeys & Places -- - -Van Gogh's travels and experiences were crucial to the development of his unique artistic style. His use of color and brushwork was heavily influenced by the landscapes and cultures he @@ -102,7 +83,6 @@
journeys & places
-
From 743af1e954a12e52b1605172102cfe311547fdc1 Mon Sep 17 00:00:00 2001
From: Marina Terentii <125751323+Artentii@users.noreply.github.com>
Date: Sat, 22 Jul 2023 17:06:33 +0200
Subject: [PATCH 2/2] Adjustments mobile optimization
---
assets/contact/lirios.png | Bin 19620 -> 20415 bytes
css/career.css | 1 +
css/contact.css | 3 +++
css/death.css | 1 +
css/discover.css | 11 +++--------
css/earlylife.css | 1 +
css/illness.css | 1 +
css/index.css | 1 +
css/journeys.css | 1 +
css/vicentslife.css | 1 +
index.html | 4 ++--
11 files changed, 15 insertions(+), 10 deletions(-)
diff --git a/assets/contact/lirios.png b/assets/contact/lirios.png
index e0ddd7254cca0403e91763a90f97a87a3d330158..9efc507b1fe78183237cead30409aa0e19d768af 100644
GIT binary patch
literal 20415
zcma%ig;$i_7cSCBOQ(X;4br6uBHcMNbi>e{(g*?{(k&n$3>`xZDb0}5okNFo!ySJ2
z{sEV@SgiG~m;LUu_c_n5=X_IFmB)Wc{SpNQ1z+KdtR@P|3jp$09vc(+gmB>)ANhyM
zT~6O!%gM^!%hc5p<)ej@ndKV=u&K4BrlqNckIR6i1PY3psez_ta^33 z_P&h+izbKI{ZKXKvY+3+$(-{3cF+Lema9tl8e?(}Uae!JSREkuyF_O`$({$0r(y@I zSE{ve`d we#`K z;M`a3MN%myjkiDfb~yI!w3zh(>@vSAxzA?;{xxmf?7~KXi~OIXdVWlL`N}GD5yXGC zwP^Il%uxNw=Z8o7IuaStI9aJFHv+2#19>F>?Yx yt{HTBqa#_VH82Q`=sq;&zj*}Uef3Y#X zKjdNK7gJWM|0o(K@CqtcT56nY%%sOs=kGxiM*iHP5H}z U@8rnJl9>{#2haBY?YJ$7f|_ z`zrn|E-&R9G+*zp)+DK($o~DadOjK&pW)wSU!4ygZHE_>%i7#b-Xk|3eyjTdxeMqs zR`5Bop_WZ!>mM_+c_HK0c?5)cvuKNa0 YI+*=EE1Lq z8Od