Skip to content

Instantly share code, notes, and snippets.

View kazz54's full-sized avatar

kazz54

16 followers · 103 following
View GitHub Profile
@kazz54
kazz54 / index.html
Created August 31, 2021 16:15
Responsive Grid Demo
<div class="container">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main><h2>A Demo Site showcasing CSS Grid</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque pariatur possimus alias quod ratione incidunt dicta assumenda repudiandae optio eveniet, quisquam fuga! Nam eaque fuga similique quia, esse non libero?</p>
@kazz54
kazz54 / css-grid-layout-define-the-12-column-grid.markdown
Created September 1, 2021 08:28
CSS Grid Layout. Define the 12 column grid
@kazz54
kazz54 / css-grid-layout-a-quick-start-guide-ii.markdown
Created September 1, 2021 09:24
CSS Grid Layout: A Quick Start Guide ii
@kazz54
kazz54 / index.html
Created September 1, 2021 12:45
Rapid Prototyping with CSS Grid - a Basic Template
<body>
<div class="grid-container">
<nav>
<ul class="grid-nav-main">
<li><a href="">Home</a></li>
<li><a href="">Products</a></li>
<li><a href="">Features</a></li>
<li><a href="">About</a></li>
<li><a href="">Find us</a></li>
<li><a href="">Contact</a></li>
@kazz54
kazz54 / index.html
Created September 1, 2021 13:29
Skateboard Video Platform
<div class="container">
<div class="sidebar">
<span class="logo">S</span>
<a class="logo-expand" href="#">skateboard</a>
<div class="side-wrapper">
<div class="side-title">MENU</div>
<div class="side-menu">
<a class="sidebar-link discover is-active" href="#">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M9.135 20.773v-3.057c0-.78.637-1.414 1.423-1.414h2.875c.377 0 .74.15 1.006.414.267.265.417.625.417 1v3.057c-.002.325.126.637.356.867.23.23.544.36.87.36h1.962a3.46 3.46 0 002.443-1 3.41 3.41 0 001.013-2.422V9.867c0-.735-.328-1.431-.895-1.902l-6.671-5.29a3.097 3.097 0 00-3.949.072L3.467 7.965A2.474 2.474 0 002.5 9.867v8.702C2.5 20.464 4.047 22 5.956 22h1.916c.68 0 1.231-.544 1.236-1.218l.027-.009z" />
@kazz54
kazz54 / index.html
Created September 1, 2021 16:06
Order-summary-card
<body>
<div class="card">
<img src="https://i.postimg.cc/NF61bF2v/illustration-hero.png" alt="hero">
<h2>Order Summary</h2>
<p>You can now listen to millions of songs, audiobooks, and podcasts on any
device anywhere you like!</p>
<div>
@kazz54
kazz54 / index.html
Created September 1, 2021 16:24
Rapid Prototyping with CSS Grid - a Basic Template
<body>
<div class="grid-container">
<nav>
<ul class="grid-nav-main">
<li><a href="">Home</a></li>
<li><a href="">Products</a></li>
<li><a href="">Features</a></li>
<li><a href="">About</a></li>
<li><a href="">Find us</a></li>
<li><a href="">Contact</a></li>
@kazz54
kazz54 / index.html
Created November 9, 2021 10:39
Simple HTML/CSS Contact Form
<div class="container">
<form id="contact" action="" method="post">
<h3>Colorlib Contact Form</h3>
<h4>Contact us for custom quote</h4>
<fieldset>
<input placeholder="Your name" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input placeholder="Your Email Address" type="email" tabindex="2" required>
</fieldset>
@kazz54
kazz54 / dashboard.markdown
Created March 7, 2022 17:14
Dashboard
@kazz54
kazz54 / form-wizard-with-validation.markdown
Created March 8, 2022 02:00
Form Wizard with Validation