A Pen by Vashon Gonzales on CodePen.
Ashon Gonzales Ashon-G
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
| <svg class="d-card" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 368"> | |
| <defs> | |
| <mask id="chipMask"> | |
| <rect width="100%" height="100%" fill="#fff"/> | |
| <path fill="none" stroke="#000" stroke-width="3" d="M98,133c0,0,4.3,0,7.2,0c2.8,0,3.8,2,3.8,4s-1,6-4,6H89 M109,176.2c0,0,3.5-2.7,3.5-8.7c0-4-4-10-9-10 s-15,0-15,0 M103.5,143.5V156 M136.8,133c0,0-7.3-0.5-7.1,5c0.1,2.6,1.8,5.5,6.3,5.5c5.3-0.1,14.9-0.5,14.9-0.5 M150.4,157.5 c0,0-10.1,0-15.1,0s-9.1,6-9.1,10c0,6,3.5,8.7,3.5,8.7 M135.3,143.5V156"/> | |
| </mask> | |
| <mask id="cardMask"> | |
| <rect rx="20" ry="20" fill="#fff" width="600" height="368"/> | |
| </mask> |
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
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body { | |
| height: 100%; | |
| width: 100%; |
Ashon-G
/ stripeg.css
Last active
August 29, 2023 11:34
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 class="canvas-item" id="gradient-canvas"> | |
| <style> | |
| #gradient-canvas { | |
| --gradient-color-1: #1b45b4; | |
| --gradient-color-2: #1c2792; | |
| --gradient-color-3: #267dff; | |
| --gradient-color-4: #3898ec; | |
| } |
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="container"> | |
| <div id="cursor"> | |
| <div id="circle"></div> | |
| </div> | |
| <br> | |
| </br> | |
| <div id="infographic" class="d-flex flex-column align-items-center py-5"> | |
| <div class="step one text-primary"> | |
| <div class="circle"> |
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 id="cursor"> | |
| <div id="circle"></div> | |
| </div> | |
| <br> | |
| </br> | |
| <div id="infographic" class="d-flex flex-column align-items-center py-5"> | |
| <div class="step one text-primary"> | |
| <div class="circle"> | |
| <i class="fas fa-meteor"></i> |
SCSS practice
A Pen by Vashon Gonzales on CodePen.
Ashon-G
/ gsap-scroll-animation-svg-clip-path.markdown
Created
July 31, 2023 01:41
GSAP - Scroll animation - Svg clip path
SOTD Challenge : Insprired by 2 Authenticators website animation (SOTD, Apr 11, 2023)
A Pen by Vashon Gonzales 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
| <!DOCTYPE html> | |
| <!-- This site was created in Webflow. https://www.webflow.com --> | |
| <!-- Last Published: Sun Nov 06 2022 18:23:48 GMT+0000 (Coordinated Universal Time) --> | |
| <html data-wf-domain="fojcikdominik.webflow.io" data-wf-page="62b86b827713d80a7f9fcd65" data-wf-site="621b82fec7a99d5915ba8dc5" lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Bankous</title> | |
| <link href="https://uploads-ssl.webflow.com/621b82fec7a99d5915ba8dc5/css/fojcikdominik.webflow.eb4e6e9cb.css" rel="stylesheet" type="text/css" /> |
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
| <!-- jQuery library --> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <!-- minicolors plugin --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.3.5/jquery.minicolors.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.3.5/jquery.minicolors.min.css"> | |
| <div class="row snipcss-Qz3bf"> | |
| <div class="col-md-3 offset-md-2"> | |
| <p class=""> |