Submitted almost 2 years ago

html, css

brandie8•10

@brandie8

A solution to the Product preview card component challenge

Preview Code

Solution retrospective

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

Code

Please log in to post a comment

Community feedback

hitmorecode•7,540
@hitmorecode
Posted almost 2 years 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
Caelus•520
@Caelus111
Posted almost 2 years 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.

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