Skip to content
OverviewSolutions
17
Comments
9
Lucas Piputto
@paiput

All comments

  • Lucas Piputto•305
    @paiput

    Hi Ted! Nice job with this challange!

    I just have one suggestion, and it's that to make the overlay color look a bit more like in the design by changing the .bg-img background-blend-mode property to multiply. It won't look 100% the same as the design but I think it's pretty close.

    Hope that helps.

  • Lucas Piputto•305
    @paiput

    Hi Brandt!

    To apply the purple filter to the image you could do something like this. In this case you wouldn't need the <img> tags inside the <div class="cardImageContainer">

    .cardImageContainer {
    /* then you would replace the backround url for mobile view with media query */
    background: url('../assets/images/image-header-desktop.jpg') var(--soft-violet);
    background-blend-mode: multiply /* you can also try other values */;
}

    It looks like you are having some Accessibility and HTML Validations problems. You you can see a brief description of each problem by clicking the "view report" button.

    Marked as helpful
  • Lucas Piputto•305
    @paiput

    Nice job! The animations look very good. If you asked I would make them a bit longer. For example:

    .testimonial__body .text {
    transition: transform 0.7s, opacity 0.6s, ease-in, -webkit-transform 0.7s;
}

.appear img {
    animation: popup 800ms;
}

.testimonial__body .author {
    transition: transform 0.7s, opacity 0.6s, ease-in, -webkit-transform 0.7s;
}

    Greetings and happy coding!

    Marked as helpful
  • Lucas Piputto•305
    @paiput

    Hi @GitHub-dev12345! Good job with challange!

    There's a problem with the image overlay in the mobile view. A possible solution would be to set

    .card .mainpic {
  background: 
    url(images/image-header-mobile.jpg) 
    hsl(277, 64%, 61%);
  background-blend-mode: multiply;
}

    so you wouldn't need the <div class="overlay"></div> element.

    And if you want to get rid of your accessibility issue, you just simply need to replace <div class="attribution">...</div> by <footer class="attribution">...</footer>

    Hope that helps

  • Lucas Piputto•305
    @paiput

    I think it's okay, I did the same way. And I think it's because those buttons are supposed to take you to another page on your website.

  • Lucas Piputto•305
    @paiput

    Nice animations Héctor.

    Just a little detail that I found, from 340 pixels downwards the size of the icons is reduced. Maybe you could correct it with:

    .share-popup__icons > * {
  min-width: 17px; /*I tried with 17px but you could try any other*/
}

    I'm not an expert but this might help. Great job!

  • Lucas Piputto•305
    @paiput

    You could create different functions that use a for of loop to iterate through:

    • each questions' title
    • each questions' arrow
    • each questions' paragraph

    You could create classes in CSS, and, in those for loops, remove or add those classes to each <div class="line"> elements.

    I would use classes for all the titles, arrows, and paragraphs. This would be useful for example with the arrows, because you could use just one image, and when you click on the question or on the arrow, you add that image a class like this: .rotate-arrow {transform: rotate(180deg); transition: transform ease .5s;}`

    And in the JS, you could do something like this:

    const = document.querySelectorAll('.titleArrows'); // In your case your class is '.straight'  I think

function rotateArrow(targetElement) {
    for (arrow of titleArrows) {
        arrow.classList.remove('rotate-arrow');
    }

    targetElement.classList.add('rotate-arrow');
}

    After created those functions, you should create an eventListener that detects if you clicked on a question title, or on an arrow. You could do something like this:

    // I made it like this
const box= document.querySelector('.box');
container.addEventListener('click', (e) => {
    if (e.target.classList.contains('questionTitle')) {
         rotateArrow(e.target.firstElementChild);
    }
    else if (e.target.classList.contains('titleArrows')) {
        rotateArrow(e.target);
    }
}

    The example above is just to give you an idea. Consider that the this example cannot be applied as is in your html because the layout is probably different.

    I hope this example has been helpful for you.

  • Lucas Piputto•305
    @paiput

    Wow, it's identical to the design. Awesome work!! Congrats!!

  • Lucas Piputto•305
    @paiput

    I think you could use a background-size: contain; , and should make the main-image bigger. I didn't complete it all right but if you want you can check my code. https://github.com/paiput/frontend-mentor/tree/main/huddle-landing-page