*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Segoe UI", sans-serif;
}
body{
background:linear-gradient(135deg,#0b102a,#14091f);
color:#fff;
min-height:100vh;
animation:bodyFade 1.2s ease forwards;
}
/* ===== BODY ANIMATION ===== */
@keyframes bodyFade{
from{opacity:0;}
to{opacity:1;}
}
/* ===== HEADER ===== */
header{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:24px 20px;
background: transparent; /* <-- Transparent header */
animation:fadeSoft 1s ease forwards;
}
header img{
width:160px;
margin-bottom:12px;
animation:floatY 4.5s ease-in-out infinite, softGlow 4s ease-in-out infinite;
}
header h2{
font-size:20px;
color:#93c5fd;
}
/* ===== EDITOR CONTAINER ===== */
.editor-container{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:20px;
margin:20px;
}
/* ===== PANELS ===== */
.editor-panel{
flex:1 1 300px;
min-width:280px;
max-width:450px;
height:200px;
background: rgba(255,255,255,0.06);
backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,0.18);
border-radius:20px;
padding:16px;
display:flex;
flex-direction:column;
animation:fadeSoft 1.2s ease forwards;
}
.editor-panel h3{
margin-bottom:8px;
color:#93c5fd;
text-align:center;
font-size:16px;
}
textarea{
flex:1;
resize:none;
border-radius:12px;
border:1px solid rgba(255,255,255,0.2);
background: rgba(0,0,0,0.25);
color:#fff;
padding:10px;
font-family:monospace;
font-size:14px;
outline:none;
backdrop-filter:blur(6px);
transition:all 0.3s ease;
}
textarea:focus{
border-color:#8b5cf6;
box-shadow:0 0 12px rgba(139,92,246,0.45);
}
/* ===== OUTPUT ===== */
.output-panel{
background: rgba(255,255,255,0.06);
backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,0.18);
border-radius:20px;
padding:16px;
margin-top:20px;
}
.output-panel h3{
text-align:center;
color:#93c5fd;
font-size:16px;
margin-bottom:10px;
}
.output-panel iframe{
width:100%;
height:250px;
border-radius:12px;
border:1px solid rgba(255,255,255,0.2);
background:#0f172a;
}
/* ===== ANIMATIONS ===== */
@keyframes fadeSoft{
from{opacity:0;}
to{opacity:1;}
}
@keyframes floatY{
0% {transform: translateY(0);}
50%{transform: translateY(-6px);}
100%{transform: translateY(0);}
}
@keyframes softGlow{
0% {filter:drop-shadow(0 0 0 rgba(139,92,246,0.15));}
50% {filter:drop-shadow(0 0 16px rgba(139,92,246,0.55));}
100% {filter:drop-shadow(0 0 0 rgba(139,92,246,0.15));}
}
/* ===== RESPONSIVE ===== */
@media(max-width:768px){
.editor-container{
flex-direction:column;
align-items:center;
}
.editor-panel{
max-width:95%;
}
}
HTML + CSS Editor
Output