Computer scienceFrontendCSSBasic propertiesPositioning

Position

Theory

Discount badge position

Report a typo

Imagine you are working for an online store. Your current task is to create product entries. You've designed them well, and there's only one thing left to do: attach a badge with the discount in the upper right corner of each item.

Three simple Notepad product cards

Write HTML and CSS code
<main class="main">
<div class="container_card">
<div class="image_container">
<img src="https://ucarecdn.com/a38b3fd5-2aeb-4be0-88cd-91eb35388def/" alt="">
</div>
<div class="describe_container">
<p class="describe">simple notepad</p>
<div class="buy_container">
<div class="price_container">
<p class="stock">20$</p>
<p class="real_price">18$</p>
</div>
<button class="buy">add to basket</button>
</div>
</div>
<div class="stock_badge">10%
</div>
</div>
<div class="container_card">
<div class="image_container">
<img src="https://ucarecdn.com/0b96be48-a91e-45d5-a517-c02feea83230/" alt=""> </div>
<div class="describe_container">
<p class="describe">also simple notepad</p>
<div class="buy_container">
<div class="price_container">
<p class="stock">35$</p>
<p class="real_price">31.5$</p>
</div>
<button class="buy">add to basket</button>
</div>
</div>
<div class="stock_badge">10%
</div>
</div>
<div class="container_card">
<div class="image_container">
Completed 1 of 4
Specify the positioning type for the .stock_badge element.
Specify the positioning type of the parent element .container_card
___

Create a free account to access the full topic