Built a glassmorphisim Periodic table using CSS grid. This is a project idea for my upcoming blog about:
"How to build complex layouts using CSS grid (Position & Span property)"
This is a project that will test your CSS grid ability in building complex layouts.
- HTML
- CSS
- How to span and position grid elements.
- Quick hack for spacing grid columns apart.
- Emmet shortcut for creating multiple HTML lines of code.
- How to style a
GlassmorphisimUI
These are a few things I recommend you should checkout if you're interested in this project.
Frontendmentor challenges.
| Color | Hex |
|---|---|
| Non-metals |  #00B6BC |
| Transition metal |  #4fbb62 |
| Post transition metals |  #F53951 |
| Alkaline earth | #00B6BC |
| Metalloid |  #ffa500 |
| Halogen |  #ff4500 |
| Noble gas |  #ce07ad |
| Lanthanides | #ce07ad |
| Actinides | #00B6BC |
| Box |  #ffffff80 |