soy nuevo usand React asi que trato de hacer ejercicios para mejorar, la cuestion es que el ejercicio trata de cards, y queda como lo siguiente:
cuando quiero que quede asi, en medio de la pagina, que se muestren por completo todos los cards con su forma en su totalidad, como en la siguiente imagen:
Asi mismo si trato de meter un titulo en la pagina, que se quede sujetado a la parte superior central, este se repite 1 vez por cada card.
card-style:
.card{
width: 18rem;
top: 70px;
bottom: 50px;
}
.card:hover{
box-shadow: 5px 10px 20px 1px rgba(0,0,0,0.253) !important;
}
.card-text{
font-size: .9rem;
padding: 0.4rem
}
.container .row{
padding-top: -8px;
padding-bottom: 12px;
}
CardUI:
import React from "react";
import "./card-style.css";
import styled from "styled-components";
const Section = styled.section`
position: relative;
min-height: 100vh;
display: flex;
margin: 0 auto;
`;
const Title = styled.h1`
font-size: ${(props) => props.theme.fontBig};
font-family: "Kaushan Script";
font-weight: 300;
position: fixed;
top: -0.6rem;
left: 24%;
z-index: 5;
`;
const Card = props =>{
return (
<Section>
<Title>
About Us
</Title>
<div className="card text-center">
<div className="overflow">
<img src={props.imgsrc} alt="Image1" className="card-img-top"></img>
</div>
<div className="card-body text-dark">
<h4 className="card-title">{props.title}</h4>
<p className="card-text text-secondary">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magnam deserunt fuga accusantium excepturi quia.
</p>
<a href="#" className="btn btn-outline-success">Go anywhere</a>
</div>
</div>
</Section>
);
}
export default Card;