added footer and style improvements

app/public/index.html

@@ -10,6 +10,9 @@
       content="House of Legends fans site"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200&display=swap" rel="stylesheet">
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

app/src/App.css

@@ -1,9 +1,8 @@
 .header {
     padding: 20px;
     background: #CCE3DE;
-    font-size: 20px;
+    font-size: 24px;
     font-weight: bold;
-    border-bottom: 1px solid #34463E;
 }
 
 .headerSubtitle {
@@ -21,13 +20,13 @@
 }
 
 .filterBlock {
-    padding: 20px 10px;
+    padding: 20px 10px 0;
     background: #EAF4F4;
 }
 
 .nameFilter {
     display: flex;
-    margin-bottom: 30px;
+    padding-bottom: 30px;
 }
 
 .traitsFilters {
@@ -48,9 +47,15 @@
     border-radius: 15px;
 }
 
+.footer {
+    background: #CCE3DE;
+    margin-top: 20px;
+    padding: 30px;
+    text-align: center;
+}
+
 @media only screen and (max-width: 768px) {
     .header {
-        padding: 20px;
         font-size: 16px;
     }
 
@@ -65,6 +70,16 @@
     }
 
     .filterBlock {
-        padding: 15px 5px;
+        padding: 15px 5px 0;
+    }
+
+    .nameFilter {
+        padding-bottom: 20px;
+    }
+
+    .footer {
+        font-size: 14px;
+        padding: 20px 10px;
+        line-height: 1.5em;
     }
   }

app/src/App.js

@@ -106,6 +106,11 @@ function App() {
         pageSize={PageSize}
         onPageChange={page => setCurrentPage(page)}
       />
+      <div className='footer'>
+        <p>
+          If you enjoy this site, consider donating to 0x8B5f432940055A63761919B173BAe66f918789B0
+        </p>
+      </div>
     </>
   );
 }

app/src/components/Card.css

@@ -1,16 +1,24 @@
 .card {
-    border: 1px #757575 solid;
+    border: 1px #A4C3B2 solid;
     text-align: center;
     margin: 0 5px 10px;
     width: 20%;
+    padding: 20px 10px;
+    box-sizing: border-box;
   }
 
   .cardTitle {
-    padding: 10px 0;
+    padding-top: 20px;
+    font-size: 14px;
   }
 
   @media only screen and (max-width: 768px) {
     .card {
       width: 45%;
+      padding: 10px 5px;
+    }
+    .cardTitle {
+      padding-top: 10px;
+      font-size: 12px;
     }
   }

app/src/components/FilterMenu.css

@@ -11,6 +11,7 @@
     outline: none;
     cursor: pointer;
     color: #34463E;
+    font-size: 14px;
 }
 
 .filterMenuOptions {
@@ -21,5 +22,6 @@
     .filterMenu {
         margin: 0 5px;
         width: 45%;
+        font-size: 12px;
     }
   }

app/src/index.css

@@ -1,27 +1,44 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video, select {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+  font-family: 'Inter', sans-serif;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+	line-height: 1;
 }
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+ol, ul {
+	list-style: none;
 }
-
-ul {
-  padding-inline-start: 0;
+blockquote, q {
+	quotes: none;
 }
-
-h1, p {
-  margin: 0;
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
 }
-
-@media only screen and (max-width: 768px) {
-  body, button, select {
-    font-size: 11px;
-  }
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
 }