Divyansh Jain

Posted on Apr 11

UNCENTER EVERYTHING

#devchallenge #418challenge #showdev

April Fools Challenge Submission ☕️🤡

This is a submission for the DEV April Fools Challenge

What I Built

Demo

https://uncentereverything.netlify.app/

Code

*{box-sizing:border-box;}

toolbar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);margin-bottom:10px;flex-wrap:wrap;}

url-bar{flex:1;min-width:160px;height:34px;font-size:12px;padding:0 10px;border:0.5px solid var(--color-border-secondary);border-radius:var(--border-radius-md);background:var(--color-background-secondary);color:var(--color-text-secondary);font-family:var(--font-mono);}

chaos-btn{height:34px;padding:0 14px;font-size:13px;font-weight:500;background:#E24B4A;color:white;border:none;border-radius:var(--border-radius-md);cursor:pointer;white-space:nowrap;transition:all 0.2s;}

chaos-btn:hover{background:#A32D2D;letter-spacing:1px;}

restore-btn{height:34px;padding:0 12px;font-size:12px;background:none;border:0.5px solid var(--color-border-secondary);border-radius:var(--border-radius-md);cursor:pointer;color:var(--color-text-secondary);white-space:nowrap;transition:all 0.15s;}

restore-btn:hover{background:var(--color-background-secondary);}

chaos-level-wrap{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--color-text-secondary);white-space:nowrap;}

preview-shell{border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);overflow:hidden;background:#f0f0f0;min-height:580px;position:relative;}

status-bar{display:flex;align-items:center;gap:6px;padding:7px 14px;background:var(--color-background-secondary);border-bottom:0.5px solid var(--color-border-tertiary);font-size:12px;color:var(--color-text-secondary);}

.dot{width:10px;height:10px;border-radius:50%;display:inline-block;}
.dot-r{background:#F09595;}.dot-y{background:#FAC775;}.dot-g{background:#97C459;}

scene{font-family:Arial,sans-serif;position:relative;}

fake-nav{background:#1a1a2e;color:white;display:flex;align-items:center;justify-content:space-between;padding:12px 28px;font-size:14px;}

.nav-logo{font-weight:800;font-size:17px;color:#a78bfa;cursor:default;}
.nav-links{display:flex;gap:20px;}
.nav-links a{color:#ccc;text-decoration:none;font-size:13px;cursor:pointer;}
.nav-cta{background:#7c3aed;color:white;padding:7px 14px;border-radius:6px;font-size:13px;border:none;cursor:pointer;}

fake-hero{background:#0f0f23;color:white;text-align:center;padding:50px 40px 44px;}

fake-hero h1{font-size:36px;margin:0 0 14px;font-weight:800;line-height:1.2;}

fake-hero .sub{font-size:14px;color:#aaa;max-width:480px;margin:0 auto 24px;line-height:1.6;}

.hero-btns{display:flex;gap:10px;justify-content:center;}
.btn-primary{background:#7c3aed;color:white;padding:11px 22px;border-radius:8px;border:none;cursor:pointer;font-size:14px;font-weight:600;}
.btn-secondary{background:transparent;color:white;padding:11px 22px;border-radius:8px;border:1px solid #555;cursor:pointer;font-size:14px;}

fake-features{background:white;padding:40px 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}

.feat-card{background:#f9f9f9;border-radius:10px;padding:20px;text-align:center;border:1px solid #eee;}
.feat-icon{font-size:26px;margin-bottom:10px;}
.feat-card h3{font-size:14px;margin:0 0 6px;color:#111;}
.feat-card p{font-size:12px;color:#666;margin:0;line-height:1.5;}
.testimonial-strip{background:#ede9fe;padding:24px 28px;text-align:center;font-size:14px;color:#4c1d95;border-top:1px solid #c4b5fd;}
.testimonial-strip em{display:block;font-size:12px;color:#7c3aed;margin-top:6px;font-style:normal;}

fake-cta{background:#7c3aed;color:white;text-align:center;padding:36px 28px;}

fake-cta h2{margin:0 0 10px;font-size:24px;}

fake-cta p{margin:0 0 18px;color:#ddd;font-size:14px;}

.cta-btn{background:white;color:#7c3aed;padding:11px 26px;border-radius:8px;border:none;cursor:pointer;font-size:14px;font-weight:700;}

fake-footer{background:#1a1a2e;color:#888;padding:16px 28px;display:flex;justify-content:space-between;align-items:center;font-size:12px;}

tape-overlay{display:none;position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:9999;overflow:hidden;}

.tape{position:absolute;background:#facc15;color:#000;font-size:10px;font-weight:800;letter-spacing:3px;padding:5px 0;width:160%;left:-30%;text-align:center;white-space:nowrap;}

modal-overlay{display:none;position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.55);z-index:10000;align-items:center;justify-content:center;min-height:580px;}

modal{background:var(--color-background-primary);border-radius:var(--border-radius-lg);border:0.5px solid var(--color-border-tertiary);padding:28px;max-width:340px;width:90%;text-align:center;transform:rotate(-3deg);}

modal h3{font-size:16px;font-weight:500;margin:0 0 8px;color:var(--color-text-primary);}

modal p{font-size:13px;color:var(--color-text-secondary);margin:0 0 20px;line-height:1.6;}

.modal-btns{display:flex;gap:8px;justify-content:center;}
.modal-yes{background:#E24B4A;color:white;border:none;padding:8px 20px;border-radius:var(--border-radius-md);cursor:pointer;font-size:13px;}
.modal-no{background:none;border:0.5px solid var(--color-border-secondary);padding:8px 20px;border-radius:var(--border-radius-md);cursor:pointer;font-size:13px;color:var(--color-text-secondary);}

damage-bar{display:flex;gap:10px;align-items:center;padding:10px 14px;background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);margin-top:10px;font-size:12px;flex-wrap:wrap;}

.stat-pill{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);padding:4px 10px;font-size:11px;color:var(--color-text-secondary);font-family:var(--font-mono);}
.stat-pill span{color:var(--color-text-primary);font-weight:500;}

log-strip{margin-top:8px;padding:9px 14px;background:var(--color-background-secondary);border-radius:var(--border-radius-md);font-family:var(--font-mono);font-size:11px;color:var(--color-text-secondary);border:0.5px solid var(--color-border-tertiary);display:flex;align-items:center;gap:8px;min-height:34px;}

.log-dot{width:7px;height:7px;border-radius:50%;background:#639922;flex-shrink:0;}
.log-dot.red{background:#E24B4A;animation:blink 0.6s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.2;}}
@keyframes drift{0%{transform:rotate(var(--dr)) translate(var(--dx),var(--dy));}50%{transform:rotate(calc(var(--dr) + 2deg)) translate(calc(var(--dx) + 3px),calc(var(--dy) - 2px));}100%{transform:rotate(var(--dr)) translate(var(--dx),var(--dy));}}
.drifting{animation:drift 3s ease-in-out infinite;}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes wiggle{0%,100%{transform:rotate(-4deg);}50%{transform:rotate(4deg);}}

Uncenter Everything v2 — aggressively destroys web page layouts for comedic effect

https://synergycloudpro.io

<span>chaos</span>

<span id="chaos-label">medium</span>

restore order
💥 Uncenter Everything

<span></span><span></span><span></span>
<span id="status-text">synergycloudpro.io — 47 things unnecessarily centered</span>
<span id="crime-counter">crimes committed: <b id="crime-num">0</b></span>




  <span title="Do NOT hover">SynergyCloud™</span>

    <a href="#">Features</a>
    <a href="#">Pricing</a>
    <a href="#">About</a>
    <a href="#">Blog</a>
    <a href="#">Legal (42 pages)</a>

  Get Started



  <h1>The Future of<br>Enterprise Synergy™<br><span>for Businesses that Synergize</span>

Unlock your team's disruptive potential with AI-powered workflows, seamless integrations, real-time collaboration, and words that sound impressive in meetings.

    Start Free Trial
    Watch 47-min Demo

  <p>*Free trial requires credit card, firstborn child, and a 200-word essay on synergy</p>



  ⚡<h3>Lightning Fast</h3><p>10x faster than our competitor. We measured it ourselves, unsupervised.</p>
  🔒<h3>Definitely Secure</h3><p>Your data is safe. We pinky promise. Our intern handles the encryption.</p>
  🧠<h3>AI-Powered™</h3><p>We added "AI" to our existing spreadsheet. It's transformational.</p>
  📈<h3>Smart Analytics</h3><p>See numbers. Big ones. Small ones. A pie chart that nobody understands.</p>
  🌟<h3>Award Winning</h3><p>Winner of the 2024 "Best Cloud Product Named After a Meteorological Event" award.</p>
  🙏<h3>24/7 Support</h3><p>Our support bot will misunderstand your problem any time of day or night.</p>



  "I don't know what SynergyCloud does but we paid $80,000 for it and I'm afraid to ask."
  <em>— Dave K., VP of Buying Software, Fortune 500 Company</em>



  <h2>Ready to Synergize?™</h2>
  <p>Join 40,000+ teams pretending this solves their actual problems.</p>
  Yes, Synergize Me
  <p>By clicking you agree to receive 11 emails per day forever</p>



  <span>© 2026 SynergyCloud Inc. We are VC-funded and burning money responsibly.</span>
  <span>Privacy · Terms · Cookies · GDPR (ignored) · More Legal Stuff</span>




CSS CRIME SCENE ⚠ DO NOT CENTER ⚠ CSS CRIME SCENE ⚠ DO NOT CENTER ⚠ CSS CRIME SCENE ⚠ DO NOT CENTER     
LAYOUT VIOLATION ⚠ MARGIN:AUTO BANNED ⚠ LAYOUT VIOLATION ⚠ MARGIN:AUTO BANNED ⚠ LAYOUT VIOLATION     
CSS CRIME SCENE ⚠ TEXT-ALIGN:CENTER IS ILLEGAL HERE ⚠ CSS CRIME SCENE ⚠ ILLEGAL CSS     




  💥
  <h3>Commit CSS Crimes?</h3>
  <p>This will permanently* damage the layout of this website. Elements may escape. Buttons will flee. Text will riot.<br><br><span>*not permanent</span></p>

    Yes, destroy it
    I am a coward

  <p>The "I am a coward" button will also do nothing useful</p>

damage report:
elements violated: 0
buttons escaped: 0
fonts crimes: 0
rating: 👀

standing by. 47 centered elements are living in blissful ignorance.

const rnd=(a,b)=>Math.round(Math.random()*(b-a)+a);
const pick=a=>a[Math.floor(Math.random()*a.length)];
const fonts=['Comic Sans MS','Papyrus','Impact','Courier New','Wingdings','cursive','fantasy'];
const aligns=['left','right','left','right','right','left'];
const chaosSlider=document.getElementById('chaos-slider');
const chaosLabel=document.getElementById('chaos-label');
const levelNames=['','mild 😀','medium 😤','NUCLEAR 💣'];
chaosSlider.addEventListener('input',()=>{chaosLabel.innerHTML=levelNames[chaosSlider.value];});
chaosLabel.innerHTML=levelNames[2];

let chaosed=false;
let savedStyles=[];
let crimeCount=0;
let driftInterval=null;

const logMsgs=[
'⚠ text-align:left applied to 12 innocent elements',
'💣 hero section is now pointing at the floor',
'💥 nav buttons have fled to the bottom right',
'☠ "Get Started" button has renounced its purpose',
'🚫 margin:auto has been outlawed in this jurisdiction',
'📸 logo is now rotating at unsafe speeds',
'🔍 3 elements found using Comic Sans. authorities notified.',
'💫 footer is now in the header. nobody panic.',
'⚠ testimonial has been rotated 17 degrees for no reason',
'💥 CSS inspector is crying. this is fine.',
'🚫 "justify-content: center" has been taken into custody',
'⚠ elements are drifting. this will not stop.',
];

function unleash(){
document.getElementById('modal-overlay').style.display='none';
const level=parseInt(chaosSlider.value);
const scene=document.getElementById('scene');
const els=scene.querySelectorAll('*');
savedStyles=[];
crimeCount=0;
let fontCrimes=0;
let btnEscapes=0;

let msgIdx=0;
const logInterval=setInterval(()=>{
setLog(logMsgs[msgIdx%logMsgs.length]);
msgIdx++;
document.getElementById('crime-num').textContent=Math.min(crimeCount,els.length);
},380);
setTimeout(()=>clearInterval(logInterval),logMsgs.length*380+200);

els.forEach((el,i)=>{
savedStyles.push({el,style:el.getAttribute('style')||''});
const tag=el.tagName.toLowerCase();
const s=el.style;
const deg=rnd(-level*7,level*7);
const tx=rnd(-level*20,level*20);
const ty=rnd(-level*10,level*10);
s.setProperty('--dr',deg+'deg');
s.setProperty('--dx',tx+'px');
s.setProperty('--dy',ty+'px');
s.textAlign=pick(aligns);
s.transform=rotate(${deg}deg) translate(${tx}px,${ty}px);
s.transition=transform ${(0.25+Math.random()*0.5).toFixed(2)}s cubic-bezier(.36,.07,.19,.97);
crimeCount++;
if(level>=2){
s.letterSpacing=rnd(-1,level*2)+'px';
if(Math.random()>0.45){s.fontFamily=pick(fonts);fontCrimes++;}
if(Math.random()>0.6)s.lineHeight=(0.6+Math.random()*1.8).toFixed(1);
}
if(level===3){
if(Math.random()>0.55)s.fontSize=rnd(9,26)+'px';
if(Math.random()>0.55)s.color=hsl(${rnd(0,360)},75%,38%);
if(Math.random()>0.65)s.background=hsl(${rnd(0,360)},55%,93%);
if(Math.random()>0.55)s.float=pick(['left','right','none']);
if(Math.random()>0.8)s.writingMode=pick(['vertical-rl','vertical-lr']);
if(Math.random()>0.85)s.textDecoration=pick(['line-through','underline wavy red','overline']);
}
if((tag==='button'||tag==='a')&&Math.random()>0.3){
s.transform=rotate(${rnd(-35,35)}deg) translate(${rnd(-50,50)}px,${rnd(-25,25)}px) scale(${(0.5+Math.random()).toFixed(2)});
btnEscapes++;
}
if(level>=2){
el.classList.add('drifting');
}
});

const logo=document.querySelector('.nav-logo');
if(logo&&level===3){logo.style.animation='spin 1.5s linear infinite';}

document.getElementById('tape-overlay').style.display='block';
document.getElementById('status-text').textContent='synergycloudpro.io — CRIME SCENE DO NOT ENTER';
document.getElementById('crime-counter').style.display='block';
document.getElementById('crime-num').textContent=crimeCount;
document.getElementById('chaos-btn').innerHTML='🟢 Restore Order';
document.getElementById('chaos-btn').style.background='#3B6D11';

document.getElementById('damage-bar').style.display='flex';
document.getElementById('stat-els').textContent=crimeCount;
document.getElementById('stat-btns').textContent=btnEscapes;
document.getElementById('stat-fonts').textContent=fontCrimes;
const ratings={1:'😀 mild chaos',2:'😤 certified disaster',3:'💣 felony'};
document.getElementById('rating-pill').innerHTML='rating: '+ratings[level];
document.getElementById('logdot').classList.add('red');

setTimeout(()=>{
setLog(&#9989; done. ${crimeCount} elements uncendered. ${btnEscapes} buttons escaped. ${fontCrimes} font crimes committed. CSS is weeping.);
},logMsgs.length*380+300);

chaosed=true;
}

DEV Community