Skip to content
Submitted 10 months ago

Preview Card

mordy99•30
@mordy99
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

  • Dongmo Shu•280
    @dongmo-shuPosted 10 months ago

    Hello @mordy99

    It seems your solution is not complete. I reviewed your code, and I found a lot of issues. Let's dive into them.

    First

    Always review the `style-guide.md`` file before attempting any frontend Mentor challenges. The entire purpose is to guide the developer on what needs to be in the design.

    Second

    We need to link up the 2 fonts which will be needed to complete this challenge. There exist many ways of doing this. This is what I find to be the most efficient.

    <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100;0,9..144,200;0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,800;0,9..144,900;1,9..144,100;1,9..144,200;1,9..144,300;1,9..144,400;1,9..144,500;1,9..144,600;1,9..144,700;1,9..144,800;1,9..144,900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

    Add the above lines in the <head> section of your HTML

    Third

    We need to add the information listed into the style-guide.md file I mentioned above. I recommend creating a Pseudo CSS class called :root at the very top of your CSS file.

    :root {
    --very_dark_blue: hsl(212, 21%, 14%);
    --dark_grayish_blue: hsl(228, 12%, 48%);
    --white: hsl(0, 0%, 100%);
    --dark_cyan: hsl(158, 36%, 37%);
    --cream: hsl(30, 38%, 92%);
    --primary_font: "Montserrat";
    --secondary_font: "Fraunces";
}

    You can add as many attributes as you need.

    Fourth

    Once you are done with those, it is time to make modifications to your CSS file. Changes such as the button colour, text colour, text size and text font are needed. This time, rather than having to link up the appropriate hsl value, you can just add the pre-assigned value of the colour into the CSS attribute.

    For example background-color: hsl(0, 0%, 100%); To background-color: var(--cream);

    Fifth

    The body of your web page needs to be placed at the centre of the screen. You can do so by adding the following to your CSS file.

    body{
    background-color: var(--cream);
    height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

    I prefer this method as it works for all screen dimensions.

    Sixth

    Two product images were provided in the challenge folder. One is for mobile screens, and another is for desktop screens. Of course, only one image needs to be displayed depending on the screen size of the device which is used to display the web page. There are many ways of doing this using HTML and CSS, here is what I recommend.

    HTML

        <div class="image-area">
      <!--Two images, one for mobile and another for desktop-->
      <img class="image-product-desktop" src="../images/image-product-desktop.jpg">
      <img class="image-product-mobile" src="../images/image-product-mobile.jpg">
    </div>

    CSS for the desktop view

        .image-product-desktop{
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        max-height: 100%;
    }

    .image-product-mobile{
        display: none;
    }

    CSS for the mobile view

        .image-product-desktop{
        display: none;
    }


    .image-product-mobile{
        border-radius: 10px 10px 0px 0px;
        max-width: 100%;
    }

    That's all for now. I hope this was helpful.

    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