Webleb - UI Elements - French Quote Generator HTML Template

HTML

CSS

/* Styles Globaux */
body {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: gradient-linéaire(45deg, #f06, jaune);
  color: #fff;
  overflow: hidden;
}

/* Conteneur */
.container {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 30px;
  text-align: center;
  max-width: 600px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.container:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
}

/* Titre */
h1 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #1a0404;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

/* Texte de Citation */
#quote {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: #0c59a6;
  animation: fadeIn 1s ease;
  line-height: 1.6;
}

/* Bouton */
button {
  background: linear-gradient(135deg, #ff7eb3, #ff758c);
  color: noir;
  border: none;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

button:active {
  transform: scale(0.95);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

JS

const quotes = [
  "Connais-toi toi-même. – Socrate",
  "Tu es plus fort que tu ne le penses.",
  "Accepter qui tu es est la première étape vers la liberté.",
  "Personne ne peut te faire sentir inférieur sans ton consentement. – Eleanor Roosevelt",
  "La confiance en soi est le premier secret du succès. – Ralph Waldo Emerson",
  "Tu es toujours avec toi-même, alors tu ferais mieux d'apprécier la compagnie. – Diane von Fürstenberg",
  "Sois toi-même ; tous les autres sont déjà pris. – Oscar Wilde",
  "Tu ne peux pas te comparer aux autres et être heureux en même temps.",
  "Si tu veux que les autres te respectent, commence par te respecter toi-même.",
  "N'oublie jamais : tu es unique.",
  "Tu te critiques depuis des années, et cela n'a pas fonctionné. Essaie de t'approuver et vois ce qui se passe. – Louise Hay",
  "S'aimer soi-même est le début d'une romance qui durera toute la vie. – Oscar Wilde",
  "Ne laisse pas ton reflet te définir — ton âme est plus profonde que ton apparence.",
  "Le chemin vers l'estime de soi est un chemin de découverte de soi.",
  "Ta valeur n'est pas liée à ta productivité.",
  "Ce qui se trouve derrière nous et ce qui se trouve devant nous sont des choses infimes comparées à ce qui se trouve en nous. – Ralph Waldo Emerson",
  "Ta valeur personnelle est déterminée par toi. Tu n'as pas à dépendre de quelqu'un qui te dit qui tu es. – Beyoncé",
  "S'approprier son histoire est la chose la plus courageuse que tu feras jamais. – Brené Brown",
  "Tu dois croire en toi quand personne d'autre ne le fait — cela fait de toi un gagnant dès maintenant. – Venus Williams",
  "Le respect de soi est la racine de la discipline : le sens de la dignité grandit avec la capacité de se dire non à soi-même. – Abraham Joshua Heschel",
  "Croire en soi, et tout est possible.",
  "Le plus grand amour est celui que tu te donnes à toi-même.",
  "La perfection n'est pas atteignable, mais tendre vers elle apporte l'excellence. – Vince Lombardi",
  "Tu es assez bien tel que tu es. – Meghan Markle",
  "La façon dont tu te parles compte.",
  "Le bonheur commence par l'amour de soi.",
  "Prendre soin de soi, c'est reprendre son pouvoir. – Lalah Delia",
  "Ta valeur ne diminue pas en fonction de l'incapacité de quelqu'un d'autre à voir ta valeur.",
  "Sois fier de qui tu es et n'aie pas honte de la façon dont les autres te voient.",
  "Aime-toi d'abord, parce que c'est avec toi-même que tu passeras le reste de ta vie.",
  "Ce n'est pas ce qu'ils t'appellent, c'est à quoi tu réponds. – W.C. Fields",
  "N'attends pas que quelqu'un d'autre te valide. Tu as déjà de la valeur.",
  "La seule personne que tu dois surpasser est celle que tu étais hier.",
  "Ta vie n'est pas définie par un seul moment ou une seule erreur.",
  "Découvre qui tu es et fais-le exprès. – Dolly Parton",
  "Croie que tu le mérites, et l'univers te le servira.",
  "La confiance n'est pas 'ils m'aimeront' ; la confiance est 'je m'en sortirai s'ils ne le font pas'.",
  "Ne sois pas embarrassé par tes échecs, apprends d'eux et recommence. – Richard Branson",
  "Tu n'es pas brisé ; tu guéris et deviens plus fort.",
  "Célèbre chaque petite victoire — c'est la preuve que tu grandis."
];

const quoteElement = document.getElementById("quote");
const button = document.getElementById("generate");

button.addEventListener("click", () => {
  const randomIndex = Math.floor(Math.random() * quotes.length);
  quoteElement.textContent = quotes[randomIndex];
});

French Quote Generator HTML Template

Recommended