Homepage , footer done, contact mail in progress

src/App.css

@@ -152,8 +152,8 @@ html {
   right: 0;
   z-index: 2;
   cursor: pointer;
-  width: 50px;
-  height: 50px;
+  width: 60px;
+  height: 60px;
   opacity: 0; }
 
 .menu-wrap .hamburger {
@@ -269,24 +269,139 @@ html {
   display: grid;
   grid-gap: 20px;
   margin-top: 20px;
-  height: 50vh;
-  grid-template-areas: 'homeshowcase homeshowcase  home-box-1' 'homeshowcase homeshowcase  home-box-2'; }
+  justify-items: center;
+  height: 60vh;
+  grid-template-areas: 'homeshowcase homeshowcase home-box-1' 'homeshowcase homeshowcase  home-box-2'; }
 
 .homeshowcase {
   grid-area: homeshowcase;
   min-height: 400px;
-  padding: 3rem; }
+  padding: 3rem;
+  text-align: left;
+  grid-gap: 20px; }
+
+.home-box-1 {
+  grid-area: home-box-1;
+  justify-self: center;
+  margin-top: 2rem;
+  padding: 2rem;
+  background: url("./img/itsmeMario.jpg") no-repeat center center/cover;
+  width: 300px;
+  height: 300px;
+  border-radius: 50%; }
+
+.home-box-2 {
+  grid-area: home-box-2;
+  margin-top: 1rem;
+  padding: 1rem;
+  text-align: center; }
+
+@media (max-width: 700px) {
+  .wrapper-home {
+    display: grid;
+    height: auto;
+    grid-gap: 20px;
+    margin-top: 20px;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-areas: 'homeshowcase ' 'homeshowcase ' 'home-box-1' 'home-box-2'; }
+  .homeshowcase {
+    margin-top: 20px;
+    height: 500px; }
+  .home-box-1 {
+    grid-area: home-box-1;
+    justify-self: center;
+    margin-top: 4rem;
+    background: url("./img/itsmeMario.jpg") no-repeat center center/cover;
+    width: 200px;
+    height: 200px;
+    border-radius: 50%; }
+  .home-box-1 {
+    justify-self: center; } }
+
+.h1contact {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center; }
 
-.Home-box-1 {
-  grid-area: top-box-1;
-  background: url("./img/hector.jpg");
-  background-size: cover;
-  background-position: center;
+.contactWrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center; }
+
+.contactForm {
+  display: grid;
+  grid-gap: 20px; }
+
+.contactForm p {
+  padding: 1rem 1rem;
+  font-size: larger;
+  width: 100%; }
+
+.contactForm p input {
+  max-width: 700px;
   width: 100%;
-  height: 100%; }
+  height: 2rem;
+  margin-left: 3px; }
+
+.message {
+  width: 100%; }
+
+.message textarea {
+  width: 100%; }
 
