Netlify Hackathon 🔥 Project Fully Responsive Documentation Page using Pure CSS.

Hey everyone⚡

Here's my entry for the Netlify Hackathon !

Category - Dev Tools / Productivity.

Here's the link to the project PT's CSS Documentation And this is the GitHub Repo

Insipiration and Idea💡

Recently I was learning about responsive web-designing. So I thought of making something from scratch and with pure vanilla CSS only.

The Project👨‍💻

• As it is a documentation page, it's in dark mode.
• Its made with colour-combinations that are good for reading and pleasant to our eyes as well.
• Website is fully responsive and works well on devices of all aspect ratios.
• Used some subtle animations, made using pure CSS.

Some features that I implemented for the first time.

• Used VantaJS for the Welcome Banner Background Animation.
• Used custom curser, applied a svg icon on the cursor using the CSS cursor property.
• The script counts the number of elements in the NavBar, and hence animations will be added automatically to a new section in the NavBar.

Updates to the project

16 Feb

• Added a custom scroll bar, that integrates with the colour theme of the page.
• Added support for firefox as well.

Do have a look at the project, and comment down your suggestions for the same.

You can connect with me here