0

Recientemente estoy trabajando en un proyecto, en la creación de una pagina web de compra en linea, estoy realizando el frontend utilizando html y css no soy tan experta pero tengo un poco de conocimiento sobre ello, el problema es que he creado unas card para los productos y a la hora de crear el pie de pagina este se esta alineando con las card cabe recalcar que cada css lo tengo en un archivo aparte para mejor organizacion. quisiera su ayuda por favor no he podido encontrar aun el problema, el código es el siguiente:

    body{
        padding: 10em;
        
    }
    .producto{
        max-width: 100%;
        display: flex;
        flex-flow: column;
        border-radius: 6px;
        box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.3);
        background-color: rgba(255, 255, 255) ;
        cursor: pointer;
        transition-property: box-shadow;
        transition-duration: 0.3s;
    
    }
    
    .producto:hover{
        box-shadow: 0 0 1.5em rgba(0, 0, 0, 1.0);
        transform: translateY(10px);
    }
    .producto > img{
        width: 100%;
        object-fit: cover;  
    }
    .producto .informacion {
        padding: 15px;
        text-align: center;
    }
    .informacion{
        border-top: 1px solid rgba(230, 230, 230);
        padding: 1em;
        display: flexflex;
        flex-flow: column;
         text-align: center;
         padding: 15px;
    }
    .descripcion h3{
        font-weight: 400;
      margin-bottom: 15px;
    }
    
     .precio{
        font-size: 1.5em;
    }
    .informacion a{
      
    text-decoration: none;
      display: inline-block;
      padding: 15px;
      width: 60%;
      margin-top: 14px;
      color: #8000ff;
      border: 1px solid #8000ff;
      border-radius: 4px;
      transition: all 400ms ease;
    }
    
    .informacion a:hover{
        background: #8000ff;
      color: #fff;
    
    }
    
    .pie-pagina{
        min-width: 100%;
        background-color: #EEEEEE;
        height: 25rem;
    
    }
    .pie-pagina .grupo{
        width: 100%;
        max-width: 1200%;
        margin: auto;
        display:grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap:60px;
        padding: 45px 0px
        
    }
    .pie-pagina .grupo .caja figure{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .pie-pagina .grupo .caja figure img{
        width: 250px;
    }
    .pie-pagina .grupo .caja h2{
        color: #1a1a1a;
        margin-bottom: 25px;
        font-size: 20px;
    }
    .pie-pagina .grupo .caja p{
        color: #1a1a1a;
        margin-bottom: 10px;
    }
    .pie-pagina  .caja .icono{
      display: inline-block;
      text-decoration: none;
      width: 45px;
      height: 45px;
      line-height: 45px;
      color: #fff;
        margin-right: 10px;
        background-color: #0a1a2a;
        text-align: center;
        transition: all 300ms ease;
      
    }
    
    .pie-pagina .grupo .red-pago a{
        width: 100%;
        height: 100%;
        align-items: center;
        line-height: 50px;
        margin-right: 12px;
    }
    .pie-pagina .grupo .red-pago figure img{
        width: 100px;
    }
    .pie-pagina .grupo1{
        background-color: #C7C7C7;
        padding: 15px 10px;
        text-align: center;
        color: #1a1a1a;
    } 
    .pie-pagina .grupo1 small{
        font-size: 15px;
    }
    @media screen and (max-width:800px){
        .pie-pagina .grupo-1{
            width: 90%;
            grid-template-columns: repeat(1, 1fr);
            grid-gap:30px;
            padding: 35px 0px;
        }
    }
<!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>Tienda </title>
    </head>
    <body>
    <div class="producto" id="anillo17">
      <img src="" alt="">
    <div class="informacion"> 
      <h3>Anillo de nsndinidmkdm+ mniono</h3>
      <p class="precio">$ 198.000</p>
      <a href="#" class="carrito"> Añadir Al Carrito  </a>
    </div>
    </div>
     <footer class="pie-pagina">
            <div class="grupo">
                <div class="caja">
                    <figure>
                        <a href="#">
                            <img src="" alt="Logo de pagina">
                        </a>
                    </figure>
                </div>
                <div class="caja">
                    <h2>SOBRE NOSOTROS</h2>
                    <p>bienvenidos jabsbuabu</p>
                    <p>mbivibbobobobb</p>
                </div>
                <div class="box">
                    <h2>MEDIOS DE PAGO </h2>
                    <div class="red-pago">
                        <a href="#"> <img src="paypal.png"> </a>
                    </div>
                </div>
            </div>
            <div class="grupo1">
                <small>&copy; 2023 <b>nombre</b> - Todos los Derechos Reservados.</small>
            </div>
        </footer>
    </body>
    </html>


   

1 respuesta 1

0

La razón puede deberse a que estas usando la propiedad padding: 10em; para el body y como tu card es hijo directo de body al igual que el footer, ambos respetan ese padding del body, por otro lado, te sugiero usar un contenedor para tus cards, por ejmeplo:

<div class="card-group">
  <div class="card">
    contenido card 1
  </div>
  <div class="card">
    contenido card 2
  </div>
</div>

De este modo, puedes darle un distribución adecuada a tus cards. Espero te haya ayudado.

0

Tu Respuesta

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

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