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

·

1 min read

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

Â