Skip to content

Instantly share code, notes, and snippets.

View Sh00k-ThaD3v's full-sized avatar
💯
Loving T3ch

Krisshatta Esclovon Sh00k-ThaD3v

💯
Loving T3ch
5 followers · 41 following
View GitHub Profile
@Sh00k-ThaD3v
Sh00k-ThaD3v / index.html
Created February 2, 2023 08:11
Swaying loader
<div class="loader">
<span>Loading...</span>
</div>
@Sh00k-ThaD3v
Sh00k-ThaD3v / building-a-dashboard-layout-with-css-and-a-touch-of-javascript.markdown
Created February 2, 2023 06:57
Building a Dashboard Layout With CSS and a Touch of JavaScript

Building a Dashboard Layout With CSS and a Touch of JavaScript

In this tutorial, we’ll create a responsive admin dashboard layout with CSS and a touch of JavaScript. To build it, we’ll borrow some ideas from the WordPress dashboard, such as its collapsible sidebar menu.

Read full tutorial here!

A Pen by Envato Tuts+ on CodePen.

License.

@Sh00k-ThaD3v
Sh00k-ThaD3v / css-glassmorphism-button-hover-effects-glass-morphism.markdown
Created January 19, 2023 04:16
CSS Glassmorphism Button Hover Effects | Glass Morphism
@Sh00k-ThaD3v
Sh00k-ThaD3v / 1566-image-hover.markdown
Created January 1, 2023 10:00
#1566 - Image Hover
@Sh00k-ThaD3v
Sh00k-ThaD3v / index.html
Created December 3, 2022 15:04
Randombook
<div class="lg:flex container mx-auto p-3" id="app">
<div class="panel p-2">
<div class="rounded overflow-hidden shadow-lg my-3">
<img src="https://images.unsplash.com/photo-1491002052546-bf38f186af56?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=200&q=80" class="w-full" />
<div class="flex justify-center -mt-8">
<img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=3&w=144&h=144&q=80" class="rounded-full border-solid border-white border-2 -mt-3">
</div>
<div class="text-center px-3 pb-6 pt-2">
<h3 class="font-bold text-md">Aubree Gilmour</h3>
<p class="mt-2 font-sans font-light text-grey-dark italic">Live life, Laugh Loud, Love forever</p>
@Sh00k-ThaD3v
Sh00k-ThaD3v / index.html
Created December 3, 2022 14:48
Responsive React Dashboard with Tailwind
<div id="root"></div>
@Sh00k-ThaD3v
Sh00k-ThaD3v / 1268-add-to-cart-card.markdown
Created November 22, 2022 17:19
#1268 - 'Add to cart' card
@Sh00k-ThaD3v
Sh00k-ThaD3v / index.html
Created October 31, 2022 16:20
Parallax clip
<div class="image">
<svg
width="100"
height="100"
viewBox="0 0 100 100">
<mask id="cliff">
<rect x="0" y="0" width="100" height="100" fill="white"/>
<path
fill="black"
d="m 0,66.664966 0,-16.598001 0.40178571,-0.133929 0.26785714,-0.111607 0.3125,0.08929 0.11160715,-0.08929 0.2455357,0.02232 0.15625,0.133929 0.089286,0.223214 0.2678572,0.06696 0.3571428,0.04464 0.1785714,-0.08928 0.2455358,0.02232 0.1785714,0.133929 0.1785714,0.245535 0.15625,-0.04464 0.15625,-0.15625 0.2008929,-0.02232 0.2678571,0.04464 0.066964,0.111607 0.2901786,-0.06696 0.2455357,-0.111607 0.4241071,-0.04464 0.1785714,-0.02232 0.4017858,-0.06696 0.2455357,0.06696 0.3794643,0.06697 0.3571428,0.02232 0.2008929,-0.15625 0.1339285,0.04464 0.022322,-0.379464 0.1116071,-0.06697 0.1116072,0.08929 0.066964,0.245536 0.1116072,0.15625 0.066964,-0.334822 0.089286,0.245536 0.1339286,0.133929 0.2678571,0 0.1785714,0.111607 0.2232143,0.06696 0.1785714,0.08929 0.2008929,-0.02232 0.2455357,-0
@Sh00k-ThaD3v
Sh00k-ThaD3v / index.html
Created October 31, 2022 16:20
ScrollTrigger: SVG Text Mask
<!-- This is a recreation of Unfold's (https://dribbble.com/unfold) parallax scene: https://cdn.dribbble.com/users/14268/screenshots/3275340/northface.gif -->
<div class="scrollDist"></div>
<div class="main">
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
<mask id="m">
<g class="cloud1">
<rect fill="#fff" width="100%" height="801" y="799" />
<image xlink:href="https://assets.codepen.io/721952/cloud1Mask.jpg" width="1200" height="800"/>
</g>
</mask>
@Sh00k-ThaD3v
Sh00k-ThaD3v / index.pug
Created October 15, 2022 03:33
Speech To Text
.container
textarea#message(placeholder="Speak...!")
button#speak-btn
i.mic