Skip to content
Submitted about 1 year ago

html, css

brandie8•10
@brandie8
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

Im just starting out. how can I do this better?

Community feedback

  • hitmorecode•6,680
    @hitmorecodePosted about 1 year ago

    Good effort, as it is your page is not there yet. Here are a few things you can do to make it better.

    HTML

    • You can start with your html structure
    <body>
  <main>
    <div class="container">
      <div class="image">
        <picture>
	  <source media="(min-width: ***px)" srcset="./images/image-product-desktop.jpg">
	  <source media="(min-width: ***px)" srcset="./images/image-product-mobile.jpg">
	  <img src="./images/image-product-desktop.jpg" alt="">
	</picture>
      </div>
      <div class="text">
				
      </div>
    </div>
  </main>
 </body>
    • Use the picture element to switch images from desktop to mobile, see above example
    • Switch h1 and h2. What you made h2 it's actually the main text on the page, so this should be h1.
    • You used <br> to separate the paragraphs, you don't need to do this. If you make the text container smaller, each text will jump to the next line.
    • For the price you created a div and placed two more divs inside. You can do this with just one div and place two <p> tags inside. After use flexbox to align them

    CSS

    • Make a habit of always add css reset to your css. Here is a simple css reset
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
    • To be able to place the card in the middle of the page, you need to add this to your css
    body {
  min-height: 100vh; /* this makes the page responsive */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
    • In your css you have span {padding-left: 4px;}, but in your html there is no span to be found
    .price{
    display:flex;
    align-items: center; /* add this to align both prices horizontally */
}
    • You can apply the same on the button.
    • The page is not responsive
    • You need to add the hover effect on the button.

    See if you can take it from here and if you need help let me know

    Marked as helpful
    0
  • Caelus•520
    @Caelus111Posted about 1 year ago

    You can start by centering everything using display:flex; and justify-content:center; and align-items:center; to the body element, then add background-color to it again, you got the layout right and you need to use multiple margins and padding to make it look like the original one. if this challenge is hard for you, you can always take it easy and start with the QR code component, and so on taking it step by step.

    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