Superhero Mode Activated

The Guardian of /brand-buddy

With Great Power Comes Great Responsibility. And also Great Banners.

Join the Super Squad! Power Up! The League of Extraordinary Evil-doers

/* super.css */ body { background-color: #000; color: #fff; } .container { width: 800px; margin: 0 auto; padding: 20px; border: 1px solid #000; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); background-image: linear-gradient(to bottom, #333, #444); background-size: 100% 200px; background-position: 0 0; background-repeat: no-repeat; background-attachment: fixed; -webkit-linear-gradient(left, #333, #444); -o-linear-gradient(linear-gradient to bottom, #333, #444); -webkit-linear-gradient(linear-gradient to bottom, #333, #444); background-image: linear-gradient(to bottom, #333, #444); } .title { font-weight: bold; font-size: 36px; color: #f00; border-bottom: 2px solid #000; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #000; padding-bottom: 2px; } .hero { width: 200px; height: 200px; background-color: #f00; border: 4px solid #000; border-radius: 50%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); position: relative; background-image: linear-gradient(to bottom, #f00, #f00); background-size: 100% 100%; background-position: 0 0; background-repeat: no-repeat; background-attachment: fixed; -webkit-linear-gradient(linear-gradient to bottom, #f00, #f00); -o-linear-gradient(linear-gradient to bottom, #f00, #f00); -webkit-linear-gradient(linear-gradient to bottom, #f00, #f00); background-image: linear-gradient(to bottom, #f00, #f00); } .hero-image { width: 100%; height: 100%; object-fit: cover; object-fit: contain; background-size: 200px; background-position: center; background-repeat: no-repeat; background-attachment: fixed; -webkit-linear-gradient(linear-gradient to bottom, #f00, #f00); -o-linear-gradient(linear-gradient to bottom, #f00, #f00); -webkit-linear-gradient(linear-gradient to bottom, #f00, #f00); background-image: linear-gradient(to bottom, #f00, #f00); } .hero-name { font-weight: bold; font-size: 24px; color: #fff; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #000; border: 4px solid #000; border-radius: 50%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); background-image: linear-gradient(to bottom, #000, #000); background-size: 100% 100%; background-position: 0 0; background-repeat: no-repeat; background-attachment: fixed; -webkit-linear-gradient(linear-gradient to bottom, #000, #000); -o-linear-gradient(linear-gradient to bottom, #000, #000); -webkit-linear-gradient(linear-gradient to bottom, #000, #000); background-image: linear-gradient(to bottom, #000, #000); } .description { font-size: 18px; color: #fff; text-align: center; width: 80%; margin: 0 auto; padding: 20px; border: 1px solid #000; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); background-image: linear-gradient(to bottom, #333, #444); background-size: 100% 200px; background-position: 0 0; background-repeat: no-repeat; background-attachment: fixed; -webkit-linear-gradient(linear-gradient to bottom, #333, #444); -o-linear-gradient(linear-gradient to bottom, #333, #444); -webkit-linear-gradient(linear-gradient to bottom, #333, #444); background-image: linear-gradient(to bottom, #333, #444); } .links { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; list-style-type: none; text-align: center; font-size: 16px; color: #fff; border: 1px solid #000; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); background-image: linear-gradient(to bottom, #333, #444); background-size: 100% 200px; background-position: 0 0; background-repeat: no-repeat; background-attachment: fixed; -webkit-linear-gradient(linear-gradient to bottom, #333, #444); -o-linear-gradient(linear-gradient to bottom, #333, #444); -webkit-linear-gradient(linear-gradient to bottom, #333, #444); background-image: linear-gradient(to bottom, #333, #444); } .links a { color: #fff; text-decoration: none; background-color: #000; border: 1px solid #000; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); background-image: linear-gradient(to bottom, #000, #000); background-size: 100% 200px; background-position: 0 0; background-repeat: no-repeat; background-attachment: fixed; -webkit-linear-gradient(linear-gradient to bottom, #000, #000); -o-linear-gradient(linear-gradient to bottom, #000, #000); -webkit-linear-gradient(linear-gradient to bottom, #000, #000); background-image: linear-gradient(to bottom, #000, #000); } .links a:hover { background-color: #000; color: #f00; border-color: #000; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); background-image: linear-gradient(to bottom, #000, #000); background-size: 100% 200px; background-position: 0 0; background-repeat: no-repeat; background-attachment: fixed; -webkit-linear-gradient(linear-gradient to bottom, #000, #000); -o-linear-gradient(linear-gradient to bottom, #000, #000); -webkit-linear-gradient(linear-gradient to bottom, #000, #000); background-image: linear-gradient(to bottom, #000, #000); } /* /brand-buddy/superhero-mode/super-squad */ Super Squad /* /brand-buddy/superhero-mode/power-up */ Power Up! /* /brand-buddy/superhero-mode/super-villains */ The League of Extraordinary Evil-doers