From 7b991cd0b25f3a9e7c14370583520ed59aa86256 Mon Sep 17 00:00:00 2001
From: MelissaAyllon <mayllon@espol.edu.ec>
Date: Mon, 5 Aug 2024 21:09:52 -0500
Subject: [PATCH] responsive footer

---
 src/lib/components/Footer.svelte | 24 ++++++++++++------------
 src/routes/+page.svelte          |  5 +++++
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 9b39d67..78f6a9a 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,18 +1,18 @@
-<script>
+<script src="https://cdn.jsdelivr.net/npm/simple-icons@13.4.0/index.min.js">
     import { siFacebook, siX, siInstagram, siGithub } from 'simple-icons';
 </script>
 
 <footer>
-    <div class="flex flex-col gap-6 justify-between px-6">
+    <div class="flex flex-col gap-6 justify-between p-6">
 
-        <div class="flex flex-row gap-96 justify-between">
-            <img src="/path/to/image.png" alt="Mascota"/>
-            <div class="flex flex-col gap-2 justify-between" >
+        <div class="flex sm:flex-col md:flex-row md:gap-96 justify-between">
+            <img class="invisible md:visible" src="" alt="Mascota"/>
+            <div class="flex flex-col gap-2 lg:justify-between" >
                 <h2>SUBSCRIBE TO OUR NEWSLETTER</h2>
                 <p>The latest news, articles, and resources, sent to your inbox weekly.</p>
-                <div class="flex flex-row gap-2 justify-between ">
-                    <input class="w-3/4 text-black pr-4 pl-4 rounded" type="email" placeholder="Enter your email"/>
-                    <button class="text-white bg-green-600 rounded-lg p-3 m-2 w-1/4">Subscribe</button>
+                <div class="flex flex-col md:flex-row gap-2 justify-between ">
+                    <input class="w-1/1 h-10 md:h-full md:w-3/4 text-black pr-1 pl-1 md:pr-4 md:pl-4 rounded" type="email" placeholder="Enter your email"/>
+                    <button class="text-white bg-green-600 rounded-lg p-3 m-2 w-1/3 md:w-1/4 truncate">Subscribe</button>
                 </div>
             </div>
         </div>
@@ -22,16 +22,16 @@
             <div class="flex gap-6 text-gray-300">
                 <span class="icon-[mdi--facebook]"></span>
                 <a href="https://www.facebook.com/profile.php?id=100081089247661&locale=es_LA">
-                <img src={`data:image/svg+xml;base64,${btoa(siFacebook.svg)}`} alt="Facebook" class= "w-4 h-4"/>
+                    <img height="32" width="32" src="https://cdn.simpleicons.org/facebook/white" alt="Facebook" class= "w-4 h-4"/>
                 </a>
                 <a href="https://x.com/kokoaespol" >
-                <img src={`data:image/svg+xml;base64,${btoa(siX.svg)}`} alt="X" class= "w-4 h-4"/>
+                    <img height="32" width="32" src="https://cdn.simpleicons.org/x/white" alt="X" class= "w-4 h-4"/>
                 </a>
                 <a href="https://www.instagram.com/kokoa_espol/?hl=es" >
-                <img src={`data:image/svg+xml;base64,${btoa(siInstagram.svg)}`} alt="Instagram" class= "w-4 h-4" />
+                    <img height="32" width="32" src="https://cdn.simpleicons.org/instagram/white" alt="Instagram" class= "w-4 h-4"/>
                 </a>
                 <a href="https://github.com/kokoaespol" >
-                <img src={`data:image/svg+xml;base64,${btoa(siGithub.svg)}`} alt="Github" class= "w-4 h-4" />
+                    <img height="32" width="32" src="https://cdn.simpleicons.org/github/white" alt="Github" class= "w-4 h-4"/>
                 </a>
             </div>
         </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index fabbf29..8e0bb6b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,2 +1,7 @@
+<script>
+    import Footer from "$lib/components/Footer.svelte";
+</script>
 <h1 class="font-mono text-5xl">Bienvenido a KOKOA</h1>
 <p class="font-mono">Promovemos la programación orientada al comunismo</p>
+
+<Footer></Footer>