-.Home-box-2 {
-  grid-area: top-box-2; }
+.button {
+  width: 100%;
+  height: 2rem;
+  font-size: larger;
+  background: #fff;
+  border: 0;
+  text-transform: uppercase;
+  border: 1px solid black; }
+
+.button:hover {
+  background: rgba(13, 110, 139, 0.65);
+  outline: 0;
+  transition: background-color 1s ease-out; }
+
+@media (max-width: 420px) {
+  .contactWrap {
+    margin-top: 100px;
+    padding-top: 100px; } }
+
+.footer-wrap {
+  display: grid;
+  grid-gap: 20px;
+  height: auto; }
+
+.footer {
+  background: grey;
+  min-height: 3rem;
+  margin: 3rem 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  list-style: none;
+  margin-top: 14px; }
+
+.footer ul {
+  display: flex;
+  text-decoration: none;
+  list-style: none;
+  flex-direction: row; }
+
+.footer ul a {
+  text-decoration: none;
+  margin: 1rem;
+  color: #660166; }
+
+.footer ul a:hover {
+  color: #ad0dad; }
+
+@media (max-width: 560px) {
+  .footer ul a {
+    margin: 0.5rem; } }
 
 * {
   margin: 0;
@@ -301,7 +416,8 @@ body {
 .wrapper {
   background: white;
   max-width: 1200px;
-  height: 110vh;
+  min-height: 100vh;
+  max-height: auto;
   margin: auto;
   overflow: hidden;
   padding: 0 3rem;
@@ -326,3 +442,7 @@ body {
     height: 60px;
     margin: auto;
     padding: 0 0rem; } }
+
+@media (max-width: 400px) {
+  .wrapper {
+    padding: 0 1rem; } }

src/components/component/Footer.js

@@ -1,11 +1,45 @@
 import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
 
-const Footer = () => {
+const Footer = ({ icon4, icon5, icon6 }) => {
   return (
     <Fragment>
-      <p>linkedin fb instagram github-/repos</p>
+      <div className='footer-wrap'>
+        <div className='footer'>
+          <h4> Site by Johan Smeij version 1.0.0</h4>
+          <ul>
+            <li>
+              <a href='https://www.linkedin.com/in/johan-smeij-b80867195'>
+                <i className={icon4} />
+              </a>
+            </li>
+
+            <li>
+              <a href='https://github.com/GreenGurka/MySiteProject'>
+                <i className={icon5} />
+              </a>
+            </li>
+
+            <li>
+              <a href='https://www.instagram.com/smeijen/'>
+                <i className={icon6} />
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
     </Fragment>
   );
 };
 
+Footer.propTypes = {
+  icon: PropTypes.string
+};
+
+Footer.defaultProps = {
+  icon4: 'fab fa-linkedin fa-2x',
+  icon5: ' fab fa-github-square fa-2x',
+  icon6: ' fab fa-instagram fa-2x'
+};
+
 export default Footer;

src/components/component/Navbar.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import Hamburger from './Hamburger';
 
-const Navbar = ({ title, icon1, icon2, icon3 }) => {
+const Navbar = ({ icon1, icon2, icon3 }) => {
   return (
     <Fragment>
       <div className='main-nav-container'>

src/components/pages/Contact.js

@@ -1,13 +1,42 @@
 import React, { Fragment } from 'react';
 import Navbar from '../component/Navbar';
+import Footer from '../component/Footer';
 
 const Contact = () => {
   return (
     <Fragment>
       <Navbar />
       <div className='wrapper'>
-        <h1>Contact</h1>
+        <div className='contactWrap'>
+          <h1 className='h1contact'>Kontakt</h1>
+          <form className='contactForm'>
+            <p>
+              <label>Name</label>
+              <input type='text' name='name' />
+            </p>
+            <p>
+              <label>Company</label>
+              <input type='text' name='company' />
+            </p>
+            <p>
+              <label>Email Address</label>
+              <input type='email' name='email' />
+            </p>
+            <p>
+              <label>Phone Number</label>
+              <input type='text' name='phone' />
+            </p>
+            <p className='message'>
+              <label>Message</label>
+              <textarea name='message' rows='10'></textarea>
+            </p>
+            <p>
+              <button className='button'>Submit</button>
+            </p>
+          </form>
+        </div>
       </div>
+      <Footer />
     </Fragment>
   );
 };

src/components/pages/Home.js

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import Navbar from '../component/Navbar';
+import Footer from '../component/Footer';
 
 const Home = () => {
   return (
@@ -8,25 +9,43 @@ const Home = () => {
       <div className='wrapper'>
         <div className='wrapper-home'>
           <div className='homeshowcase'>
-            <h1>Hej!</h1>
+            <h1>Hej framtida arbetsgivare!</h1>
             <h4>
-              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem
-              nihil architecto dolore recusandae nemo iusto alias illum commodi
-              unde, autem assumenda exercitationem aliquam! At aliquam provident
-              placeat, animi, enim voluptas a suscipit nesciunt impedit expedita
-              temporibus illo laborum ullam illum.
+              Min ambition är att bli en bättre och bättre Frontend developer
+              för varje dag som går. Med en större framtida ambiton om Fullstack
+              developer. Mitt mål just nu är att landa mitt första jobb inom
+              Frontend, och fortsätta öka min kunskap inom yrket!
+            </h4>
+            <br />
+            <h4>
+              Efter att ha växt upp i Stockholm bor jag nu i en by vid namn
+              Bullmark, Umeå kommun. Jag skulle säga att mina positiva sidor är
+              att jag är lugn, lätt att ha att göra med och ser till att lösa
+              mina uppgifter till det bästa som går under rådande
+              omständigheter, alltid.
             </h4>
           </div>
           <div className='home-box-1'></div>
           <div className='home-box-2'>
             <h3>Skills</h3>
             <p>
-              This is my skills Lorem ipsum dolor sit amet consectetur
-              adipisicing elit. Officia, esse.
+              Mina programmerings kunskaper är inom: <br />
+              <strong>
+                {' '}
+                REACT, JavaScript, CSS3, HTML5, SASS, Git, Github.
+              </strong>
+              <br />
+              <br /> <br />
+              Har även byggt med Css-frameworks som Bulma och Bootstrap.
             </p>
+            <br />
+            <br />
+            Samt gjort projekt med MERN stack: <br />
+            <strong>MongoDB, Express, React och Node.js</strong>
           </div>
         </div>
       </div>
+      <Footer />
     </Fragment>
   );
 };

src/components/pages/Portfolio.js

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import Navbar from '../component/Navbar';
+import Footer from '../component/Footer';
 
 const Portfolio = () => {
   return (
@@ -8,6 +9,7 @@ const Portfolio = () => {
       <div className='wrapper'>
         <h1>Portfolio</h1>
       </div>
+      <Footer />
     </Fragment>
   );
 };

src/sass/App.scss

@@ -4,7 +4,7 @@
 @import './Home';
 @import './Portfolio';
 @import './Contact';
-
+@import './Footer.scss';
 * {
   margin: 0;
   padding: 0;
@@ -20,7 +20,8 @@ body {
 .wrapper {
   background: $white;
   max-width: 1200px;
-  height: 110vh;
+  min-height: 100vh;
+  max-height: auto;
   margin: auto;
   overflow: hidden;
   padding: 0 3rem;
@@ -52,3 +53,8 @@ body {
     padding: 0 0rem;
   }
 }
+@media (max-width: 400px) {
+  .wrapper {
+    padding: 0 1rem;
+  }
+}