Finalize layout

Author: ctrl-vi

public/images/github.svg

@@ -1,11 +1,27 @@
 ---
 import Social from "./Social.astro";
----
+import "./Footer.css";
 
-<style>
-</style>
+const year = new Date().getFullYear();
+---
 
 <footer>
-    <Social platform="github" username="ctrl-vi" />
-    <Social platform="linkedin" username="in/violet-monserate" />
+  <div class="info">
+    <p>© {year} Violet Monserate. All rights reserved.</p>
+    <p>Developed using <a href="https://astro.build/">Astro.</a></p>
+    <p>
+      <a href="https://github.com/ctrl-vi/ctrl-vi.github.io/issues"
+        >Report Bugs</a>
+    </p>
+  </div>
+    
+  <div class="socials">
+    <Social image="/images/github.svg" link="https://github.com/ctrl-vi" />
+    <Social
+      image="/images/linkedin.svg"
+      link="https://www.linkedin.com/in/violet-monserate/"
+    />
+    <Social image="/images/phone.svg" link="tel:425-970-5779" />
+    <Social image="/images/mail.svg" link="mailto:violetmonserate@gmail.com" />
+  </div>
 </footer>

public/images/linkedin.svg

@@ -0,0 +1,43 @@
+footer {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    align-items: center;
+    box-sizing: border-box;
+    background-color:#7213ad;
+    width: 100%;
+    padding: 0.5em;
+}
+
+footer p {
+    font-size: 0.8em;
+    padding: 0.5em;
+    color: white;
+    margin: 0;
+}
+
+.info a {
+    color: #8c5dfb;
+}
+
+footer a:hover {
+    color: #b393ff;
+}
+
+.info {
+    flex: 0 0 auto;
+    
+}
+
+.socials > a {
+    padding: 0.5em;
+    color: white;
+    text-decoration: none;
+
+}
+.socials {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    flex: 0 0 auto;
+}

public/images/mail.svg

@@ -10,7 +10,7 @@
         height: auto;
     }
     img {
-        width: 5%;
+        width: 5em;
         height: auto;
         display: block;
         margin: auto;