Webleb - UI Elements

HTML CSS JS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>ZENDA × M.HAN</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500&family=Azeret+Mono:wght@300;400&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
<style>
:root{
--bg:#080a0f;--b2:#0d1018;--b3:#13141f;
--ln:rgba(255,255,255,.07);--pn:rgba(255,255,255,.032);
--ac:#e8ff47;--a2:#ff4d6d;--a3:#00d4ff;
--vt:#d4ff00;--vg:rgba(212,255,0,.18);
--tx:#f0f2f5;--mt:rgba(240,242,245,.45);--dm:rgba(240,242,245,.18);
--pp:#f0ece0;--ms:#3e3f55;--fg:#23243a;
--G1:'DM Sans',sans-serif;--G2:'Instrument Serif',serif;
--G3:'Azeret Mono',monospace;--G4:'Bebas Neue',sans-serif;
--rr:16px;--rs:10px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:var(--G1);overflow-x:hidden;-webkit-font-smoothing:antialiased;cursor:none}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
::-webkit-scrollbar{width:2px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--vt)}
::selection{background:var(--vt);color:var(--bg)}

/* CURSOR */
#cd,#cr{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;transform:translate(-50%,-50%)}
#cd{width:5px;height:5px;border-radius:50%;background:var(--vt);mix-blend-mode:difference;transition:width .15s,height .15s}
#cr{width:34px;height:34px;border-radius:50%;border:1px solid rgba(212,255,0,.3);transition:width .28s,height .28s,border-color .2s}

/* PROGRESS */
#pg{position:fixed;top:0;left:0;height:1px;background:linear-gradient(90deg,#ff5c1a,var(--vt));z-index:999;width:0%;display:none}

/* TRANSITION */
#ov{position:fixed;inset:0;z-index:8000;background:var(--vt);clip-path:circle(0% at 50% 50%);transition:clip-path .65s cubic-bezier(.77,0,.18,1);pointer-events:none;display:flex;align-items:center;justify-content:center}
#ov.exp{clip-path:circle(170% at 50% 50%);pointer-events:all}
#ov.shr{clip-path:circle(0% at 50% 50%)}
.ot{font-family:var(--G4);font-size:clamp(3rem,8vw,7rem);letter-spacing:.1em;color:var(--bg);opacity:0;transform:scale(.85);transition:opacity .3s .2s,transform .4s .2s}
#ov.exp .ot{opacity:1;transform:scale(1)}

/* PAGES */
#pl{position:relative;z-index:1;min-height:100vh}
#pp{position:relative;z-index:1;display:none;opacity:0;transition:opacity .5s}
#pp.vis{display:block}
#pp.sho{opacity:1}

