Skip to content
OverviewSolutions
10
Comments
4
Juan
@JuanGarridoTroche

All comments

  • Juan•150
    @JuanGarridoTrocheSubmitted about 2 years ago

    flexbox

    3
    Juan•150
    @JuanGarridoTrochePosted about 2 years ago

    I did it again with your method but I'm not able to do it right. I show you what I did: HTML:

    <article class="card" role="main"> <picture class="img"> <source media="(min-width:375px)" srcset="images/image-product-desktop.jpg"> <img src="images/image-product-mobile.jpg" alt="Imagen del producto" style="width:auto;"> </picture> <section class="producto"> <h4>Perfume</h4> <h3>Gabrielle Essence Eau De Parfum</h3> <p>A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL. </p> <div class="precios"> <h2>$149.99</h2> <h4>$169.99</h4> </div> <button class="btn"><img src="images/icon-cart.svg" alt="carrito"> Add to cart</button> </section> </article>

    And an alternative css: :root { /* Primary colors*/ --dark-cyan: hsl(158, 36%, 37%); --cream: hsl(30, 38%, 92%);

    /* Neutral colors*/ --very-dark-blue: hsl(212, 21%, 14%); --dark-grayish-blue: hsl(228, 12%, 48%); --white: hsl(0, 0%, 100%);

    /* Fuentes*/ --fraunces: "Fraunces", serif; --montserrat: "Montserrat", sans-serif; }

    *{ box-sizing: border-box; }

    body{
    min-height: 100vh; font-size: 62.5%; background-color: var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--montserrat); padding: 60px; margin: 60px; }

    .card{ display: flex; flex-direction: row; justify-content: center; box-sizing: border-box; }

    .card .img{
    flex-basis: 50%; display: block; object-fit: cover; max-width: 100%; border-radius: 10px 0px 0px 10px; box-sizing: border-box; }

    .card .producto{ flex-basis: 50%; display: flex;
    flex-direction: column; background-color: var(--white); border-radius: 0px 10px 10px 0px; box-sizing: border-box;

    }

    .card .producto h4 { text-transform: uppercase; font-weight: 500; font-size: 1rem; color: var(--dark-grayish-blue); margin-bottom: 0;
    }

    .card .producto h3 { font-family: var(--fraunces); font-size: 2.2rem; padding: 0px 40px 0px 0px; font-weight: 700; padding-top: 0px; margin-top: 5px; margin-bottom: 0; line-height: 30px; }

    .card .producto p { font-size: .88rem; color: var(--dark-grayish-blue); padding: 0px 40px 0px 0px; line-height: 25px; padding-top: 0px; margin-top: 20px; margin-bottom: 0; }

    .card .producto .precios { display: flex; flex-direction: row; align-items: center; width: 100%; align-items: center; }

    .card .producto .precios h2 { color: var(--dark-cyan); font-family: var(--fraunces); font-size: 2.3rem; padding-right: 10px; }

    .card .producto .precios h4 { font-size: 0.8rem; text-decoration: line-through; padding-left: 30px; }

    .card .producto .btn { border: none; background: none; width: 100%; cursor: pointer; color: white; background-color: var(--dark-cyan); border-radius: 10px; padding: 20px; }

    .card .producto .btn:hover { background-color: hsl(157, 35%, 22%); }

    0
  • Juan•150
    @JuanGarridoTrocheSubmitted about 2 years ago

    flexbox

    3
    Juan•150
    @JuanGarridoTrochePosted about 2 years ago

    Thanks Lucas, I was trying your solution twice but it doesn't work. I will be something wrong so I'll make the exercise again form the start. For me, embedding images is the most difficult for the moment. Thanks for your solutions again. It's very helpful.

    0
  • Juan•150
    @JuanGarridoTrocheSubmitted about 2 years ago

    My big problem was with main picture. I'm unsure of sizing areas. I don't think it's being centered. I was not able. it's too dificult centering unique elements.

    flexbox

    3
    Juan•150
    @JuanGarridoTrochePosted about 2 years ago

    Thanks for your comments. I'll try not to make that mistake again. I'm still learning thanks to your comments. Thank you very much for your answer!

    1
  • Juan•150
    @JuanGarridoTrochePosted about 2 years ago

    Thanks for your comments. I will try your improves, it is a great help for me. I didn't know mix-blend-mode property so I'm going to investigate more about it. Thanks for your words!

    1