https://github.com/Evavic44/Periodic-Table
Periodic table with CSS grid and glassmorphisim UI
https://github.com/Evavic44/Periodic-Table
html periodic-table
Last synced: 7 months ago
JSON representation
Periodic table with CSS grid and glassmorphisim UI
- Host: GitHub
- URL: https://github.com/Evavic44/Periodic-Table
- Owner: Evavic44
- Created: 2021-07-12T01:35:51.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-06-06T15:17:09.000Z (over 2 years ago)
- Last Synced: 2024-10-24T12:28:02.236Z (12 months ago)
- Topics: html, periodic-table
- Language: HTML
- Homepage: https://periodic-table-ui.netlify.app
- Size: 189 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Periodic Table with CSS
[](https://app.netlify.com/sites/periodic-table-ui/deploys)
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.
### Languages Used
- HTML
- CSS
### Things you'll learn
- 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 `Glassmorphisim` UI
### Recommendations
These are a few things I recommend you should checkout if you're interested in this project.
Frontendmentor challenges.
### Chemical group colors
| 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`|