maverick/innovationdrive
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/innovationdrive.git synced 2026-07-25 22:27:27 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

added cards, looks good on mobile

Browse source
This commit is contained in:
YOUR NAME 2018-06-24 18:46:32 +10:00
parent 66c87d2df7
commit 32074e230c
2 changed files with 108 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
src/components/Decks.js Normal file
View file

@ -0,0 +1,72 @@
import React from "react";
import {
Card,
Button,
CardImg,
CardTitle,
CardText,
CardDeck,
CardSubtitle,
CardBody
} from "reactstrap";
const InventionProcessDeck = props => {
return (
<CardDeck>
<Card>
<CardImg
top
width="100%"
src="https://i.pinimg.com/736x/9b/94/33/9b94336802fcc7d8c4ca92f7a8d49814.jpg"
alt="Card image cap"
/>
<CardBody>
<CardTitle>Product Design</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
<CardText>
This is a wider card with supporting text below as a natural lead-in
to additional content. This content is a little bit longer.
</CardText>
<Button>Button</Button>
</CardBody>
</Card>
<Card>
<CardImg
top
width="100%"
src="https://i.pinimg.com/736x/72/47/b6/7247b66abf6ef7ae84eb6fd7b9bf2273--d-prints-d-models.jpg"
alt="Card image cap"
/>
<CardBody>
<CardTitle>Rapid Prototyping</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
<CardText>
This card has supporting text below as a natural lead-in to
additional content.
</CardText>
<Button>Button</Button>
</CardBody>
</Card>
<Card>
<CardImg
top
width="100%"
src="https://i.pinimg.com/736x/02/d7/48/02d748ba33a49896a43341e69f788d17--process-engineering-manufacturing-engineering.jpg"
alt="Card image cap"
/>
<CardBody>
<CardTitle>Manufacturing</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
<CardText>
This is a wider card with supporting text below as a natural lead-in
to additional content. This card has even longer content than the
first to show that equal height action.
</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</CardDeck>
);
};
export default InventionProcessDeck;

67
src/pages/Homepage/index.js
View file

@ -6,44 +6,49 @@ import styles from "./index.css";
import HeadNavbar from "../../components/Navbar.js";
import ModalExample from "../../components/PopUpSignUp.js";
import MainJumbotron from "../../components/Jumbotron";
import InventionProcessDeck from "../../components/Decks";
// /Users/omar/Desktop/innovationDrive/innovation-drive/src/components/Form.js
export default class Homepage extends Component {
render() {
return (
<div className="backgroundContainer">
<HeadNavbar />
<Container>
<MainJumbotron />
</Container>
<div>
<div className="backgroundContainer">
<HeadNavbar />
<Container>
<MainJumbotron />
</Container>
<Container>
{/* <Row> <img src={require('../kidRocket.jpg')} /> </Row> */}
<h3>The Invention Process</h3>
<Row className="">
{/* ADD BOOTSRAP CARDS HERE */}
<Col xs="12" sm="4">
<p>Product Design</p>
{/* ADD BOOTSRAP CARD HERE */}
</Col>
<Container>
{/* <Row> <img src={require('../kidRocket.jpg')} /> </Row> */}
<h3>The Invention Process</h3>
<Row className="">
{/* ADD BOOTSRAP CARDS HERE */}
<Col xs="12" sm="4">
<p>Product Design</p>
{/* ADD BOOTSRAP CARD HERE */}
</Col>
<Col xs="12" sm="4">
<p> Rapid Prototyping </p>
</Col>
<Col xs="12" sm="4">
<p>Manufacturing </p>
</Col>
</Row>
</Container>
<Container>
<h1>Customer Journey</h1>
{/* ADD BOOTSRAP CAROUSEL HERE */}
</Container>
<Container>
<h3>The Invention Process</h3>
{/* ADD BOOTSRAP CAROUSEL HERE */}
</Container>
<Container />
<Col xs="12" sm="4">
<p> Rapid Prototyping </p>
</Col>
<Col xs="12" sm="4">
<p>Manufacturing </p>
</Col>
</Row>
</Container>
<Container>
<h1>Customer Journey</h1>
{/* ADD BOOTSRAP CAROUSEL HERE */}
</Container>
<Container>
<h3>The Invention Process</h3>
{/* ADD BOOTSRAP CAROUSEL HERE */}
</Container>
<Container />
</div>
<InventionProcessDeck />
</div>
);
}