diff --git a/src/app.css b/src/app.css index 9fd82ef..0feaa94 100644 --- a/src/app.css +++ b/src/app.css @@ -1,5 +1,8 @@ @import '@fontsource/fira-mono'; -@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Prata&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@300;800&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap'); + * { margin: 0; diff --git a/src/lib/Asesoramiento.svelte b/src/lib/Asesoramiento.svelte index 2669248..d930429 100644 --- a/src/lib/Asesoramiento.svelte +++ b/src/lib/Asesoramiento.svelte @@ -17,7 +17,8 @@ + diff --git a/src/lib/Header/Header.svelte b/src/lib/Header/OldHeader.svelte similarity index 100% rename from src/lib/Header/Header.svelte rename to src/lib/Header/OldHeader.svelte diff --git a/src/lib/Slider.svelte b/src/lib/Slider.svelte index 2e91471..9288bc6 100644 --- a/src/lib/Slider.svelte +++ b/src/lib/Slider.svelte @@ -5,17 +5,18 @@
@@ -28,28 +29,27 @@ height: 500px; display: grid; justify-content: center; - z-index: 3; + z-index: 0; overflow: hidden; + grid-template-columns: 1fr 1fr; } .slider-image { max-height: 500px; z-index: 2; + grid-column: 1/2; + overflow: hidden; } .slider-image img { - width: 100%; - position: absolute; - bottom: 0; - left: 0; - z-index: 1; + object-fit: cover; + object-position: -480px bottom; } .slider-content { position: absolute; - bottom: calc(1rem); + bottom: 0; right: calc(1rem - 12px); width: 60%; height: auto; - background: linear-gradient(120deg, rgba(179, 15, 29, 0.75) 0%, #B30F1D 100%); display: grid; align-content: center; justify-content: center; @@ -59,17 +59,34 @@ .slider-title { text-align: center; - font-size: 2rem; + font-size: 4rem; font-weight: 900; - text-transform: uppercase; - font-family: 'Open Sans', sans-serif; - color: #efefef; + font-family: 'Prata'; + color: #fff; + line-height: 3.5rem; + text-shadow: 0 0 1.5rem rgba(124, 29, 29, 1); } .slider-text { - font-size: 1.2rem; + font-size: 1.5rem; margin-top: 1rem; color: white; + /* background: linear-gradient(180deg, rgba(179, 15, 29, 0) 10%, #B30F1Dcc 100%); */ + /* background: rgba(178, 34, 34, 0.7 ); */ + /* background: rgba(124, 58, 58,0.85); */ + background: linear-gradient(140deg, rgba(124, 43, 43, 0.5) 0%, rgba(128, 29, 29, 0.8) 70%); + padding: 1rem; + border-radius: 8px; + font-family: 'Oswald'; +} + +.ref { + position: absolute; + top: 2rem; + left: 1rem; + color: firebrick; + font-size: 1rem; + z-index: 10; } @media (max-width: 768px) { @@ -92,11 +109,16 @@ } .slider-title { - font-size: 1.5rem; + font-size: 3.5rem; } .slider-text { - font-size: 1rem; + font-size: 1.5rem; + line-height: 1.8rem; + background: linear-gradient(140deg, rgba(124, 43, 43, 0.2) 0%, rgba(128, 29, 29, 0.9) 50%); + } + .ref { + top: 1rem; } } \ No newline at end of file diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index 3ee92c6..f68b5ad 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -1,5 +1,6 @@ diff --git a/src/routes/index.svelte b/src/routes/index.svelte index 99fb5f7..24a2870 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -15,14 +15,17 @@ import Asesoramiento from "$lib/Asesoramiento.svelte";