/* ── LOGIN BG ── */
.bg-sc{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg-gd{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%)}
.orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:.18;animation:orbf 10s ease-in-out infinite alternate}
.o1{width:600px;height:600px;background:#5533ff;top:-200px;left:-100px}
.o2{width:500px;height:500px;background:#ff4d6d;bottom:-150px;right:-100px;animation-delay:-3s}
.o3{width:300px;height:300px;background:#00d4ff;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-6s;opacity:.10}
@keyframes orbf{0%{transform:translate(0,0) scale(1)}100%{transform:translate(30px,-40px) scale(1.08)}}

/* ── LOGIN LAYOUT ── */
.lp{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:1fr 420px 1fr;align-items:stretch}

.ll{display:flex;flex-direction:column;justify-content:space-between;padding:48px 40px;border-right:1px solid var(--ln);animation:sli .9s ease both}
.bn{font-family:var(--G4);font-size:clamp(52px,6vw,88px);letter-spacing:.04em;line-height:1}
.bn span{color:var(--ac)}
.bt{font-family:var(--G3);font-size:11px;color:var(--mt);letter-spacing:.12em;text-transform:uppercase;margin-top:6px}
.sg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sc{background:var(--pn);border:1px solid var(--ln);border-radius:var(--rs);padding:18px;backdrop-filter:blur(20px);transition:border-color .3s,background .3s}
.sc:hover{border-color:rgba(232,255,71,.3);background:rgba(232,255,71,.04)}
.sv{font-family:var(--G4);font-size:32px;letter-spacing:.04em;color:var(--ac);line-height:1}
.sl{font-size:11px;color:var(--mt);letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
.tb{display:flex;align-items:center;gap:10px}
.td{width:8px;height:8px;border-radius:50%;background:var(--ln)}
.td.on{background:var(--ac);box-shadow:0 0 8px var(--ac)}
.tt{font-family:var(--G3);font-size:10px;color:var(--dm);letter-spacing:.1em}

.lc{display:flex;flex-direction:column;justify-content:center;padding:48px 36px;background:rgba(255,255,255,.018);border-right:1px solid var(--ln);animation:sli .9s ease both .2s;position:relative;overflow:hidden}
.lc::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:200px;height:1px;background:linear-gradient(90deg,transparent,var(--ac),transparent)}
.scl{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(232,255,71,.4),transparent);animation:scna 6s ease-in-out infinite;pointer-events:none}
@keyframes scna{0%{top:0%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
.ps{font-family:var(--G3);font-size:10px;color:var(--ac);letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px}
.pt{font-family:var(--G4);font-size:38px;letter-spacing:.04em;line-height:1}
.pd{font-size:13px;color:var(--mt);margin-top:8px;line-height:1.6;font-weight:300}
.ph{margin-bottom:36px}
.fg2{margin-bottom:18px}
.fl{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mt);margin-bottom:10px;font-family:var(--G3)}
.fl a{color:var(--ac);text-decoration:none;font-size:10px;transition:opacity .2s}
.fl a:hover{opacity:.7}
.iw{position:relative}
.iw i{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--dm);transition:color .3s;z-index:1;pointer-events:none}
.iw input{width:100%;padding:14px 16px 14px 44px;background:var(--pn);border:1px solid var(--ln);border-radius:var(--rs);color:var(--tx);font-family:var(--G1);font-size:14px;outline:none;transition:all .3s;backdrop-filter:blur(10px)}
.iw input::placeholder{color:var(--dm);font-weight:300}
.iw input:focus{border-color:var(--ac);background:rgba(232,255,71,.04);box-shadow:0 0 0 1px var(--ac)}
.iw:focus-within i{color:var(--ac)}
.iw input.err{border-color:var(--a2);box-shadow:0 0 0 1px var(--a2)}
.or{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.rm{display:flex;align-items:center;gap:8px;cursor:pointer}
.rm input[type="checkbox"]{appearance:none;width:16px;height:16px;border:1px solid var(--ln);border-radius:4px;background:var(--pn);cursor:pointer;position:relative;transition:all .2s}
.rm input[type="checkbox"]:checked{background:var(--ac);border-color:var(--ac)}
.rm input[type="checkbox"]:checked::after{content:'';position:absolute;left:4px;top:2px;width:6px;height:9px;border:2px solid #000;border-top:none;border-left:none;transform:rotate(45deg)}
.rm span{font-size:12px;color:var(--mt)}
.blg{width:100%;padding:15px;background:var(--ac);color:#0a0a0a;border:none;border-radius:var(--rs);font-family:var(--G4);font-size:18px;letter-spacing:.12em;cursor:pointer;transition:all .25s;position:relative;overflow:hidden;margin-bottom:24px}
.blg::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.3),transparent);opacity:0;transition:opacity .3s}
.blg:hover{transform:translateY(-2px);box-shadow:0 10px 40px rgba(232,255,71,.3)}
.blg:hover::before{opacity:1}
.blg:active{transform:translateY(0)}
.dv{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.dv::before,.dv::after{content:'';flex:1;height:1px;background:var(--ln)}
.dv span{font-family:var(--G3);font-size:10px;color:var(--dm);letter-spacing:.1em;white-space:nowrap}
.sr{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.sb{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px;background:var(--pn);border:1px solid var(--ln);border-radius:var(--rs);color:var(--mt);font-size:12px;cursor:pointer;transition:all .25s;font-family:var(--G1)}
.sb:hover{border-color:var(--a3);color:var(--tx);background:rgba(0,212,255,.06)}
.sb i{font-size:14px}
.su{text-align:center;margin-top:24px;font-size:12px;color:var(--dm)}
.su a{color:var(--ac);text-decoration:none;font-weight:500}

.lr{display:flex;flex-direction:column;justify-content:space-between;padding:48px 40px;animation:sli .9s ease both .4s}
@keyframes sli{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.bi{display:flex;flex-direction:column;align-items:center;gap:24px}
.bg3{font-family:var(--G3);font-size:10px;color:var(--a3);letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px}
.btt{font-family:var(--G4);font-size:28px;letter-spacing:.05em}
.bd{font-size:12px;color:var(--mt);margin-top:6px;font-weight:300}
.sw{position:relative;width:180px;height:180px;cursor:pointer}
.sr2{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(0,212,255,.2);transition:all .4s}
.sr3{position:absolute;inset:14px;border-radius:50%;border:1px solid rgba(0,212,255,.15)}
.sp{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(0,212,255,.06) 0%,transparent 70%);animation:scp 3s ease-in-out infinite}
@keyframes scp{0%,100%{transform:scale(.9);opacity:.5}50%{transform:scale(1.05);opacity:1}}
.sc2{position:absolute;inset:28px;border-radius:50%;background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.25);display:flex;align-items:center;justify-content:center;transition:all .4s;backdrop-filter:blur(10px)}
.sw:hover .sc2{background:rgba(0,212,255,.12);border-color:rgba(0,212,255,.6);box-shadow:0 0 40px rgba(0,212,255,.2)}
.sw:hover .sr2{border-color:rgba(0,212,255,.5)}
.si{font-size:40px;color:var(--a3);opacity:.7;transition:all .4s}
.sw:hover .si{opacity:1;text-shadow:0 0 20px var(--a3)}
.sa{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:var(--a3);animation:spn 4s linear infinite;opacity:.4}
@keyframes spn{to{transform:rotate(360deg)}}
.bh{font-family:var(--G3);font-size:10px;color:var(--dm);letter-spacing:.12em;text-transform:uppercase;text-align:center}
.sw.scn .sc2{background:rgba(77,255,145,.1);border-color:#4dff91;box-shadow:0 0 40px rgba(77,255,145,.3)}
.sw.scn .sa{border-top-color:#4dff91;animation:spn .6s linear infinite;opacity:1}
.sw.scn .si{color:#4dff91;text-shadow:0 0 20px #4dff91}
.ss{display:flex;flex-direction:column;gap:10px}
.sh{font-family:var(--G3);font-size:10px;color:var(--dm);letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.si2{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--pn);border:1px solid var(--ln);border-radius:8px;transition:all .3s}
.si2:hover{border-color:rgba(0,212,255,.2)}
.sd{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.sd.gn{background:#4dff91;box-shadow:0 0 8px #4dff91}
.sd.yw{background:var(--ac);box-shadow:0 0 8px var(--ac)}
.sd.cy{background:var(--a3);box-shadow:0 0 8px var(--a3)}
.stx{font-size:12px;color:var(--mt);flex:1}
.svl{font-family:var(--G3);font-size:10px;color:var(--dm)}

/* ── PORTFOLIO NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;justify-content:space-between;align-items:center;padding:2rem 3rem;transition:all .4s}
nav.stk{background:rgba(8,9,13,.9);backdrop-filter:blur(24px);border-bottom:1px solid var(--ln);padding:1.1rem 3rem}
.nl{font-family:var(--G1);font-weight:700;font-size:.95rem;letter-spacing:.25em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.np{width:5px;height:5px;border-radius:50%;background:var(--vt);animation:pip 2s infinite}
@keyframes pip{0%,100%{box-shadow:0 0 0 0 rgba(212,255,0,.6)}70%{box-shadow:0 0 0 8px transparent}}
.nv{display:flex;gap:2.5rem}
.nv a{font-family:var(--G3);font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ms);transition:color .2s}
.nv a:hover{color:var(--vt)}
.nc{font-family:var(--G3);font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;border:1px solid var(--vt);color:var(--vt);padding:.55rem 1.6rem;border-radius:2px;transition:background .2s,color .2s}
.nc:hover{background:var(--vt);color:var(--bg)}
.bgr{display:none;flex-direction:column;gap:5px;cursor:pointer}
.bgr span{width:20px;height:1.5px;background:var(--pp);display:block;transition:.3s}
.mob{position:fixed;inset:0;z-index:490;background:var(--b2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;clip-path:circle(0% at 96% 3%);transition:clip-path .6s cubic-bezier(.77,0,.18,1)}
.mob.opn{clip-path:circle(170% at 96% 3%)}
.mob a{font-family:var(--G1);font-weight:700;font-size:2.8rem;text-transform:uppercase;letter-spacing:-.04em;opacity:0;transform:translateY(18px);transition:.35s}
.mob.opn a{opacity:1;transform:none}
.mob.opn a:nth-child(1){transition-delay:.08s}
.mob.opn a:nth-child(2){transition-delay:.14s}
.mob.opn a:nth-child(3){transition-delay:.20s}
.mob.opn a:nth-child(4){transition-delay:.26s}
.mob.opn a:nth-child(5){transition-delay:.32s}
.mob a:hover{color:var(--vt)}

/* ── PORTFOLIO HERO ── */
.hero{min-height:100vh;padding:9rem 3rem 4rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;position:relative;overflow:hidden}
.po{position:absolute;pointer-events:none;border-radius:50%;filter:blur(100px)}
.poa{width:700px;height:700px;background:rgba(212,255,0,.045);top:-200px;right:-200px;animation:pof 11s ease-in-out infinite}
.pob{width:450px;height:450px;background:rgba(255,92,26,.04);bottom:-50px;left:-100px;animation:pof 15s ease-in-out infinite reverse}
@keyframes pof{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-15px) scale(1.04)}}
.hl{position:relative;z-index:2}
.he{display:inline-flex;align-items:center;gap:.75rem;font-family:var(--G3);font-size:.6rem;text-transform:uppercase;letter-spacing:.25em;color:var(--vt);margin-bottom:2.4rem}
.he::before,.he::after{content:'';width:28px;height:1px;background:var(--vt);flex-shrink:0}
.hh{font-family:var(--G1);font-weight:700;font-size:clamp(3.8rem,6.5vw,7.2rem);line-height:.88;letter-spacing:-.04em;text-transform:uppercase}
.hh i{display:block;font-family:var(--G2);font-style:italic;font-weight:400;font-size:.72em;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px var(--vt);line-height:1}
.hs{font-family:var(--G3);font-size:.72rem;color:var(--ms);line-height:2.2;max-width:380px;margin:2.2rem 0 3rem}
.ha{display:flex;gap:1rem;flex-wrap:wrap}
.bv{display:inline-flex;align-items:center;gap:.6rem;background:var(--vt);color:var(--bg);font-family:var(--G3);font-size:.65rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;padding:1rem 2.4rem;border-radius:2px;border:none;cursor:pointer;transition:transform .25s,box-shadow .25s}
.bv:hover{transform:translateY(-3px);box-shadow:0 14px 40px var(--vg)}
.bo{display:inline-flex;align-items:center;gap:.6rem;background:transparent;color:var(--pp);font-family:var(--G3);font-size:.65rem;text-transform:uppercase;letter-spacing:.2em;padding:1rem 2.4rem;border-radius:2px;border:1px solid var(--ln);transition:border-color .2s,color .2s}
.bo:hover{border-color:rgba(212,255,0,.35);color:var(--vt)}
.hr2{position:relative;height:88vh;max-height:720px;z-index:2}
.hpx{position:absolute;right:0;top:0;width:92%;height:100%;border-radius:6px;overflow:hidden}
.hpx img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) contrast(1.15) brightness(.95);transition:filter .7s}
.hpx:hover img{filter:grayscale(30%) contrast(1.05) brightness(1)}
.hpx::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(8,9,13,.65) 0%,transparent 32%),linear-gradient(to top,rgba(8,9,13,.72) 0%,transparent 42%)}
.hpx::before{content:'';position:absolute;inset:0;z-index:3;border-radius:6px;background:linear-gradient(var(--vt),var(--vt)) 0 0/24px 1px no-repeat,linear-gradient(var(--vt),var(--vt)) 0 0/1px 24px no-repeat,linear-gradient(var(--vt),var(--vt)) 100% 0/24px 1px no-repeat,linear-gradient(var(--vt),var(--vt)) 100% 0/1px 24px no-repeat,linear-gradient(var(--vt),var(--vt)) 0 100%/24px 1px no-repeat,linear-gradient(var(--vt),var(--vt)) 0 100%/1px 24px no-repeat,linear-gradient(var(--vt),var(--vt)) 100% 100%/24px 1px no-repeat,linear-gradient(var(--vt),var(--vt)) 100% 100%/1px 24px no-repeat;opacity:.5;pointer-events:none}
.chip{position:absolute;z-index:10;background:rgba(14,15,23,.88);backdrop-filter:blur(20px);border:1px solid var(--ln);border-radius:10px}
.cha{bottom:3rem;left:-3rem;padding:1.4rem 1.8rem;width:200px;animation:flt 5.5s ease-in-out infinite}
.chb{top:2.5rem;left:-2rem;padding:1.2rem 1.6rem;animation:flt 7s ease-in-out infinite reverse}
.chc{top:40%;right:1.5rem;padding:1.1rem 1.4rem;animation:flt 6s ease-in-out infinite}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.ck{font-family:var(--G3);font-size:.52rem;color:var(--ms);text-transform:uppercase;letter-spacing:.2em;margin-bottom:.5rem}
.cv{font-family:var(--G1);font-weight:700;font-size:2.8rem;color:var(--vt);line-height:1}
.cr2{font-family:var(--G3);font-size:.62rem;color:var(--ms);line-height:2}
.cr2 em{color:var(--vt);font-style:normal}
.clv{width:5px;height:5px;border-radius:50%;background:#22c55e;display:inline-block;margin-right:5px;animation:pip 2s infinite}

/* ── MARQUEE ── */
.mq{overflow:hidden;background:var(--vt);padding:.85rem 0;position:relative;z-index:3}
.mt2{display:inline-block;white-space:nowrap;animation:tkr 22s linear infinite}
@keyframes tkr{to{transform:translateX(-50%)}}
.mi{display:inline-flex;align-items:center;gap:.75rem;font-family:var(--G3);font-size:.64rem;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:var(--bg);padding:0 2.5rem}
.mx{color:rgba(8,9,13,.3);font-size:.8rem}

/* ── SHARED ── */
.wp{max-width:1300px;margin:0 auto;padding:0 3rem}
.sc3{padding:9rem 0;position:relative}
.tg{display:inline-flex;align-items:center;gap:.9rem;font-family:var(--G3);font-size:.58rem;color:var(--vt);text-transform:uppercase;letter-spacing:.3em;margin-bottom:.9rem}
.tg::before{content:'';width:20px;height:1px;background:var(--vt)}
.tg::after{content:'';width:36px;height:1px;background:var(--ln)}
.hd{font-family:var(--G1);font-weight:700;font-size:clamp(2.8rem,5vw,5.2rem);line-height:.88;text-transform:uppercase;letter-spacing:-.04em}
.hd em{font-family:var(--G2);font-style:italic;font-weight:400;color:var(--ms);font-size:.95em;letter-spacing:-.02em}
.rv{opacity:0;transform:translateY(36px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}
.rv.d2{transition-delay:.22s}
.rv.d3{transition-delay:.34s}

/* ── STATS BAND ── */
.stb{background:var(--b2);border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.stg{display:grid;grid-template-columns:repeat(4,1fr)}
.cel{padding:4.5rem 3rem;border-right:1px solid var(--ln);position:relative;overflow:hidden;transition:background .3s}
.cel:last-child{border-right:0}
.cel::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1.5px;background:var(--vt);transform:scaleX(0);transform-origin:left;transition:transform .5s}
.cel:hover{background:var(--b3)}
.cel:hover::after{transform:scaleX(1)}
.sn{font-family:var(--G1);font-weight:700;font-size:clamp(3.5rem,5vw,5.5rem);line-height:1}
.sn sup{font-size:40%;vertical-align:super;color:var(--vt)}
.sx{font-family:var(--G3);font-size:.57rem;color:var(--ms);text-transform:uppercase;letter-spacing:.2em;line-height:1.8;margin-top:.6rem}

/* ── ABOUT BAND ── */
.ab{background:var(--b3);border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);padding:4.5rem 0}
.ai{display:grid;grid-template-columns:1fr auto 1fr;gap:4rem;align-items:center}
.atx{font-family:var(--G3);font-size:.72rem;color:var(--ms);line-height:2.2;text-align:right}
.atx strong,.ari strong{color:var(--pp)}
.ari{font-family:var(--G3);font-size:.72rem;color:var(--ms);line-height:2.2}
.ac2{width:170px;height:170px;border-radius:50%;overflow:hidden;border:1.5px solid var(--ln);margin:0 auto;position:relative;flex-shrink:0}
.ac2 img{width:100%;height:100%;object-fit:cover;filter:grayscale(55%);transition:.4s}
.ac2:hover img{filter:grayscale(0%)}
.ac2::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px dashed rgba(212,255,0,.18);animation:spn 25s linear infinite;pointer-events:none}

/* ── WORKS ── */
.wh{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:4.5rem}
.sa2{font-family:var(--G3);font-size:.6rem;color:var(--ms);text-transform:uppercase;letter-spacing:.2em;display:flex;align-items:center;gap:.5rem;transition:color .2s}
.sa2:hover{color:var(--vt)}
.sa2 span{transition:transform .2s}
.sa2:hover span{transform:translateX(5px)}
.bn2{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem}
.wc{position:relative;overflow:hidden;border-radius:6px;background:var(--b3);border:1px solid var(--ln);cursor:pointer;transition:border-color .3s,transform .55s cubic-bezier(.16,1,.3,1)}
.wc:hover{border-color:rgba(212,255,0,.22);transform:translateY(-7px)}
.wc img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;filter:grayscale(85%) brightness(.9);transition:filter .6s,transform .7s}
.wc:hover img{filter:grayscale(10%) brightness(1.02);transform:scale(1.06)}
.ws{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,9,13,.94) 0%,rgba(8,9,13,.2) 55%,transparent 100%)}
.wm{position:absolute;bottom:0;left:0;right:0;padding:2rem}
.wct{font-family:var(--G3);font-size:.53rem;color:var(--vt);text-transform:uppercase;letter-spacing:.25em;margin-bottom:.4rem}
.wn{font-family:var(--G1);font-weight:700;font-size:1.18rem;text-transform:uppercase;letter-spacing:-.02em}
.wp2{display:inline-flex;align-items:center;gap:4px;background:rgba(212,255,0,.08);border:1px solid rgba(212,255,0,.14);border-radius:100px;padding:.22rem .75rem;font-family:var(--G3);font-size:.48rem;color:var(--vt);text-transform:uppercase;letter-spacing:.15em;margin-top:.6rem;opacity:0;transform:translateY(7px);transition:.3s}
.wc:hover .wp2{opacity:1;transform:none}
.wi{position:absolute;top:1.5rem;right:1.8rem;font-family:var(--G1);font-weight:700;font-size:3.8rem;color:rgba(212,255,0,.06);line-height:1;pointer-events:none;transition:color .3s}
.wc:hover .wi{color:rgba(212,255,0,.14)}
.wc1{grid-column:span 7;min-height:460px}
.wc2{grid-column:span 5;min-height:460px}
.wc3,.wc4,.wc5{grid-column:span 4;min-height:300px}

