Merge pull request #18 from she-code-africa/eventpage

event card and event page

src/App.js

@@ -1,28 +1,28 @@
-import logo from './logo.svg';
 import '../src/styles/app.scss';
 import { BrowserRouter, Route, Switch } from "react-router-dom";
-import AuthPage from '../src/views/Auth/AuthPage';
 import LoginForm from "./views/Auth/LoginForm";
 import SignUpForm from "./views/Auth/SignUpForm";
 import FAQ from '../src/views/faq/faq';
+import Events from '../src/views/events/event';
 import Home from '../src/views/home/home';
 
 function App() {
   return (
     <BrowserRouter>
-    <Switch>
-      <Route exact
-      path="/signup"
-      name="SignUpForm"
-      component={SignUpForm}/>
-      <Route exact
-      path="/signin"
-      name="LoginForm"
-      component={LoginForm}/>
-      <Route path="/faq"> <FAQ /> </Route>
-       <Route path="/"> <Home /> </Route>
-
-    </Switch>
+      <Switch>
+        <Route exact
+          path="/signup"
+          name="SignUpForm"
+          component={SignUpForm} />
+        <Route exact
+          path="/signin"
+          name="LoginForm"
+          component={LoginForm} />
+        <Route path="/faq"> <FAQ /> </Route>
+        <Route path="/events"> <Events /> </Route>
+        <Route path="/"> <Home /> </Route>
+
+      </Switch>
     </BrowserRouter>
   );
 }

src/components/eventcard.js

@@ -0,0 +1,16 @@
+import React from "react";
+import '../styles/components/eventcard.css';
+
+function Card(props) {
+    return (
+        <div className="card event-card">
+            <div class="card-body">
+                <h5 class="card-title">{props.eventTitle}</h5>
+                <h6 class="card-subtitle mb-2">{props.eventLocation}</h6>
+                <p class="card-text">{props.eventTime}</p>
+            </div>
+        </div>
+    );
+}
+
+export default Card;

src/components/header.js

@@ -14,7 +14,7 @@ class Header extends Component {
         return (
             <React.Fragment>
                 <nav className="navbar navbar-expand-md navbar-lighter bg-lighter">
-                    <a className="navbar-brand" href="#">
+                    <a className="navbar-brand" href="/">
                         <img src={Logo} alt="Logo" className="logo" />
                     </a>
                     <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -30,7 +30,7 @@ class Header extends Component {
                                 <a className="nav-link" href="#">Resources</a>
                             </li>
                             <li className="nav-item active">
-                                <a className="nav-link" href="#">Events</a>
+                                <a className="nav-link" href="/events">Events</a>
                             </li>
                             <li className="nav-item active">
                                 <a className="nav-link" href="/faq">FAQs</a>

src/components/subscribe.js

@@ -25,11 +25,11 @@ class Subscribe extends Component {
                                 <p className="leads"> Support open source and pick a limited edition T-shirt or plant a tree.</p>
                                 <Form>
                                     <Form.Row>
-                                        <Col md={8}>
+                                        <Col md={8} sm={7}>
                                             <Form.Control placeholder="Email Address" />
                                         </Col>
                                         <Col >
-                                            <Button className="sub-button" type="submit">SUBSCRIBE</Button>
+                                            <Button className="sub-button xbs" type="submit">SUBSCRIBE</Button>
                                         </Col>
                                     </Form.Row>
                                 </Form>

src/styles/components/eventcard.css

@@ -0,0 +1,71 @@
+.event-card {
+    width: 30%;
+    text-align: left;
+    background: #3F3F3F42 0% 0% no-repeat padding-box;
+    border: 1px solid #70707042;
+    border-radius: 15px;
+    margin: 16px 16px;
+}
+
+.card-body {
+   opacity: 1;
+}
+
+.card-title {
+    text-align: left;
+    letter-spacing: 2px;
+    color: #FFFFFF;
+    font-size: 16px;
+    padding: 15px 25px;
+    font-family: FTPolar;
+    font-weight: bold;
+}
+
+.card-subtitle {
+    text-align: left;
+    font-size: 12px;
+    letter-spacing: 1px;
+    color: #FFFFFF80;
+    padding: 0px 25px;
+    font-weight: bold;
+    font-family: Axiforma;
+}
+
+.card-text {
+    text-align: left;
+    font-family: Axiforma;
+    font-size: 10px;
+    letter-spacing: 1px;
+    color: #B70569;
+    padding: 40px 25px 35px;
+    font-weight: bold;
+}
+
+@media (min-width: 992px) and (max-width: 1199px) {
+    .event-card {
+        width: 29%;
+        margin: 16px 20px;
+    }
+
+} 
+
+@media (min-width: 768px) and (max-width: 991px) {
+    .event-card {
+        width: 45%;
+        margin: 16px 17px;
+    }
+}
+
+@media (min-width: 560px) and (max-width: 767px) {
+    .event-card {
+        width: 46%;
+        margin: 16px 10px;
+    }
+}
+
+@media (max-width: 559px) {
+    .event-card {
+        width: 60%;
+        margin: 16px auto;
+    }
+}

src/styles/components/subscribe.css

@@ -25,9 +25,19 @@ form {
     border: 1px solid #70707042;
     border-radius: .5rem;
     color: #D1D1D1;
-    /* border: 0; */
+    padding: .375rem .0rem;
     font-size: 10px;
     height: 40px;
+    padding-left: 3px;
+}
+
+.form-control:focus {
+    background-color: #FFFFFF50;
+
+}
+
+.btn {
+    padding: .375rem .15rem;
 }
 
 .sub-button {
@@ -60,3 +70,9 @@ form {
         margin: 1rem 4rem 2rem;
     }
 }
+
+@media (max-width: 575px) {
+    .xbs {
+        margin-top: 10px;
+    }
+}

src/styles/views/event.css

@@ -0,0 +1,45 @@
+.events {
+    margin-bottom: 35px;
+}
+
+.header-img {
+    height: 30px;
+    width: 30px;
+}
+
+.up img {
+    vertical-align: top;
+    height: 100px;
+    width: 100px;
+}
+
+.down img {
+    height: 110px;
+    width: 110px;
+    bottom: 0;
+    position: absolute;
+    left: 0;
+}
+
+.mid {
+    padding-top: 50px;
+}
+
+.form {
+    padding-top: 25px;
+}
+
+.event-button {
+    width: 66%;
+    float: left;
+}
+
+@media (max-width: 767px) {
+    .up img, .down img, .hide-form {
+        display: none;
+    }
+
+    .event-button {
+        width: 100%;
+    }
+}