Add: Footer styling

Author: rebecatschiedel

components/Footer.js

@@ -5,7 +5,7 @@ export default function Footer() {
   return (
     <footer className={footerStyles.footer}>
       <div className={footerStyles.container}>
-        <div className={footerStyles.column}>
+        <div className={footerStyles.columnLeft}>
           <ul className={footerStyles.footerList}>
             <li className={footerStyles.footerItem}>
               <Link href="/about-us">
@@ -23,12 +23,16 @@ export default function Footer() {
               </Link>
             </li>
           </ul>
-          <img src="/images/web-dev-path-logo-small.png" alt="Logo" />
+          <img
+            className={footerStyles.logo}
+            src="/images/web-dev-path-logo-small.png"
+            alt="Logo"
+          />
         </div>
-        <div className={footerStyles.column}>
+        <div className={footerStyles.columnRight}>
           <div className={footerStyles.subscribe}>
             <h2>Subscribe for more</h2>
-            <p>
+            <p className={footerStyles.text}>
               Get the answer to the most common questions directly to your email
             </p>
             <form>
@@ -39,15 +43,21 @@ export default function Footer() {
           </div>
           <div className={footerStyles.socialMedia}>
             <Link href="#">
-              <img src="" alt="Github" />
+              <img src="iconmonstr-github-1.svg" alt="Github" />
             </Link>
             <Link href="#">
-              <img src="" alt="Twitter" />
+              <img
+                className={footerStyles.socialMedia__item}
+                src="iconmonstr-twitter-4.svg"
+                alt="Twitter"
+              />
             </Link>
           </div>
         </div>
       </div>
-      <p>Web Dev Path 2021. All rights reserved.</p>
+      <p className={footerStyles.copyright}>
+        Web Dev Path 2021. All rights reserved.
+      </p>
     </footer>
   );
 }

public/iconmonstr-github-1.svg

@@ -1,43 +1,118 @@
 .footer {
   width: 100%;
-  border-top: 1px solid #eaeaea;
 }
 
-.footer ul {
+.footerList {
   list-style: none;
   padding: 0;
 }
 
 .container {
-  display: flex;
-  justify-content: space-around;
-  flex-wrap: wrap;
+  padding: 1rem 0;
   margin: 1rem;
-  border: 1px solid red;
+  border-top: 1px solid #696969;
+  border-bottom: 1px solid #696969;
+}
+
+.columnLeft {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-/* code {
-  background: #fafafa;
-  border-radius: 5px;
-  padding: 0.75rem;
-  font-size: 1.1rem;
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-    Bitstream Vera Sans Mono, Courier New, monospace;
-} */
+.footerItem + .footerItem {
+  margin-top: 0.5rem;
+}
 
 .logo {
-  height: 1em;
+  border-radius: 50%;
+  height: 5em;
+}
+
+.subscribe {
+  text-align: center;
+}
+
+.subscribe h2 {
+  margin-bottom: 0.8rem;
+  font-size: 1.8rem;
+}
+
+.subscribe p {
+  margin-top: 0.2rem;
+  font-size: 0.8rem;
+  color: #696969;
+}
+
+.subscribe .text {
+  font-size: 1rem;
+  color: #000;
+}
+
+.socialMedia {
+  margin: 1.8rem 0 1rem;
+  display: flex;
+  justify-content: center;
+}
+
+.socialMedia__item {
+  margin-left: 1rem;
+}
+
+.copyright {
+  font-size: 0.8rem;
+  color: #696969;
+  text-align: center;
 }
 
 @media (min-width: 578px) {
-  /* .footer {
+  .container {
+    max-width: 800px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .columnLeft {
     display: flex;
-    align-items: center;
     flex-direction: column;
-  } */
+  }
 
-  .container {
+  .columnRight {
+    width: 55%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .subscribe {
+    text-align: left;
+  }
+
+  .subscribe h2 {
+    margin-top: 0.5rem;
+  }
+
+  .subscribe input {
+    height: 1.8rem;
+    width: 65%;
+  }
+
+  .subscribe button {
+    height: 1.8rem;
+    width: 30%;
+  }
+
+  .socialMedia {
+    justify-content: flex-end;
+    margin-right: 1rem;
+  }
+
+  .copyright {
     max-width: 800px;
     margin: 0 auto;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    text-align: left;
   }
 }