AIBunker

NEW

<!doctype html> <html><head><meta charset="utf-8"> <style> :host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#eeefe9; color:#23251d; box-sizing:border-box; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { box-sizing:border-box; } /* 크림 캔버스 + 손그림 고슴도치 마스코트가 마진에 흩어진 스케치북 느낌 — 다크테크 장르 관례를 일부러 거부한다. */ nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; } .brand { font-size:16px; font-weight:800; margin:0; } .navlinks { display:flex; gap:20px; font-size:13px; color:#4d4f46; font-weight:700; } .btn { background:#f7a501; color:#23251d; border:none; border-radius:6px; padding:9px 18px; font-weight:800; font-size:13px; } .wrap { position:relative; padding:10px 40px 0; } /* 손그림풍 고슴도치 — 원+삼각형 가시로 절제된 라인아트 */ .hog { position:absolute; width:54px; height:40px; } .hog .body { position:absolute; width:40px; height:28px; background:#4d4f46; border-radius:50% 50% 40% 40%; left:6px; top:10px; } .hog .spike { position:absolute; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:9px solid #4d4f46; top:2px; } .hog .face { position:absolute; width:10px; height:8px; background:#f7a501; border-radius:50%; left:0; top:16px; } .h1 { top:8px; right:70px; } .h1 .spike { left:14px; } .h2 { top:64px; left:44px; transform:scaleX(-1); } .h2 .spike { left:14px; } h1 { font-size:32px; font-weight:800; letter-spacing:-0.6px; margin:8px 0 6px; max-width:560px; line-height:1.3; } .sub { font-size:13px; color:#4d4f46; max-width:480px; line-height:1.43; margin:0 0 18px; } .row { display:flex; gap:14px; padding:0 40px; } .codecard { flex:1; background:#ffffff; border:1px solid #bfc1b7; border-radius:6px; padding:14px; font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-size:11px; line-height:1.6; color:#33342d; } .codecard .k { color:#7c44a6; } .codecard .s { color:#2c8c66; } .chartcard { flex:1; background:#ffffff; border:1px solid #bfc1b7; border-radius:6px; padding:14px; } .chartcard h5 { font-size:12px; font-weight:700; margin:0 0 10px; color:#23251d; } .bars { display:flex; align-items:flex-end; gap:6px; height:60px; } .bar { flex:1; border-radius:3px 3px 0 0; } .b1 { height:40%; background:#2c84e0; } .b2 { height:70%; background:#f7a501; } .b3 { height:55%; background:#2c8c66; } .b4 { height:90%; background:#cd4239; } .b5 { height:60%; background:#7c44a6; } footer { padding:16px 40px; font-size:11px; color:#6c6e63; display:flex; justify-content:space-between; margin-top:auto; } </style></head> <body> <div class="hog h1"><span class="spike"></span><span class="body"></span><span class="face"></span></div> <div class="hog h2"><span class="spike"></span><span class="body"></span><span class="face"></span></div> <nav> <p class="brand">PostHog</p> <div class="navlinks"><span>Product</span><span>Docs</span><span>Pricing</span></div> <button class="btn">Get started — free</button> </nav> <div class="wrap"> <h1>How developers build successful products</h1> <p class="sub">Product analytics, session replay, feature flags, and A/B testing — in one platform.</p> </div> <div class="row"> <div class="codecard"><span class="k">posthog</span>.capture(<span class="s">'user_signed_up'</span>, {<br>  plan: <span class="s">'growth'</span><br>})</div> <div class="chartcard"><h5>Weekly active users</h5> <div class="bars"><div class="bar b1"></div><div class="bar b2"></div><div class="bar b3"></div><div class="bar b4"></div><div class="bar b5"></div></div> </div> </div> <footer> <span>© PostHog</span> <span>Product · Docs · Pricing · Blog</span> </footer> </body></html>

