1

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:

introducir la descripción de la imagen aquí

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:

introducir la descripción de la imagen aquí

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.

introducir la descripción de la imagen aquí

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;
0

1 respuesta 1

0

Primero, el título lo tienes que sacar del componente Card y ponerlo antes de la lista que renderiza las Card para que solo salga una vez.

Segundo, envuelve la lista que renderiza las Card en un componente y dale la altura que necesitas, luego ya solo tienes que posicionar dicho componente en el lugar que quieras de la página con css.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.