585 lines
19 KiB
HTML
585 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=1920, height=1080">
|
|
<title>MCP Power - Chibi Style</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: 'Nunito', sans-serif;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
}
|
|
|
|
/* Left side - Chaos */
|
|
.left-side {
|
|
width: 60%;
|
|
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 50%, #fecaca 100%);
|
|
padding: 40px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
.left-side::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 8px;
|
|
background: linear-gradient(to bottom, #ef4444, #f97316, #ef4444);
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.left-side .section-header h2 {
|
|
font-size: 2.8rem;
|
|
color: #dc2626;
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
letter-spacing: 3px;
|
|
}
|
|
|
|
.left-side .section-header .subtitle {
|
|
font-size: 1.3rem;
|
|
color: #b91c1c;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.scenes-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
flex: 1;
|
|
}
|
|
|
|
.scene {
|
|
background: white;
|
|
border-radius: 24px;
|
|
padding: 25px 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 30px;
|
|
box-shadow: 0 8px 30px rgba(239, 68, 68, 0.15);
|
|
border: 3px solid #fecaca;
|
|
flex: 1;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.scene::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
right: -50%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: radial-gradient(circle, rgba(254, 202, 202, 0.5) 0%, transparent 70%);
|
|
}
|
|
|
|
.chibi-container {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.chibi {
|
|
width: 140px;
|
|
height: 140px;
|
|
position: relative;
|
|
}
|
|
|
|
/* Chibi character SVG styles */
|
|
.chibi-stressed {
|
|
animation: shake 0.3s infinite;
|
|
}
|
|
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0) rotate(0); }
|
|
25% { transform: translateX(-3px) rotate(-2deg); }
|
|
75% { transform: translateX(3px) rotate(2deg); }
|
|
}
|
|
|
|
.stress-lines {
|
|
position: absolute;
|
|
top: -10px;
|
|
right: -10px;
|
|
font-size: 2rem;
|
|
animation: pulse 0.5s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.5; transform: scale(1.2); }
|
|
}
|
|
|
|
.sweat-drops {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 0;
|
|
font-size: 1.5rem;
|
|
animation: drip 0.8s infinite;
|
|
}
|
|
|
|
@keyframes drip {
|
|
0% { transform: translateY(0); opacity: 1; }
|
|
100% { transform: translateY(10px); opacity: 0; }
|
|
}
|
|
|
|
.tool-icons-chaos {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.tool-icon-chaos {
|
|
width: 55px;
|
|
height: 55px;
|
|
background: #fee2e2;
|
|
border-radius: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.8rem;
|
|
border: 2px solid #fecaca;
|
|
animation: wobble 0.5s infinite;
|
|
animation-delay: var(--delay, 0s);
|
|
}
|
|
|
|
@keyframes wobble {
|
|
0%, 100% { transform: rotate(-5deg); }
|
|
50% { transform: rotate(5deg); }
|
|
}
|
|
|
|
.scene-text {
|
|
flex: 1;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.scene-text h3 {
|
|
font-size: 1.4rem;
|
|
color: #dc2626;
|
|
margin-bottom: 8px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.scene-text p {
|
|
font-size: 1.1rem;
|
|
color: #7f1d1d;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.task-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.task-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.95rem;
|
|
color: #991b1b;
|
|
}
|
|
|
|
.task-item .num {
|
|
background: #fecaca;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Right side - Calm */
|
|
.right-side {
|
|
width: 40%;
|
|
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #a7f3d0 100%);
|
|
padding: 40px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.right-side .section-header h2 {
|
|
font-size: 2.8rem;
|
|
color: #059669;
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
letter-spacing: 3px;
|
|
}
|
|
|
|
.right-side .section-header .subtitle {
|
|
font-size: 1.3rem;
|
|
color: #047857;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.calm-scene {
|
|
background: white;
|
|
border-radius: 30px;
|
|
padding: 50px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 30px;
|
|
box-shadow: 0 15px 50px rgba(16, 185, 129, 0.2);
|
|
border: 4px solid #a7f3d0;
|
|
margin-top: 30px;
|
|
position: relative;
|
|
}
|
|
|
|
.sparkles {
|
|
position: absolute;
|
|
font-size: 1.5rem;
|
|
animation: sparkle 1s infinite;
|
|
}
|
|
|
|
.sparkles.s1 { top: 20px; left: 30px; animation-delay: 0s; }
|
|
.sparkles.s2 { top: 40px; right: 40px; animation-delay: 0.3s; }
|
|
.sparkles.s3 { bottom: 60px; left: 50px; animation-delay: 0.6s; }
|
|
.sparkles.s4 { bottom: 30px; right: 60px; animation-delay: 0.9s; }
|
|
|
|
@keyframes sparkle {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.3; transform: scale(0.8); }
|
|
}
|
|
|
|
.chibi-calm {
|
|
animation: float 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
|
|
.speech-bubble-kawaii {
|
|
background: linear-gradient(135deg, #d1fae5, #a7f3d0);
|
|
border-radius: 20px;
|
|
padding: 20px 30px;
|
|
position: relative;
|
|
border: 3px solid #6ee7b7;
|
|
max-width: 350px;
|
|
}
|
|
|
|
.speech-bubble-kawaii::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -15px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-left: 15px solid transparent;
|
|
border-right: 15px solid transparent;
|
|
border-top: 15px solid #6ee7b7;
|
|
}
|
|
|
|
.speech-bubble-kawaii p {
|
|
font-size: 1.2rem;
|
|
color: #047857;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
font-style: italic;
|
|
}
|
|
|
|
.result-badges {
|
|
display: flex;
|
|
gap: 15px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.result-badge {
|
|
background: #d1fae5;
|
|
padding: 12px 20px;
|
|
border-radius: 30px;
|
|
font-size: 1rem;
|
|
color: #047857;
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border: 2px solid #6ee7b7;
|
|
}
|
|
|
|
.vs-divider {
|
|
position: absolute;
|
|
left: 60%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 10;
|
|
}
|
|
|
|
.vs-circle {
|
|
width: 100px;
|
|
height: 100px;
|
|
background: linear-gradient(135deg, #fbbf24, #f59e0b);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2.5rem;
|
|
font-weight: 900;
|
|
color: white;
|
|
box-shadow: 0 10px 40px rgba(251, 191, 36, 0.5);
|
|
border: 5px solid white;
|
|
}
|
|
|
|
/* Bottom tagline */
|
|
.bottom-tagline-kawaii {
|
|
position: absolute;
|
|
bottom: 30px;
|
|
right: 40px;
|
|
background: white;
|
|
padding: 15px 30px;
|
|
border-radius: 20px;
|
|
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.bottom-tagline-kawaii p {
|
|
font-size: 1.2rem;
|
|
color: #374151;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.bottom-tagline-kawaii .highlight {
|
|
color: #059669;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Left Side - Chaos -->
|
|
<div class="left-side">
|
|
<div class="section-header">
|
|
<h2>😵 The Old Way 😵</h2>
|
|
<div class="subtitle">Manually juggling everything...</div>
|
|
</div>
|
|
|
|
<div class="scenes-container">
|
|
<!-- Scene 1: Calendar + SMS chaos -->
|
|
<div class="scene">
|
|
<div class="chibi-container">
|
|
<svg class="chibi chibi-stressed" viewBox="0 0 100 100">
|
|
<!-- Head -->
|
|
<circle cx="50" cy="45" r="35" fill="#fde68a"/>
|
|
<!-- Hair -->
|
|
<ellipse cx="50" cy="20" rx="30" ry="15" fill="#92400e"/>
|
|
<ellipse cx="30" cy="25" rx="10" ry="12" fill="#92400e"/>
|
|
<ellipse cx="70" cy="25" rx="10" ry="12" fill="#92400e"/>
|
|
<!-- Eyes - stressed -->
|
|
<g class="eyes">
|
|
<ellipse cx="38" cy="45" rx="6" ry="8" fill="white"/>
|
|
<ellipse cx="62" cy="45" rx="6" ry="8" fill="white"/>
|
|
<circle cx="38" cy="47" r="4" fill="#1f2937"/>
|
|
<circle cx="62" cy="47" r="4" fill="#1f2937"/>
|
|
<!-- Stress eyebrows -->
|
|
<line x1="30" y1="33" x2="44" y2="38" stroke="#92400e" stroke-width="3" stroke-linecap="round"/>
|
|
<line x1="70" y1="33" x2="56" y2="38" stroke="#92400e" stroke-width="3" stroke-linecap="round"/>
|
|
</g>
|
|
<!-- Mouth - stressed -->
|
|
<path d="M 42 60 Q 50 55 58 60" fill="none" stroke="#1f2937" stroke-width="2" stroke-linecap="round"/>
|
|
<!-- Blush -->
|
|
<ellipse cx="30" cy="52" rx="6" ry="3" fill="#fca5a5" opacity="0.6"/>
|
|
<ellipse cx="70" cy="52" rx="6" ry="3" fill="#fca5a5" opacity="0.6"/>
|
|
<!-- Body -->
|
|
<rect x="35" y="75" width="30" height="25" rx="10" fill="#60a5fa"/>
|
|
<!-- Arms flailing -->
|
|
<ellipse cx="25" cy="80" rx="8" ry="6" fill="#fde68a" transform="rotate(-30 25 80)"/>
|
|
<ellipse cx="75" cy="75" rx="8" ry="6" fill="#fde68a" transform="rotate(45 75 75)"/>
|
|
</svg>
|
|
<span class="stress-lines">💢</span>
|
|
<span class="sweat-drops">💧</span>
|
|
</div>
|
|
<div class="tool-icons-chaos">
|
|
<div class="tool-icon-chaos" style="--delay: 0s;">📅</div>
|
|
<div class="tool-icon-chaos" style="--delay: 0.1s;">📱</div>
|
|
<div class="tool-icon-chaos" style="--delay: 0.2s;">⏰</div>
|
|
</div>
|
|
<div class="scene-text">
|
|
<h3>Scheduling Nightmare</h3>
|
|
<div class="task-list">
|
|
<div class="task-item"><span class="num">1</span> Open calendar app</div>
|
|
<div class="task-item"><span class="num">2</span> Check tomorrow's slots</div>
|
|
<div class="task-item"><span class="num">3</span> Switch to messages</div>
|
|
<div class="task-item"><span class="num">4</span> Type out availability</div>
|
|
<div class="task-item"><span class="num">5</span> Wait... did I check the right day?!</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scene 2: Web Search + Email chaos -->
|
|
<div class="scene">
|
|
<div class="chibi-container">
|
|
<svg class="chibi chibi-stressed" viewBox="0 0 100 100">
|
|
<!-- Head -->
|
|
<circle cx="50" cy="45" r="35" fill="#fde68a"/>
|
|
<!-- Hair - messy -->
|
|
<ellipse cx="50" cy="18" rx="32" ry="16" fill="#7c3aed"/>
|
|
<ellipse cx="28" cy="22" rx="12" ry="10" fill="#7c3aed"/>
|
|
<ellipse cx="72" cy="22" rx="12" ry="10" fill="#7c3aed"/>
|
|
<path d="M 30 15 Q 35 5 45 12" fill="#7c3aed"/>
|
|
<path d="M 70 15 Q 65 5 55 12" fill="#7c3aed"/>
|
|
<!-- Eyes - spiral stressed -->
|
|
<circle cx="38" cy="45" r="8" fill="white"/>
|
|
<circle cx="62" cy="45" r="8" fill="white"/>
|
|
<path d="M 34 45 Q 38 41 42 45 Q 38 49 34 45" fill="none" stroke="#1f2937" stroke-width="2"/>
|
|
<path d="M 58 45 Q 62 41 66 45 Q 62 49 58 45" fill="none" stroke="#1f2937" stroke-width="2"/>
|
|
<!-- Mouth - open stressed -->
|
|
<ellipse cx="50" cy="62" rx="8" ry="5" fill="#1f2937"/>
|
|
<!-- Blush -->
|
|
<ellipse cx="30" cy="52" rx="6" ry="3" fill="#fca5a5" opacity="0.6"/>
|
|
<ellipse cx="70" cy="52" rx="6" ry="3" fill="#fca5a5" opacity="0.6"/>
|
|
<!-- Body -->
|
|
<rect x="35" y="75" width="30" height="25" rx="10" fill="#f472b6"/>
|
|
<!-- Arms typing frantically -->
|
|
<ellipse cx="20" cy="85" rx="8" ry="6" fill="#fde68a"/>
|
|
<ellipse cx="80" cy="85" rx="8" ry="6" fill="#fde68a"/>
|
|
</svg>
|
|
<span class="stress-lines">⚡</span>
|
|
<span class="sweat-drops">💧</span>
|
|
</div>
|
|
<div class="tool-icons-chaos">
|
|
<div class="tool-icon-chaos" style="--delay: 0.15s;">🔍</div>
|
|
<div class="tool-icon-chaos" style="--delay: 0.25s;">📧</div>
|
|
<div class="tool-icon-chaos" style="--delay: 0.05s;">📋</div>
|
|
</div>
|
|
<div class="scene-text">
|
|
<h3>Research + Email Madness</h3>
|
|
<div class="task-list">
|
|
<div class="task-item"><span class="num">1</span> Google the competitor</div>
|
|
<div class="task-item"><span class="num">2</span> Open 12 browser tabs</div>
|
|
<div class="task-item"><span class="num">3</span> Copy-paste into notes</div>
|
|
<div class="task-item"><span class="num">4</span> Draft email from scratch</div>
|
|
<div class="task-item"><span class="num">5</span> Realize you forgot key info 😭</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scene 3: Slack + CRM chaos -->
|
|
<div class="scene">
|
|
<div class="chibi-container">
|
|
<svg class="chibi chibi-stressed" viewBox="0 0 100 100">
|
|
<!-- Head -->
|
|
<circle cx="50" cy="45" r="35" fill="#fde68a"/>
|
|
<!-- Hair -->
|
|
<ellipse cx="50" cy="18" rx="30" ry="14" fill="#1f2937"/>
|
|
<ellipse cx="30" cy="24" rx="10" ry="10" fill="#1f2937"/>
|
|
<ellipse cx="70" cy="24" rx="10" ry="10" fill="#1f2937"/>
|
|
<!-- Eyes - X X dead inside -->
|
|
<g class="eyes">
|
|
<line x1="32" y1="40" x2="44" y2="50" stroke="#1f2937" stroke-width="3" stroke-linecap="round"/>
|
|
<line x1="44" y1="40" x2="32" y2="50" stroke="#1f2937" stroke-width="3" stroke-linecap="round"/>
|
|
<line x1="56" y1="40" x2="68" y2="50" stroke="#1f2937" stroke-width="3" stroke-linecap="round"/>
|
|
<line x1="68" y1="40" x2="56" y2="50" stroke="#1f2937" stroke-width="3" stroke-linecap="round"/>
|
|
</g>
|
|
<!-- Mouth - wavy stressed -->
|
|
<path d="M 40 62 Q 45 58 50 62 Q 55 66 60 62" fill="none" stroke="#1f2937" stroke-width="2" stroke-linecap="round"/>
|
|
<!-- Blush -->
|
|
<ellipse cx="30" cy="52" rx="6" ry="3" fill="#fca5a5" opacity="0.6"/>
|
|
<ellipse cx="70" cy="52" rx="6" ry="3" fill="#fca5a5" opacity="0.6"/>
|
|
<!-- Body -->
|
|
<rect x="35" y="75" width="30" height="25" rx="10" fill="#34d399"/>
|
|
<!-- Arms up in despair -->
|
|
<ellipse cx="22" cy="70" rx="8" ry="6" fill="#fde68a" transform="rotate(-45 22 70)"/>
|
|
<ellipse cx="78" cy="70" rx="8" ry="6" fill="#fde68a" transform="rotate(45 78 70)"/>
|
|
</svg>
|
|
<span class="stress-lines">💥</span>
|
|
<span class="sweat-drops">💧</span>
|
|
</div>
|
|
<div class="tool-icons-chaos">
|
|
<div class="tool-icon-chaos" style="--delay: 0.2s;">💼</div>
|
|
<div class="tool-icon-chaos" style="--delay: 0s;">🔔</div>
|
|
<div class="tool-icon-chaos" style="--delay: 0.1s;">📊</div>
|
|
</div>
|
|
<div class="scene-text">
|
|
<h3>Notification Hell</h3>
|
|
<div class="task-list">
|
|
<div class="task-item"><span class="num">1</span> Deal closes in CRM</div>
|
|
<div class="task-item"><span class="num">2</span> Remember to tell the team</div>
|
|
<div class="task-item"><span class="num">3</span> Switch to Slack</div>
|
|
<div class="task-item"><span class="num">4</span> Find the right channel</div>
|
|
<div class="task-item"><span class="num">5</span> Oops, forgot to update it 3 times 🙃</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Side - Calm -->
|
|
<div class="right-side">
|
|
<div class="section-header">
|
|
<h2>✨ With MCP ✨</h2>
|
|
<div class="subtitle">Just say what you need...</div>
|
|
</div>
|
|
|
|
<div class="calm-scene">
|
|
<span class="sparkles s1">✨</span>
|
|
<span class="sparkles s2">⭐</span>
|
|
<span class="sparkles s3">✨</span>
|
|
<span class="sparkles s4">💫</span>
|
|
|
|
<svg class="chibi chibi-calm" width="180" height="180" viewBox="0 0 100 100">
|
|
<!-- Head -->
|
|
<circle cx="50" cy="45" r="35" fill="#fde68a"/>
|
|
<!-- Hair -->
|
|
<ellipse cx="50" cy="18" rx="30" ry="14" fill="#f472b6"/>
|
|
<ellipse cx="30" cy="24" rx="10" ry="10" fill="#f472b6"/>
|
|
<ellipse cx="70" cy="24" rx="10" ry="10" fill="#f472b6"/>
|
|
<!-- Eyes - happy closed -->
|
|
<path d="M 32 45 Q 38 40 44 45" fill="none" stroke="#1f2937" stroke-width="3" stroke-linecap="round"/>
|
|
<path d="M 56 45 Q 62 40 68 45" fill="none" stroke="#1f2937" stroke-width="3" stroke-linecap="round"/>
|
|
<!-- Mouth - big smile -->
|
|
<path d="M 38 58 Q 50 70 62 58" fill="none" stroke="#1f2937" stroke-width="3" stroke-linecap="round"/>
|
|
<!-- Blush - happy -->
|
|
<ellipse cx="30" cy="52" rx="7" ry="4" fill="#fca5a5" opacity="0.7"/>
|
|
<ellipse cx="70" cy="52" rx="7" ry="4" fill="#fca5a5" opacity="0.7"/>
|
|
<!-- Body -->
|
|
<rect x="35" y="75" width="30" height="25" rx="10" fill="#a78bfa"/>
|
|
<!-- Arms relaxed with phone -->
|
|
<ellipse cx="30" cy="88" rx="8" ry="6" fill="#fde68a"/>
|
|
<ellipse cx="70" cy="88" rx="8" ry="6" fill="#fde68a"/>
|
|
<!-- Phone in hand -->
|
|
<rect x="40" y="85" width="20" height="12" rx="2" fill="#1f2937"/>
|
|
<rect x="42" y="87" width="16" height="8" rx="1" fill="#60a5fa"/>
|
|
</svg>
|
|
|
|
<div class="speech-bubble-kawaii">
|
|
<p>"Check my calendar and text the client if I'm free tomorrow"</p>
|
|
</div>
|
|
|
|
<div class="result-badges">
|
|
<div class="result-badge">✅ Calendar checked</div>
|
|
<div class="result-badge">✅ Text sent</div>
|
|
<div class="result-badge">✅ Done in seconds!</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bottom-tagline-kawaii">
|
|
<p>Your <span class="highlight">CRM on autopilot</span> 🚀</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VS Divider -->
|
|
<div class="vs-divider">
|
|
<div class="vs-circle">VS</div>
|
|
</div>
|
|
</body>
|
|
</html> |