From 4d9ec3e29c15fae66cd3018294aa6b14abacc15e Mon Sep 17 00:00:00 2001
From: Diego Valdez <dgogo9@hotmail.com>
Date: Thu, 28 May 2020 10:58:19 -0500
Subject: [PATCH 1/2] =?UTF-8?q?Personalizando=20el=20Loading=20y=20agregan?=
 =?UTF-8?q?do=20animaci=C3=B3n=20de=20greyscale?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.svelte | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 1040775..907cfe0 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -22,6 +22,12 @@
     margin: 0;
     filter: grayscale(100%);
   }
+
+  figure img:hover{
+    filter: grayscale(0%);
+    transition-duration: 4s;
+  }
+
   /* .Loading {
     background-color: aqua;
     width: 100px;
@@ -42,19 +48,29 @@
   .Loading {
     width: 300px;
     height: 300px;
-    background-color: #e1f0fc;
+    background-color: #ffffff;
     border-radius: 50%;
     border: 20px solid #9cadd7;
     border-top: 20px solid #2c3687;
-    animation: loader 6s linear infinite;
+    box-shadow: 0px 0px 20px 20px #2c3687;
+    animation: loader 3s linear infinite;
   }
 
   @keyframes loader {
     0% {
       transform: rotate(0deg);
+      border-top: 20px solid #2c3687;
+      box-shadow: 0px 0px 20px 20px #2c3687;
     }
-    100% {
+    50%{
       transform: rotate(360deg);
+      border-top: 20px solid #5a85c5;
+      box-shadow: 0px 0px 20px 20px #5a85c5;
+    }
+    100% {
+      transform: rotate(720deg);
+      border-top: 20px solid #2c3687;
+      box-shadow: 0px 0px 20px 20px #2c3687;
     }
   }
 </style>

From 709a841bff4877965c23aafad59de355bebb79d7 Mon Sep 17 00:00:00 2001
From: Diego Valdez <dgogo9@hotmail.com>
Date: Thu, 28 May 2020 11:18:18 -0500
Subject: [PATCH 2/2] Personalizado el sitio web

---
 public/global.css |  1 +
 src/App.svelte    | 20 +++++++++++++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/public/global.css b/public/global.css
index ec905f5..fc032b2 100644
--- a/public/global.css
+++ b/public/global.css
@@ -6,6 +6,7 @@ html, body {
 
 body {
 	color: #333;
+	background-color: rgb(76, 202, 196);
 	margin: 0;
 	padding: 8px;
 	box-sizing: border-box;
diff --git a/src/App.svelte b/src/App.svelte
index 907cfe0..7d263fe 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -28,6 +28,22 @@
     transition-duration: 4s;
   }
 
+  figure:hover{
+    scale: 1.2;
+    transition-duration: 2s;
+  }
+
+  figure img:hover + figcaption{
+    color: rgb(20, 73, 116);
+    transition-duration: 4s;
+  }
+
+  h1{
+    grid-column: 1 / 6;
+    text-align: center;
+    color: rgb(20, 73, 116);
+  }
+
   /* .Loading {
     background-color: aqua;
     width: 100px;
@@ -54,6 +70,8 @@
     border-top: 20px solid #2c3687;
     box-shadow: 0px 0px 20px 20px #2c3687;
     animation: loader 3s linear infinite;
+    grid-column: 3;
+    margin-top: 300px;
   }
 
   @keyframes loader {
@@ -75,8 +93,8 @@
   }
 </style>
 
-<div class="Loading" />
 <div class="characters">
+  <h1>Rick And Morty</h1>
   {#each characters as character}
     <figure>
       <img src={character.image} alt={character.name} />