Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added become member page #22

Closed
wants to merge 1 commit into from
Closed

Added become member page #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/Layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ import React from "react"
import 'bootstrap/dist/css/bootstrap.min.css';
import '../css/styles.css'
import '../css/styles2.css'
import Navigation2 from "../components/Navigation2";
import Navigation from "./Navigation";
import Footer from "../components/Footer";
import FadeIn from "react-fade-in";

export default function Layout({ children }) {
return (
<div>
<FadeIn>
<Navigation2/>
<Navigation/>
<div>
{children}
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/MailchimpForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const MailchimpForm = () => {
target="_blank"
>
<div className="form-row">
<div className="col-md-15">
<div className="col-md-5">
<div className="mc-field-group form-group">
{/* <label for="mce-EMAIL"></label> */}
<input
Expand Down Expand Up @@ -48,7 +48,7 @@ const MailchimpForm = () => {
value="Subscribe"
name="subscribe"
id="mc-embedded-subscribe"
className="btn btn-danger shadow-custom-danger w-100"
className="btn btn-primary shadow-custom-danger w-100"
></input>
</div>
</div>
Expand Down
124 changes: 56 additions & 68 deletions src/components/Navigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,77 +2,65 @@ import React from "react";
import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
import Container from "react-bootstrap/Container";
import LogoColor from "../images/wib-logo-gold.svg";
import LogoColor from "../images/wib-logo-horizontal-2.png";
import { Link } from "gatsby";
import Button from 'react-bootstrap/Button'

function Navigation() {

const NavigationStyle = {
textDecoration: 'none',
}

function Navigation(){
return (
<div>
<div >
<Container>
<Navbar
collapseOnSelect
fluid
expand="sm"
>
<Link to="/">
<Navbar.Brand href="/" className="py-0 my-0">
<img
src={LogoColor}
width="150"
height="150"
className="align-top"
alt="WIB Logo"
/>
</Navbar.Brand>
<Container>
<Navbar expand="lg">
<Navbar.Brand>
<img
src={LogoColor}
width="235"
height="55"
alt="WIB Logo"
/>
</Navbar.Brand>
<Navbar.Toggle aria-controls="navbarResponsive"/>
<Navbar.Collapse id="navbarResponsive">
<Nav as="ul" className="ms-auto">
<Nav.Item as="li">
<Link to="/" className="nav-link" activeClassName="active">
<p className="nav-link-gold">Home</p>
</Link>
</Nav.Item>
<Nav.Item as="li">
<Link to="/members" className="nav-link" activeClassName="active">
<p className="nav-link-gold">About</p>
</Link>
</Nav.Item>
<Nav.Item as="li">
<Link to="/projects" className="nav-link" activeClassName="active">
<p className="nav-link-gold">Executive Board</p>
</Link>
</Nav.Item>
<Nav.Item as="li">
<Link to="/events" className="nav-link" activeClassName="active">
<p className="nav-link-gold">Events</p>
</Link>
</Nav.Item>
<Nav.Item as="li">
<Link to="/contact" className="nav-link" activeClassName="active">
<p className="nav-link-gold">Contact</p>
</Link>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav" className="flex-column">
{/* <Nav className="mr-auto"></Nav> */}
<Nav>
<Link to="/" style={NavigationStyle}>
<Nav.Link as="span" href="/">
Home
</Nav.Link>
</Link>
<Link to="/members" style={NavigationStyle}>
<Nav.Link as="span" href="/members">
Members
</Nav.Link>
</Link>
<Link to="/projects" style={NavigationStyle}>
<Nav.Link as="span" href="/projects">
Projects
</Nav.Link>
</Link>
<Link to="/events" style={NavigationStyle}>
<Nav.Link as="span" href="/events">
Events
</Nav.Link>
</Link>
<Link to="/alumni" style={NavigationStyle}>
<Nav.Link as="span" href="/alumni">
Alumni
</Nav.Link>
</Link>
<Link to="/contact" style={NavigationStyle}>
<Nav.Link as="span" href="/contact">
Contact
</Nav.Link>
</Link>
{/* <Nav.Link href="#contact">Contact</Nav.Link> */}
</Nav>
</Navbar.Collapse>
</Navbar>
</Container>
</div>
</div>
);
</Nav.Item>
<Nav.Item>
<Link to="/become-member" className="nav-link" activeClassName="active">
<p className="nav-link-gold">Become a Member</p>
</Link>
{/* <Button variant="outline-warning">
<Link to="/become-member" className="nav-link" activeClassName="active">
<p className="nav-link-gold">Become a Member</p>
</Link>
</Button> */}
</Nav.Item>
</Nav>
</Navbar.Collapse>
</Navbar>
</Container>
)
}

export default Navigation;
export default Navigation
59 changes: 0 additions & 59 deletions src/components/Navigation2.js
View file
Open in desktop

This file was deleted.

63 changes: 63 additions & 0 deletions src/pages/become-member.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import React from "react";
import Col from "react-bootstrap/Col";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Layout from "../components/Layout"

import MailchimpForm from "../components/MailchimpForm";
import Helmet from "react-helmet"
import BTGCover from "../images/btg-cover.png";

class BecomeMember extends React.Component {

render() {

return (
<Layout>
<Helmet>
<title>Contact | CMUBTG</title>
<meta name="twitter:card" content="summary_large_image"></meta>
<meta name="twitter:image" content={BTGCover}></meta>
</Helmet>
<Container className="mt-md-1 pt-md-4">
<Row className="mt-1">
<Col>
<h1 className="display-4 text-black font-weight-boldest">Become an Official WIB Member!</h1>
</Col>
</Row>

<Row className="pt-1 mt-4 ms-2">
<Col>
<div className = 'border-0' style = {{backgroundColor:'black', color: 'white'}}>
Image here
</div>
</Col>
<Col>
<div className = 'border-0' style = {{backgroundColor:"#0A5471", color: 'white', textAlign: "center"}}>
<p>REQUIREMENTS</p>
<p>Attend 3 Meetings</p>
<p>Schedule a Coffee Chat with an Executive Board Member</p>
</div>
</Col>
</Row>
<Row className="mt-4 mb-4">
<div className = 'border-0' style = {{backgroundColor:'white', color: '#0A5471', textAlign: "center"}}>
Sign up for our mailing list to stay updated with WIB events and new opportunities!
</div>
</Row>
<div style = {{display:'block', margin:'auto'}}>
<MailchimpForm />
</div>

</Container>



</Layout>

);
}
}

export default BecomeMember

4 changes: 2 additions & 2 deletions src/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import Layout from "../components/Layout"
import Helmet from "react-helmet"
import BTGCover from "../images/btg-cover.png";
import Jumbotron from "../components/Jumbotron";
import Navigation2 from "../components/Navigation2"
import Navigation from "../components/Navigation"
import { Card } from "react-bootstrap";
import { Button } from "react-bootstrap"
import { navigate } from "gatsby"
Expand All @@ -22,7 +22,7 @@ function Home() {
<meta name="twitter:image" content={BTGCover}></meta>
</Helmet>
<Jumbotron>
<Navigation2/>
<Navigation/>
<div class="overlay">
<h1 class="display-3 text-white font-weight-boldest">Carnegie Mellon University</h1>
<h1 class="display-3 text-white font-weight-boldest">Women in Business</h1>
Expand Down