css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

One of the classic layouts used on onepage


  1. is there a possibility of adding touch events to make it mobile-friendly?

  2. @thecahuna Its intended to use only css, for that you would need to use js, so it wont do the job. You can check the one page scroll by Pete design.

  3. Impressive & clever use of form inputs!

  4. but mouse scroll should work as well. no?

  5. clever stuff!

  6. i found this so convenient i was just learnin jade :)

    here's my version with mouse scroll as well http://codepen.io/codeinstein/pen/VjqyXJ

  7. @codeinstein Awesome! Thanks for that, I´ll probably be using your versión some time.

  8. @hrtzt Awesome boss! Thanks for the pen once again

  9. Awesome thank you ! Do you know how to make it compatible with other browsers ?

  10. @Guduche I asume you mean ie and edge, I havent dig into that but you can try this one https://github.com/peachananr/onepage-scroll/blob/master/README.md by Pete R. ;)

  11. @hrtzt thank you ! I'll look this

  12. Hi Alberto! Cool Pen - any chance this could be made responsive to work on smartphones? And combined with a responsive nav menu?

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.