A Pen by Envato Tuts+ on CodePen.
Sadik Mussah smussah
smussah
/ how-to-enhance-your-website-layouts-with-svg-shapes.markdown
Created
April 18, 2021 10:52
How to Enhance Your Website Layouts With SVG Shapes
Simple 3D plane hover effect using CSS3 transform
A Pen by Sadik Mussah on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="wraper"> | |
| <div class="background background_1"> | |
| <div class="container"> | |
| <h1> | |
| What is Lorem Ipsum? | |
| </h1> | |
| <p> | |
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. | |
| </p> | |
| </div> |
HTML/SCSS/JS Dynamic CSS classes for labels based on input field's value.
Fork on Github: https://github.com/northerli/Contact-Form-Template
A Pen by Sadik Mussah on CodePen.
smussah
/ bootstrap-navbar-change-active-class-link.markdown
Created
December 10, 2018 02:15
Bootstrap Navbar Change Active Class Link
smussah
/ floating-video-on-page-scroll.markdown
Last active
November 30, 2018 02:18
Floating Video on Page Scroll
A Pen by Sadik Mussah on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="page"> | |
| <div class="video-wrap"> | |
| <div class="video"> | |
| <iframe width="600" height="340" src="https://www.youtube.com/embed/pfqkRYSs4Rg" frameborder="0" gesture="media" allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| <div class="content"> | |
| <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi blanditiis recusandae distinctio optio commodi tenetur quisquam qui porro, aliquid inventore perferendis quibusdam at! Quisquam illum distinctio eveniet corrupti cupiditate quis?</p> | |
saw @loktar00 do this and wanted to give it a try using some of his techniques.
Looks ok to me. Better performance with 10K and at full screen.
A Pen by Sadik Mussah on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <canvas id='scene'></canvas> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| Click and drag to attract | |
| Right click to repulse | |
| Mouse-wheel click to create a time dilation field | |
| Use the Controls to decrease or increase | |
| the particle count to tweak performance. | |
| --> | |
| <canvas id="swarm"></canvas> |
NewerOlder