/* ── SERVICES ── */
.svb{background:var(--b2);border-top:1px solid var(--ln)}
.svl{display:grid;grid-template-columns:1fr 2fr;gap:7rem;align-items:start}
.svd{font-family:var(--G3);font-size:.72rem;color:var(--ms);line-height:2.2;margin-top:1.8rem;max-width:260px}
.svg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ln);border-radius:6px;overflow:hidden}
.svi{padding:2.6rem;border:1px solid var(--ln);margin:-1px;position:relative;overflow:hidden;transition:background .3s;cursor:default}
.svi::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(212,255,0,.1) 0%,transparent 55%);opacity:0;transition:.4s}
.svi:hover{background:var(--b3)}
.svi:hover::before{opacity:1}
.sic{width:38px;height:38px;border-radius:7px;background:rgba(212,255,0,.1);border:1px solid rgba(212,255,0,.14);display:flex;align-items:center;justify-content:center;font-size:.95rem;margin-bottom:1.4rem;transition:transform .3s}
.svi:hover .sic{transform:scale(1.1) rotate(-5deg)}
.sin{font-family:var(--G3);font-size:.52rem;color:var(--ms);letter-spacing:.2em;margin-bottom:.7rem}
.sim{font-family:var(--G1);font-weight:700;font-size:.9rem;text-transform:uppercase;margin-bottom:.5rem;letter-spacing:-.01em;transition:color .25s}
.svi:hover .sim{color:var(--vt)}
.sid{font-family:var(--G3);font-size:.66rem;color:var(--ms);line-height:2}

