Merge pull request #45 from Vets-Who-Code/kbrandon/landingpage

Fix(#21)  Updated landing page, added style guide for smaller components

src/App.css

@@ -139,43 +139,109 @@ table {
   --hashflag-blue: #091f40;
   --hashflag-white: #fafafa;
   --secondary-white: #eee;
+  --blue:#1a51a3;
 }
 
 
-/* Resume Builder Styles */
+/*Resume Builder Styles-->*/
 
+a{
+  text-decoration: none;
+}
+
+h1#page-title{
+  text-transform: uppercase;
+}
 
 h1 {
-  font-size: 3.75rem;
-  font-weight: 700;
-  padding: 20px;
-
+  font-size: 3.75rem; /*60px*/
+  font-weight: 600;
+  margin-top: 0;
+}
+
+
+@media only screen and (max-width: 500px) {
+  h1 {
+    font-size: 2.625rem; /*42px*/
+  }
+}
+h2 {
+  font-size: 2.625rem; /*42px*/
+}
+@media only screen and (max-width: 500px) {
+  h2 {
+    font-size: 1.875rem; /*30px*/
+  }
 }
 h3 {
-  color: var(--primary-3);
-  font-size: 1.25rem;
+  font-size: 1.875rem; /*30px*/
+}
+@media only screen and (max-width: 500px) {
+  h3 {
+    font-size: 1.3125rem; /*21px*/
+  }
+}
+h4 {
+  font-size: 1.3125rem; /*21px*/
+}
+@media only screen and (max-width: 500px) {
+  h4 {
+    font-size: 0.9375rem; /*15px*/
+  }
+}
+h5 {
+  font-size: 0.9375rem; /*15px*/
+  font-weight: bold;
+}
+@media only screen and (max-width: 500px) {
+  h5 {
+    font-size: 0.625rem; /*10px*/
+  }
+}
+h6 {
+  font-size: 0.75rem; /*7.5px*/
+}
+p {
+  font-size: 0.9375rem; /*15px*/
+}
+small {
+  font-size: 0.75rem; /*7.5px*/
+}
+strong {
   font-weight: 700;
-  padding: 30px;
-  line-height: 1.2em;
 }
