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%;
+ }
+}