385 lines
13 KiB
HTML
385 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Gooner Training Academy - Title Design Options</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@300;400;600;700;800&family=Rajdhani:wght@300;400;500;600;700&family=Russo+One&family=Bebas+Neue&family=Audiowide&family=Saira+Condensed:wght@300;400;500;600;700&family=Titillium+Web:wght@300;400;600;700;900&display=swap" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
|
|
font-family: Arial, sans-serif;
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.intro {
|
|
text-align: center;
|
|
color: #fff;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.design-option {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 1px solid #333;
|
|
border-radius: 10px;
|
|
padding: 30px;
|
|
margin: 20px 0;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.option-number {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 15px;
|
|
background: #e74c3c;
|
|
color: white;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.tagline {
|
|
margin-top: 10px;
|
|
font-size: 16px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Design Option 1 - Futuristic Tech */
|
|
.option-1 .title {
|
|
font-family: 'Orbitron', monospace;
|
|
font-size: 3.5rem;
|
|
font-weight: 900;
|
|
background: linear-gradient(45deg, #00ffff, #0080ff);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
|
|
letter-spacing: 3px;
|
|
}
|
|
.option-1 .tagline {
|
|
font-family: 'Orbitron', monospace;
|
|
color: #00bfff;
|
|
font-weight: 400;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
/* Design Option 2 - Military Academy */
|
|
.option-2 .title {
|
|
font-family: 'Bebas Neue', cursive;
|
|
font-size: 4rem;
|
|
color: #ff6b35;
|
|
text-shadow:
|
|
2px 2px 0px #000,
|
|
4px 4px 0px #333,
|
|
6px 6px 10px rgba(0,0,0,0.8);
|
|
letter-spacing: 4px;
|
|
transform: perspective(500px) rotateX(10deg);
|
|
}
|
|
.option-2 .tagline {
|
|
font-family: 'Rajdhani', sans-serif;
|
|
color: #ffa500;
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* Design Option 3 - Sleek Modern */
|
|
.option-3 .title {
|
|
font-family: 'Exo 2', sans-serif;
|
|
font-size: 3.8rem;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
letter-spacing: 2px;
|
|
}
|
|
.option-3 .tagline {
|
|
font-family: 'Exo 2', sans-serif;
|
|
color: #8e94f2;
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Design Option 4 - Gaming Aesthetic */
|
|
.option-4 .title {
|
|
font-family: 'Audiowide', cursive;
|
|
font-size: 3.2rem;
|
|
background: linear-gradient(45deg, #ff0080, #ff8000);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-shadow: 0 0 30px rgba(255, 0, 128, 0.7);
|
|
letter-spacing: 1px;
|
|
animation: glow 2s ease-in-out infinite alternate;
|
|
}
|
|
.option-4 .tagline {
|
|
font-family: 'Audiowide', cursive;
|
|
color: #ff4d4d;
|
|
font-size: 15px;
|
|
}
|
|
|
|
@keyframes glow {
|
|
from { filter: drop-shadow(0 0 5px rgba(255, 0, 128, 0.5)); }
|
|
to { filter: drop-shadow(0 0 15px rgba(255, 0, 128, 0.9)); }
|
|
}
|
|
|
|
/* Design Option 5 - Professional Bold */
|
|
.option-5 .title {
|
|
font-family: 'Russo One', sans-serif;
|
|
font-size: 3.6rem;
|
|
color: #2ecc71;
|
|
text-shadow:
|
|
1px 1px 0px #000,
|
|
2px 2px 0px #1a5c3a,
|
|
3px 3px 5px rgba(0,0,0,0.5);
|
|
letter-spacing: 2px;
|
|
}
|
|
.option-5 .tagline {
|
|
font-family: 'Titillium Web', sans-serif;
|
|
color: #27ae60;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Design Option 6 - Elegant Minimalist */
|
|
.option-6 .title {
|
|
font-family: 'Saira Condensed', sans-serif;
|
|
font-size: 4.2rem;
|
|
font-weight: 700;
|
|
color: #ecf0f1;
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.8);
|
|
letter-spacing: 1px;
|
|
}
|
|
.option-6 .tagline {
|
|
font-family: 'Saira Condensed', sans-serif;
|
|
color: #bdc3c7;
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* Design Option 7 - Neon Cyberpunk */
|
|
.option-7 .title {
|
|
font-family: 'Rajdhani', sans-serif;
|
|
font-size: 3.4rem;
|
|
font-weight: 700;
|
|
color: #ff073a;
|
|
text-shadow:
|
|
0 0 5px #ff073a,
|
|
0 0 10px #ff073a,
|
|
0 0 15px #ff073a,
|
|
0 0 20px #ff073a;
|
|
letter-spacing: 3px;
|
|
animation: neonFlicker 3s infinite;
|
|
}
|
|
.option-7 .tagline {
|
|
font-family: 'Rajdhani', sans-serif;
|
|
color: #ff1744;
|
|
font-weight: 500;
|
|
}
|
|
|
|
@keyframes neonFlicker {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.8; }
|
|
}
|
|
|
|
/* Design Option 8 - Gold Luxury */
|
|
.option-8 .title {
|
|
font-family: 'Titillium Web', sans-serif;
|
|
font-size: 3.7rem;
|
|
font-weight: 900;
|
|
background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
|
|
letter-spacing: 2px;
|
|
}
|
|
.option-8 .tagline {
|
|
font-family: 'Titillium Web', sans-serif;
|
|
color: #f39c12;
|
|
font-weight: 600;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Design Option 9 - Purple Power */
|
|
.option-9 .title {
|
|
font-family: 'Exo 2', sans-serif;
|
|
font-size: 3.5rem;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, #8e2de2, #4a00e0);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-shadow: 0 0 20px rgba(142, 45, 226, 0.6);
|
|
letter-spacing: 1px;
|
|
}
|
|
.option-9 .tagline {
|
|
font-family: 'Exo 2', sans-serif;
|
|
color: #9d4edd;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* Design Option 10 - Fire Theme */
|
|
.option-10 .title {
|
|
font-family: 'Bebas Neue', cursive;
|
|
font-size: 4rem;
|
|
background: linear-gradient(45deg, #ff4500, #ff6347, #ff0000);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-shadow: 0 0 25px rgba(255, 69, 0, 0.8);
|
|
letter-spacing: 3px;
|
|
animation: fireGlow 2.5s ease-in-out infinite alternate;
|
|
}
|
|
.option-10 .tagline {
|
|
font-family: 'Rajdhani', sans-serif;
|
|
color: #ff6b47;
|
|
font-weight: 600;
|
|
}
|
|
|
|
@keyframes fireGlow {
|
|
from { filter: drop-shadow(0 0 5px rgba(255, 69, 0, 0.6)); }
|
|
to { filter: drop-shadow(0 0 20px rgba(255, 69, 0, 1)); }
|
|
}
|
|
|
|
.description {
|
|
margin-top: 15px;
|
|
font-size: 14px;
|
|
color: #999;
|
|
font-style: italic;
|
|
}
|
|
|
|
.vote-section {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border: 2px solid #444;
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
margin: 40px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.vote-section h2 {
|
|
color: #fff;
|
|
margin-bottom: 15px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.vote-section p {
|
|
color: #ccc;
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.title {
|
|
font-size: 2.5rem !important;
|
|
}
|
|
.tagline {
|
|
font-size: 14px !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="intro">
|
|
<h1>Gooner Training Academy - Title Design Options</h1>
|
|
<p>Choose your favorite design for the main header!</p>
|
|
</div>
|
|
|
|
<div class="design-option option-1">
|
|
<div class="option-number">1</div>
|
|
<h1 class="title">GOONER TRAINING ACADEMY</h1>
|
|
<p class="tagline">Master Your Dedication</p>
|
|
<div class="description">Futuristic Tech - Orbitron font with cyan gradients and glow effects</div>
|
|
</div>
|
|
|
|
<div class="design-option option-2">
|
|
<div class="option-number">2</div>
|
|
<h1 class="title">GOONER TRAINING ACADEMY</h1>
|
|
<p class="tagline">Master Your Dedication</p>
|
|
<div class="description">Military Academy - Bebas Neue with orange theme and 3D perspective</div>
|
|
</div>
|
|
|
|
<div class="design-option option-3">
|
|
<div class="option-number">3</div>
|
|
<h1 class="title">GOONER TRAINING ACADEMY</h1>
|
|
<p class="tagline">Master Your Dedication</p>
|
|
<div class="description">Sleek Modern - Exo 2 font with purple-blue gradients</div>
|
|
</div>
|
|
|
|
<div class="design-option option-4">
|
|
<div class="option-number">4</div>
|
|
<h1 class="title">GOONER TRAINING ACADEMY</h1>
|
|
<p class="tagline">Master Your Dedication</p>
|
|
<div class="description">Gaming Aesthetic - Audiowide font with pink-orange gradients and glow animation</div>
|
|
</div>
|
|
|
|
<div class="design-option option-5">
|
|
<div class="option-number">5</div>
|
|
<h1 class="title">GOONER TRAINING ACADEMY</h1>
|
|
<p class="tagline">Master Your Dedication</p>
|
|
<div class="description">Professional Bold - Russo One font with green theme and layered shadows</div>
|
|
</div>
|
|
|
|
<div class="design-option option-6">
|
|
<div class="option-number">6</div>
|
|
<h1 class="title">GOONER TRAINING ACADEMY</h1>
|
|
<p class="tagline">Master Your Dedication</p>
|
|
<div class="description">Elegant Minimalist - Saira Condensed with clean white text and subtle shadows</div>
|
|
</div>
|
|
|
|
<div class="design-option option-7">
|
|
<div class="option-number">7</div>
|
|
<h1 class="title">GOONER TRAINING ACADEMY</h1>
|
|
<p class="tagline">Master Your Dedication</p>
|
|
<div class="description">Neon Cyberpunk - Rajdhani font with red neon glow and flicker animation</div>
|
|
</div>
|
|
|
|
<div class="design-option option-8">
|
|
<div class="option-number">8</div>
|
|
<h1 class="title">GOONER TRAINING ACADEMY</h1>
|
|
<p class="tagline">Master Your Dedication</p>
|
|
<div class="description">Gold Luxury - Titillium Web with gold gradients for premium feel</div>
|
|
</div>
|
|
|
|
<div class="design-option option-9">
|
|
<div class="option-number">9</div>
|
|
<h1 class="title">GOONER TRAINING ACADEMY</h1>
|
|
<p class="tagline">Master Your Dedication</p>
|
|
<div class="description">Purple Power - Exo 2 font with purple gradients and ethereal glow</div>
|
|
</div>
|
|
|
|
<div class="design-option option-10">
|
|
<div class="option-number">10</div>
|
|
<h1 class="title">GOONER TRAINING ACADEMY</h1>
|
|
<p class="tagline">Master Your Dedication</p>
|
|
<div class="description">Fire Theme - Bebas Neue with red-orange fire gradients and pulse animation</div>
|
|
</div>
|
|
|
|
<div class="vote-section">
|
|
<h2>🎯 Your Choice Matters!</h2>
|
|
<p>Each design option has its own personality and vibe. Consider which one best represents the sophisticated training platform you've built with interactive scenarios, TTS narration, and advanced focus challenges.</p>
|
|
<p><strong>Just tell me which number(s) you prefer!</strong></p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |