añade highlights

src/app.css

@@ -21,6 +21,10 @@ main {
 }
 
 @media (max-width: 768px) {
+	body {
+		background: white;
+	}
+
 	main {
 		width: 100%;
 	}

src/lib/Footer.svelte

@@ -0,0 +1,16 @@
+<script></script>
+<div class="footer"><p>Derecho a Morir Dignamente</p></div>
+<style>
+p {
+  padding: 1rem;
+  color: firebrick;
+  text-transform: uppercase;
+}
+.footer {
+  min-height: 12rem;
+  display: grid;
+  align-items: flex-end;
+  justify-content: center;
+  background: lightgrey;
+}
+</style>

src/lib/Highlights.svelte

@@ -0,0 +1,127 @@
+<script></script>
+
+<div class="container">
+  <div class="highlight eutanasia">
+    <picture>
+      <source srcset="high-eutanasia-768w.jpg" media="max-width(768px)">
+      <source srcset="high-eutanasia.jpg">
+      <img srcset="high-eutanasia.jpg" alt="Socias de DMD se manifiestan a favor de la eutanasia">
+    </picture>
+    <div class="card">
+      <div class="text">
+        <h2>Ley de Eutanasia</h2>
+        <h3>Resuelve tus dudas</h3>
+      </div>
+    </div>
+  </div>
+
+  <div class="highlight testamento-vital">
+    <picture>
+      <source srcset="high-eutanasia-768w.jpg" media="max-width(768px)">
+      <source srcset="high-eutanasia.jpg">
+      <img srcset="high-eutanasia.jpg" alt="Socias de DMD se manifiestan a favor de la eutanasia">
+    </picture>
+    <div class="card">
+      <div class="text">
+        <h2>Testamento vital</h2>
+        <h3>Decide hasta el final</h3>
+      </div>
+    </div>
+  </div>
+  <div class="highlight asociate">
+    <picture>
+      <source srcset="high-eutanasia-768w.jpg" media="max-width(768px)">
+      <source srcset="high-eutanasia.jpg">
+      <img srcset="high-eutanasia.jpg" alt="Socias de DMD se manifiestan a favor de la eutanasia">
+    </picture>
+    <div class="card">
+      <div class="text">
+        <h2>Asóciate a DMD</h2>
+        <h3>Ayúdanos a defender tus derechos</h3>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  h2 {
+    font-size: 2rem;
+    text-transform: uppercase;
+    font-weight: 800;
+    text-align: right;
+  }
+  h3 {
+    font-size: 1.2rem;
+    font-weight: 300;
+    text-align: right;
+  }
+  .container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-gap: 1rem;
+    min-height: 180px;
+  }
+
+  .highlight {
+    padding: 0;
+    color: white;
+    box-shadow: 0 0 4px 0px rgba(0,0,0,0.5);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .highlight picture {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    z-index: 0;
+    width: 100%;
+  }
+
+  .highlight .card {
+    position: absolute;
+    display: grid;
+    padding: 1rem;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    justify-content: flex-end;
+    align-items: flex-end;
+  }
+  .highlight.eutanasia {
+    grid-column: 1/3;
+  }
+  .highlight.testamento-vital {
+    grid-column: 3/4;
+  }
+  .highlight.asociate {
+    grid-column: 4/5;
+  }
+
+  .eutanasia .card {
+    background: linear-gradient(120deg, #006e7fcc 0%, #006e7fff 100%);
+  } 
+  .testamento-vital .card {
+    background: linear-gradient(120deg, #e08115cc 0%, #e08115 100%);
+  }
+
+  .asociate .card {
+    grid-column: 4/5;
+    background: linear-gradient(120deg, #B30F1Dcc 0%, #B30F1D 100%);
+    
+  }
+
+  @media (max-width: 768px) {
+    .container {
+      grid-template-columns: 1fr;
+    }
+    .highlight.eutanasia, .highlight.testamento-vital, .highlight.asociate {
+      grid-column: 1/2;
+      margin-left: -8px;
+    }
+    .highlight {
+      height: 100px;
+    }
+  }
+</style>

src/lib/News.svelte

@@ -0,0 +1,4 @@
+<script></script>
+<div class="container">
+  
+</div>

src/routes/index.svelte

@@ -1,23 +1,44 @@
 <script context="module">
 	export const prerender = true;
-	import Slider from '$lib/Slider.svelte'
 </script>
 
 <script>
+import Footer from "$lib/Footer.svelte";
+import Slider from '$lib/Slider.svelte'
+import Highlights from '$lib/Highlights.svelte'
+import News from "$lib/News.svelte";
+
 </script>
 
 <svelte:head>
 	<title>Asociación Derecho a Morir Dignamente</title>
 </svelte:head>
 
-<section id="intro">
+<section>
 	<Slider />
 </section>
+<section>
+	<Highlights />
+</section>
+<section>
+	<News />
+</section>
+
+<footer>
+	<Footer />
+</footer>
 
 <style>
 	section {
 		background: white;
 		padding: 1rem;
+		display: block;
+		position: relative;
+		min-height: 6rem;
+	}
+	footer {
+		min-height: 6rem;
+		padding: 0;
 	}
 
 	@media (max-width: 768px) {