hitmorecode• 6,230
@hitmorecode
Posted
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
h1andh2. What you madeh2it's actually the main text on the page, so this should beh1. - 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
