Skip to content

Instantly share code, notes, and snippets.

@w3collective
w3collective / html-css-tooltip.html
Last active Apr 13, 2021
HTML tooltip on hover using CSS
View html-css-tooltip.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Tooltip</title>
<style>
body {
padding: 10%;
}
@w3collective
w3collective / skeleton-loading-screen.html
Created Mar 25, 2021
CSS skeleton loading screen animation
View skeleton-loading-screen.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Skeleton loading screen</title>
<style>
.video:empty {
width: 315px;
height: 250px;
@w3collective
w3collective / dropdown-mega-menu.html
Last active Mar 11, 2021
Dropdown mega menu with pure CSS
View dropdown-mega-menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dropdown mega menu with pure CSS</title>
<style>
.menu {
display: flex;
margin: 0;
@w3collective
w3collective / flip-card-css.html
Created Mar 5, 2021
Animated flip card using CSS 3D transforms
View flip-card-css.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Animated flip card with CSS 3D transforms</title>
<style>
body {
padding: 30px;
background-color: lightyellow;
@w3collective
w3collective / css-profile-images.html
Created Feb 20, 2021
Ways to use CSS to enhance user profile images
View css-profile-images.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>5 Stylish ways to use CSS to enhance user profile images</title>
<style>
html {
height: 100%;
}
body {
@w3collective
w3collective / html-form-validation.html
Created Feb 18, 2021
Client side HTML form validation without JavaScript
View html-form-validation.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML Form Validation</title>
<style>
body {
font-family: sans-serif;
}
legend {
@w3collective
w3collective / pricing-table-flexbox.html
Created Feb 10, 2021
3 column pricing table layout with CSS flexbox
View pricing-table-flexbox.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>3 column pricing table layout with CSS flexbox</title>
<style>
body {
background-color: #181b1d;
font-family: sans-serif;
}
@w3collective
w3collective / tailwind-pricing-table.html
Last active Feb 9, 2021
Responsive pricing table with Tailwind CSS
View tailwind-pricing-table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Responsive Pricing Table - Tailwind CSS</title>
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
@w3collective
w3collective / reading-progress-indicator.html
Created Feb 9, 2021
Reading progress indicator (on scroll) in JavaScript
View reading-progress-indicator.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Create a reading progress indicator (on scroll) in JavaScript</title>
<style>
#progress-bar {
position: fixed;
top: 0;
left: 0;
@w3collective
w3collective / dynamic-favicon.js
Last active Feb 10, 2021
Change a website favicon dynamically using JavaScript
View dynamic-favicon.js
const [month, day] = new Date().toLocaleDateString("en-US").split("/");
let favicon;
switch (month + day) {
case "214":
favicon = "💕";
break;
case "1031":
favicon = "🎃";
break;