-.btn {
+b {
+  font-weight: 200 !important;
+}
+
+/* Button Styles */
+
+/* .btn-ld : add extra link / description */
+/* .btn-gr : get started / generate resume */
+/* .btn-cr : create resume */
+
+.btn-gr{
+  width:auto;
+  height:46px;
   font-size: 0.875rem;
-  padding: 12px 0;
-  text-align: center;
-  width: 150px;
-  margin: 30px;
-  cursor: pointer;
-  transition: all 0.5s ease-in-out;
+  background-color: var(--hashflag-red);
+
 }
-.btn:hover {
-  transform: scale(1.05);
 
+.btn-ld{
+  height:26px;
+  width:auto;
+  background-color: var(--blue);
+  font-size: 11px;
+
 }
-.btn-next {
+
+.btn-cr{
+  height:56px;
+  width:120px;
+  font-size: 0.875rem;
   background-color: var(--hashflag-red);
-  border: none;
-  border-radius: 4px;
-  font-weight: 700;
-  text-transform: capitalize;
-  color: var(--hashflag-white);
+  line-height: 1.3;
+
 }
+

src/App.js

@@ -8,9 +8,7 @@ function App() {
     <div className="App">
             <Nav />
             <LandingPage />
-        <a href="./App.js" target="_blank">
-          <button className="btn btn-next" id="btn-next">Next</button>
-        </a>
+
 
     </div>
   );

src/Components/LandingPage/LandingPage.css

@@ -0,0 +1,105 @@
+.container{
+    width:100%;
+    max-width:1300px;
+    margin:0 auto;
+    height:calc(100vh - 72px);
+    display:flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+}
+
+
+
+.landing-text{
+    padding:1rem 1.5rem;    
+}
+
+/* .landing-text h1 span{
+    display: block;
+} */
+
+
+.landing-text h1{
+    text-align: center;
+    margin-bottom:2rem;
+}
+
+.landing-text p{
+    font-size: 1.3125rem;
+    margin-bottom:1rem;
+    line-height: 1.3;
+}
+
+.landing-image{
+    padding:1rem 1.5rem;
+    width:auto;
+    display:none;
+
+}
+
+.landing-btn button img#right-arrow{
+    width:15%;
+    margin-left:10px;
+}
+
+.btn{
+    padding: 12px 12px;
+    text-align: center;
+    margin-top: 2rem;
+    font-weight: 700;
+    cursor: pointer;
+    border: none;
+    border-radius: 4px;
+    transition: all 0.5s ease-in-out;
+    text-transform: capitalize;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--hashflag-white);
+  }
+  .btn:hover {
+    transform: scale(1.05);
+    box-shadow: 12px 12px 30px 20px rgba(0,0,0,0.1);
+
+  }
+
+
+  @media only screen and (min-width:768px){
+
+   .container{
+    margin-top:72px;
+   }
+    .landing-image{
+        display: block;
+
+    }
+
+}
+
+@media only screen and (min-width:1024px){
+
+    .landing-text h1{
+        text-align: left;
+    }
+    .container{
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    .landing-btn{
+        width:100%;
+        display: flex;
+        justify-content: flex-start;
+    }
+}
+
+@media only screen and (min-width:1440px){
+    .landing-text h1 span{
+        display: inline-block;
+    }
+    .container{
+        height:calc(100vh - 200px);
+    }
+}

src/Components/LandingPage/LandingPage.js

@@ -1,15 +1,37 @@
 import React from "react";
+import '../LandingPage/LandingPage.css';
+import RightArrow from '../../images/right-arrow.png';
+
 
 export default function LandingPage() {
   return (
-    <div>
-      <h1>Create a Winning Resume</h1>
-      <h3>
-        Build an easily custimizable and simple resume in a few clicks! Our
-        resume builder is easy to use with a range of functions tailored to meet
-        the needs of U.S. military personnel transitioning out of the military
-        and veterans. Custom-tailor resumes for any job within minutes!
-      </h3>
-    </div>
+    <>
+      <div className="container">
+        <div className="landing-text">
+          <h1 id="page-title"><span>#VetsWhoCode</span> Resume Builder</h1>
+          {/* <h3>Create a Winning Resume</h3> */}
+          <p>
+             Our
+            resume builder is easy to use with a range of functions tailored to meet
+            the needs of U.S. military personnel transitioning out of the military
+            and veterans.
+          </p>
+
+          <p>Custom-tailor resumes for any job within minutes! Build an easily custimizable and simple resume in a few clicks!</p>
+          <div className="landing-btn">
+            <a href="./App.js" target="_blank">
+            <button className="btn btn-gr">Get Started 
+            <img src={RightArrow} alt="" id="right-arrow" />
+            </button>
+
+                    </a>
+          </div>
+        </div>
+        <div className="landing-image">
+          <img src="https://media.istockphoto.com/vectors/human-resources-management-concept-vector-id849410148?k=20&m=849410148&s=612x612&w=0&h=fipoIc30-fwyXh7oWMttTEOH3zAi6a-ONU4p8ca_XL4=" alt="" />
+        </div>
+      </div>
+      </>
+
   );
 }

style-guide.md

@@ -0,0 +1,99 @@
+# This style guide is to serve as an aid and reference when creating and styling various elements.
+*Note : Once you add these elements they will alter to the accurate sizing as there are no CSS Style Resets located here*
+
+<div style="height:5rem;"></div>
+
+# Buttons
+
+
+
+<a href="#" class="btn btn-ld">Add Link</a>
+
+```css
+.btn-ld{
+    height:26px;
+    width:auto;
+    background-color: var(--blue);
+    font-size: 11px;
+}
+```
+- ### Used when the user wants to add an extra link or description within the form
+
+
+
+
+<a href="#" class="btn btn-gr">Get Started</a> 
+
+```css
+.btn-gr{
+  width:auto;
+  height:46px;
+  font-size: 0.875rem;
+  background-color: #c5203e;
+}
+```
+- ### When the user wants to start the resume builder or generate the resume to download
+
+
+
+<a href="#" class="btn btn-cr">Create New Resume</a>
+
+```css
+.btn-cr{
+  height:56px;
+  width:120px;
+  font-size: 0.875rem;
+  background-color: #c5203e;
+  line-height: 1.3;
+
+}
+```
+- ### When the user wants to restart the process and create a new resume
+
+<div style="height:5rem;"></div>
+
+# Form Input
+
+<style>
+
+.btn{
+    padding: 12px 12px;
+    text-align: center;
+    margin-top: 2rem;
+    font-weight: 700;
+    cursor: pointer;
+    border: none;
+    border-radius: 4px;
+    text-transform: capitalize;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #ffffff;
+  }
+
+.btn-gr{
+  width:150px; /* width will be set to auto */
+  height:46px;
+  font-size: 0.875rem;
+  background-color: #c5203e;
+
+}
+
+.btn-ld{
+    height:26px;
+    width:90px; /* width will be set to auto */
+    background-color: #1a51a3;
+    font-size: 11px;
+
+}
+
+.btn-cr{
+  height:56px;
+  width:120px;
+  font-size: 0.875rem;
+  background-color: #c5203e;
+  line-height: 1.3;
+
+}
+</style>
+