Created Card component
This commit is contained in:
parent
74121fda81
commit
659aff38d0
|
|
@ -0,0 +1,19 @@
|
||||||
|
import React from 'react';
|
||||||
|
import './css/Card.css';
|
||||||
|
|
||||||
|
const Card = (props) => {
|
||||||
|
console.log(props);
|
||||||
|
return (
|
||||||
|
<div className="card">
|
||||||
|
<div>
|
||||||
|
<div className="title">{props.title}</div>
|
||||||
|
<div className="content">
|
||||||
|
{props.children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img className={props.image ? "show" : ""} src={props.image} alt={props.title}/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Card;
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
.card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 50px;
|
||||||
|
width: 75vw;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .title {
|
||||||
|
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||||
|
font-size: 48px;
|
||||||
|
color: #3D3D3D;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .content {
|
||||||
|
font-size:xx-large;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card img {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card img.show {
|
||||||
|
display: block;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 2px;
|
||||||
|
border-color: #A5B2A4;
|
||||||
|
border-radius: 5px;
|
||||||
|
height: 10rem;
|
||||||
|
width: 10rem;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue