Preview de mixed.css
/* MIXED CSS PACK */
/* Template: demo-bar-2/index.php */
/* Template mtime: 2025-08-08 16:57:09 */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Orbitron:wght@500&family=Press+Start+2P&display=swap */
/* ===== INLINE <style> BLOCK #1 ===== */
:root {
--primary-color: #ff00c1;
--secondary-color: #00f0ff;
--accent-color: #ff3e9d;
--text-color: #ffffff;
--dark-bg: #0f0f1a;
--neon-glow: 0 0 10px var(--primary-color),
0 0 20px var(--secondary-color),
0 0 30px rgba(255, 62, 157, 0.5);
}
html, body {
margin: 0;
padding: 0;
height: 100%;
background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
font-family: 'Montserrat', sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: var(--text-color);
overflow-x: hidden;
position: relative;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
linear-gradient(rgba(255, 0, 193, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 0, 193, 0.1) 1px, transparent 1px);
background-size: 20px 20px;
z-index: -1;
opacity: 0.5;
}
body.fade-in {
animation: fadeIn 1s ease-out forwards;
}
body.fade-out {
animation: fadeOut 1s ease-out forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
.title {
font-family: 'Press Start 2P', 'Orbitron', sans-serif;
font-size: 2.5rem;
margin-bottom: 1.5rem;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--text-color);
text-shadow: var(--neon-glow);
position: relative;
padding: 15px;
border: 2px solid var(--secondary-color);
box-shadow: inset 0 0 15px var(--primary-color), 0 0 15px var(--secondary-color);
background: rgba(15, 15, 26, 0.7);
}
.title::after {
content: 'â–¼';
position: absolute;
bottom: -25px;
left: 50%;
transform: translateX(-50%);
color: var(--secondary-color);
font-size: 1rem;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0) translateX(-50%);}
40% {transform: translateY(-10px) translateX(-50%);}
60% {transform: translateY(-5px) translateX(-50%);}
}
.video-container {
position: relative;
max-width: 90%;
max-height: 70vh;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 0 30px rgba(106, 17, 203, 0.5);
margin-bottom: 2rem;
border: 1px solid var(--primary-color);
transition: all 0.5s ease;
}
.video-container:hover {
box-shadow: 0 0 50px rgba(255, 0, 193, 0.7);
transform: scale(1.01);
}
.video-container.fade-out {
opacity: 0;
transform: scale(0.9);
}
video {
max-width: 100%;
max-height: 100%;
display: block;
filter: hue-rotate(0deg) saturate(1.2);
transition: filter 0.5s ease;
}
.video-container:hover video {
filter: hue-rotate(10deg) saturate(1.5);
}
.buttons-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 20px;
perspective: 1000px;
}
.boton {
padding: 14px 30px;
font-size: 1rem;
font-weight: 600;
color: white;
background: linear-gradient(45deg, var(--primary-color) 0%, var(--secondary-color) 100%);
border: none;
border-r /* ...cortado... agregá ?full=1 para ver todo ... */
Manifest preview
{
"template": "demo-bar-2/index.php",
"template_mtime": 1754672229,
"template_mtime_human": "2025-08-08T16:57:09+00:00",
"css_links_found": [
"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Orbitron:wght@500&family=Press+Start+2P&display=swap"
],
"css_links_external": [
"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Orbitron:wght@500&family=Press+Start+2P&display=swap"
],
"css_links_embedded": [],
"inline_style_blocks": 3,
"inline_imports_external": [],
"inline_imports_embedded": [],
"missing_css_files": []
}