footer design + contact form design

bunday · Mar 3, 2020 · f66fd5a · f66fd5a
1 parent 40b7627
commit f66fd5a
Show file tree

Hide file tree

Showing 9 changed files with 14,308 additions and 53 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,8 +6,10 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "framer-motion": "^1.9.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
+    "react-icons": "^3.9.0",
     "react-scripts": "3.4.0",
     "tailwindcss": "^1.2.0"
   },

diff --git a/public/images/avatar.jpg b/public/images/avatar.jpg
diff --git a/public/images/think.svg b/public/images/think.svg
diff --git a/public/index.html b/public/index.html
@@ -9,6 +9,7 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <link href="https://fonts.googleapis.com/css?family=Gothic+A1&display=swap" rel="stylesheet">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

diff --git a/src/App.js b/src/App.js
@@ -1,10 +1,105 @@
-import React from 'react';
-import './index.css'
+import React from "react";
+import "./index.css";
+import { motion } from "framer-motion";
+import { FaExternalLinkAlt, FaLinkedinIn, FaTwitter, FaGithub, FaFileDownload } from 'react-icons/fa'
 
 function App() {
   return (
-    <div className="bg-black h-screen">
-
+    <div className="bg-black h-screen text-white flex px-32 overflow-y-auto">
+      <div className="w-1/4 py-12 mr-4">
+        <p className="text-4xl font-bold">
+          Hello, I'm <br />
+          <motion.p
+            whileHover={{
+              scale: 1.1,
+              transition: { duration: 1 }
+            }}
+            whileTap={{ scale: 0.9 }}
+          >
+            Full Name
+          </motion.p>
+        </p>
+        <p> then the short story goes here bro then the short story goes here bro then the short story goes here bro</p>
+
+        <div className="py-4">
+          <p className="text-2xl text-gray-500 font-extrabold">Contact Me <span role="img" aria-label="Envelope">📩</span></p>
+          <div className="pr-8">
+            <div className="my-4">
+              <p className="text-gray-400 text-sm">Your Name</p>
+              <input className="px-3 py-2 border-b bg-transparent w-full" placeholder="What can I address you as"/>
+            </div>
+            <div className="my-4">
+              <p className="text-gray-400 text-sm">Your Email Address</p>
+              <input className="px-3 py-2 border-b bg-transparent w-full" placeholder="Where I can reach you to respond"/>
+            </div>
+            <div className="py-4">
+              <p className="text-gray-400 text-sm">Your Message</p>
+              <textarea className="px-3 py-2 border-b bg-transparent w-full" rows="4" 
+                placeholder="Hi, I would like to speak to you concerning a solution I want to build"></textarea>
+            </div>
+            <div>
+              <button className="border text-center w-full py-3 rounded-md hover:bg-white hover:text-black">Contact Zadat!</button>
+            </div>
+          </div>
+        </div>
+
+
+        <div className="bottom-0 absolute py-8 flex">
+          <img className="h-16 w-16 object-cover rounded-full" src="images/avatar.jpg" alt="Zadat Olayinka"/>
+          <div className="flex items-center px-4">
+            <a href="https://twitter.com/bundayyo" className="flex items-center" target="_blank" rel="noopener noreferrer">
+            <FaTwitter/> <span className="px-4"> Twitter</span> <FaExternalLinkAlt/>
+            </a>
+          </div>
+          <div className="flex items-center px-4">
+            <a href="https://twitter.com/bundayyo" className="flex items-center" target="_blank" rel="noopener noreferrer">
+            <FaLinkedinIn/> <span className="px-4"> LinkedIn</span> <FaExternalLinkAlt/>
+            </a>
+          </div>
+          <div className="flex items-center px-4">
+            <a href="https://twitter.com/bundayyo" className="flex items-center" target="_blank" rel="noopener noreferrer">
+            <FaGithub/> <span className="px-4"> GitHub</span> <FaExternalLinkAlt/>
+            </a>
+          </div>
+          <div className="flex items-center px-4">
+            <a href="https://twitter.com/bundayyo" className="flex items-center" target="_blank" rel="noopener noreferrer">
+            <FaFileDownload/> <span className="px-4"> Resume</span> <FaExternalLinkAlt/>
+            </a>
+          </div>
+        </div>
+      </div>
+      <div className="w-3/4 py-12">
+        <div className="flex grid-cols-2">
+        <div className="bg-gray-900 px-4 py-3 my-4 mr-2 flex">
+          <motion.div
+
+            whileHover={{
+              scale: 1.1,
+              transition: { duration: 1 }
+            }}
+            whileTap={{ scale: 0.9 }}
+          >
+            <img src="/images/think.svg" className=" h-56" alt="think" />
+          </motion.div>
+          <div className="w-1/2 relative px-2">
+            <p className="text-xl py-2 text-gray-200 font-bold">Project Title</p>
+            <p className="text-sm text-gray-400">
+              Short description about what the work is all about
+            </p>
+            <div className="text-xs absolute bottom-0 py-2">
+              <span className="bg-gray-700 px-2 py-1 rounded-lg ml-0 m-1">
+                Framework
+              </span>
+              <span className="bg-gray-700 px-2 py-1 rounded-lg m-1">
+                Language
+              </span>
+            </div>
+          </div>
+        </div>
+
+        </div>
+      </div>
+      <div></div>
     </div>
   );
 }

diff --git a/src/index.css b/src/index.css
@@ -415,7 +415,7 @@ ul {
  */
 
 html {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
+  font-family: Gothic A1, sans-serif; /* 1 */
   line-height: 1.5; /* 2 */
 }
 
@@ -555,7 +555,7 @@ pre,
 code,
 kbd,
 samp {
-  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
 /**
@@ -3731,15 +3731,7 @@ video {
 }
 
 .font-sans {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-
-.font-serif {
-  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
-}
-
-.font-mono {
-  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: Gothic A1, sans-serif;
 }
 
 .font-hairline {
@@ -16372,15 +16364,7 @@ video {
   }
 
   .sm\:font-sans {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  }
-
-  .sm\:font-serif {
-    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
-  }
-
-  .sm\:font-mono {
-    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-family: Gothic A1, sans-serif;
   }
 
   .sm\:font-hairline {
@@ -29014,15 +28998,7 @@ video {
   }
 
   .md\:font-sans {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  }
-
-  .md\:font-serif {
-    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
-  }
-
-  .md\:font-mono {
-    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-family: Gothic A1, sans-serif;
   }
 
   .md\:font-hairline {
@@ -41656,15 +41632,7 @@ video {
   }
 
   .lg\:font-sans {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  }
-
-  .lg\:font-serif {
-    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
-  }
-
-  .lg\:font-mono {
-    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-family: Gothic A1, sans-serif;
   }
 
   .lg\:font-hairline {
@@ -54298,15 +54266,7 @@ video {
   }
 
   .xl\:font-sans {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  }
-
-  .xl\:font-serif {
-    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
-  }
-
-  .xl\:font-mono {
-    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-family: Gothic A1, sans-serif;
   }
 
   .xl\:font-hairline {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,7 +1,10 @@
 module.exports = {
   theme: {
     extend: {},
+    fontFamily: {
+      'sans': ['Gothic A1','sans-serif'],
+    }
   },
   variants: {},
-  plugins: [],
-}
+  plugins: []
+};