Design footer

src/components/Contact/Contact.js

@@ -3,20 +3,20 @@ import github from '../../assets/icons/github.png';
 
 const Contact = () => {
   return (
-    <div className='contact-section'>
+    <div className='contact'>
       <h2>Contact</h2>
-      <div className='email-container'>
+      <div className='contact__email-container'>
         <p>Email me at</p>
         <a href='mailto:[email protected]'>
-          <p className='email'> [email protected]</p>
+          <p className='contact__email'> [email protected]</p>
         </a>
       </div>
-      <div className='social-icons-container'>
+      <div className='contact__socials-container'>
         <a href='https://www.linkedin.com/in/rachel-soae-prather'>
-          <img className='social-icon' src={linkedin} alt='LinkedIn' />
+          <img className='contact__social' src={linkedin} alt='LinkedIn' />
         </a>
         <a href='https://github.com/rachelsoae'>
-          <img className='social-icon' src={github} alt='GitHub' />
+          <img className='contact__social' src={github} alt='GitHub' />
         </a>
       </div>
     </div>

src/components/Contact/_Contact.scss

@@ -1,14 +1,14 @@
 @use '../../styles/variables' as *;
 @use '../../styles/mixins' as *;
 
-.contact-section {
+.contact {
   @include center-column;
-  .email-container {
+  .contact__email-container {
     display: flex;
     align-items: center;
     margin-bottom: 2em;
   }
-  .email {
+  .contact__email {
     color: $primary-accent-color;
     margin-left: 1rem;
   }
@@ -18,13 +18,13 @@
   .email:hover {
     @include inline-link-hover;
   }
-  .social-icons-container {
+  .contact__socials-container {
     @include space-evenly;
     align-items: center;
     height: 10rem;
     width: 30%;
   }
-  img {
+  .contact__social {
     width: 5rem;
     transition: transform 0.05s ease-in-out;
   }

src/components/Footer/Footer.js

@@ -1,7 +1,26 @@
+import logoTransparent from '../../assets/logoinverted.png';
+import linkedin from '../../assets/icons/linkedin.png';
+import github from '../../assets/icons/github.png';
+import {Link} from 'react-router-dom';
+
 const Footer = () => {
   return (
     <section className='footer'>
-
+      <div className='footer__socials'>
+        <a href='https://www.linkedin.com/in/rachel-soae-prather'>
+          <img className='footer__social' src={linkedin} alt='LinkedIn' />
+        </a>
+        <a href='https://github.com/rachelsoae'>
+          <img className='footer__social' src={github} alt='GitHub' />
+        </a>
+      </div>
+      <div className='footer__links'>
+        <Link to='/home' className='footer__link'>Home</Link>
+        <Link to='/home' className='footer__link'>About</Link>
+        <Link to='/home' className='footer__link'>Portfolio</Link>
+        <Link to='/home' className='footer__link'>Contact</Link>
+      </div>
+      <img src={logoTransparent} alt='Rachel Soae Prather, Software Engineer' id='footer__logo' />
     </section>
   )
 }

src/components/Footer/_Footer.scss

@@ -2,5 +2,35 @@
 @use '../../styles/mixins' as *;
 
 .footer {
-  height: 10rem;
+  background-color: $primary-text-color;
+  height: 20rem;
+  @include center-column;
+  justify-content: center;
+}
+
+.footer__socials {
+  width: 8%;
+  @include space-between;
+}
+
+.footer__social {
+  width: 3rem;
+}
+
+.footer__links {
+  width: 40%;
+  @include space-between;
+  margin: 2rem;
+}
+
+.footer__link {
+  @include header-font;
+  color: $secondary-text-color;
+  text-decoration: none;
+  font-size: 1.5rem;
+}
+
+#footer__logo {
+  width: 15rem;
+  // margin: 1rem;
 }

src/styles/_mixins.scss

@@ -1,5 +1,7 @@
 @use 'variables' as *;
 
+// LAYOUT
+
 @mixin true-center {
   display: flex;
   justify-content: center;
@@ -22,13 +24,32 @@
   justify-content: space-between;
 }
 
+// TYPOGRAPHY
+@mixin header-font {
+  font-family: $header-font;
+  color: $primary-text-color;
+  font-size: 3rem;
+  text-transform: uppercase;
+  font-weight: 200;
+  letter-spacing: 0.5rem;
+}
+
+@mixin body-font {
+  font-family: $body-font;
+  color: $primary-text-color;
+  font-size: 2rem;
+  font-weight: 300;
+}
+
 @mixin button-text {
   font-family: $button-font;
   font-size: 2rem;
   letter-spacing: 0.0625rem;
   text-transform: uppercase;
 }
 
+// BUTTON DESIGN
+
 @mixin button-box {
   width: 16.5rem;
   height: 5.25rem;
@@ -46,28 +67,14 @@
   color: $primary-accent-color;
 }
 
+// HOVER STATES
+
 @mixin button-hover {
   background-color: $secondary-accent-color;
   border: none;
   color: $emphasis-text-color;
 }
 
-@mixin header-font {
-  font-family: $header-font;
-  color: $primary-text-color;
-  font-size: 3rem;
-  text-transform: uppercase;
-  font-weight: 200;
-  letter-spacing: 0.5rem;
-}
-
-@mixin body-font {
-  font-family: $body-font;
-  color: $primary-text-color;
-  font-size: 2rem;
-  font-weight: 300;
-}
-
 @mixin link-hover {
   transform: scale(1.1);
   transition: transform 0.05s ease-in-out;

src/styles/_variables.scss

@@ -1,7 +1,8 @@
 $primary-background-color: #F5F5F5;
 
 $primary-accent-color: #47725d;
-$secondary-accent-color: #A3CBA5;
+// $secondary-accent-color: #A3CBA5;
+$secondary-accent-color: #8eba9e;
 
 $primary-text-color: #424242;
 $secondary-text-color: #F5F5F5;

src/styles/input.scss

@@ -6,4 +6,5 @@
 @use '../components/BurgerNav/BurgerNav';
 @use '../components/TopNav/TopNav';
 @use '../components/Portfolio/Portfolio';
-@use '../components/Project/Project';
+@use '../components/Project/Project';
+@use '../components/Footer/Footer';