diff --git a/2024-01/componentes/equilibrio.html b/2024-01/componentes/equilibrio.html index 9f0fc93..e31955b 100644 --- a/2024-01/componentes/equilibrio.html +++ b/2024-01/componentes/equilibrio.html @@ -1,35 +1,27 @@ - - - - - - - Encuentra tu equilibrio - - -
-
- - Menú - - - Menú - -
-
-
- - - + + + + + + + Encuentra tu equilibrio + + + +
+
+ +

Encuentra tu equilibrio

+

Inicio

+ +
+ +
+
+ + + + \ No newline at end of file diff --git a/2024-01/componentes/literatura.html b/2024-01/componentes/literatura.html index 0ff98bb..ed2dde5 100644 --- a/2024-01/componentes/literatura.html +++ b/2024-01/componentes/literatura.html @@ -8,15 +8,13 @@ ¡Si quieres, léeme! - +
-
- - Amistad - - - Menú - +
+ +

¡Si quieres, léeme!

+

Inicio

+
diff --git a/2024-01/componentes/positivismo.html b/2024-01/componentes/positivismo.html index b3f4148..528d887 100644 --- a/2024-01/componentes/positivismo.html +++ b/2024-01/componentes/positivismo.html @@ -8,15 +8,13 @@ Del polo negativo al positivo - +
-
- - positivismo - - - Menú - +
+ +

Del polo negativo al positivo

+

Inicio

+
diff --git a/2024-01/componentes/procrastinacion.html b/2024-01/componentes/procrastinacion.html index 739f21a..33e4a2f 100644 --- a/2024-01/componentes/procrastinacion.html +++ b/2024-01/componentes/procrastinacion.html @@ -8,15 +8,13 @@ ¡Procrastinación, hoy no! - +
-
- - Amistad - - - Menú - +
+ +

¡Procrastinación, hoy no!

+

Inicio

+
diff --git a/2024-01/componentes/productividad.html b/2024-01/componentes/productividad.html index 2decbe9..87b966f 100644 --- a/2024-01/componentes/productividad.html +++ b/2024-01/componentes/productividad.html @@ -8,15 +8,13 @@ ¿Productivo? sí se puede - +
-
- - Amistad - - - Menú - +
+ +

¿Productivo? sí se puede

+

Inicio

