Home
Practice
Find Jobs
Copy Codes
Sign In
Copy Codes
Preview and copy ready-to-use UI snippets: navbars, buttons, forms, cards, and brand blocks.
Navbars
Buttons
Forms
Cards
Brand/Logo
Navbars
Sticky Navbar (Site Theme)
HTML
CSS
Responsive
Preview
Open in new tab
Copy code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Navbar</title> <style> :root{ --brand:#680202; --brand2:#8b0b0b; --text:#fff } body{margin:0;font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial} .new-navbar{position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;background:var(--brand);padding:10px 14px} .new-navbar .logo img{height:38px;border-radius:6px} .new-navbar .nav-links{list-style:none;display:flex;gap:12px;margin:0;padding:0} .new-navbar .nav-links a{color:var(--text);text-decoration:none;font-weight:600} .new-navbar .nav-actions{display:flex;gap:10px;align-items:center} .hamburger{display:inline-flex;flex-direction:column;gap:4px;background:none;border:0} .hamburger span{display:block;width:22px;height:2px;background:#fff} @media(max-width:760px){ .new-navbar .nav-links{display:none} } </style> </head> <body> <nav class="new-navbar" role="navigation"> <div class="logo"><a href="#"><img src="images/coding with tawfiq.jpg" alt="Logo"></a></div> <button class="hamburger" aria-label="Menu"><span></span><span></span><span></span></button> <ul class="nav-links"> <li><a href="#">Home</a></li> <li><a href="#">Practice</a></li> <li><a href="#">Find Jobs</a></li> </ul> <div class="nav-actions"> <a class="card-link" href="#">Sign In</a> </div> </nav> <script defer src="/assets/ads.js"></script> </body> </html>
Buttons
Primary + Ghost Buttons
HTML
CSS
Preview
Open in new tab
Copy code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Buttons</title> <style> :root{ --brand:#680202; --text:#fff } body{margin:0;display:grid;place-items:center;height:100vh;background:#fff4f4;font-family:system-ui, -apple-system} .btn{padding:10px 16px;border-radius:10px;border:0;font-weight:800;cursor:pointer;margin:6px} .btn-primary{background:var(--brand);color:var(--text)} .btn-ghost{background:#fff;color:var(--brand);border:2px solid var(--brand)} .btn-primary:hover{filter:brightness(1.08)} .btn-ghost:hover{background:#fff0f0} </style> </head> <body> <button class="btn btn-primary">Primary</button> <button class="btn btn-ghost">Ghost</button> </body> </html>
Forms
Compact Sign-in Form
HTML
CSS
Accessible
Preview
Open in new tab
Copy code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Sign in</title> <style> :root{ --brand:#680202 } body{margin:0;min-height:100vh;display:grid;place-items:center;background:#fff4f4;font-family:system-ui, -apple-system} .card{background:#fff;border-radius:14px;padding:18px;box-shadow:0 6px 20px rgba(0,0,0,.08);width:320px;border:1px solid #eee} h2{margin:0 0 10px} label{display:block;margin:10px 0 6px;font-weight:600} input{width:100%;padding:10px;border-radius:8px;border:1px solid #ccc} .actions{display:flex;justify-content:space-between;align-items:center;margin-top:12px} .btn{padding:10px 16px;border-radius:10px;border:0;font-weight:800;cursor:pointer} .btn-primary{background:var(--brand);color:#fff} a{color:var(--brand);text-decoration:none} </style> </head> <body> <div class="card" role="form" aria-label="Sign in form"> <h2>Welcome back</h2> <label for="email">Email</label> <input id="email" type="email" placeholder="name@example.com" required /> <label for="pass">Password</label> <input id="pass" type="password" placeholder="Your password" required /> <div class="actions"> <a href="#">Forgot password?</a> <button class="btn btn-primary" type="submit">Sign in</button> </div> </div> </body> </html>
Content Cards
Info Card (Site Theme)
HTML
CSS
Preview
Open in new tab
Copy code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Info Card</title> <style> body{margin:0;display:grid;place-items:center;min-height:100vh;background:#120404;font-family:system-ui,-apple-system} .info-card{max-width:680px;width:92%;background:linear-gradient(145deg,#680202,#8b0b0b);color:#fff;border-radius:18px;padding:22px;border:1px solid rgba(255,255,255,.15);box-shadow:0 8px 26px rgba(0,0,0,.35)} .info-card h3{margin:0 0 8px} .info-card p{opacity:.95;line-height:1.7} a.card-link{display:inline-block;margin-top:10px;color:#fff;text-decoration:underline} a.card-link:hover{color:#ffdede} </style> </head> <body> <div class="info-card"> <h3>Lesson Title</h3> <p>Short description goes here. Use this card for announcements, lessons, or resource blocks.</p> <a class="card-link" href="#">Open</a> </div> </body> </html>
Brand/Logo Block
Brand Header with Logo
HTML
CSS
Preview
Open in new tab
Copy code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Brand</title> <style> body{margin:0;font-family:system-ui, -apple-system} .brand{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#680202;color:#fff} .brand img{height:44px;border-radius:8px} .brand .name{font-size:1.1rem;font-weight:800} </style> </head> <body> <header class="brand"> <img src="images/coding with tawfiq.jpg" alt="Logo"> <div class="name">Coding with Tawfiq</div> </header> </body> </html>