Fully Responsive Documentation Page using Pure CSS.

#webdev #javascript #beginners #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

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more