Skip to content

Instantly share code, notes, and snippets.

View w3collective's full-sized avatar

w3collective

28 followers · 0 following
View GitHub Profile
@w3collective
w3collective / css-profile-images.html
Created February 20, 2021 00:47
Ways to use CSS to enhance user profile images
<!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 / flip-card-css.html
Created March 5, 2021 04:12
Animated flip card using CSS 3D transforms
<!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 / dropdown-mega-menu.html
Last active January 27, 2022 20:20
Dropdown mega menu with pure CSS
<!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 / skeleton-loading-screen.html
Created March 25, 2021 04:57
CSS skeleton loading screen animation
<!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 / html-css-tooltip.html
Last active April 13, 2021 00:15
HTML tooltip on hover using CSS
<!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 / save-data-localstorage.html
Created May 31, 2021 01:10
Save data in localStorage using JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Save data in localStorage using JavaScript</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form id="note-form">
@w3collective
w3collective / bootstrap-landing-page.html
Created June 2, 2021 01:01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous"
@w3collective
w3collective / copy-clipboard-js.html
Created June 21, 2021 04:58
Copy text to the system clipboard on click with JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>JavaScript copy text to clipboard on click</title>
</head>
<body>
<label for="key-txt">Secret Key</label>
<input
@w3collective
w3collective / alpine-dropdown.html
Created June 28, 2021 05:46
Building a dropdown menu using Alpine.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Alpine.js - Dropdown menu</title>
<style>
.rotated {
transform: rotate(90deg);
display: inline-block;
@w3collective
w3collective / preview-input-file-image.html
Created June 28, 2021 23:46
Preview selected image (input type=”file”) using JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Preview selected image (input type=”file”) using JavaScript</title>
<style>
body {
padding: 1em 0 0 1em;
}