fixed card heights -still needs work

This commit is contained in:
YOUR NAME 2018-07-08 21:39:19 +10:00
parent efb6968b93
commit 7a5c0cdf7b
2 changed files with 76 additions and 52 deletions

View file

@ -14,67 +14,85 @@ const InventionProcessDeck = props => {
return (
<CardDeck>
<Card>
<a href="http://bokardo.com/principles-of-product-design/" style={{ textDecoration: 'none' }} class="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>
At its most basic, product design (also known as industrial design) is all the work that comes between the initial idea for a new product, through to the point where the design is ready to be handed off to a manufacturer
</CardText>
</CardBody>
<a
href="http://bokardo.com/principles-of-product-design/"
style={{ textDecoration: "none" }}
class="card"
>
<CardImg
top
width="414px"
height="414px"
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>
At its most basic, product design (also known as industrial
design) is all the work that comes between the initial idea for a
new product, through to the point where the design is ready to be
handed off to a manufacturer
</CardText>
</CardBody>
</a>
</Card>
<Card>
<a href="https://www.w3schools.com/html/" style={{ textDecoration: 'none' }} class="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>
<CardText>
Rapid prototyping is a group of techniques used to quickly fabricate a scale model of a physical part or assembly using three-dimensional computer aided design (CAD) data.
{/* Link to page with video explaining what it is and how it works */}
</CardText>
<CardText
width="100%">
<iframe src="https://www.youtube.com/embed/oDdOqLblmVQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</CardText>
</CardBody>
<a
href="https://www.w3schools.com/html/"
style={{ textDecoration: "none" }}
class="card"
>
<CardImg
top
width="414px"
height="414px"
src="https://i.pinimg.com/736x/72/47/b6/7247b66abf6ef7ae84eb6fd7b9bf2273--d-prints-d-models.jpg"
alt="Card image cap"
/>
<CardBody>
<CardTitle>Rapid Prototyping</CardTitle>
<CardText>
Rapid prototyping is a group of techniques used to quickly
fabricate a scale model of a physical part or assembly using
three-dimensional computer aided design (CAD) data.
{/* Link to page with video explaining what it is and how it works */}
</CardText>
<CardText width="100%">
<iframe
src="https://www.youtube.com/embed/oDdOqLblmVQ"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen
/>
</CardText>
</CardBody>
</a>
</Card>
<Card>
<a href="https://www.w3schools.com/html/" style={{ textDecoration: 'none' }} class="card">
<a
href="https://www.w3schools.com/html/"
style={{ textDecoration: "none" }}
class="card"
>
<CardImg
top
width="414px"
height="414px"
src="https://i.pinimg.com/736x/02/d7/48/02d748ba33a49896a43341e69f788d17--process-engineering-manufacturing-engineering.jpg"
alt="Card image cap"
/>
<CardBody>
<CardTitle>Manufacturing</CardTitle>
<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>
<CardText>
Manufacturing is the processing of raw materials into finished goods using tools and processes.
</CardText>
</CardBody>
<CardText>
Manufacturing is the processing of raw materials into finished
goods using tools and processes.
</CardText>
</CardBody>
</a>
</Card>
</CardDeck>
);
};

View file

@ -56,4 +56,10 @@
.haizol-logo {
/* width: 300px; */
height: 5vh;
}
.card {
width: 100%;
/* height: 40px; */
}