/* ── PROCESS ── */
.prg{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--ln);margin-top:4.5rem}
.pst{border-right:1px solid var(--ln);border-top:1px solid var(--ln);padding:2.8rem 2.2rem;position:relative;overflow:hidden;transition:background .3s}
.pst:hover{background:var(--b3)}
.pst:hover .pn{color:rgba(212,255,0,.14)}
.pn{font-family:var(--G1);font-weight:700;font-size:4rem;color:rgba(212,255,0,.05);line-height:1;margin-bottom:1.2rem;transition:.3s}
.pt2{font-family:var(--G1);font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:.6rem}
.pd2{font-family:var(--G3);font-size:.65rem;color:var(--ms);line-height:2}

/* ── SKILLS ── */
.skl{display:grid;grid-template-columns:1fr 1.55fr;gap:7rem;align-items:center}
.skl-l{display:flex;flex-direction:column;gap:2.2rem;margin-top:3.5rem}
.skr{display:flex;justify-content:space-between;margin-bottom:.6rem}
.skn{font-family:var(--G3);font-size:.65rem;text-transform:uppercase;letter-spacing:.15em}
.skp{font-family:var(--G1);font-weight:700;font-size:.72rem;color:var(--vt)}
.skt{height:1px;background:var(--fg);position:relative;overflow:visible}
.skf{height:100%;background:linear-gradient(90deg,var(--vt),#88ff88);width:0;transition:width 1.8s cubic-bezier(.25,1,.5,1);position:relative}
.skf::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--vt);box-shadow:0 0 10px var(--vt)}
.trm{background:var(--b3);border:1px solid var(--ln);border-radius:10px;overflow:hidden}
.tb2{background:var(--b2);padding:.75rem 1.3rem;display:flex;align-items:center;gap:.5rem;border-bottom:1px solid var(--ln)}
.td2{width:10px;height:10px;border-radius:50%}
.tn2{font-family:var(--G3);font-size:.55rem;color:var(--ms);margin-left:.5rem;letter-spacing:.1em}
.tb3{padding:2.4rem;font-family:var(--G3);font-size:.7rem;line-height:2.5}
.tk{color:rgba(212,255,0,.7)}
.ts{color:#7ec8e3}
.tc2{color:var(--ms)}
.tn3{color:#ff9d5c}
@keyframes cur{50%{opacity:0}}
.tcr{animation:cur 1.1s infinite;color:var(--vt)}

/* ── CONTACT ── */
.ctl{display:grid;grid-template-columns:1fr 1.35fr;gap:7rem;align-items:start}
.cq{font-family:var(--G2);font-style:italic;font-size:clamp(1.3rem,2vw,1.85rem);color:var(--ms);line-height:1.65;margin:1.8rem 0 3rem}
.ct2{border-top:1px solid var(--ln)}
.cr3{padding:1.2rem 0;border-bottom:1px solid var(--ln);display:flex;justify-content:space-between;align-items:center}
.ck2{font-family:var(--G3);font-size:.56rem;color:var(--ms);text-transform:uppercase;letter-spacing:.2em}
.cv2{font-family:var(--G3);font-size:.7rem;color:var(--pp);transition:color .2s}
a.cv2:hover{color:var(--vt)}
.ld{width:6px;height:6px;border-radius:50%;background:#22c55e;animation:pip 2s infinite;display:inline-block}
.fm{display:flex;flex-direction:column;gap:1.2rem}
.fl2{font-family:var(--G3);font-size:.54rem;color:var(--ms);text-transform:uppercase;letter-spacing:.2em;display:block;margin-bottom:.45rem}
.fi{width:100%;background:var(--b2);border:1px solid var(--ln);border-radius:4px;color:var(--pp);font-family:var(--G3);font-size:.72rem;padding:.9rem 1.1rem;outline:none;transition:border-color .25s,box-shadow .25s}
.fi:focus{border-color:rgba(212,255,0,.3);box-shadow:0 0 0 3px rgba(212,255,0,.05)}
.fsn{display:flex;align-items:center;justify-content:center;gap:.8rem;background:var(--vt);color:var(--bg);font-family:var(--G3);font-size:.65rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;padding:1.1rem 2rem;border-radius:4px;border:none;cursor:pointer;transition:transform .25s,box-shadow .25s}
.fsn:hover{transform:translateY(-3px);box-shadow:0 14px 36px var(--vg)}
.fsn.ok{background:#22c55e;color:#000}

/* ── FOOTER ── */
footer{background:var(--b2);border-top:1px solid var(--ln);padding:2.8rem 3rem;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem}
.fl3{font-family:var(--G1);font-weight:700;font-size:1.1rem;letter-spacing:.25em;text-transform:uppercase}
.fl3 em{color:var(--vt);font-style:normal}
.fc{font-family:var(--G3);font-size:.58rem;color:var(--ms);text-align:center;letter-spacing:.1em}
.fs{display:flex;justify-content:flex-end;gap:2rem}
.fs a{font-family:var(--G3);font-size:.58rem;color:var(--ms);text-transform:uppercase;letter-spacing:.1em;transition:color .2s}
.fs a:hover{color:var(--vt)}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
.lp{grid-template-columns:1fr;padding:24px;gap:32px}
.ll,.lr{border:none;padding:0}
.lc{border:1px solid var(--ln);border-radius:var(--rr);padding:32px 24px}
.sg{display:none}
.hero{grid-template-columns:1fr;padding-top:9rem}
.hr2{height:55vw;max-height:480px}
.chip{display:none}
.stg{grid-template-columns:repeat(2,1fr)}
.wc1,.wc2{grid-column:span 6}
.wc3,.wc4,.wc5{grid-column:span 4}
.svl,.skl,.ctl{grid-template-columns:1fr;gap:3.5rem}
.prg{grid-template-columns:1fr 1fr}
.ai{grid-template-columns:1fr;text-align:center}
.atx{text-align:center}
footer{grid-template-columns:1fr;text-align:center;gap:1.2rem}
.fs{justify-content:center}
.nv,.nc{display:none}
.bgr{display:flex}
}
@media(max-width:700px){
.wp{padding:0 1.5rem}
nav{padding:1.5rem}
nav.stk{padding:.9rem 1.5rem}
.bn2{grid-template-columns:1fr}
.wc1,.wc2,.wc3,.wc4,.wc5{grid-column:span 1;min-height:240px}
.svg{grid-template-columns:1fr}
.prg{grid-template-columns:1fr}
.sc3{padding:5.5rem 0}
}
</style>
</head>
<body>
<div id="pg"></div>
<div id="cd"></div>
<div id="cr"></div>
<div id="ov"><div class="ot">AUTHENTICATED</div></div>

<div id="pl">
<div class="bg-sc">
<div class="bg-gd"></div>
<div class="orb o1"></div>
<div class="orb o2"></div>
<div class="orb o3"></div>
</div>
<div class="lp">
<div class="ll">
<div><div class="bn">ZEN<span>D</span>A</div><div class="bt">// Secure Access v4.2.1</div></div>
<div class="sg">
<div class="sc"><div class="sv">256-bit</div><div class="sl">Encryption</div></div>
<div class="sc"><div class="sv">99.9%</div><div class="sl">Uptime</div></div>
<div class="sc"><div class="sv">2.4M+</div><div class="sl">Users Protected</div></div>
<div class="sc"><div class="sv">0</div><div class="sl">Breaches</div></div>
</div>
<div class="tb"><div style="display:flex;gap:5px"><div class="td on"></div><div class="td on"></div><div class="td on"></div><div class="td"></div><div class="td"></div></div><div class="tt">THREAT LEVEL: LOW</div></div>
</div>
<div class="lc">
<div class="scl"></div>
<div class="ph">
<div class="ps">// Access Portal</div>
<div class="pt">SIGN IN</div>
<div class="pd">Enter your credentials to access your secure dashboard.</div>
</div>
<form id="lf" autocomplete="off">
<div class="fg2"><div class="fl"><span>Username</span></div><div class="iw"><i class="fas fa-at"></i><input type="text" id="un" placeholder="your_username" autocomplete="off"/></div></div>
<div class="fg2"><div class="fl"><span>Password</span><a href="#">Forgot?</a></div><div class="iw"><i class="fas fa-key"></i><input type="password" id="pw" placeholder="••••••••••••" autocomplete="off"/></div></div>
<div class="or"><label class="rm"><input type="checkbox"/><span>Keep me signed in</span></label></div>
<button type="submit" class="blg" id="lb">AUTHENTICATE</button>
<div class="dv"><span>OR CONTINUE WITH</span></div>
<div class="sr">
<button type="button" class="sb" onclick="go()"><i class="fab fa-google"></i> Google</button>
<button type="button" class="sb" onclick="go()"><i class="fab fa-apple"></i> Apple</button>
<button type="button" class="sb" onclick="go()"><i class="fab fa-github"></i> GitHub</button>
</div>
<div class="su">No account yet? <a href="#">Create one →</a></div>
</form>
</div>
<div class="lr">
<div class="bi">
<div><div class="bg3">// Biometric Auth</div><div class="btt">TOUCH TO LOGIN</div><div class="bd">Place your finger on the sensor for instant access.</div></div>
<div class="sw" id="sc4">
<div class="sr2"></div><div class="sr3"></div><div class="sp"></div><div class="sa"></div>
<div class="sc2"><i class="fas fa-fingerprint si"></i></div>
</div>
<div class="bh">HOLD FOR 2 SECONDS</div>
</div>
<div class="ss">
<div class="sh">// System Status</div>
<div class="si2"><div class="sd gn"></div><div class="stx">SSL Certificate</div><div class="svl2">VALID</div></div>
<div class="si2"><div class="sd cy"></div><div class="stx">2FA Layer</div><div class="svl2">ACTIVE</div></div>
<div class="si2"><div class="sd yw"></div><div class="stx">Last Login</div><div class="svl2">2H AGO</div></div>
</div>
</div>
</div>
</div>

<div id="pp">
<div class="mob" id="mob">
<a href="#about" onclick="cm()">About</a>
<a href="#works" onclick="cm()">Works</a>
<a href="#services" onclick="cm()">Services</a>
<a href="#skills" onclick="cm()">Skills</a>
<a href="#contact" onclick="cm()">Contact</a>
</div>
<nav id="nv2">
<div class="nl"><div class="np"></div>M.HAN</div>
<div class="nv"><a href="#about">About</a><a href="#works">Works</a><a href="#services">Services</a><a href="#skills">Skills</a></div>
<a href="#contact" class="nc">Let's Talk</a>
<div class="bgr" id="bgr"><span></span><span></span><span></span></div>
</nav>
<section class="hero" id="home">
<div class="po poa"></div><div class="po pob"></div>
<div class="hl">
<div class="he">Available for work</div>
<h1 class="hh">Creative<br><i>Designer</i><br>& Developer</h1>
<p class="hs">Crafting digital experiences at the intersection of visual design and engineering — UI/UX, web development, brand systems & motion.</p>
<div class="ha"><a href="#works" class="bv">View Work →</a><a href="#contact" class="bo">Get in Touch</a></div>
</div>
<div class="hr2">
<div class="hpx"><img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&auto=format&fit=crop&w=1400&q=80" alt=""/></div>
<div class="chip cha"><div class="ck">Projects Shipped</div><div class="cv">84<sup style="font-size:.9rem;vertical-align:super">+</sup></div><div style="font-family:var(--G3);font-size:.55rem;color:var(--ms);margin-top:.3rem"><span class="clv"></span>All on time</div></div>
<div class="chip chb"><div class="ck" style="margin-bottom:.7rem">Current Stack</div><div class="cr2"><em>React</em> · <em>Figma</em> · <em>GSAP</em></div><div class="cr2"><em>Next.js</em> · <em>Tailwind</em></div></div>
<div class="chip chc"><div class="ck">Client Score</div><div style="font-family:var(--G1);font-weight:700;font-size:1.6rem;color:var(--vt);line-height:1">99%</div></div>
</div>
</section>
<div class="mq"><div class="mt2"><span class="mi">UI / UX Design<span class="mx"> ◆</span></span><span class="mi">Web Development<span class="mx"> ◆</span></span><span class="mi">Brand Identity<span class="mx"> ◆</span></span><span class="mi">Design Systems<span class="mx"> ◆</span></span><span class="mi">Motion Design<span class="mx"> ◆</span></span><span class="mi">Dashboard UI<span class="mx"> ◆</span></span><span class="mi">Interactive Web<span class="mx"> ◆</span></span><span class="mi">3D & Render<span class="mx"> ◆</span></span><span class="mi">UI / UX Design<span class="mx"> ◆</span></span><span class="mi">Web Development<span class="mx"> ◆</span></span><span class="mi">Brand Identity<span class="mx"> ◆</span></span><span class="mi">Design Systems<span class="mx"> ◆</span></span><span class="mi">Motion Design<span class="mx"> ◆</span></span><span class="mi">Dashboard UI<span class="mx"> ◆</span></span><span class="mi">Interactive Web<span class="mx"> ◆</span></span><span class="mi">3D & Render<span class="mx"> ◆</span></span></div></div>
<div class="stb" id="about"><div class="stg">
<div class="cel rv"><div class="sn">5<sup>+</sup></div><div class="sx">Years of<br>Experience</div></div>
<div class="cel rv d1"><div class="sn">84<sup>+</sup></div><div class="sx">Projects<br>Completed</div></div>
<div class="cel rv d2"><div class="sn">32<sup>+</sup></div><div class="sx">Happy<br>Clients</div></div>
<div class="cel rv d3"><div class="sn">99<sup>%</sup></div><div class="sx">Client<br>Satisfaction</div></div>
</div></div>
<div class="ab"><div class="wp"><div class="ai rv">
<p class="atx"><strong>Based in Istanbul, Turkey</strong><br>5+ years designing and building<br>products for global clients</p>
<div class="ac2"><img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt=""/></div>
<p class="ari"><strong>Designer & Developer</strong><br>Bridging design intent<br>& technical reality</p>
</div></div></div>
<section class="sc3" id="works" style="background:var(--bg)"><div class="wp">
<div class="wh rv"><div><div class="tg">Selected Work</div><h2 class="hd">Recent<br><em>Projects</em></h2></div><a href="#" class="sa2">All Projects <span>→</span></a></div>
<div class="bn2">
<div class="wc wc1 rv"><span class="wi">01</span><img src="https://images.unsplash.com/photo-1555099962-4199c345e5dd?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="" loading="lazy"/><div class="ws"></div><div class="wm"><div class="wct">Dashboard UI · 2025</div><div class="wn">Analytics Platform</div><div class="wp2">Figma · React</div></div></div>
<div class="wc wc2 rv d1"><span class="wi">02</span><img src="https://images.unsplash.com/photo-1558655146-d09347e92766?ixlib=rb-4.0.3&auto=format&fit=crop&w=900&q=80" alt="" loading="lazy"/><div class="ws"></div><div class="wm"><div class="wct">E-Commerce · 2025</div><div class="wn">Fashion Store</div><div class="wp2">Next.js · GSAP</div></div></div>
<div class="wc wc3 rv"><span class="wi">03</span><img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="" loading="lazy"/><div class="ws"></div><div class="wm"><div class="wct">Mobile App</div><div class="wn">Fintech App</div><div class="wp2">Figma · RN</div></div></div>
<div class="wc wc4 rv d1"><span class="wi">04</span><img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="" loading="lazy"/><div class="ws"></div><div class="wm"><div class="wct">Brand Identity</div><div class="wn">Tech Startup</div><div class="wp2">Branding</div></div></div>
<div class="wc wc5 rv d2"><span class="wi">05</span><img src="https://images.unsplash.com/photo-1573164713714-d95e436ab8d6?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="" loading="lazy"/><div class="ws"></div><div class="wm"><div class="wct">3D & Motion</div><div class="wn">Product Render</div><div class="wp2">Blender · AE</div></div></div>
</div></div></section>
<section class="sc3 svb" id="services"><div class="wp"><div class="svl2b">
<div class="rv"><div class="tg">What I Do</div><h2 class="hd">Core<br><em>Services</em></h2><p class="svd">Turning ideas into polished digital products with a focus on clarity, performance, and aesthetic precision.</p></div>
<div class="svg rv d2">
<div class="svi"><div class="sic">✦</div><div class="sin">01</div><div class="sim">UI / UX Design</div><div class="sid">User-centered interfaces using Figma. Wireframes, prototypes, and full design systems.</div></div>
<div class="svi"><div class="sic">⌥</div><div class="sin">02</div><div class="sim">Web Development</div><div class="sid">Front-end engineering with React & Next.js. Performance-first, always responsive.</div></div>
<div class="svi"><div class="sic">◈</div><div class="sin">03</div><div class="sim">Brand Identity</div><div class="sid">Visual identities that communicate strategy — logo, type, color, and full collateral.</div></div>
<div class="svi"><div class="sic">◎</div><div class="sin">04</div><div class="sim">Motion Design</div><div class="sid">Micro-interactions, scroll animations, and cinematic transitions with GSAP & CSS.</div></div>
<div class="svi"><div class="sic">▦</div><div class="sin">05</div><div class="sim">Dashboard Systems</div><div class="sid">Data visualization dashboards — charts, real-time widgets, and analytics interfaces.</div></div>
<div class="svi"><div class="sic">⊕</div><div class="sin">06</div><div class="sim">Consulting</div><div class="sid">Design audits, strategic roadmaps, and creative direction for digital products.</div></div>
</div>
</div></div></section>
<section class="sc3" style="background:var(--b2);border-top:1px solid var(--ln)"><div class="wp">
<div class="rv"><div class="tg">How I Work</div><h2 class="hd">My<br><em>Process</em></h2></div>
<div class="prg">
<div class="pst rv"><div class="pn">01</div><div class="pt2">Discovery</div><div class="pd2">Deep dive into your goals, audience, and competitive landscape. Strategy before pixels.</div></div>
<div class="pst rv d1"><div class="pn">02</div><div class="pt2">Design</div><div class="pd2">Wireframes to high-fidelity designs. Iterative, fast, and collaborative with your team.</div></div>
<div class="pst rv d2"><div class="pn">03</div><div class="pt2">Develop</div><div class="pd2">Clean, performant code. Pixel-perfect implementation with modern frameworks.</div></div>
<div class="pst rv d3"><div class="pn">04</div><div class="pt2">Launch</div><div class="pd2">Thorough QA, optimized deployment, and post-launch support to ensure success.</div></div>
</div>
</div></section>
<section class="sc3" id="skills" style="background:var(--bg);border-top:1px solid var(--ln)"><div class="wp"><div class="skl">
<div class="rv">
<div class="tg">Expertise</div><h2 class="hd">Technical<br><em>Skills</em></h2>
<div class="skl-l">
<div><div class="skr"><span class="skn">HTML / CSS</span><span class="skp">96%</span></div><div class="skt"><div class="skf" data-w="96"></div></div></div>
<div><div class="skr"><span class="skn">JavaScript / React</span><span class="skp">88%</span></div><div class="skt"><div class="skf" data-w="88"></div></div></div>
<div><div class="skr"><span class="skn">Figma / Design Systems</span><span class="skp">94%</span></div><div class="skt"><div class="skf" data-w="94"></div></div></div>
<div><div class="skr"><span class="skn">UI/UX Strategy</span><span class="skp">90%</span></div><div class="skt"><div class="skf" data-w="90"></div></div></div>
<div><div class="skr"><span class="skn">Motion / Animation</span><span class="skp">76%</span></div><div class="skt"><div class="skf" data-w="76"></div></div></div>
</div>
</div>
<div class="trm rv d2">
<div class="tb2"><div class="td2" style="background:#ff5f56"></div><div class="td2" style="background:#ffbd2e"></div><div class="td2" style="background:#27c93f"></div><span class="tn2">profile.config.json</span></div>
<div class="tb3"><span class="tc2">{</span><br>
<span class="tk">"name"</span>: <span class="ts">"Mete Han"</span>,<br>
<span class="tk">"role"</span>: <span class="ts">"Designer & Developer"</span>,<br>
<span class="tk">"base"</span>: <span class="ts">"Istanbul, Turkey"</span>,<br>
<span class="tk">"stack"</span>: [<span class="ts">"React"</span>, <span class="ts">"Next.js"</span>, <span class="ts">"Figma"</span>, <span class="ts">"GSAP"</span>],<br>
<span class="tk">"projects"</span>: <span class="tn3">84</span>,<br>
<span class="tk">"clients"</span>: <span class="tn3">32</span>,<br>
<span class="tk">"status"</span>: <span class="ts">"available"</span><br>
<span class="tc2">}</span><br><br>
<span style="color:var(--vt)">▸ <span class="tcr">_</span></span></div>
</div>
</div></div></section>
<section class="sc3" id="contact" style="background:var(--bg)"><div class="wp"><div class="ctl">
<div class="rv">
<div class="tg">Contact</div><h2 class="hd">Let's<br><em>Work Together</em></h2>
<p class="cq">Have a project in mind? I'd love to help bring your vision to life.</p>
<div class="ct2">
<div class="cr3"><span class="ck2">Email</span><a href="mailto:hello@mhan.dev" class="cv2">hello@mhan.dev</a></div>
<div class="cr3"><span class="ck2">Location</span><span class="cv2">Istanbul, Turkey</span></div>
<div class="cr3"><span class="ck2">Response Time</span><span class="cv2">Within 24 hours</span></div>
<div class="cr3"><span class="ck2">Status</span><span class="cv2"><span class="ld"></span> Open to Work</span></div>
</div>
</div>
<div class="rv d2"><div class="fm">
<div><label class="fl2">Full Name</label><input type="text" class="fi" placeholder="John Doe"/></div>
<div><label class="fl2">Email Address</label><input type="email" class="fi" placeholder="john@company.com"/></div>
<div><label class="fl2">Project Budget</label><input type="text" class="fi" placeholder="$2,000 – $10,000"/></div>
<div><label class="fl2">Project Brief</label><input class="fi" placeholder="Tell me about your project..."/></div>
<button class="fsn" id="snd">Send Message →</button>
</div></div>
</div></div></section>
<footer><div class="fl3">M.<em>HAN</em></div><div class="fc">© 2025 Mete Han · Crafted with precision in Istanbul</div><div class="fs"><a href="#">GitHub</a><a href="#">Behance</a><a href="#">LinkedIn</a><a href="#">Instagram</a></div></footer>
</div>

Preview

Open Advanced Editor Full Screen

HTML CSS JS

/* PROGRESS */
#pg{position:fixed;top:0;left:0;height:1px;background:linear-gradient(90deg,#ff5c1a,var(--vt));z-index:999;width:0%;display:none}

/* PAGES */
#pl{position:relative;z-index:1;min-height:100vh}
#pp{position:relative;z-index:1;display:none;opacity:0;transition:opacity .5s}
#pp.vis{display:block}
#pp.sho{opacity:1}

/* ── LOGIN LAYOUT ── */
.lp{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:1fr 420px 1fr;align-items:stretch}

Preview

Validating your code, please wait...