Webleb - UI Elements - citation generator

HTML

CSS

/* Global Styles */
body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  overflow: hidden;
}

/* Container */
.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);
}

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

/* Quote Text */
#quote {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: #f8f9fa;
  animation: fadeIn 1s ease;
  line-height: 1.6;
}

/* Button */
button {
  background: linear-gradient(135deg, #ff7eb3, #ff758c);
  color: white;
  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 = [
  "Know yourself. – Socrates",
  "You are stronger than you think.",
  "Accepting who you are is the first step to freedom.",
  "No one can make you feel inferior without your consent. – Eleanor Roosevelt",
  "Self-confidence is the first secret of success. – Ralph Waldo Emerson",
  "You are always with yourself, so you might as well enjoy the company. – Diane von Fürstenberg",
  "Be yourself; everyone else is already taken. – Oscar Wilde",
  "You can’t compare yourself to others and be happy at the same time.",
  "If you want others to respect you, start by respecting yourself.",
  "Never forget: you are unique.",
  "You have been criticizing yourself for years, and it hasn’t worked. Try approving of yourself and see what happens. – Louise Hay",
  "To love yourself is the beginning of a lifelong romance. – Oscar Wilde",
  "Don’t let your reflection define you—your soul is deeper than your appearance.",
  "The journey to self-esteem is a path of self-discovery.",
  "Your worth isn’t tied to your productivity.",
  "What lies behind us and what lies before us are tiny matters compared to what lies within us. – Ralph Waldo Emerson",
  "Your self-worth is determined by you. You don’t have to depend on someone telling you who you are. – Beyoncé",
  "Owning your story is the bravest thing you’ll ever do. – Brené Brown",
  "You have to believe in yourself when no one else does—that makes you a winner right there. – Venus Williams",
  "Self-respect is the root of discipline: The sense of dignity grows with the ability to say no to oneself. – Abraham Joshua Heschel",
  "Believe in yourself, and anything is possible.",
  "The greatest love is the love you give to yourself.",
  "Perfection is not attainable, but striving for it brings excellence. – Vince Lombardi",
  "You are enough just as you are. – Meghan Markle",
  "The way you speak to yourself matters.",
  "Happiness begins with self-love.",
  "Self-care is how you take your power back. – Lalah Delia",
  "Your value doesn’t decrease based on someone else’s inability to see your worth.",
  "Be proud of who you are and not ashamed of how someone else sees you.",
  "Love yourself first, because that’s who you’ll be spending the rest of your life with.",
  "It’s not what they call you, it’s what you answer to. – W.C. Fields",
  "Don’t wait for someone else to validate you. You’re already valuable.",
  "The only person you need to be better than is the person you were yesterday.",
  "Your life isn’t defined by a single moment or mistake.",
  "Find out who you are and do it on purpose. – Dolly Parton",
  "Believe you deserve it, and the universe will serve it.",
  "Confidence is not 'they will like me'; confidence is 'I’ll be fine if they don’t.'",
  "Do not be embarrassed by your failures, learn from them and start again. – Richard Branson",
  "You’re not broken; you’re healing and becoming stronger.",
  "Celebrate every small victory—it’s proof that you’re growing.",
];

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];
});

citation generator

Recommended