Use Codepen.io to Design and Publish Your Best Web Animations

Codepen.io is an interactive website where users design and post online projects that showcase to the public what kinds of animations and interactive elements can be rendered natively by web browsers without the need to load any previously animated video or Flash files. Site visitors can look at a project page -- which is referred to as a "pen" created by a specific author -- to see and interact with the results of syntax that exists entirely within HTML, CSS, and JavaScript files working in unison. Through the "change view" setting, the syntax creating the effect can be displayed concurrently alongside the effect itself, and users can make temporary changes to the syntax and see how the effect being rendered by the browser would be affected by the different code.
In this project by Jon Kantner, HTML and CSS code are the only syntax necessary to produce a perfect recreation of the Scantron answer sheets that are commonly used at schools and other educational institutions to administer multiple-choice tests for students. The CSS Grid Layout syntax used in the CSS file is employed to make sure that every individual element and piece of text displayed on the screen is completely authentic to how Scantron sheets are arranged in the real world.
One of the more distinct elements of the project is that, unlike many other projects hosted on CodePen, none of the interactive elements even use JavaScript syntax. Separate types of "Input" syntax in both the HTML and CSS sections collaborate to allow visitors to click an answer and fill it in as if a number 2 pencil had been used to do so. Clicking on a second answer in the same row will cause the first answer to disappear from that row at the same time. There is an option to turn the recreated sheet ninety degrees to the left, and there are even fields that let visitors type information such as their names and the current date. There are also three instances where small numbers can be either incremented or decremented by pressing arrow buttons in either direction. For more information click here https://codepen.io/jkantner/full/MGMMVo/.