<!doctype html> <html><head><meta charset="utf-8"> <style> :host, html, body { display:flex; flex-direction:column; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#f7f7f7; color:#2b2b2b; box-sizing:border-box; font-family:'Helvetica Neue',Arial,sans-serif; } * { box-sizing:border-box; } nav { height:60px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 38px; border-bottom:1px solid #dedede; } .brand { font-size:19px; font-weight:700; color:#1f3521; } .navlinks { display:flex; gap:24px; } .navlinks span { font-size:13px; font-weight:500; color:#2b2b2b; } .cart { background:#1f3521; color:#fff; font-size:12px; font-weight:500; padding:8px 16px; border-radius:8px; } .hero { display:flex; align-items:center; gap:32px; padding:26px 38px 20px; } .htext { max-width:400px; } .htext .kicker { font-size:11px; font-weight:700; color:#cc6328; text-transform:uppercase; letter-spacing:0.8px; margin-bottom:10px; } .htext h1 { font-family:'Georgia','Times New Roman',serif; font-size:30px; font-weight:700; color:#1f3521; margin:0 0 12px; line-height:1.3; } .htext p { font-size:14px; color:#2b2b2b; line-height:1.5; margin:0 0 16px; } .btn { display:inline-block; background:#1f3521; color:#fff; font-size:14px; font-weight:500; padding:11px 22px; border-radius:8px; } .heroimg { width:260px; height:170px; border-radius:12px; flex-shrink:0; background:linear-gradient(150deg,#cdec85,#1f3521 75%); position:relative; } .heroimg::after { content:'Made with Plants'; position:absolute; bottom:12px; left:14px; font-size:11px; font-weight:700; color:#fff; background:rgba(0,0,0,0.25); padding:4px 10px; border-radius:999px; } .section { padding:0 38px; } .section h2 { font-family:'Georgia',serif; font-size:19px; font-weight:700; color:#1f3521; margin:0 0 14px; } .grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .card { background:#ffffff; border-radius:12px; padding:12px; } .cover { height:80px; border-radius:8px; margin-bottom:8px; } .g1 .cover { background:#cdec85; } .g2 .cover { background:#aaf2f3; } .g3 .cover { background:#cc6328; } .g4 .cover { background:#bf339d; } .card .t { font-size:13px; font-weight:500; color:#303030; margin:0 0 4px; } .card .p { font-size:13px; font-weight:700; color:#1f3521; } .trust { margin-top:auto; flex-shrink:0; display:flex; padding:12px 38px; background:#eeeeee; } .trust span { flex:1; text-align:center; font-size:11px; font-weight:500; color:#1f3521; } </style></head> <body> <nav> <div class="brand">Grove Collaborative</div> <div class="navlinks"><span>Cleaning</span><span>Personal Care</span><span>Home</span><span>Bundles</span></div> <div class="cart">Cart · 5</div> </nav> <div class="hero"> <div class="htext"> <div class="kicker">Plastic-free since day one</div> <h1>Home essentials, made with plants.</h1> <p>A well-edited pantry of natural cleaning and personal-care products — sustainability that whispers, not shouts.</p> <span class="btn">Build Your Bundle</span> </div> <div class="heroimg"></div> </div> <div class="section"> <h2>Shop the Essentials</h2> <div class="grid"> <div class="card g1"><div class="cover"></div><div class="t">Multi-Surface Spray</div><div class="p">$5.95</div></div> <div class="card g2"><div class="cover"></div><div class="t">Dish Soap, Lavender</div><div class="p">$4.95</div></div> <div class="card g3"><div class="cover"></div><div class="t">Hand Wash Set</div><div class="p">$12.95</div></div> <div class="card g4"><div class="cover"></div><div class="t">Laundry Detergent</div><div class="p">$18.95</div></div> </div> </div> <div class="trust"><span>Carbon Neutral Shipping</span><span>Made in USA</span><span>30-Day Guarantee</span></div> </body></html>

mdSIGNDesign Mockups 2579건

브랜드 DESIGN.md 를 실제 화면으로

전 세계 저장소의 DESIGN.md 를 그대로 HTML/CSS 목업으로 구현했습니다.

학교안심 시간표

커피 한 잔이면 오늘 하루도 그럭저럭 버틸 수 있을 것 같다.

폰트Fonts 2264건

google/fonts 를 실제 굵기로

대표 폰트를 실제 웹폰트로 미리 보고 그 자리에서 내려받습니다.