Skip to content
Submitted about 2 years ago

Responsive Landing Page Using flexbox and media queries

Ankit Goswami•10
@Ankit-Goswami
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hello @Ankit-Goswami, Congratulations on completing this challenge!

    Your solution its almost done and I’ve some tips to help you to improve it:

    1.Use <main> instead of a simple <div> this way you improve the semantics and accessibility showing which is the main block of content on this page. Remember that every page should have a <main> block and that <div> doesn't have any semantic meaning.

    2.Add the website favicon inserting the svg image inside the <head>. <link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">

    3.Using <picture> you’ve more control over the elements and its better than using the product image as <img> or background-image. Look that for SEO and search engine reasons it isn't a better practice to import this product image with CSS since this will make it harder to the image. You can manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device (phone / computer) Here’s a guide about how to use picture: https://www.w3schools.com/tags/tag_picture.asp

    See the example below:

    <picture>
  <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg">
  <img src="./images/image-product-desktop.jpg" alt="Gabrielle Parfum" style="width:auto;">
</picture>

    ✌️ I hope this helps you and happy coding!

    0
    Ankit Goswami•10
    @Ankit-GoswamiPosted about 2 years ago

    @correlucas Thanks for your precious support.I am learning.I complete this page in two days😊😊😊.

    1
  • Faris Thibani•220
    @Faris-ThibaniPosted about 2 years ago

    The website turned out great! Here are a few things you did very well: the text responsiveness is amazing. You missed adding the CSS rule text-decoration: line-through; ... Maybe you can help me understand how you built the card better. Finally, a wonderful achievement, and hope this helps you transform as a person.

    0
    Ankit Goswami•10
    @Ankit-GoswamiPosted about 2 years ago

    @Faris-Thibani Next time i will do better.Thanks 👋🏼👋🏼👋🏼.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord