12-B-1 😈 Boss - Étiquette de produit

En vous basant sur le HTML et CSS de départ suivant:

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Boss étiquette de produit</title>
  <link rel="stylesheet" href="./styles/app.css">
</head>
<body>
  <div class="produit">
    <h3 class="produit-nom">Casque Bluetooth</h3>
    <p class="produit-description">
        Casque audio sans fil avec réduction de bruit active. 
    </p>
    
    <div class="badge-promo">PROMO</div>
    <div class="etiquette-prix">$89</div>
</div>
</body>
</html>

body {
  font-family: Arial, Helvetica, sans-serif;
}

.produit {

}

.produit-nom {

}

.produit-description {

}

.etiquette-prix {

}

.badge-promo {

}

Reproduisez le plus fidèlement possible le visuel suivant:

http://localhost:4200

Casque Bluetooth

Casque audio sans fil avec réduction de bruit active.

PROMO

$89

Instructions

Utilisez les couleurs de votre choix, l'important est d'obtenir sensiblement la même disposition!
La position absolute vous sera utile pour les pastilles de prix et "promo"
astuce
Lorsque vous utilisez une position absolute, les valeurs top, bottom, left et right peuvent prendre une valeur négative pour sortir du cadre de référence! 🙂

Cheat Code (solution)

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boss étiquette de produit</title>
<link rel="stylesheet" href="./styles/app.css">
</head>
<body>
<div class="produit">
  <h3 class="produit-nom">Casque Bluetooth</h3>
  <p class="produit-description">
      Casque audio sans fil avec réduction de bruit active. 
      Autonomie de 30 heures et charge rapide.
  </p>
  
  <div class="badge-promo">PROMO</div>
  <div class="etiquette-prix">$89</div>
</div>
</body>
</html>

Open Sandbox

Casque Bluetooth

Instructions​

Instructions