A Pen by jadibrahim on CodePen.
Jad jadibrahim
This file contains 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
| <style> | |
| @media screen and (max-width: 600px) { | |
| div.loader { | |
| max-height: 70%; | |
| width: 90%; | |
| transition: width 333ms ease-in-out, height 333ms ease-in-out, color 125ms ease-in-out, font-size 500ms cubic-bezier(0, 1.58, 0.18, 1) 125ms, border-radius 125ms ease-in-out; | |
| background: rgba(0, 0, 0, 0.5); | |
| background: white; | |
| } |
This file contains 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> | |
| <!-- <div class="window"> --> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 396.5 1100" height="600" width="" class="remote"> | |
| <g id="background"> | |
| <path d="M352,0H44A44,44,0,0,0,0,44V1056a44,44,0,0,0,44,44H352a44,44,0,0,0,44-44V44A44,44,0,0,0,352,0ZM110,792a66,66,0,1,1,66-66h0a65.94,65.94,0,0,1-65.88,66Zm0-176a66,66,0,1,1,66-66h0a65.94,65.94,0,0,1-65.88,66Zm0-176a65.94,65.94,0,1,1,.12,0ZM352,726a66,66,0,0,1-132,0V550a66,66,0,0,1,132,0ZM286,440a65.94,65.94,0,1,1,.12,0Z" style="fill:#111" /> | |
| <path d="M396.5,460.5H.5V44.5a44.13,44.13,0,0,1,44-44h308a44.13,44.13,0,0,1,44,44Z" style="fill:#232323" /> | |
| <path d="M285.3,792a65.94,65.94,0,0,0,66-65.88V551c0-35.4-27.6-65.3-63-66.9A66,66,0,0,0,219.37,547c-.05,1-.07,2-.07,3V726a66,66,0,0,0,66,66" style="fill:#111;stroke:#1e1e1e;stroke-miterlimit:10;stroke-width:4px" /> | |
| </g> | |
| <g id="playpause" class="zoom" name="Play"> | |
| <!-- <circle cx="111.5" cy="725.73" r="66" style="fill:#111;fill-opacity:0" /> --> |
jadibrahim
/ glassmorphism-creative-cloud-app-redesign.markdown
Created
November 18, 2021 01:03
Glassmorphism Creative Cloud App Redesign
Inspired by Mikołaj Gałęziowski "https://dribbble.com/shots/14831798-Glassmorphism-Big-Sur-Creative-Cloud-App-Redesign"
A Pen by jadibrahim on CodePen.
This file contains 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
| const export bitmartTradeData = {"message":"OK","code":1000,"trace":"45adb1a2-99d6-4476-95b9-a8e4818a15f3","data":{"trades":[{"amount":"16.15500000","order_time":1635812246380,"price":"0.00000500","count":"3231000","type":"buy"},{"amount":"94.67789760","order_time":1635812242562,"price":"0.00000485","count":"19521216","type":"sell"},{"amount":"8.68313000","order_time":1635812223885,"price":"0.00000500","count":"1736626","type":"buy"},{"amount":"49.45902445","order_time":1635812210509,"price":"0.00000485","count":"10197737","type":"sell"},{"amount":"33.20750000","order_time":1635812186496,"price":"0.00000500","count":"6641500","type":"buy"},{"amount":"9.19842000","order_time":1635812184509,"price":"0.00000500","count":"1839684","type":"buy"},{"amount":"65.45123186","order_time":1635812180643,"price":"0.00000487","count":"13439678","type":"sell"},{"amount":"33.26696513","order_time":1635812180643,"price":"0.00000487","count":"6830999","type":"sell"},{"amount":"42.39222016","order_time":1635812180643,"price":"0. |
Designed by: Mauricio Bucardo
Original image: https://dribbble.com/shots/5619509-Animated-Tab-Bar
You can use this menu in your projects. It also works with 100% width and reacts to changing the size of the window :)
This file contains 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
| %main#main | |
| .before | |
| .after | |
| %ul#one | |
| %li.one | |
| .container | |
| .notification | |
| %span.before | |
| %span.after | |
| %header |