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
| <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"> |
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
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body { | |
| height: 100%; | |
| width: 100%; |
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
| <section class="dark-time"> | |
| <div class="container"> | |
| <h1 class="text">TAKES ME<span>WOAH</span></h1> | |
| <h1 class="text">BACK<span>WAY BACK</span></h1> | |
| <h1 class="text">TO A VERY<span>CRAZYYY</span></h1> | |
| <h1 class="text">DARK TIME<span><a href="https://stacksorted.com/text-effects/minh-pham" target="_blank">DARK AGES</a></span></h1> | |
| <h1 class="text">IN MY LIFE<span><a href="https://twitter.com/juxtopposed" target="_blank">READ ON</a></span></h1> | |
| </div> | |
| </section> |
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"> | |
| <article> | |
| <div class="glows"></div> | |
| <span class="header"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"> | |
| <path fill-rule="evenodd" d="M17.303 5.197A7.5 7.5 0 006.697 15.803a.75.75 0 01-1.061 1.061A9 9 0 1121 10.5a.75.75 0 01-1.5 0c0-1.92-.732-3.839-2.197-5.303zm-2.121 2.121a4.5 4.5 0 00-6.364 6.364.75.75 0 11-1.06 1.06A6 6 0 1118 10.5a.75.75 0 01-1.5 0c0-1.153-.44-2.303-1.318-3.182zm-3.634 1.314a.75.75 0 01.82.311l5.228 7.917a.75.75 0 01-.777 1.148l-2.097-.43 1.045 3.9a.75.75 0 01-1.45.388l-1.044-3.899-1.601 1.42a.75.75 0 01-1.247-.606l.569-9.47a.75.75 0 01.554-.68z" clip-rule="evenodd" /> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"> | |
| <path fill-rule="evenodd" d="M17.303 5.197A7.5 7.5 0 006.697 15.803a.75.75 0 01-1.061 1.061A9 9 0 1121 10.5a.75.75 0 01-1.5 0c0-1.92-.732-3.839-2.197-5.303zm-2.121 2.121a4.5 |
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
| <body> | |
| <main> | |
| <section class="info-section"> | |
| <div class="left-part"> | |
| <h1><span class="d-flex">we make</span> <span class="text"></span></h1> | |
| <p>We create classes every next month with our new talented creators</p> | |
| <a href="https://www.yudiz.com/" class="book-link"> | |
| <span class="linktext">Book Your Seat Now</span> | |
| <span class="arrow"> |
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
| <body> | |
| <main> | |
| <section class="info-section"> | |
| <div class="left-part"> | |
| <h1><span class="d-flex">we make</span> <span class="text"></span></h1> | |
| <p>We create classes every next month with our new talented creators</p> | |
| <a href="https://www.yudiz.com/" class="book-link"> | |
| <span class="linktext">Book Your Seat Now</span> | |
| <span class="arrow"> |
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
| <!-- Exported with SnipCSS extension (Ver 1.8.3) --> | |
| <div class="css-xoq"> | |
| <div class="css-2xx"> | |
| <svg viewBox="0 0 434 434" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <circle opacity="0.45" cx="217" cy="217" r="152.5" stroke="#00A095" stroke-linejoin="round" stroke-dasharray="8 8"> | |
| </circle> | |
| <circle opacity="0.45" cx="217" cy="217" r="216.5" stroke="#00A095" stroke-linejoin="round" stroke-dasharray="8 8"> | |
| </circle> | |
| </svg> | |
| </div> |