Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
H
He
Li
Be
B
C
N
O
F
Ne
Na
Mg
Al
Si
P
S
Cl
Ar
K
Ca
Sc
Ti
V
Cr
Mn
Fe
Co
Ni
Cu
Zn
Ga
Ge
As
Se
Br
Kr
Rb
Sr
Y
Zr
Nb
Mo
Tc
Ru
Rh
Pd
Ag
Cd
In
Sn
Sb
Te
I
Xe
Cs
Ba
La
Ce
Pr
Nd
Pm
Sm
Eu
Gd
Tb
Dy
Ho
Er
Tm
Yb
Lu
Hf
Ta
W
Re
Os
Ir
Pt
Au
Hg
Tl
Pb
Bi
Po
At
Rn
Fr
Ra
Ac
Th
Pa
U
Np
Pu
Am
Cm
Bk
Cf
Es
Fm
Md
No
Lr
Rf
Db
Sg
Bh
Hs
Mt
Ds
Rg
Cn
Nh
Fl
Mc
Lv
Ts
Og
Filter
All
Alkali Metals
Alkaline Earth Metals
Transition Metals
Post-Transition Metals
Metalloids (Semimetals)
Reactive Non-Metals
Halogens
Noble Gases
Lanthanides
Actinides
Heisenberg
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } body { --scale: 1.3; font-family: system-ui, sans-serif; margin: .25em; padding: 0; } fieldset { border: 1px dashed color-mix(in srgb, currentColor, transparent 60%); display: grid; font-size: small; gap: .5ch; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); max-inline-size: 70ch; margin: 2em auto; padding: 1ch; } ol { all: unset; container-type: inline-size; counter-reset: element; display: grid; font-size: 2cqi; gap: 1px; grid-template-columns: repeat(18, 1fr); grid-template-rows: repeat(10, 1fr); /* Element name and abbreviation */ abbr { display: grid; font-weight: 500; grid-area: 2 / 1 / 4 / 3; line-height: 1; text-align: center; text-decoration: none; &::after { content: attr(title); display: block; font-size: 0.33em; font-weight: 400; place-self: end center; } } /* Element Box */ li { aspect-ratio: 1 / 1; background: #EEE; counter-increment: element; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; padding: .25ch; transition: scale .125s ease-in; &::before { content: counter(element); } &::after { content: attr(data-mass); grid-area: 1 / 2 / 2 / 2; justify-self: end; } &::before, &::after { font-size: .33em; } @media (hover: hover) { &:hover { box-shadow: 0 0 0 .25px #000; scale: var(--scale); } } /* Layout */ &:nth-of-type(2) { grid-column: 18; } &:nth-of-type(5), &:nth-of-type(13) { grid-column: 13; } /* Lanthenides */ &:nth-of-type(58) { grid-area: 9 / 4 / 9/ 4; } &:nth-of-type(59) { grid-area: 9 / 5 / 9/ 5; } &:nth-of-type(60) { grid-area: 9 / 6 / 9/ 6; } &:nth-of-type(61) { grid-area: 9 / 7 / 9/ 7; } &:nth-of-type(62) { grid-area: 9 / 8 / 9/ 8; } &:nth-of-type(63) { grid-area: 9 / 9 / 9/ 9; } &:nth-of-type(64) { grid-area: 9 / 10 / 9 / 10; } &:nth-of-type(65) { grid-area: 9 / 11 / 9 / 11; } &:nth-of-type(66) { grid-area: 9 / 12 / 9 / 12; } &:nth-of-type(67) { grid-area: 9 / 13 / 9 / 13; } &:nth-of-type(68) { grid-area: 9 / 14 / 9 / 14; } &:nth-of-type(69) { grid-area: 9 / 15 / 9 / 15; } &:nth-of-type(70) { grid-area: 9 / 16 / 9 / 16; } &:nth-of-type(71) { grid-area: 9 / 17 / 9 / 17; } /* Actinides */ &:nth-of-type(90) { grid-area: 10 / 4 / 10 / 4; } &:nth-of-type(91) { grid-area: 10 / 5 / 10 / 5; } &:nth-of-type(92) { grid-area: 10 / 6 / 10 / 6; } &:nth-of-type(93) { grid-area: 10 / 7 / 10 / 7; } &:nth-of-type(94) { grid-area: 10 / 8 / 10 / 8; } &:nth-of-type(95) { grid-area: 10 / 9 / 10 / 9; } &:nth-of-type(96) { grid-area: 10 / 10 / 10 / 10; } &:nth-of-type(97) { grid-area: 10 / 11 / 10 / 11; } &:nth-of-type(98) { grid-area: 10 / 12 / 10 / 12; } &:nth-of-type(99) { grid-area: 10 / 13 / 10 / 13; } &:nth-of-type(100) { grid-area: 10 / 14 / 10 / 14; } &:nth-of-type(101) { grid-area: 10 / 15 / 10 / 15; } &:nth-of-type(102) { grid-area: 10 / 16 / 10 / 16; } &:nth-of-type(103) { grid-area: 10 / 17 / 10 / 17; } } } /* Filter */ body:has(#alk:checked) li:not(.alk), body:has(#aec:checked) li:not(.aec), body:has(#trn:checked) li:not(.trn), body:has(#trm:checked) li:not(.trm), body:has(#met:checked) li:not(.met), body:has(#rnm:checked) li:not(.rnm), body:has(#hln:checked) li:not(.hln), body:has(#nbl:checked) li:not(.nbl), body:has(#lan:checked) li:not(.lan), body:has(#act:checked) li:not(.act) { opacity: 0.2; } /* Heisenberg Mode */ body:has(#brb:checked) { background: radial-gradient(circle, hsl(90, 67%, 22%) 10%, hsl(84, 71%, 7%) 40%, hsl(90, 100%, 8%) 100%); background-size: cover; color: #FFFFFF; li:not(:nth-of-type(35),:nth-of-type(56)) { --scale: 1; background-color: hsla(113, 40%, 4%, .5); color: hsla(120, 6%, 26%, .85); } :is(li:nth-of-type(35),li:nth-of-type(56)) { background: linear-gradient(135deg, #3E8467, #101F15); scale: var(--scale); } } /* Alkali Metals */ .alk { background-color: #ff6666; } /* Alkaline Earth Metals */ .aec { background-color: #ffdead; } /* Transition Metals */ .trn { background-color: #add8e6; } /* Post-Transition Metals */ .trm { background-color: #cccccc; } /* Metalloids (Semimetals) */ .met { background-color: #cccc99; } /* Reactive Non-Metals */ .rnm { background-color: #99ff99; } /* Halogens */ .hln { background-color: #ffff99; } /* Noble Gases */ .nbl { background-color: #ffb3e6; } /* Lanthanides */ .lan { background-color: #ffb366; } /* Actinides */ .act { background-color: #ff99cc; }
console.log("Event Fired")