forked from root/public
lee
1 year ago
committed by
LEEDASILVA
30 changed files with 883 additions and 855 deletions
@ -0,0 +1,61 @@
|
||||
|
||||
:root { |
||||
--background: hsl(0, 0%, 12%); |
||||
--text: hsl(0, 0%, 80%); |
||||
--clear: hsl(0, 0%, 65%); |
||||
--disabled: hsl(0, 0%, 35%); |
||||
--purple: #bb73e6; |
||||
} |
||||
|
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
font-family: sans-serif; |
||||
letter-spacing: 1.5px; |
||||
background: var(--background); |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
align-content: flex-end; |
||||
height: 100vh; |
||||
color: var(--text); |
||||
padding: 10vh 36.5vw; |
||||
} |
||||
|
||||
div { |
||||
text-align: center; |
||||
font-size: 10px; |
||||
width: 9vw; |
||||
display: inline-flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 4.44vh; |
||||
background: linear-gradient(-25deg, var(--clear) 30%, var(--disabled) 90%); |
||||
} |
||||
|
||||
#tools { |
||||
position: fixed; |
||||
right: 100px; |
||||
font-size: 80px; |
||||
cursor: pointer; |
||||
user-select: none; |
||||
} |
||||
|
||||
[data-repaired='true'] { |
||||
color: hsl(275, 100%, 50%); |
||||
} |
||||
|
||||
[data-repaired='true']:after { |
||||
content: '-repaired'; |
||||
} |
||||
|
||||
[data-repaired='in progress'] { |
||||
color: black; |
||||
} |
||||
|
||||
[data-repaired='in progress']:after { |
||||
content: '-in progress'; |
||||
} |
||||
@ -1,108 +1,49 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
|
||||
<head> |
||||
<title>Build brick and break</title> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
||||
<style type="text/css"> |
||||
:root { |
||||
--background: hsl(0, 0%, 12%); |
||||
--text: hsl(0, 0%, 80%); |
||||
--clear: hsl(0, 0%, 65%); |
||||
--disabled: hsl(0, 0%, 35%); |
||||
--purple: #bb73e6; |
||||
} |
||||
|
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
font-family: sans-serif; |
||||
letter-spacing: 1.5px; |
||||
background: var(--background); |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
align-content: flex-end; |
||||
height: 100vh; |
||||
color: var(--text); |
||||
padding: 10vh 36.5vw; |
||||
} |
||||
|
||||
div { |
||||
text-align: center; |
||||
font-size: 10px; |
||||
width: 9vw; |
||||
display: inline-flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 4.44vh; |
||||
background: linear-gradient(-25deg, var(--clear) 30%, var(--disabled) 90%); |
||||
} |
||||
|
||||
#tools { |
||||
position: fixed; |
||||
right: 100px; |
||||
font-size: 80px; |
||||
cursor: pointer; |
||||
user-select: none; |
||||
} |
||||
|
||||
[data-repaired='true'] { |
||||
color: hsl(275, 100%, 50%); |
||||
} |
||||
|
||||
[data-repaired='true']:after { |
||||
content: '-repaired'; |
||||
} |
||||
|
||||
[data-repaired='in progress'] { |
||||
color: black; |
||||
} |
||||
|
||||
[data-repaired='in progress']:after { |
||||
content: '-in progress'; |
||||
} |
||||
|
||||
</style> |
||||
<link rel="stylesheet" type="text/css" href="./build-brick-and-break.css"> |
||||
</head> |
||||
|
||||
<body> |
||||
<script type="module"> |
||||
import { build, repair, destroy } from './build-brick-and-break.js' |
||||
import { build, repair, destroy } from './build-brick-and-break.js' |
||||
|
||||
build(54) |
||||
build(54) |
||||
|
||||
const body = document.querySelector('body') |
||||
const body = document.querySelector('body') |
||||
|
||||
const tools = document.createElement('section') |
||||
tools.id = 'tools' |
||||
body.append(tools) |
||||
const tools = document.createElement('section') |
||||
tools.id = 'tools' |
||||
body.append(tools) |
||||
|
||||
const dynamite = document.createElement('span') |
||||
dynamite.id = 'dynamite' |
||||
dynamite.textContent = '🧨' |
||||
dynamite.addEventListener('click', destroy) |
||||
const dynamite = document.createElement('span') |
||||
dynamite.id = 'dynamite' |
||||
dynamite.textContent = '🧨' |
||||
dynamite.addEventListener('click', destroy) |
||||
|
||||
const hammer = document.createElement('span') |
||||
hammer.id = 'hammer' |
||||
hammer.textContent = '🔨' |
||||
hammer.addEventListener('click', () => repair(...reparations)) |
||||
const hammer = document.createElement('span') |
||||
hammer.id = 'hammer' |
||||
hammer.textContent = '🔨' |
||||
hammer.addEventListener('click', () => repair(...reparations)) |
||||
|
||||
tools.append(dynamite, hammer) |
||||
tools.append(dynamite, hammer) |
||||
|
||||
const random = (min, max) => { |
||||
min = Math.ceil(min) |
||||
max = Math.floor(max) |
||||
return Math.floor(Math.random() * (max - min + 1)) + min |
||||
} |
||||
const random = (min, max) => { |
||||
min = Math.ceil(min) |
||||
max = Math.floor(max) |
||||
return Math.floor(Math.random() * (max - min + 1)) + min |
||||
} |
||||
|
||||
const randomBricks = [...Array(15).keys()].map((e) => `brick-${random(1, 54)}`) |
||||
const reparations = [...new Set(['brick-26', ...randomBricks])] |
||||
const randomBricks = [...Array(15).keys()].map((e) => `brick-${random(1, 54)}`) |
||||
const reparations = [...new Set(['brick-26', ...randomBricks])] |
||||
|
||||
body.dataset.reparations = reparations |
||||
body.dataset.reparations = reparations |
||||
|
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -0,0 +1,35 @@
|
||||
|
||||
:root { |
||||
--background: hsl(0, 0%, 12%); |
||||
--text: hsl(0, 0%, 80%); |
||||
--clear: hsl(0, 0%, 65%); |
||||
--disabled: hsl(0, 0%, 35%); |
||||
--purple: #bb73e6; |
||||
} |
||||
|
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
font-family: sans-serif; |
||||
letter-spacing: 1.5px; |
||||
background: var(--background); |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: center; |
||||
align-content: center; |
||||
width: 100vw; |
||||
padding: 5rem; |
||||
font-size: 12px; |
||||
} |
||||
|
||||
div { |
||||
cursor: pointer; |
||||
width: 150px; |
||||
height: 150px; |
||||
margin: 20px; |
||||
padding: 5px 8px; |
||||
} |
||||
@ -1,61 +1,28 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
|
||||
<head> |
||||
<title>Fifty shades of cold</title> |
||||
<title>Fifty shades of cold</title> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
||||
<style> |
||||
|
||||
:root { |
||||
--background: hsl(0, 0%, 12%); |
||||
--text: hsl(0, 0%, 80%); |
||||
--clear: hsl(0, 0%, 65%); |
||||
--disabled: hsl(0, 0%, 35%); |
||||
--purple: #bb73e6; |
||||
} |
||||
|
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
font-family: sans-serif; |
||||
letter-spacing: 1.5px; |
||||
background: var(--background); |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: center; |
||||
align-content: center; |
||||
width: 100vw; |
||||
padding: 5rem; |
||||
font-size: 12px; |
||||
} |
||||
|
||||
div { |
||||
cursor: pointer; |
||||
width: 150px; |
||||
height: 150px; |
||||
margin: 20px; |
||||
padding: 5px 8px; |
||||
} |
||||
|
||||
</style> |
||||
<link rel="stylesheet" type="text/css" href="./fifty-shades-of-cold.css"> |
||||
|
||||
</head> |
||||
|
||||
<body> |
||||
<script type="module"> |
||||
|
||||
import { generateClasses, generateColdShades, choseShade } from './fifty-shades-of-cold.js' |
||||
import { generateClasses, generateColdShades, choseShade } from './fifty-shades-of-cold.js' |
||||
|
||||
generateClasses() |
||||
generateColdShades() |
||||
generateClasses() |
||||
generateColdShades() |
||||
|
||||
const divs = [...document.querySelectorAll('div')] |
||||
divs.map((d) => { |
||||
d.addEventListener('click', () => choseShade(d.textContent)) |
||||
}) |
||||
const divs = [...document.querySelectorAll('div')] |
||||
divs.map((d) => { |
||||
d.addEventListener('click', () => choseShade(d.textContent)) |
||||
}) |
||||
|
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -0,0 +1,87 @@
|
||||
|
||||
:root { |
||||
--background: hsl(0, 0%, 12%); |
||||
--text: hsl(0, 0%, 80%); |
||||
--clear: hsl(0, 0%, 65%); |
||||
--disabled: hsl(0, 0%, 35%); |
||||
--purple: #bb73e6; |
||||
} |
||||
|
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
font-family: sans-serif; |
||||
letter-spacing: 1.5px; |
||||
background: var(--background); |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
padding: 100px; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 15px; |
||||
margin-top: 150px; |
||||
} |
||||
|
||||
button { |
||||
outline: none; |
||||
border: none; |
||||
} |
||||
|
||||
#buttons { |
||||
position: fixed; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 100%; |
||||
top: 0; |
||||
height: 150px; |
||||
background: var(--background); |
||||
box-shadow: 0 0 50px black; |
||||
} |
||||
|
||||
#buttons * { |
||||
margin: 0 20px; |
||||
padding: 10px 20px; |
||||
background: var(--clear); |
||||
border-radius: 20px; |
||||
cursor: pointer; |
||||
user-select: none; |
||||
width: 200px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.disabled { |
||||
pointer-events: none; |
||||
opacity: 0.3; |
||||
} |
||||
|
||||
a, |
||||
span { |
||||
min-width: 110px; |
||||
min-height: 110px; |
||||
width: 5vw; |
||||
height: 5vw; |
||||
border-radius: 50%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
flex-direction: column; |
||||
text-align: center; |
||||
border: solid 1px var(--clear); |
||||
line-height: 22px; |
||||
padding: 10px; |
||||
color: var(--clear); |
||||
margin: 30px; |
||||
} |
||||
|
||||
.found { |
||||
box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.6), |
||||
-10px -10px 15px rgba(255, 255, 255, 0.074); |
||||
border: none; |
||||
background: var(--purple); |
||||
color: var(--background); |
||||
} |
||||
@ -1,179 +1,93 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
|
||||
<head> |
||||
<title>Get them all</title> |
||||
<title>Get them all</title> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
||||
<style> |
||||
|
||||
:root { |
||||
--background: hsl(0, 0%, 12%); |
||||
--text: hsl(0, 0%, 80%); |
||||
--clear: hsl(0, 0%, 65%); |
||||
--disabled: hsl(0, 0%, 35%); |
||||
--purple: #bb73e6; |
||||
} |
||||
|
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
font-family: sans-serif; |
||||
letter-spacing: 1.5px; |
||||
background: var(--background); |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
padding: 100px; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 15px; |
||||
margin-top: 150px; |
||||
} |
||||
|
||||
button { |
||||
outline: none; |
||||
border: none; |
||||
} |
||||
|
||||
#buttons { |
||||
position: fixed; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 100%; |
||||
top: 0; |
||||
height: 150px; |
||||
background: var(--background); |
||||
box-shadow: 0 0 50px black; |
||||
} |
||||
|
||||
#buttons * { |
||||
margin: 0 20px; |
||||
padding: 10px 20px; |
||||
background: var(--clear); |
||||
border-radius: 20px; |
||||
cursor: pointer; |
||||
user-select: none; |
||||
width: 200px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.disabled { |
||||
pointer-events: none; |
||||
opacity: 0.3; |
||||
} |
||||
|
||||
a, |
||||
span { |
||||
min-width: 110px; |
||||
min-height: 110px; |
||||
width: 5vw; |
||||
height: 5vw; |
||||
border-radius: 50%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
flex-direction: column; |
||||
text-align: center; |
||||
border: solid 1px var(--clear); |
||||
line-height: 22px; |
||||
padding: 10px; |
||||
color: var(--clear); |
||||
margin: 30px; |
||||
} |
||||
|
||||
.found { |
||||
box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.6), |
||||
-10px -10px 15px rgba(255, 255, 255, 0.074); |
||||
border: none; |
||||
background: var(--purple); |
||||
color: var(--background); |
||||
} |
||||
|
||||
</style> |
||||
<link rel="stylesheet" type="text/css" href="./get-them-all.css"> |
||||
</head> |
||||
|
||||
<body> |
||||
<script type="module"> |
||||
|
||||
import { people } from './get-them-all.data.js' |
||||
import { |
||||
getBonannoPisano, |
||||
getActive, |
||||
getArchitects, |
||||
getClassical, |
||||
} from './get-them-all.js' |
||||
|
||||
const body = document.querySelector('body') |
||||
|
||||
const shuffle = (array) => { |
||||
const test = array.length - 1 |
||||
for (let i = test; i > 0; i--) { |
||||
const j = Math.floor(Math.random() * i) |
||||
const temp = array[i] |
||||
array[i] = array[j] |
||||
array[j] = temp |
||||
} |
||||
return array |
||||
} |
||||
|
||||
shuffle(people).map(({ id, classe, address, plans, tag, active }) => { |
||||
const people = document.createElement(tag) |
||||
people.id = id |
||||
people.textContent = 'Someone' |
||||
people.className = `${classe} ${active ? 'active' : ''}` |
||||
body.append(people) |
||||
}) |
||||
|
||||
const buttonsContainer = document.createElement('div') |
||||
buttonsContainer.id = 'buttons' |
||||
body.append(buttonsContainer) |
||||
|
||||
const buttons = [ |
||||
{ name: 'Architect', action: getArchitects }, |
||||
{ name: 'Classical', action: getClassical }, |
||||
{ name: 'Active', action: getActive }, |
||||
{ name: 'Bonanno', action: getBonannoPisano }, |
||||
] |
||||
|
||||
buttons.forEach(({ name, action }, i) => { |
||||
const btn = document.createElement('button') |
||||
btn.id = `btn${name}` |
||||
btn.textContent = `Get ${name}${i === 0 ? 's' : ''}` |
||||
|
||||
if (i > 0) { |
||||
btn.className = 'disabled' |
||||
} |
||||
|
||||
btn.addEventListener('click', () => { |
||||
const [targetted, others] = action() |
||||
|
||||
if (name === 'Bonanno') { |
||||
targetted.textContent = targetted.id.replace('P', ' P') |
||||
targetted.classList.add('found') |
||||
} else { |
||||
targetted.forEach((t) => { |
||||
t.textContent = name |
||||
}) |
||||
import { people } from './get-them-all.data.js' |
||||
import { |
||||
getBonannoPisano, |
||||
getActive, |
||||
getArchitects, |
||||
getClassical, |
||||
} from './get-them-all.js' |
||||
|
||||
const body = document.querySelector('body') |
||||
|
||||
const shuffle = (array) => { |
||||
const test = array.length - 1 |
||||
for (let i = test; i > 0; i--) { |
||||
const j = Math.floor(Math.random() * i) |
||||
const temp = array[i] |
||||
array[i] = array[j] |
||||
array[j] = temp |
||||
} |
||||
return array |
||||
} |
||||
|
||||
others.forEach((o) => { |
||||
o.style.opacity = 0.2 |
||||
shuffle(people).map(({ id, classe, address, plans, tag, active }) => { |
||||
const people = document.createElement(tag) |
||||
people.id = id |
||||
people.textContent = 'Someone' |
||||
people.className = `${classe} ${active ? 'active' : ''}` |
||||
body.append(people) |
||||
}) |
||||
|
||||
btn.className = 'disabled' |
||||
|
||||
const last = i + 1 === buttons.length |
||||
if (last) return |
||||
const next = document.getElementById(`btn${buttons[i + 1].name}`) |
||||
next.classList.remove('disabled') |
||||
}) |
||||
const buttonsContainer = document.createElement('div') |
||||
buttonsContainer.id = 'buttons' |
||||
body.append(buttonsContainer) |
||||
|
||||
const buttons = [ |
||||
{ name: 'Architect', action: getArchitects }, |
||||
{ name: 'Classical', action: getClassical }, |
||||
{ name: 'Active', action: getActive }, |
||||
{ name: 'Bonanno', action: getBonannoPisano }, |
||||
] |
||||
|
||||
buttons.forEach(({ name, action }, i) => { |
||||
const btn = document.createElement('button') |
||||
btn.id = `btn${name}` |
||||
btn.textContent = `Get ${name}${i === 0 ? 's' : ''}` |
||||
|
||||
if (i > 0) { |
||||
btn.className = 'disabled' |
||||
} |
||||
|
||||
btn.addEventListener('click', () => { |
||||
const [targetted, others] = action() |
||||
|
||||
if (name === 'Bonanno') { |
||||
targetted.textContent = targetted.id.replace('P', ' P') |
||||
targetted.classList.add('found') |
||||
} else { |
||||
targetted.forEach((t) => { |
||||
t.textContent = name |
||||
}) |
||||
} |
||||
|
||||
others.forEach((o) => { |
||||
o.style.opacity = 0.2 |
||||
}) |
||||
|
||||
btn.className = 'disabled' |
||||
|
||||
const last = i + 1 === buttons.length |
||||
if (last) return |
||||
const next = document.getElementById(`btn${buttons[i + 1].name}`) |
||||
next.classList.remove('disabled') |
||||
}) |
||||
|
||||
buttonsContainer.append(btn) |
||||
}) |
||||
buttonsContainer.append(btn) |
||||
}) |
||||
|
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -0,0 +1,115 @@
|
||||
|
||||
:root { |
||||
--background: hsl(0, 0%, 12%); |
||||
--text: hsl(0, 0%, 80%); |
||||
--clear: hsl(0, 0%, 65%); |
||||
--disabled: hsl(0, 0%, 35%); |
||||
--purple: #bb73e6; |
||||
} |
||||
|
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
font-family: sans-serif; |
||||
letter-spacing: 1.5px; |
||||
background: var(--background); |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: center; |
||||
width: 100vw; |
||||
height: 100vh; |
||||
padding: 10rem; |
||||
align-items: flex-start; |
||||
} |
||||
|
||||
.gossip { |
||||
background: hsl(280, 50%, 50%); |
||||
margin: 20px; |
||||
width: 250px; |
||||
padding: 20px 25px; |
||||
line-height: 30px; |
||||
font-size: 20px; |
||||
word-break: break-word; |
||||
color: white; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.gossip:first-letter { |
||||
text-transform: uppercase; |
||||
} |
||||
|
||||
.ranges { |
||||
position: fixed; |
||||
top: 5rem; |
||||
display: flex; |
||||
} |
||||
|
||||
.range { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
color: var(--clear); |
||||
font-family: monospace; |
||||
} |
||||
|
||||
.range label, |
||||
.range span { |
||||
width: 100px; |
||||
} |
||||
|
||||
.range label { |
||||
text-align: right; |
||||
} |
||||
|
||||
input { |
||||
margin: 20px 25px; |
||||
} |
||||
|
||||
textarea { |
||||
height: 100%; |
||||
width: 100%; |
||||
max-width: 100%; |
||||
outline: none; |
||||
border: none; |
||||
font-family: inherit; |
||||
font-size: inherit; |
||||
line-height: inherit; |
||||
letter-spacing: inherit; |
||||
color: inherit; |
||||
background-color: transparent; |
||||
padding: 0; |
||||
margin: 0; |
||||
resize: none; |
||||
} |
||||
|
||||
textarea::placeholder { |
||||
color: rgba(255, 255, 255, 0.5); |
||||
} |
||||
|
||||
button { |
||||
margin-top: 20px; |
||||
text-align: right; |
||||
border: solid 1px white; |
||||
align-self: flex-end; |
||||
padding: 5px 15px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.fade-in { |
||||
animation: fade-in 0.75s; |
||||
} |
||||
|
||||
@keyframes fade-in { |
||||
from { |
||||
opacity: 0%; |
||||
} |
||||
to { |
||||
opacity: 100%; |
||||
} |
||||
} |
||||
@ -1,135 +1,21 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
|
||||
<head> |
||||
<title>Gossip grid</title> |
||||
<title>Gossip grid</title> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
||||
<style> |
||||
|
||||
:root { |
||||
--background: hsl(0, 0%, 12%); |
||||
--text: hsl(0, 0%, 80%); |
||||
--clear: hsl(0, 0%, 65%); |
||||
--disabled: hsl(0, 0%, 35%); |
||||
--purple: #bb73e6; |
||||
} |
||||
|
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
font-family: sans-serif; |
||||
letter-spacing: 1.5px; |
||||
background: var(--background); |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: center; |
||||
width: 100vw; |
||||
height: 100vh; |
||||
padding: 10rem; |
||||
align-items: flex-start; |
||||
} |
||||
|
||||
.gossip { |
||||
background: hsl(280, 50%, 50%); |
||||
margin: 20px; |
||||
width: 250px; |
||||
padding: 20px 25px; |
||||
line-height: 30px; |
||||
font-size: 20px; |
||||
word-break: break-word; |
||||
color: white; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.gossip:first-letter { |
||||
text-transform: uppercase; |
||||
} |
||||
|
||||
.ranges { |
||||
position: fixed; |
||||
top: 5rem; |
||||
display: flex; |
||||
} |
||||
|
||||
.range { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
color: var(--clear); |
||||
font-family: monospace; |
||||
} |
||||
|
||||
.range label, |
||||
.range span { |
||||
width: 100px; |
||||
} |
||||
|
||||
.range label { |
||||
text-align: right; |
||||
} |
||||
|
||||
input { |
||||
margin: 20px 25px; |
||||
} |
||||
|
||||
textarea { |
||||
height: 100%; |
||||
width: 100%; |
||||
max-width: 100%; |
||||
outline: none; |
||||
border: none; |
||||
font-family: inherit; |
||||
font-size: inherit; |
||||
line-height: inherit; |
||||
letter-spacing: inherit; |
||||
color: inherit; |
||||
background-color: transparent; |
||||
padding: 0; |
||||
margin: 0; |
||||
resize: none; |
||||
} |
||||
|
||||
textarea::placeholder { |
||||
color: rgba(255, 255, 255, 0.5); |
||||
} |
||||
|
||||
button { |
||||
margin-top: 20px; |
||||
text-align: right; |
||||
border: solid 1px white; |
||||
align-self: flex-end; |
||||
padding: 5px 15px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.fade-in { |
||||
animation: fade-in 0.75s; |
||||
} |
||||
|
||||
@keyframes fade-in { |
||||
from { |
||||
opacity: 0%; |
||||
} |
||||
to { |
||||
opacity: 100%; |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
<link rel="stylesheet" type="text/css" href="./gossip-grid.css"> |
||||
</head> |
||||
|
||||
<body> |
||||
<script type="module"> |
||||
|
||||
import { grid } from './gossip-grid.js' |
||||
import { grid } from './gossip-grid.js' |
||||
|
||||
grid() |
||||
grid() |
||||
|
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -0,0 +1,37 @@
|
||||
|
||||
:root { |
||||
--background: hsl(0, 0%, 12%); |
||||
--text: hsl(0, 0%, 80%); |
||||
--clear: hsl(0, 0%, 65%); |
||||
--disabled: hsl(0, 0%, 35%); |
||||
--purple: #bb73e6; |
||||
} |
||||
|
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
font-family: sans-serif; |
||||
letter-spacing: 1.5px; |
||||
background: var(--background); |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: center; |
||||
align-content: center; |
||||
width: 100vw; |
||||
padding: 5rem; |
||||
font-size: 12px; |
||||
} |
||||
|
||||
div { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
margin: 5px; |
||||
width: 200px; |
||||
height: 200px; |
||||
color: white; |
||||
} |
||||
@ -1,57 +1,21 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
|
||||
<head> |
||||
<title>Harder, bigger, bolder, stronger</title> |
||||
<title>Harder, bigger, bolder, stronger</title> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
||||
<style> |
||||
|
||||
:root { |
||||
--background: hsl(0, 0%, 12%); |
||||
--text: hsl(0, 0%, 80%); |
||||
--clear: hsl(0, 0%, 65%); |
||||
--disabled: hsl(0, 0%, 35%); |
||||
--purple: #bb73e6; |
||||
} |
||||
|
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
font-family: sans-serif; |
||||
letter-spacing: 1.5px; |
||||
background: var(--background); |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: center; |
||||
align-content: center; |
||||
width: 100vw; |
||||
padding: 5rem; |
||||
font-size: 12px; |
||||
} |
||||
|
||||
div { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
margin: 5px; |
||||
width: 200px; |
||||
height: 200px; |
||||
color: white; |
||||
} |
||||
|
||||
</style> |
||||
<link rel="stylesheet" type="text/css" href="./build-brick-and-break.css"> |
||||
</head> |
||||
|
||||
<body> |
||||
<script type="module"> |
||||
|
||||
import { generateLetters } from './harder-bigger-bolder-stronger.js' |
||||
import { generateLetters } from './harder-bigger-bolder-stronger.js' |
||||
|
||||
generateLetters() |
||||
generateLetters() |
||||
|
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -0,0 +1,37 @@
|
||||
|
||||
:root { |
||||
--background: hsl(0, 0%, 12%); |
||||
--text: hsl(0, 0%, 80%); |
||||
--clear: hsl(0, 0%, 65%); |
||||
--disabled: hsl(0, 0%, 35%); |
||||
--purple: #bb73e6; |
||||
} |
||||
|
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
font-family: sans-serif; |
||||
letter-spacing: 1.5px; |
||||
background: var(--background); |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
width: 100vw; |
||||
height: 100vh; |
||||
} |
||||
|
||||
.note { |
||||
width: 100%; |
||||
flex: 1 1 80px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
text-align: center; |
||||
padding: 15px; |
||||
font-size: 40px; |
||||
color: white; |
||||
transition: all 0.2s ease-in-out; |
||||
} |
||||
@ -1,57 +1,22 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
|
||||
<head> |
||||
<title>Keycodes symphony</title> |
||||
<title>Keycodes symphony</title> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
||||
<style> |
||||
|
||||
:root { |
||||
--background: hsl(0, 0%, 12%); |
||||
--text: hsl(0, 0%, 80%); |
||||
--clear: hsl(0, 0%, 65%); |
||||
--disabled: hsl(0, 0%, 35%); |
||||
--purple: #bb73e6; |
||||
} |
||||
|
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
font-family: sans-serif; |
||||
letter-spacing: 1.5px; |
||||
background: var(--background); |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
width: 100vw; |
||||
height: 100vh; |
||||
} |
||||
<link rel="stylesheet" type="text/css" href="./keycodes-symphony.css"> |
||||
|
||||
.note { |
||||
width: 100%; |
||||
flex: 1 1 80px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
text-align: center; |
||||
padding: 15px; |
||||
font-size: 40px; |
||||
color: white; |
||||
transition: all 0.2s ease-in-out; |
||||
} |
||||
|
||||
</style> |
||||
</head> |
||||
|
||||
<body> |
||||
<script type="module"> |
||||
|
||||
import { compose } from './keycodes-symphony.js' |
||||
import { compose } from './keycodes-symphony.js' |
||||
|
||||
compose() |
||||
compose() |
||||
|
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -0,0 +1,42 @@
|
||||
|
||||
:root { |
||||
--background: hsl(0, 0%, 12%); |
||||
--text: hsl(0, 0%, 80%); |
||||
--clear: hsl(0, 0%, 65%); |
||||
--disabled: hsl(0, 0%, 35%); |
||||
--purple: #bb73e6; |
||||
} |
||||
|
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
font-family: sans-serif; |
||||
letter-spacing: 1.5px; |
||||
background: var(--background); |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: center; |
||||
align-content: center; |
||||
width: 100vw; |
||||
height: 100vh; |
||||
padding: 5rem; |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.circle { |
||||
width: 50px; |
||||
height: 50px; |
||||
border-radius: 50%; |
||||
position: absolute; |
||||
opacity: 0.75; |
||||
} |
||||
|
||||
.box { |
||||
width: 25vw; |
||||
height: 25vh; |
||||
border: solid 1px var(--clear); |
||||
} |
||||
@ -1,63 +1,23 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
|
||||
<head> |
||||
<title>Mouse trap</title> |
||||
<title>Mouse trap</title> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
||||
<style> |
||||
:root { |
||||
--background: hsl(0, 0%, 12%); |
||||
--text: hsl(0, 0%, 80%); |
||||
--clear: hsl(0, 0%, 65%); |
||||
--disabled: hsl(0, 0%, 35%); |
||||
--purple: #bb73e6; |
||||
} |
||||
|
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
font-family: sans-serif; |
||||
letter-spacing: 1.5px; |
||||
background: var(--background); |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: center; |
||||
align-content: center; |
||||
width: 100vw; |
||||
height: 100vh; |
||||
padding: 5rem; |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.circle { |
||||
width: 50px; |
||||
height: 50px; |
||||
border-radius: 50%; |
||||
position: absolute; |
||||
opacity: 0.75; |
||||
} |
||||
|
||||
.box { |
||||
width: 25vw; |
||||
height: 25vh; |
||||
border: solid 1px var(--clear); |
||||
} |
||||
|
||||
</style> |
||||
<link rel="stylesheet" type="text/css" href="./mouse-trap.css"> |
||||
</head> |
||||
|
||||
<body> |
||||
<script type="module"> |
||||
|
||||
import { setBox, createCircle, moveCircle } from './mouse-trap.js' |
||||
import { setBox, createCircle, moveCircle } from './mouse-trap.js' |
||||
|
||||
setBox() |
||||
createCircle() |
||||
moveCircle() |
||||
setBox() |
||||
createCircle() |
||||
moveCircle() |
||||
|
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -0,0 +1,66 @@
|
||||
|
||||
:root { |
||||
--background: hsl(0, 0%, 12%); |
||||
--text: hsl(0, 0%, 80%); |
||||
--clear: hsl(0, 0%, 65%); |
||||
--disabled: hsl(0, 0%, 35%); |
||||
--purple: #bb73e6; |
||||
} |
||||
|
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
font-family: sans-serif; |
||||
letter-spacing: 1.5px; |
||||
background: var(--background); |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: center; |
||||
align-content: center; |
||||
width: 100vw; |
||||
height: 100vh; |
||||
padding: 5rem; |
||||
cursor: crosshair; |
||||
} |
||||
|
||||
svg { |
||||
filter: invert(100%); |
||||
position: fixed; |
||||
width: 100vw; |
||||
height: 100vh; |
||||
top: 0; |
||||
left: 0; |
||||
} |
||||
|
||||
svg line { |
||||
stroke-width: 0.6px; |
||||
stroke: grey; |
||||
} |
||||
|
||||
.text { |
||||
position: fixed; |
||||
filter: invert(100%); |
||||
font-size: 50px; |
||||
cursor: pointer; |
||||
white-space: pre-wrap; |
||||
} |
||||
|
||||
.hsl { |
||||
filter: invert(100%); |
||||
font-size: 17px; |
||||
} |
||||
|
||||
.hue { |
||||
top: 100px; |
||||
right: 100px; |
||||
text-align: right; |
||||
} |
||||
|
||||
.luminosity { |
||||
bottom: 100px; |
||||
left: 100px; |
||||
} |
||||
@ -1,86 +1,21 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
|
||||
<head> |
||||
<title>Pick & click</title> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
||||
<style> |
||||
|
||||
:root { |
||||
--background: hsl(0, 0%, 12%); |
||||
--text: hsl(0, 0%, 80%); |
||||
--clear: hsl(0, 0%, 65%); |
||||
--disabled: hsl(0, 0%, 35%); |
||||
--purple: #bb73e6; |
||||
} |
||||
|
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
font-family: sans-serif; |
||||
letter-spacing: 1.5px; |
||||
background: var(--background); |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: center; |
||||
align-content: center; |
||||
width: 100vw; |
||||
height: 100vh; |
||||
padding: 5rem; |
||||
cursor: crosshair; |
||||
} |
||||
|
||||
svg { |
||||
filter: invert(100%); |
||||
position: fixed; |
||||
width: 100vw; |
||||
height: 100vh; |
||||
top: 0; |
||||
left: 0; |
||||
} |
||||
|
||||
svg line { |
||||
stroke-width: 0.6px; |
||||
stroke: grey; |
||||
} |
||||
|
||||
.text { |
||||
position: fixed; |
||||
filter: invert(100%); |
||||
font-size: 50px; |
||||
cursor: pointer; |
||||
white-space: pre-wrap; |
||||
} |
||||
|
||||
.hsl { |
||||
filter: invert(100%); |
||||
font-size: 17px; |
||||
} |
||||
|
||||
.hue { |
||||
top: 100px; |
||||
right: 100px; |
||||
text-align: right; |
||||
} |
||||
|
||||
.luminosity { |
||||
bottom: 100px; |
||||
left: 100px; |
||||
} |
||||
|
||||
</style> |
||||
<link rel="stylesheet" type="text/css" href="./pick-and-click.css"> |
||||
</head> |
||||
|
||||
<body> |
||||
<script type="module"> |
||||
|
||||
import { pick } from './pick-and-click.js' |
||||
import { pick } from './pick-and-click.js' |
||||
|
||||
pick() |
||||
pick() |
||||
|
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -0,0 +1,154 @@
|
||||
|
||||
:root { |
||||
--background: hsl(0, 0%, 12%); |
||||
--text: hsl(0, 0%, 80%); |
||||
--clear: hsl(0, 0%, 65%); |
||||
--disabled: hsl(0, 0%, 35%); |
||||
--purple: #bb73e6; |
||||
} |
||||
|
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
font-family: sans-serif; |
||||
letter-spacing: 1.5px; |
||||
background: var(--background); |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: center; |
||||
align-content: center; |
||||
width: 100vw; |
||||
height: 100vh; |
||||
color: var(--text); |
||||
padding: 2.5rem 0; |
||||
} |
||||
|
||||
button { |
||||
user-select: none; |
||||
letter-spacing: 0; |
||||
color: white; |
||||
outline: none; |
||||
border: none; |
||||
} |
||||
|
||||
.button:first-letter { |
||||
text-transform: uppercase; |
||||
} |
||||
|
||||
.button.unpimp:before { |
||||
content: 'Un'; |
||||
} |
||||
|
||||
.button { |
||||
background: var(--background); |
||||
font-family: serif; |
||||
width: 70%; |
||||
text-align: center; |
||||
} |
||||
|
||||
.one { |
||||
font-size: 75px; |
||||
} |
||||
|
||||
.two { |
||||
font-family: sans-serif; |
||||
} |
||||
|
||||
.three { |
||||
letter-spacing: 15px; |
||||
} |
||||
|
||||
.four { |
||||
padding: 20px 40px; |
||||
border: solid 1px var(--clear); |
||||
} |
||||
|
||||
.five { |
||||
border-radius: 100px; |
||||
} |
||||
|
||||
.six { |
||||
border: none; |
||||
box-shadow: 8px 8px 15px rgba(255, 255, 255, 0.075), |
||||
-10px -10px 15px rgba(0, 0, 0, 0.3); |
||||
} |
||||
|
||||
.seven { |
||||
color: var(--purple); |
||||
} |
||||
|
||||
.eight { |
||||
border: solid 0.5px var(--purple); |
||||
} |
||||
|
||||
.nine { |
||||
background: var(--purple); |
||||
color: white; |
||||
position: relative; |
||||
box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.8); |
||||
} |
||||
|
||||
.ten:after { |
||||
position: absolute; |
||||
content: ''; |
||||
width: 100%; |
||||
height: 100%; |
||||
padding: 15px; |
||||
top: -16px; |
||||
left: -16px; |
||||
border-radius: 100px; |
||||
border: solid 1px var(--clear); |
||||
} |
||||
|
||||
.eleven:after { |
||||
position: absolute; |
||||
content: ''; |
||||
padding: 30px; |
||||
top: -31px; |
||||
left: -31px; |
||||
background: white; |
||||
z-index: -1; |
||||
} |
||||
|
||||
.twelve { |
||||
color: var(--background); |
||||
} |
||||
|
||||
.thirteen { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
.fourteen { |
||||
animation: animation 1.5s linear infinite; |
||||
background: linear-gradient( |
||||
to right, |
||||
var(--purple) 0%, |
||||
white 48%, |
||||
white 52%, |
||||
var(--purple) 100% |
||||
); |
||||
background-size: 500px 640px; |
||||
position: relative; |
||||
} |
||||
|
||||
@keyframes animation { |
||||
0% { |
||||
background-position: 0 0; |
||||
} |
||||
100% { |
||||
background-position: 500px 0; |
||||
} |
||||
} |
||||
|
||||
.fifteen { |
||||
height: 100vh; |
||||
width: 100vw; |
||||
border-radius: 0; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
@ -1,181 +1,28 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
|
||||
<head> |
||||
<title>Pimp my style</title> |
||||
<title>Pimp my style</title> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
||||
<style> |
||||
|
||||
:root { |
||||
--background: hsl(0, 0%, 12%); |
||||
--text: hsl(0, 0%, 80%); |
||||
--clear: hsl(0, 0%, 65%); |
||||
--disabled: hsl(0, 0%, 35%); |
||||
--purple: #bb73e6; |
||||
} |
||||
|
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
font-family: sans-serif; |
||||
letter-spacing: 1.5px; |
||||
background: var(--background); |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: center; |
||||
align-content: center; |
||||
width: 100vw; |
||||
height: 100vh; |
||||
color: var(--text); |
||||
padding: 2.5rem 0; |
||||
} |
||||
|
||||
button { |
||||
user-select: none; |
||||
letter-spacing: 0; |
||||
color: white; |
||||
outline: none; |
||||
border: none; |
||||
} |
||||
|
||||
.button:first-letter { |
||||
text-transform: uppercase; |
||||
} |
||||
|
||||
.button.unpimp:before { |
||||
content: 'Un'; |
||||
} |
||||
|
||||
.button { |
||||
background: var(--background); |
||||
font-family: serif; |
||||
width: 70%; |
||||
text-align: center; |
||||
} |
||||
|
||||
.one { |
||||
font-size: 75px; |
||||
} |
||||
|
||||
.two { |
||||
font-family: sans-serif; |
||||
} |
||||
|
||||
.three { |
||||
letter-spacing: 15px; |
||||
} |
||||
|
||||
.four { |
||||
padding: 20px 40px; |
||||
border: solid 1px var(--clear); |
||||
} |
||||
|
||||
.five { |
||||
border-radius: 100px; |
||||
} |
||||
|
||||
.six { |
||||
border: none; |
||||
box-shadow: 8px 8px 15px rgba(255, 255, 255, 0.075), |
||||
-10px -10px 15px rgba(0, 0, 0, 0.3); |
||||
} |
||||
|
||||
.seven { |
||||
color: var(--purple); |
||||
} |
||||
|
||||
.eight { |
||||
border: solid 0.5px var(--purple); |
||||
} |
||||
|
||||
.nine { |
||||
background: var(--purple); |
||||
color: white; |
||||
position: relative; |
||||
box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.8); |
||||
} |
||||
|
||||
.ten:after { |
||||
position: absolute; |
||||
content: ''; |
||||
width: 100%; |
||||
height: 100%; |
||||
padding: 15px; |
||||
top: -16px; |
||||
left: -16px; |
||||
border-radius: 100px; |
||||
border: solid 1px var(--clear); |
||||
} |
||||
|
||||
.eleven:after { |
||||
position: absolute; |
||||
content: ''; |
||||
padding: 30px; |
||||
top: -31px; |
||||
left: -31px; |
||||
background: white; |
||||
z-index: -1; |
||||
} |
||||
|
||||
.twelve { |
||||
color: var(--background); |
||||
} |
||||
|
||||
.thirteen { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
.fourteen { |
||||
animation: animation 1.5s linear infinite; |
||||
background: linear-gradient( |
||||
to right, |
||||
var(--purple) 0%, |
||||
white 48%, |
||||
white 52%, |
||||
var(--purple) 100% |
||||
); |
||||
background-size: 500px 640px; |
||||
position: relative; |
||||
} |
||||
|
||||
@keyframes animation { |
||||
0% { |
||||
background-position: 0 0; |
||||
} |
||||
100% { |
||||
background-position: 500px 0; |
||||
} |
||||
} |
||||
|
||||
.fifteen { |
||||
height: 100vh; |
||||
width: 100vw; |
||||
border-radius: 0; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
</style> |
||||
<link rel="stylesheet" type="text/css" href="./pimp-my-style.css"> |
||||
</head> |
||||
|
||||
<body> |
||||
<script type="module"> |
||||
|
||||
import { pimp } from './pimp-my-style.js' |
||||
import { pimp } from './pimp-my-style.js' |
||||
|
||||
const body = document.querySelector('body') |
||||
const body = document.querySelector('body') |
||||
|
||||
const button = document.createElement('button') |
||||
button.className = 'button' |
||||
button.textContent = 'pimp my style' |
||||
body.append(button) |
||||
const button = document.createElement('button') |
||||
button.className = 'button' |
||||
button.textContent = 'pimp my style' |
||||
body.append(button) |
||||
|
||||
button.addEventListener('click', pimp) |
||||
button.addEventListener('click', pimp) |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
|
||||
</html> |
||||
@ -0,0 +1,56 @@
|
||||
|
||||
:root { |
||||
--background: hsl(0, 0%, 12%); |
||||
--text: hsl(0, 0%, 80%); |
||||
--clear: hsl(0, 0%, 65%); |
||||
--disabled: hsl(0, 0%, 35%); |
||||
--purple: #bb73e6; |
||||
} |
||||
|
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
font-family: sans-serif; |
||||
letter-spacing: 1.5px; |
||||
background: var(--background); |
||||
} |
||||
|
||||
section { |
||||
height: 100vh; |
||||
width: 100vw; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.location { |
||||
position: fixed; |
||||
top: 0; |
||||
color: white; |
||||
width: 100vw; |
||||
height: 100vh; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: 100px; |
||||
line-height: 130px; |
||||
white-space: pre-wrap; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.direction { |
||||
position: fixed; |
||||
right: 100px; |
||||
top: 100px; |
||||
text-align: center; |
||||
font-size: 40px; |
||||
line-height: 60px; |
||||
color: white; |
||||
white-space: pre-wrap; |
||||
} |
||||
@ -1,72 +1,19 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
|
||||
<head> |
||||
<title>Where do we go?</title> |
||||
<title>Where do we go?</title> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
||||
<style> |
||||
:root { |
||||
--background: hsl(0, 0%, 12%); |
||||
--text: hsl(0, 0%, 80%); |
||||
--clear: hsl(0, 0%, 65%); |
||||
--disabled: hsl(0, 0%, 35%); |
||||
--purple: #bb73e6; |
||||
} |
||||
|
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
font-family: sans-serif; |
||||
letter-spacing: 1.5px; |
||||
background: var(--background); |
||||
} |
||||
|
||||
section { |
||||
height: 100vh; |
||||
width: 100vw; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.location { |
||||
position: fixed; |
||||
top: 0; |
||||
color: white; |
||||
width: 100vw; |
||||
height: 100vh; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: 100px; |
||||
line-height: 130px; |
||||
white-space: pre-wrap; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.direction { |
||||
position: fixed; |
||||
right: 100px; |
||||
top: 100px; |
||||
text-align: center; |
||||
font-size: 40px; |
||||
line-height: 60px; |
||||
color: white; |
||||
white-space: pre-wrap; |
||||
} |
||||
</style> |
||||
<link rel="stylesheet" type="text/css" href="./where-do-we-go.css"> |
||||
</head> |
||||
|
||||
<body> |
||||
<script type="module"> |
||||
import { explore } from './where-do-we-go.js' |
||||
import { explore } from './where-do-we-go.js' |
||||
|
||||
explore() |
||||
explore() |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
Loading…
Reference in new issue