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