Skip to content
OverviewSolutions
25
Comments
5
Victória Nogueira Marques
@victoriamnx

All comments

  • Victória Nogueira Marques•390
    @victoriamnxPosted over 1 year ago

    Hi Alessandra, I saw your site and code and I have some tips:

    In the text under "10,000+ of our users love our products." you can use the <br> tag to give a line break in the text, so it aligns better, it would look like this:

    • <p>We only provide great products combined with excellent <br> customer service.

    See what our satisfied customers are<br> saying about our services.</p>

    In the background images of the site you can align them better, looking like this:

    • body { background: url(components/images/bg-pattern-top-mobile.svg), url(components/images/bg-pattern-bottom-desktop.svg) hsl(0, 0%, 100%); background-repeat: no-repeat; background-position: top left, bottom right; }
    • and passes the z-index property in your container where the other elements are

    and you can also review the desktop css, as the rate boxes are a little bit bigger than they should be

    I hope the tips help, you understood the details very well and the result is great :)

    Marked as helpful
    0
  • MIRZA ZEESHAN BAIG•40
    @Mirza-ZeeshanSubmitted over 1 year ago

    Please provide your valuable feedback on my project. Specifically, I would like to know the following:

    1. How is the overall look and feel of the project?
    2. Is the content clear and easy to understand?
    3. Are there any suggestions you have for improving the card design or user experience?
    4. Are there any areas of the project where you experienced difficulty or confusion?

    Thank you! for your valuable feedback.

    Responsive Results Summary Component

    2
    Victória Nogueira Marques•390
    @victoriamnxPosted over 1 year ago

    - What does the overall design look like? It's perfect, I really liked it because I can see other projects that you've also done.

    - Is the content clear and easy to understand? Yes, perfectly understandable and clear.

    - Do you have any suggestions to improve card design or user experience? You can in the future make a box in the index that is in the style of the projects you've already done, but at the moment it's already very cool

    - Are there any areas of the project where you felt difficulty or confusion? No, I managed to understand very well and I really liked the result.

    0
  • Soraya•230
    @SorpandaSubmitted over 1 year ago

    I got really far on my own with this challenge, but I got stuck at changing the images when going from mobile to desktop and my white container stayed really big or my image didn't fit into the container anymore. Eventually I watched the tutorial on youtube from Kevin Powell and learned a lot more. (https://youtu.be/B2WL6KkqhLQ)

    I put comments in my code to indicate which elements I got from the tutorial. Where there is no comment I did the code by myself.

    What do I still need to learn: I am going to deep dive in Flexbox and grid, because that is still very hard. I am still a real newbie, there are lots of things I don't know yet, but I wanted to start practicing as much as possible with the things I already do know, the clip, clip-path didn't ring any bells yet, so I am going to study up on that as well.

    Perfume add card challenge (HTML CSS)

    1
    Victória Nogueira Marques•390
    @victoriamnxPosted over 1 year ago

    Hi Soraya, I don't have any tips because your result is perfect, I would just like to compliment you, it's beautiful!

    Marked as helpful
    0
  • Luis Soto•80
    @walkerlynaSubmitted over 1 year ago

    What can I change to make it look better on mobile? I feel like the image is too big and needs to be adjusted. Thank you.

    Challenge#4-Perfume

    2
    Victória Nogueira Marques•390
    @victoriamnxPosted over 1 year ago

    Hi Luis, I saw your code and would like to give you some tips:

    You use preconnect to import fonts, there is a better way to do this:

    In your style.css file put @import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&family=Montserrat:wght@500;700&display=swap");

    @import will get the url that google fonts generates to use in the code.

    In your button the photo of the cart is misaligned, you can change your code to:

    <button><img id="cart" src="images/icon-cart.svg" alt="" />Add to Cart</button>

    That way the image will be correct and aligned with the button, and the fonts will be imported faster, I hope these tips help you, the result was great!

    Marked as helpful
    0
  • Victória Nogueira Marques•390
    @victoriamnxPosted over 1 year ago

    You can use the z-index function to place the image in the background, for example: z-index: 0; (in the background image) and z-index: 1; in the other components.

    It's just a tip, I hope it helps, the result was great and pretty :).

    Marked as helpful
    0