+
diff --git a/2024-01/css/componentes.css b/2024-01/css/componentes.css index e1bc9ca..3661d94 100644 --- a/2024-01/css/componentes.css +++ b/2024-01/css/componentes.css @@ -1,66 +1,67 @@ -.sep-body-nov { +.ene-body { height: 100%; + background: rgb(194, 183, 184); + background: linear-gradient(180deg, rgba(194, 183, 184, 1) 0%, rgba(240, 238, 238, 1) 100%); + color: #5e5555; + } -.header-sep { +.header-ene{ width: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - position: fixed; - top: 0; - background-image: url(../img/positivo.png); - background-size: cover; - background-color: #ffff; - border-bottom: 1px solid #24A638; + height: 130px; + background-color: rgb(214, 214, 214); + background-image: url(../img/literatura.png); + background-size: contain; + background-position: center; + background-repeat: repeat-x; + position:fixed + } -.header-sep img { - display: flex; +.header-ene-banner { + display: flex;; justify-content: center; + flex-direction: column; align-items: center; - width: 50%; + height: 100%; + gap: 20px; } -.header-sep { - background-image: url("../img/ban.png"); - background-repeat: no-repeat; - background-size: cover; +.header-ene-banner h1{ + padding: 0 10px; + margin: 0; + font-size: 35px; + box-shadow: 0.2em 0.2em 0.2em #c5c4c449; } - -.menu-img-1 { - margin: 6px; - padding: 2px; +.header-inicio { + background-color: #00B18D; + padding: 5px 20px; + color: #ffff; + border-radius: 20px; + font-size: 10px; + font-weight: bold; + box-shadow: 0.2em 0.2em 0.2em #dafff8; } -.menu-img-1:hover { - transition: 0.2s; +.header-inicio:hover { background-color: #ffff; - border-radius: 100%; + padding: 5px 20px; + color: #00B18D; } -.header-sep a { - display: flex; - justify-content: center; - align-items: center; -} .all-books { - margin: 3%; - padding-top: 160px; display: flex; flex-wrap: wrap; - justify-content: space-around; + justify-content: center; + padding: 160px 5% 5% 5%; + gap: 30px; } -.all-books div { - margin: 2% 0; -} .books { - width: 550px; + width: 32rem; display: flex; justify-content: center; align-items: center; @@ -71,10 +72,12 @@ } +.books { + box-shadow: 0.2em 0.2em 0.2em #00b18e86; +} + .books:hover { - box-shadow: - inset 0 -1em 2em rgba(9, 255, 103, 0.336), - 0.3em 0.3em 1em #24A638; + box-shadow: 0.2em 0.2em 0.2em #00b18e; } .books img { @@ -82,23 +85,24 @@ height: 300px; margin: 10px; border-radius: 20px; - object-fit: cover; + object-fit:fill; } .books-details { width: 60%; - padding: 20px; + padding: 30px; box-sizing: border-box; + justify-content: space-between; } .books-details h2 { - font-size: 22px; + font-size: 18px; font-family: var(--letra); display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 2; + -webkit-line-clamp: 3; line-clamp: 2; overflow: hidden; box-sizing: border-box; @@ -111,7 +115,7 @@ .books-details h3 { - font-size: 16px; + font-size: 14px; font-family: var(--letra); display: -webkit-box; -webkit-box-orient: vertical; @@ -127,7 +131,7 @@ } .books-details p { - font-size: 14px; + font-size: 12px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; @@ -144,24 +148,25 @@ .button-acceso { text-decoration: none; list-style-type: none; + background-color: #6d5c5d; + color: #ffff; width: 100px; padding: 5px; text-align: center; - border: 1px solid var(--background-negro); border-radius: 5px; font-size: 12px; margin-top: 25px; - box-shadow: 0 5px 15px rgba(0, 0, 0, .06); + box-shadow: 0.2em 0.2em 0.2em #c5c4c4ad; + } .button-acceso a { - color: var(--background-negro); font-weight: bolder; } .button-acceso:hover { - background-color: #24A638; - border: #24A638; + background-color: #00B18D; + border: #00B18D; } .button-acceso:hover a { @@ -183,29 +188,27 @@ animation: aparecer 1.5s ease-out; } -@media screen and (max-width: 1270px) { - .all-books { - margin: 3%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; +@media screen and (max-width: 1200px) { + .books { + width: 25rem; } } - -@media screen and (max-width: 530px) { - - .header-sep { - width: 100%; +@media screen and (max-width: 590px) { + .header-ene{ + height: 100px; } - .header-sep img { - width: 100%; + .header-ene-banner h1{ + transition: 0.4s; + font-size: 18px; + padding-top: 20px; } + .all-books { - margin: 3%; + transition: 0.4s; + margin: 0; display: flex; flex-direction: column; justify-content: center; @@ -223,7 +226,7 @@ flex-direction: column; text-align: center; align-items: center; - width: 230px; + width: 250px; border-radius: 20px; height: 100%; } diff --git a/2024-01/css/style.css b/2024-01/css/style.css index b42978d..bc734bd 100644 --- a/2024-01/css/style.css +++ b/2024-01/css/style.css @@ -1,13 +1,6 @@ :root { --background-negro:#151314; --background-blanco:#faf9f9; - --background-gris:#2d3a44; - --background-lila:#9fbe37; - --color-f-derecho:#76150C; - --color-f-educacion:#018BBA; - --color-f-economia:#BA6B2D; - --color-f-ingenieria: #533014; - --color-f-arquitectura:#5F2718; --letra:'Roboto', sans-serif; } @@ -15,10 +8,11 @@ body, html { width: 100%; height: 100%; - background-color: black; + background-color: #4c4041; display: flex; justify-content: center; align-items: center; + color: #594b4c; } .container { @@ -66,7 +60,7 @@ body, html { flex-direction: column; justify-content: center; align-items: center; - color: black; + color: #594b4c; gap: 15px; font-weight: bold; text-align: center; @@ -153,31 +147,31 @@ body, html { transition: 0.1s; animation: myAnim 2s ease 0s 1 normal forwards; background-color: #ffff; - border: 3px solid #018BBA; + border: 3px solid #00B18D; } .grid-categoria2:hover { transition: 0.1s; animation: myAnim 2s ease 0s 1 normal forwards; background-color: #ffff; - border: 3px solid #018BBA; + border: 3px solid #00B18D; } .grid-categoria3:hover { transition: 0.1s; animation: myAnim 2s ease 0s 1 normal forwards; background-color: #ffff; - border: 3px solid #018BBA; + border: 3px solid #00B18D; } .grid-categoria4:hover { transition: 0.1s; animation: myAnim 2s ease 0s 1 normal forwards; background-color: #ffff; - border: 3px solid #018BBA; + border: 3px solid #00B18D; } .grid-categoria5:hover { transition: 0.1s; animation: myAnim 2s ease 0s 1 normal forwards; background-color: #ffff; - border: 3px solid #018BBA; + border: 3px solid #00B18D; } .grid-whats:hover{ @@ -185,7 +179,7 @@ body, html { animation: myAnim 2s ease 0s 1 normal forwards; cursor: pointer; background-color: #ffff; - border: 3px solid #2BB140; + border: 3px solid #00B18D; } @@ -199,7 +193,7 @@ body, html { transition: 0.1s; animation: myAnim 2s ease 0s 1 normal forwards; cursor: pointer; - border-bottom: 2px solid #018BBA; + border-bottom: 2px solid #00B18D; padding-bottom: 2px; } diff --git a/2024-01/img/literatura.png b/2024-01/img/literatura.png new file mode 100644 index 0000000..d37b8c6 Binary files /dev/null and b/2024-01/img/literatura.png differ diff --git a/2024-01/img/positivo.png b/2024-01/img/positivo.png deleted file mode 100644 index 78e71dd..0000000 Binary files a/2024-01/img/positivo.png and /dev/null differ diff --git a/2024-01/img/whatsapp.png b/2024-01/img/whatsapp.png index 60dafdb..ac498b8 100644 Binary files a/2024-01/img/whatsapp.png and b/2024-01/img/whatsapp.png differ