Aller au contenu principal

12-B-2 😈 Boss - Bandeau de cookies

À partir du HTML et CSS de base suivant:

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./styles/app.css">
  <title>Bandeau de cookie</title>
</head>
<body>
  <div class="cookie-banner">
      <div class="cookie-content">
          <button class="close-button">&times;</button>
          <p class="cookie-text">
              Ce site utilise des cookies pour améliorer votre expérience de navigation et supporter certaines fonctionnalités essentielles.
          </p>
          <button class="cookie-button">Accepter tous les cookies</button>
          <button class="cookie-button-secondary">Paramètres</button>
      </div>
  </div>
</body>
</html>
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.cookie-banner {

}

.cookie-content {

}

.cookie-text {

}

.cookie-button {

}

.cookie-button-secondary {

}

.close-button {

}

Reproduisez le plus fidèlement possible le visuel suivant:

http://localhost:4200

img

Instructions​

  • Positionnez le bandeau de façon fixe dans le bas de la page
    astuce

    Utilisez position: fixed en plus des propriétés bottom, left, right

  • La largeur maximale du texte doit être 600px.
  • Vous pouvez choisir les couleurs que vous voulez, ça n'a pas d'importance, l'idée est de positionner les éléments correctement.

Cheat Code (solution) 

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles/app.css">
<title>Bandeau de cookie</title>
</head>
<body>
<div class="cookie-banner">
    <div class="cookie-content">
        <button class="close-button">&times;</button>
        <p class="cookie-text">
            Ce site utilise des cookies pour améliorer votre expérience de navigation et supporter certaines fonctionnalités essentielles.
        </p>
        <button class="cookie-button">Accepter tous les cookies</button>
        <button class="cookie-button-secondary">Paramètres</button>
    </div>
</div>
</body>
</html>
Open on CodeSandboxOpen Sandbox