Skip to content
OverviewSolutions
5
Comments
9
Ayoub1Dev
@Ayoub1dev

All comments

  • Ayoub1Dev•195
    @Ayoub1dev

    Really nice. Looks, works and feels awesome.

    Did you use any frameworks?

    I have seen that you made it accessible for different devices using aria-label, but, you did not make it accessible for us XD. I dont't know what each icon does when I hover over it it should display a message saying what it does.

    I guess you already know, but just in case you don't, you have to add the title attribute with the function of the btn.

    <button type="button" class="menu__btn" aria-label="upload file" 
style="user-select: auto;" ** title="Upload File" ** > .... </button>
  • Ayoub1Dev•195
    @Ayoub1dev

    You want me to critic, OK.

    You have a vertical scroll, it needs removing, : -0

    Joy how much to you like lambos :)

    Marked as helpful
  • Ayoub1Dev•195
    @Ayoub1dev

    Hola amig@, he econtrado un problema de accesibilidad muy molesto. Cambio a ingles : ) , para que otros tambien aprendan de este fallo

    PROBLEM

    The accessibility is that when any of the input fields is click the 0 stays on the input field.

    • Example If I try to type 21 euros the value typed is 210 instead of 21.

    WHAT CAUSED THE PROBLEM

    The problem is because you have set the value of the input to 0 in your HTML value="0"

    SOLUTION

    Remove the value atribute from your HTML and add a placeholder attribute. placeholder="0"

    chupado

    Marked as helpful
  • Ayoub1Dev•195
    @Ayoub1dev

    When I previewed your site I found a vertical scroll. Using DevTools I found that you did not reset the margin of the body.

    • Like this:
    body {
   margin: 0;
}

    This will remove the extra space and your wrapper will be 100% of the viewport.

    TIP It is a good practice to start with this on your projects, which will set all elements to the styles inside the curly { } brackets.

    *, *::before, *::after { 
     box-sizing: border-box;
     margin: 0;
     padding: 0 ;
}

    Hope this helps.

    Marked as helpful
  • Ayoub1Dev•195
    @Ayoub1dev

    HTML

    <div class="img"></div>

    CSS

    .img {
    grid-area: img;
    background: url(/images/image-header-mobile.jpg);
    background-color: var(--img-1-color);

    background-blend-mode: overlay;
    background-repeat: no-repeat;
    background-size: cover;
}
    Marked as helpful
  • Ayoub1Dev•195
    @Ayoub1dev

    I did not use an img tag in HTML, I just set the background image of the container div. Check out my code for insight!!

    Marked as helpful
  • Ayoub1Dev•195
    @Ayoub1dev

    You can also do that by setting another div* to position: absolute; over the image.

    *The div should have a transparency value like rgba()

  • Ayoub1Dev•195
    @Ayoub1dev

    I didn' check your code but I think I can help you.

    Hope this helps :)

    1. To display the overlay you just need <div class="img"></div> without an img tag.

    2. In CSS you set the width and height of the container

    3. You have to set the background property (NOT background-image) to the url() of the image and following the url specify the color, like this: background: url(/images/image-header-desktop.jpg), rgb(91, 46, 119);

    4. Here the intersting part. There is a property in css called background-blend-mode, it contains many values but we are intersted in the overlay value, like this : background-blend-mode: overlay;

    HTML

    <div class="img"></div>

    CSS

    .img {
    width: 460px;
    background: url(/images/image-header-desktop.jpg), rgb(91, 46, 119);
    background-blend-mode: overlay;
    background-repeat: no-repeat;
    background-size: 100%;
}
  • Ayoub1Dev•195
    @Ayoub1dev

    Great job @IvanDodig i have also just started on front mentor and i have just uploaded my challenge. I have used just HTML and CSS so make sure to check my code because you will understand how to use the background-image property and the background-position property. Good luck and lets continue the journey together. :-}