Skip to content
OverviewSolutions
16
Comments
7
Samuel Llibre Santos
@Zyruks

All comments

  • Samuel Llibre Santos•400
    @ZyruksPosted almost 2 years ago

    What you can do to get the color on the picture is created a div. This div should on top of the image.

    Make the div same height and width of the image, background-color should be the purple and use the property mix-blend-mode: multiply.

    Here is the HTML and CSS ;)

    <div class="hero-img">
      <img src="./images/image-header-desktop.jpg" alt="desktop" class="desktop">
      <img src="./images/image-header-mobile.jpg" alt="" class="mobile">
      <div class="filter-color" ></div>
</div>

    
.hero-img {
position: relative;
}

.filter-color {
width: 100%;
height: 100%;
background: var(--Soft-violet);
position: absolute;
top: 0;
mix-blend-mode: multiply;
opacity: 90%;
}

    With mix-blend-mode, you can blend color like the blend option in photoshop.

    More about that here MDN Mix Blend Mode

    1
  • Samuel Llibre Santos•400
    @ZyruksPosted about 2 years ago

    Hey nicely done this challenge but... Yeah there is always a but lol

    You need to modify some tags on your code to get more semantic tags and make your HTML more accessible.

    Gonna help you out a bit.

    Your Code

    Line 27     <div class="main-title thin">Reliable, efficient delivery</div>
Line 28     <div class="main-title bold">Powered by Technology</div>

    What i would do is:

    <h1 class="main-title"> Reliable, efficient delivery <br />
<span class="thin">Powered by Technology </span>
 </h1>

    Later on on line 34 wrap the entire card-wrapper div with a main tag

    <main>
     <div class="card-wrapper">
     </div>
</main>

    With this all your code should pass the accessibility report ;)

    If you need any help or didn't understand something just ask me I'm happy to help

    Keep going and keep learning.

    Marked as helpful
    0
  • Samuel Llibre Santos•400
    @ZyruksPosted over 2 years ago

    Hey, how are you?

    Just check your code real quick and the problem comes from css line 218 to 222

    This part

    @media screen and (min-width: 1400px) {
    .card1, .card2{
        transform: translate(-50%, -50%) scale(1.1);
    }
}

    If you delete it all will be fine ;)

    Good Luck

    Marked as helpful
    1
  • Samuel Llibre Santos•400
    @ZyruksPosted over 2 years ago

    Hey, how are you? hope everything is ok.

    What i love to have is a error block or alert, If the person don't select anything maybe an alert like : Please select a number or something like that would be nice but everything looks really nice.

    Keep going!!!.

    0
  • Samuel Llibre Santos•400
    @ZyruksPosted over 2 years ago

    Hi how is everything?

    The only thing i think you can add is a selected class. If you select one number change background-color to light-grey.

    Really nice approach.

    Marked as helpful
    0
  • Nelson Rosario•50
    @NellyisDevvSubmitted over 2 years ago

    • I found it a bit difficult to find what width would work with mobile view!

    • Is there anything I could have done better with this challange I know there is a bunch of minor things that should be adjusted and changed to make the project more clean and just better across different devices

    Product preview card component

    2
    Samuel Llibre Santos•400
    @ZyruksPosted over 2 years ago

    Hey how is everything? Hope all good.

    Here my Tips:

    1: for the image to occupy the 100% of the height first put

    .perfume-container {
 max-height : 600px;
}

.perfume-picture {
width : 50%;
}
.perfume-container .perfume-picture img {
 height: 100%;
}

    that should make the img 100% height.

    2: to align the content to the center you can delete the margin on .perfume-container and add display:flex to body and flex-direction column.

    If you need help with anything just text me me ;)

    Marked as helpful
    0
  • Yosef•500
    @YositySubmitted over 2 years ago

    It is my first time using media query and designing a responsive website. I barely accomplished the task and I believe I could improve more. I hope to read your feedbacks about my work and tips I could follow next time. thanks :)

    Nested containers technique as well as flexbox

    1
    Samuel Llibre Santos•400
    @ZyruksPosted over 2 years ago

    Hey good work. This would be the area that I would try to improve

    Try a Mobile first approach, if you want to read about it here is a good article: https://smartbear.com/learn/performance-monitoring/what-is-mobile-first/

    You have a problem with the github link

    The one you publish here is this one: https://github.com/Yosity/Product-preview-card-component

    and the one you have on github publish have a extra T: https://github.com/Yosity/Product-preview-card-componentt

    Try updating it.

    Good luck and keep learning.

    Marked as helpful
    0