DEV Community

Prakhar Tandon
Prakhar Tandon

Posted on • Originally published at

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

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.

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

You can connect with me here

Discussion (0)