Skip to content
OverviewSolutions
47
Comments
24

ROCKY BARUA

@DrougnovChittagong, Bangladesh1,090 points

Self-taught front-end developer. Love to build and learn.

I’m currently learning...

Django

Latest solutions

View more solutions

Latest comments

  • ROCKY BARUA•1,090
    @Drougnov

    Hello @cnsacramento, great job. The code looks neat and clean. Here are some things you can improve:

    • Change the h2 to h1 as the page should contain a level-one heading.
    • The box shadow is not working on the .card, cause you've only provided the color. You also need to provide the h-offset and v-offset value. You can learn more about box shadow from here
  • ROCKY BARUA•1,090
    @Drougnov

    Hello @ilvdrskn, great job on completing this challenge.

    As the .modal-menu is an absolute element and its parent .head doesn't have a defined height, it is only taking the head's initial height. To fix this, simply remove the height: 100% from the .modal-menu, and it will get the desired full height.

    Also, try to fix the accessibility warnings. If you need further help on this, feel free to ask or check out my solution. Have a good day :)

    Marked as helpful
  • ROCKY BARUA•1,090
    @Drougnov

    Hi @SpacemanOG, the design is looking great. Good job.

    Use a pseudo-element(::after,::before) to create an overlay on that image container. Like this:

     .heroImage::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: hsla(277, 64%, 40%, 0.6);
  top: 0;
  left: 0;
}

    And don't forget to add position: relative to the heroImage.

    You can remove the 'source media' for the 300px width as the img will be shown by default on lower that 1200px width screen.

    Hope this helps. Have a good day :)

    Marked as helpful
  • ROCKY BARUA•1,090
    @Drougnov

    Hello @cenkderman, great job.

    • The design is looking perfect on the desktop viewport. But the text-content is exceeding the container in mobile view. Avoid using height if not absolutely necessary.

    • The google font link is wrong. In the HTML change your font link to this:

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Montserrat:wght@500;700&display=swap" rel="stylesheet">```.

Or, just simply add this line at the top of your CSS :

```@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Montserrat:wght@500;700&display=swap');```
    • Use a default font in the body tag. Ex: Montserrat and use the other one on the needed element. In this way, you can save some lines.
    • Although you have beautifully added the images with display none and media queries, the semantic way would be using the picture tag. Like this:

    <picture> <source media="(min-width: 650px)" srcset="./images/image-product-desktop.jpg"> <img src="./images/image-product-mobile.jpg" alt="Gabrielle CHANEL's perfume bottle"> </picture>

    Don't forget the alt text 😉.

    You can check my solution for further information. If you have further questions, feel free to ask. Have a good day.

    (edit) Having trouble formatting the comment. I hope you can still understand what I'm trying to say

    Marked as helpful
  • ROCKY BARUA•1,090
    @Drougnov

    Hi @caio-rosa, good job on the challenge.

    To achieve the purple filter on the image, you can use pseudo-code(after or before) on the container. At first use position relative to the container.:

    .container {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

    And add after to the container like this:

    .container::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: hsla(277, 64%, 40%, 0.6);
  top: 0;
  left: 0;
}

    this should do the trick.

    You might wanna work on the accessibility and responsiveness(mobile devices). For further help feel free to comment or view my solution

    Anyway, keep up the good work and have a good day : )

    Marked as helpful
  • ROCKY BARUA•1,090
    @Drougnov

    Hey @caiomiyaji, good work. The card looks awesome.

    You can fix the accessibility issue by changing the h2 to h1. It is the best practice to have a level 1 header for a well-designed page.

    Here is a blog about the details if you wanna know more.

    Marked as helpful
View more comments