Merge 43b7415 into 48444e1

andela · Nov 5, 2018 · 9278345 · 9278345
2 parents 48444e1 + 43b7415
commit 9278345
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 55 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -4,6 +4,8 @@
     <meta charset="utf-8">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Open+Sans">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"

diff --git a/src/assets/App.css b/src/assets/App.css
@@ -1,14 +1,45 @@
+a {
+  color: #070808;
+  text-decoration: none;
+  padding-left: 200px;
+  font-weight: bold;
+}
+a:hover {
+  color: #080808;
+}
+
+.ah-btn {
+  font-family: 'Lato', 'Helvetica', 'Arial', 'sans-serif';
+  letter-spacing: 2px;
+  text-transform: capitalize;
+  margin-left: 5px;
+  border: solid #24292e;
+  border-width: thin;
+}
+
+.ah-btn-xl {
+  font-size: 11px;
+  padding: 15px 45px;
+}
+img {
+  object-fit: cover;
+}
+.card {
+  width: 90%;
+  margin-bottom: 20px;
+}
 .head{
-    background-color: gainsboro
+    background-color: gainsboro;
 }
 .nav-bg {
-    background-color: #000080;
+    background-color: rgba(0, 0, 0, 0.295);
 }
-.nav-text {
-    color: white;
+.navbar-brand {
+  font-weight: bold;
+  font-family: cursive;
 }
 .footer-bg {
-    background-color: #000080;
+    background-color: #24292e;
     color: white;
     text-align: center;
     padding: 10px 20px 40px 20px;
@@ -19,6 +50,7 @@ header.uvp {
     padding-top: 150px;
     padding-bottom: 100px;
     color: black;
+    background-color: #24292e;
 }
 
 .uvp-content {
@@ -27,22 +59,10 @@ header.uvp {
   text-align: left;
 }
 
-.btn-outline:hover, .btn-outline:focus, .btn-outline:active, .btn-outline.active {
+.ah-btn:hover, .ah-btn:focus, .ah-btn:active, .ah-btn.active {
   color: white;
-  border-color: #1919da;
-  background-color: #1919da;
-}
-
-.btn {
-  border-radius: 300px;
-  font-family: 'Lato', 'Helvetica', 'Arial', 'sans-serif';
-  letter-spacing: 2px;
-  text-transform: uppercase;
-}
-
-.btn-xl {
-  font-size: 11px;
-  padding: 15px 45px;
+  border-color: #24292e;
+  background-color: #24292e;
 }
 .LP-list {
   margin-top: 100px;
@@ -53,24 +73,38 @@ header.uvp {
   text-decoration: none;
 }
 .LP-content {
-  background-color: #000080;
-  color: #BDBEFF;
-  /* margin: 50px 50px 50px 50px;
-  padding: 20px; */
-  box-shadow: darkblue;
+  background-color: #121518;
+  color: #a3aab1;
   border-radius: 25px;
 }
 .LP-container {
-  margin-top: 100px;
-  width: 75%;
+  padding-top: 10%;
+  padding-left: 20%;
+  width: 80%;
   height: 75%;
 }
+.LP-text{
+  font-size: 2.5rem;
+  font-family: 'Open Sans', sans-serif;
+}
 .join-us-text {
   font-size: 20px;
+  color: #121518;
 }
 .join-us-text :hover {
   background-color: black;
 }
 .display-articles {
+  margin-top: 50px;
   margin-bottom: 20%;
+  color: black;
+}
+.first-section{
+  background-image: url('../assets/bg-image.jpg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  height: 150%;
+  width: auto;
+  padding-bottom: 100px;
+  padding-top: 100px;
 }
diff --git a/src/assets/bg-image.jpg b/src/assets/bg-image.jpg
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/components/landingPage/Footer.js b/src/components/landingPage/Footer.js
@@ -3,7 +3,7 @@ import React from 'react';
 
 
 const Footer = () => (
-  <footer className="fixed-bottom font-small mt-4 justify-content-center footer-bg">
+  <footer className="footer font-small mt-4 justify-content-center footer-bg">
         authors haven © 2018
   </footer>
 );

diff --git a/src/components/landingPage/LandingPage.js b/src/components/landingPage/LandingPage.js
@@ -1,34 +1,44 @@
 import React from 'react';
 
 const DisplayArticles = () => (
-  <div className="article">
-    <div className="article-content float-sm-bottom LP-list">
-      <a href="#list-articles">
-        List Articles Place Holder
-      </a>
+  <div className="card">
+    {/* <img class="card-img-top" src="..." alt="Card image cap"> */}
+    <div className="card-body">
+      <h5 className="card-title">Nisi cupidatat</h5>
+      <p className="card-text">
+        Nisi cupidatat magna dolor nulla.
+        Incididunt labore aliqua cillum mollit quis tempor do pariatur veniam adipisicing.
+        Commodo sit voluptate est laboris irure ex dolor fugiat esse ea mollit.
+        Pariatur elit cillum commodo occaecat tempor non mollit eu enim velit
+        <br />
+        . . .
+      </p>
+      <a href="#" className="btn ah-btn">View more</a>
     </div>
   </div>
 );
 
 const LandingPage = () => (
   <React.Fragment>
-    <div className="container LP-container">
-      <div className="row jumbotron mx-auto LP-text">
-        <h1>
-          Authors Haven is the one stop hub for knowledge.
-          <br />
-          Come take a look at thousands of articles.
-          <br />
-          You can even share your own!!!
-        </h1>
-        <a href="#start" className="btn btn-outline btn-xl js-scroll-trigger join-us-text">
-          Join us and share your ideas
-        </a>
-      </div>
-      <div className="display-articles mx-auto">
-        <DisplayArticles />
+    <div className="first-section">
+      <div className="container">
+        <div className="row">
+          <div className="col-12 jumbotron mx-auto LP-text">
+            <p>Authors Haven is the one stop hub for knowledge.</p>
+            <p>Come take a look at thousands of articles.</p>
+            <p>You can even share your own!!!</p>
+            <a href="#start" className="btn ah-btn">
+              Join us and share your ideas
+            </a>
+          </div>
+        </div>
       </div>
     </div>
+    <div className="container display-articles mx-auto row">
+      <div className="col-sm-12 col-4 col-md-6"><DisplayArticles /></div>
+      <div className="col-sm-12 col-4 col-md-6"><DisplayArticles /></div>
+      <div className="col-sm-12 col-4 col-md-6"><DisplayArticles /></div>
+    </div>
   </React.Fragment>
 );
 

diff --git a/src/components/landingPage/Navbar.js b/src/components/landingPage/Navbar.js
@@ -1,10 +1,12 @@
 import React from 'react';
+import img from '../../assets/logo.png';
 
 const Navbar = () => (
-  <nav className="navbar container-fluid navbar-expand-lg nav-bg">
-    <a className="navbar-brand nav-text col-sm-10" href="#">Authors Haven</a>
+  <nav className="navbar fixed-top navbar-expand-lg nav-bg">
+    <img src={img} className="image-fluid" alt="" />
+    <h6 className="navbar-brand col-sm-10" href="#">Authors Haven</h6>
     <button
-      className="navbar-toggler  navbar-dark"
+      className="navbar-toggler  navbar-light"
       type="button"
       data-toggle="collapse"
       data-target="#navbarSupportedContent"
@@ -17,13 +19,13 @@ const Navbar = () => (
     <div className="collapse navbar-collapse" id="navbarSupportedContent">
       <ul className="navbar-nav mr-auto">
         <li className="nav-item active">
-          <a className="nav-link nav-text" href="#">
+          <button type="button" className="btn ah-btn ah-btn-xl js-scroll-trigger nav-link nav-text" href="#">
             Signup
             <span className="sr-only">(current)</span>
-          </a>
+          </button>
         </li>
         <li className="nav-item">
-          <a className="nav-link nav-text" href="#">Login</a>
+          <button type="button" className=" btn ah-btn ah-btn-xl js-scroll-trigger nav-link nav-text" href="#">Login</button>
         </li>
       </ul>
     </div>

diff --git a/src/components/login/Login.js b/src/components/login/Login.js
@@ -1,5 +1,5 @@
 import React from 'react';
 
-const Login = () => <h1>Login!</h1>;
+const Login = () => <h1 className="jumbotron">Login!</h1>;
 
 export default Login;