Skip to content
Submitted 12 months ago

Responsive landing page using html css

sheikhhaseeb559•80
@sheikhhaseeb559
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

Solution retrospective

Product Preview card template feel free to check and comment my mistakes

Community feedback

  • Tesla_Ambassador•3,000
    @tesla-ambassadorPosted 12 months ago

    Hey sheikhhaseeb559, It's good to see that you have uploaded another solution. I like that you have integrated media queries into your css now! Kudos 🥳! Anyways, I looked at your css and noticed that there's a few things you could add to enable your container to be placed in the middle of the viewport. Here's some code you can add to your <body></body> tag:

    body {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    Then you can make these changes to your container element so that the previous changes can be effective... Remove the following styles from your <div class="container"></div>:

    .container {
    position: absolute;
    left: 300px;
    top: 90px;
}

    Congrats on completing the challenge, happy coding!

    Marked as helpful
    0
    sheikhhaseeb559•80
    @sheikhhaseeb559Posted 12 months ago

    @tesla-ambassador thanks for this is very helpful for me

    1
    Tesla_Ambassador•3,000
    @tesla-ambassadorPosted 12 months ago

    @sheikhhaseeb559 I'm glad I could help 😁

    Marked as helpful
    0
  • Daniel 🛸•44,310
    @danielmrz-devPosted 12 months ago

    Hello @sheikhhaseeb559!

    Your project looks great!

    I have a few suggestions for you to improve it:

    I noticed that you used position to place your card to the middle of the page. Here are two ways to do it (one of them is kinda similar to what you did):

    1- You can apply this to the body (in order to work properly, you can't use position or margins):

    body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

    2 - or you can apply this to the element you wanna center (almost like you did):

    .element {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
}
    • I also noticed that you wrapped the main content in a div.container and used 2 h1 tags. For semantic purposes, the main content should be wrapped in a main tag. And using more that 1 h1 per page is not recommended. You can use one h1 for the main title and h2, h3, h4 and so on. This is not just about the size, it makes your HTML more semantic.

    Other than those little details, you did a great job!

    I hope it helps!

    2

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