Skip to content
OverviewSolutions
16
Comments
7

Samuel Llibre Santos

@ZyruksDominican Republic400 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

SASS Javascript Gulp PostCSS

Latest solutions

View more solutions

Latest comments

  • Samuel Llibre Santos•400
    @ZyruksPosted about 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 over 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
  • 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
View more comments