| <div id="u_0_v"> | |
| <h1>Skeleton Shimmer</h1> | |
| <p>Light UI 1</p> | |
| <div class="lightui1"> | |
| <div class="lightui1-shimmer"> | |
| <div class="_2iwr"></div> | |
| <div class="_2iws"></div> | |
| <div class="_2iwt"></div> | |
| <div class="_2iwu"></div> | |
| <div class="_2iwv"></div> |
| <h1>Regex on input value</h1> | |
| <input id=demo> | |
| <p>This input will go red when the regular expression <code>/magic/gi</code> is met. So it should light up for any values that contain 'MAGIC' or 'magic'</p> | |
| <style process="load input"> | |
| ${/magic/gi.test(demo.value) && '#demo'} { | |
| background: red; | |
| } |
| .halloctober.p-flex | |
| .halloctober__banner.p-flex | |
| h1.typo Spooky | |
| .fog.p-circle | |
| //- If you change the h1 word, don't forget to also replace it in the CSS before/after pseudo elements created for the text-shadow effects. |
| <div class="board"> | |
| <div class="board-column todo"> | |
| <div class="board-column-header">To do</div> | |
| <div class="board-column-content-wrapper"> | |
| <div class="board-column-content"> | |
| <div class="board-item"><div class="board-item-content"><span>Item #</span>1</div></div> | |
| <div class="board-item"><div class="board-item-content"><span>Item #</span>2</div></div> | |
| <div class="board-item"><div class="board-item-content"><span>Item #</span>3</div></div> | |
| <div class="board-item"><div class="board-item-content"><span>Item #</span>4</div></div> | |
| <div class="board-item"><div class="board-item-content"><span>Item #</span>5</div></div> |
| <div class="container"> | |
| <h1>Hover My Links</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="">Voluptates</a> illum saepe, placeat ut <a href="">delectus</a> minima officiis. Inventore mollitia sapiente, aut est nesciunt perspiciatis, odio sunt ad <a href="">natus</a> labore, enim quod.</p> | |
| </div> |
A fantastic credit card form with smooth and sweet micro-interactions. Includes number formatting, validation and automatic card type detection. Built with vuejs and also fully responsive.
See on Github: https://github.com/muhammederdem/credit-card-form
A Pen by Muhammed Erdem on CodePen.
| @import "compass/css3"; | |
| //colors | |
| $white: #ffffff; | |
| $de_york_approx: rgba(124,191,144,1); | |
| $black_10: rgba(0,0,0,0.1); | |
| $oxley_approx: #72a882; | |
| $mine_shaft_approx: #333; | |
| $mine_shaft_70_approx: rgba(51,51,51,0.7); | |
| $storm_dust_80_approx: rgba(102,102,102,0.8); |
| <svg viewBox="0 0 1080 1080" style="isolation:isolate;" preserveAspectRatio="xMidYMax meet"> | |
| <g id="background"> | |
| <rect x="0" y="0" width="1080" height="1080" transform="matrix(1,0,0,1,0,0)" fill="rgb(170,134,122)" /> | |
| </g> | |
| <g id="txt"> | |
| <path d=" M 456.38 237.72 C 453.57 238.7 449.52 240.89 447.38 242.59 C 445.25 244.3 442 247.67 440.17 250.09 C 438.34 252.52 436.14 256.97 435.29 260 C 434.18 263.9 433.92 267.53 434.36 272.5 C 434.73 276.56 435.98 281.6 437.34 284.5 C 438.63 287.25 441.48 291.3 443.67 293.5 C 445.86 295.7 449.86 298.59 452.57 299.92 C 456.21 301.7 459.72 302.45 466 302.79 C 471.88 303.11 476.2 302.78 480 301.71 C 483.02 300.86 487.52 298.65 490 296.8 C 492.47 294.95 495.99 291.2 497.81 288.47 C 499.62 285.74 501.58 281.7 502.16 279.5 C 502.73 277.3 503.18 272.12 503.14 268 C 503.1 261.79 502.58 259.46 500.14 254.5 C 498.52 251.2 495.46 246.96 493.35 245.07 C 491.23 243.19 487.02 240.51 484 239.13 C 479.82 237.21 476.46 236.53 470 236.28 C 463.76 236.04 460.14 236.42 456.38 237.72 |
| <!-- Source YouTube: https://www.youtube.com/watch?v=22d-sC_dhRY --> | |
| <div class="container" id="container"> | |
| <div class="circle-container"> | |
| <div class="circle"> | |
| <button id="close"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <button id="open"> | |
| <i class="fas fa-bars"></i> |
A Pen by Saijo George on CodePen.