PROVIDES A PLATFORM FOR EDUCATORS TO PUBLISH, VIEW AND SHARE EDUCATIONAL CONTENT TO VARIOUS AUDIENCES.
PLATFORM PROVIDES STUDENTS AN EXTERNAL CLASSROOM FOR STUDENTS TO ENROLL FOR EXTRA CURRICULAR STUDIES ONLINE
<style>
/* CSS Vertical Parallax */
* { -moz-box-sizing: border-box; box-sizing: border-box; }
.parallax-e3 {-webkit-perspective: 100px; perspective: 100px; height: 100vh; overflow-x: hidden; overflow-y: auto; position: absolute; top: 0; left: 50%; right: 0; bottom: 0; margin-left: -50%; }
.layer-p1-e3 { -webkit-transform: translateY(-1000px) translateZ(-600px) scale(7); transform: translateY(-1000px) translateZ(-600px) scale(7); }
.layer-p2-e3 { -webkit-transform: translateY(-1200px) translateZ(-500px) scale(6); transform: translateY(-1200px) translateZ(-500px) scale(6); }
.layer-p3-e3 { -webkit-transform: translateY(-50px) translateZ(-200px) scale(3); transform: translateY(-50px) translateZ(-200px) scale(3); }
.layer-p4-e3 { -webkit-transform: translateY(210px) translateZ(-150px) scale(2.5); transform: translateY(210px) translateZ(-150px) scale(2.5); }
.layer-p5-e3 { -webkit-transform: translateY(240px) translateZ(-100px) scale(2); transform: translateY(240px) translateZ(-100px) scale(2); }
.layer-p6-e3 { -webkit-transform: translateY(54px) translateZ(-50px) scale(1.5); transform: translateY(54px) translateZ(-50px) scale(1.5); }
.layer-p7-e3 { -webkit-transform: translateY(38px) translateZ(-25px) scale(1.25); transform: translateY(38px) translateZ(-25px) scale(1.25); }
</style>
The structure in Webflow is as follow:
This code and structure comes from an experiment on CodePen by Jim Thornton.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.