├── 01_Animated Gradient Border
    └── index.html
├── 02_3D Rotate
    └── index.html
├── 03_Resizable Div
    └── index.html
├── 04_Card with hover details
    └── index.html
├── 05_Glassmorphism Card Effect Using CSS
    └── index.html
├── 06_Glowing Neon Apple Logo
    └── index.html
├── 07_Loading Blend with CSS
    └── index.html
├── 08_Neomorphic Toggle Button
    └── index.html
├── 09_Three Dots Loader using CSS
    └── index.html
├── 10_Gradient Underline Button
    └── index.html
├── 11_Underline with background fill on hover
    └── index.html
├── 12_Youtube Logo using CSS
    └── index.html
├── 13_Ship Logo using CSS
    └── index.html
├── 14_Triangular CSS Loader
    └── index.html
├── 15_Earth And moon Animation
    └── index.html
├── 16_Hamburger Menu
    └── index.html
├── 17_Arrange Image parts on hover
    └── index.html
├── 18_Social media icons with hover and inverse actions
    └── index.html
├── 19_Page Loader using CSS
    └── index.html
├── 20_Toggle Youtube Subscribe Button
    └── index.html
├── 21_Neon Text using CSS
    └── index.html
├── 22_CSS Gradient button with Gradient Shadow
    └── index.html
├── 23_Amazing Effect using CSS
    └── index.html
├── 24_3D Plane Effect using CSS
    └── index.html
├── 25_Cat Animation using CSS
    └── index.html
├── 26_Simple Toggle Button using CSS
    └── index.html
├── 27_Gradient Border Like IG Story
    └── index.html
├── 28_Glassmorphic Social Media icons
    └── index.html
├── 29_Floating Profile Image
    └── index.html
├── 30_Simple CTA button using Pseudo Selectors
    └── index.html
├── 31_Toggle Light and Dark Mode
    └── index.html
├── 32_Simple Counter using JS
    └── index.html
├── 33_Download button using CSS
    └── index.html
├── 34_Curly Bracket Animated Loader using CSS
    └── index.html
├── 35_Animated Gradient Text using CSS
    └── index.html
├── 36_20k Followes
    └── index.html
├── 37_Loader with ripple effect
    └── index.html
├── 38_Shopping Cart Loading Animation
    └── index.html
├── 39_Cube Animation
    └── index.html
├── 3d Glowing Text
    └── index.html
├── 40_Gradient infinite loader using CSS
    └── index.html
├── 41_Gradient Balls Loading Animation using CSS
    └── index.html
├── 42_Ferb using HTML and CSS
    └── index.html
├── 43_Social Media icons Hover Effect
    └── index.html
├── 44_Underline link on hover
    └── index.html
├── 45_Navbar Toggle using JS
    └── index.html
├── 46_Digital Clock
    └── index.html
├── 47_Card hover effect using CSS
    └── index.html
├── 48_Card with onHover inverse effect using CSS
    └── index.html
├── 49_Starbucks Card using HTML and CSS copy
    └── index.html
├── 50_Image Card hover effect
    └── index.html
├── 51_Image text reveal onhover
    └── index.html
├── 52_Lamp using CSS
    └── index.html
├── 53_Simple Heartbeat effect using CSS
    └── index.html
├── 54_Animated Gradient Underglow
    └── index.html
├── 55_Name Lightning Animation using CSS
    └── index.html
├── 56_Neon button effect
    └── index.html
├── Animated Like Button using CSS
    └── index.html
├── Clip Path
    └── index.html
├── Cool css loader
    └── index.html
├── Glowing Text using CSS
    └── index.html
├── Neon text using css
    └── index.html
└── README.md


/01_Animated Gradient Border/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html class="my-2 rounded-full h-10 w-[16rem] px-4">
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <title>Animated Gradient Border - @code.scientist</title>
15 | </head>
16 | 
17 | <style>
18 |     * {
19 |         font-family: 'Poppins', sans-serif;
20 |     }
21 | 
22 |     body {
23 |         background-color: #111827;
24 |         color: white;
25 |         display: flex;
26 |         align-items: center;
27 |         justify-content: center;
28 |     }
29 | 
30 |     .gradient-border {
31 |         display: flex;
32 |         justify-content: center;
33 |         align-items: center;
34 |         color: white;
35 |         font-size: 20px;
36 |         height: 10rem;
37 |         width: 10rem;
38 |         border-radius: 100px;
39 |         background: #111827;
40 |         box-shadow: inset 20px 20px 39px #070a10,
41 |             inset -20px -20px 39px #1b263e;
42 |         position: relative;
43 |         cursor: pointer;
44 |     }
45 | 
46 |     .gradient-border::after {
47 |         content: "";
48 |         position: absolute;
49 |         left: -10px;
50 |         top: -10px;
51 |         height: calc(100% + 20px);
52 |         width: calc(100% + 20px);
53 |         background: linear-gradient(35deg, deepskyblue, deeppink, lawngreen);
54 |         border-radius: 50%;
55 |         z-index: -1;
56 |         filter: blur(3px);
57 |     }
58 | 
59 |     .gradient-border:hover::after {
60 |         animation: rotate 1s linear infinite;
61 |     }
62 | 
63 |     @keyframes rotate {
64 |         to {
65 |             transform: rotate(360deg);
66 |         }
67 |     }
68 | </style>
69 | 
70 | <body>
71 |     <button class="gradient-border">
72 |         Hover Me!
73 |     </button>
74 | </body>
75 | 
76 | </html>


--------------------------------------------------------------------------------
/02_3D Rotate/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html class="my-2 rounded-full h-10 w-[16rem] px-4">
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <!-- Google Fonts  -->
 10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
 13 | 
 14 | 
 15 |     <title>3D Rotate - @code.scientist</title>
 16 | </head>
 17 | 
 18 | <style>
 19 |     * {
 20 |         font-family: 'Poppins', sans-serif;
 21 |     }
 22 | 
 23 |     html {
 24 |         font-size: 62.5%;
 25 |         background: #161724;
 26 |         overflow-y: hidden;
 27 |         font-family: lato;
 28 |     }
 29 | 
 30 |     body {
 31 |         position: relative;
 32 |     }
 33 | 
 34 |     .box {
 35 |         width: 100%;
 36 |         height: 100vh;
 37 |         display: inline-flex;
 38 |         flex-direction: column;
 39 |         align-items: center;
 40 |         justify-content: space-around;
 41 |         flex-wrap: wrap;
 42 |     }
 43 | 
 44 |     a {
 45 |         text-decoration: none;
 46 |         font-size: 3rem;
 47 |         color: #f7f9fa;
 48 |         padding: 2rem;
 49 |         transition: all .5s;
 50 |         position: relative;
 51 |         perspective: 30rem;
 52 |     }
 53 | 
 54 |     a::after {
 55 |         content: "";
 56 |         display: block;
 57 |         width: 100%;
 58 |         height: 100%;
 59 |         position: absolute;
 60 |         top: 4.2rem;
 61 |         left: 0;
 62 |         background: #e6036d34;
 63 |         border-radius: 1.5rem;
 64 |         transform: rotateX(80deg);
 65 |         z-index: 2;
 66 |     }
 67 | 
 68 |     a::before {
 69 |         content: "";
 70 |         display: block;
 71 |         width: 100%;
 72 |         height: 100%;
 73 |         position: absolute;
 74 |         top: 0;
 75 |         left: 0;
 76 |         background: #e6036e;
 77 |         border-radius: 1.5rem;
 78 |         z-index: -1;
 79 |     }
 80 | 
 81 |     a:hover::before {
 82 |         animation: rotate 1s;
 83 |         transition: all .5s;
 84 |     }
 85 | 
 86 |     @keyframes rotate {
 87 |         0% {
 88 |             transform: rotateY(180deg);
 89 |         }
 90 | 
 91 |         100% {
 92 |             transform: rotateY(360deg);
 93 |         }
 94 |     }
 95 | </style>
 96 | 
 97 | <body>
 98 |     <div class="box">
 99 |         <a href="#">3D Rotate</a>
100 |     </div>
101 | </body>
102 | 
103 | </html>


--------------------------------------------------------------------------------
/03_Resizable Div/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html class="my-2 rounded-full h-10 w-[16rem] px-4">
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <title>Resizable Div - @code.scientist</title>
15 | </head>
16 | 
17 | <style>
18 |     * {
19 |         font-family: 'Poppins', sans-serif;
20 |     }
21 | 
22 |     body {
23 |         background-color: #111827;
24 |         color: white;
25 |         display: flex;
26 |         align-items: center;
27 |         justify-content: center;
28 |     }
29 | 
30 | 
31 |     .resizable {
32 |         height: 5rem;
33 |         width: 14rem;
34 |         color: deepskyblue;
35 |         border: 2px solid deepskyblue;
36 |         display: flex;
37 |         justify-content: center;
38 |         align-items: center;
39 |         overflow: auto;
40 |         resize: auto;
41 |     }
42 | </style>
43 | 
44 | <body>
45 |     <div class="resizable">
46 |         Code Scientist
47 |     </div>
48 | </body>
49 | 
50 | </html>


--------------------------------------------------------------------------------
/04_Card with hover details/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html class="my-2 rounded-full h-10 w-[16rem] px-4">
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <!-- Font Awesome Icons  -->
 10 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
 11 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
 12 |         crossorigin="anonymous" />
 13 | 
 14 |     <!-- Google Fonts  -->
 15 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 16 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 17 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
 18 | 
 19 |     <title>Card with hover details - @code.scientist</title>
 20 | </head>
 21 | 
 22 | <style>
 23 |     * {
 24 |         font-family: 'Poppins', sans-serif;
 25 |     }
 26 | 
 27 |     body {
 28 |         background-color: #111827;
 29 |         color: white;
 30 |         display: flex;
 31 |         align-items: center;
 32 |         justify-content: center;
 33 |     }
 34 | 
 35 | 
 36 |     .card {
 37 |         height: 15rem;
 38 |         width: 15rem;
 39 |         overflow: hidden;
 40 |         position: relative;
 41 |         cursor: pointer;
 42 |         border-radius: 20px;
 43 |     }
 44 | 
 45 |     .card img {
 46 |         height: 100%;
 47 |         width: 100%;
 48 |     }
 49 | 
 50 | 
 51 |     .card:hover .details {
 52 |         opacity: 1;
 53 |         height: 100%;
 54 |     }
 55 | 
 56 |     .details {
 57 |         position: absolute;
 58 |         left: 0;
 59 |         bottom: 0;
 60 |         width: 100%;
 61 |         height: 0%;
 62 |         background: rgba(0, 0, 0, 0.9);
 63 |         display: flex;
 64 |         flex-direction: column;
 65 |         align-items: center;
 66 |         justify-content: center;
 67 |         padding: 10px 0;
 68 |         opacity: 0;
 69 |         transition: 0.5s ease;
 70 |     }
 71 | 
 72 |     .details h4 {
 73 |         margin: 0;
 74 |     }
 75 | 
 76 |     .details p {
 77 |         margin: 2px 0;
 78 |         font-size: 10px;
 79 |     }
 80 | 
 81 |     .social-icons {
 82 |         display: flex;
 83 |         align-items: center;
 84 |         list-style: none;
 85 |         padding: 0;
 86 |         margin: 0;
 87 |     }
 88 | 
 89 |     .social-icons li {
 90 |         margin: 0 10px;
 91 |     }
 92 | 
 93 |     .social-icons li a {
 94 |         color: deepskyblue;
 95 |     }
 96 | </style>
 97 | 
 98 | <body>
 99 |     <div class="card">
100 |         <img src="../../imgs/interior2.jpg" alt="">
101 |         <div class="details">
102 |             <h4>Home Decors</h4>
103 |             <p>Decorate your home with us</p>
104 |             <ul class="social-icons">
105 |                 <li>
106 |                     <a href="#"><i class="fab fa-instagram"></i></a>
107 |                 </li>
108 |                 <li>
109 |                     <a href="#"><i class="fab fa-twitter"></i></a>
110 |                 </li>
111 |                 <li>
112 |                     <a href="#"><i class="fab fa-linkedin"></i></a>
113 |                 </li>
114 |             </ul>
115 |         </div>
116 |     </div>
117 | </body>
118 | 
119 | </html>


--------------------------------------------------------------------------------
/05_Glassmorphism Card Effect Using CSS/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html class="my-2 rounded-full h-10 w-[16rem] px-4">
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <title>Glassmorphic Card Effect - @code.scientist</title>
15 | </head>
16 | 
17 | <style>
18 |     * {
19 |         font-family: 'Poppins', sans-serif;
20 |     }
21 | 
22 |     body {
23 |         background-color: #111827;
24 |         color: white;
25 |         display: flex;
26 |         align-items: center;
27 |         justify-content: center;
28 |     }
29 | 
30 |     .card {
31 |         background: rgba(255, 255, 255, 0.25);
32 |         backdrop-filter: blur(4px);
33 |         border-radius: 10px;
34 |         border: 1px solid rgba(255, 255, 255, 0.18);
35 |         padding: 30px;
36 |         width: 12rem;
37 |         height: 15rem;
38 |         position: relative;
39 |     }
40 | 
41 |     .circle {
42 |         position: absolute;
43 |         height: 6rem;
44 |         width: 6rem;
45 |         border-radius: 50%;
46 |         background: deepskyblue;
47 |         transform: translate(-8rem, 9rem);
48 |     }
49 | 
50 |     .circle:nth-child(2) {
51 |         transform: translate(8rem, -9rem);
52 |         background: deeppink;
53 |     }
54 | </style>
55 | 
56 | <body>
57 |     <div class="circle"></div>
58 |     <div class="circle"></div>
59 |     <div class="card">
60 |         <h2>Code Scientist</h2>
61 |         <p>Glassmorphic Card using CSS. Source code link in bio.</p>
62 |     </div>
63 | </body>
64 | 
65 | </html>


--------------------------------------------------------------------------------
/06_Glowing Neon Apple Logo/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html class="my-2 rounded-full h-10 w-[16rem] px-4">
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <!-- Font Awesome Icons  -->
15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
17 |         crossorigin="anonymous" />
18 | 
19 |     <title>Glowing Neon Apple Logo - @code.scientist</title>
20 | </head>
21 | 
22 | <style>
23 |     * {
24 |         font-family: 'Poppins', sans-serif;
25 |     }
26 | 
27 |     body {
28 |         background-color: #111827;
29 |         color: white;
30 |         display: flex;
31 |         align-items: center;
32 |         justify-content: center;
33 |     }
34 | 
35 |     .logo {
36 |         font-size: 8rem;
37 |         text-shadow: 0px 0px 100px;
38 |         animation: animate 2s infinite linear;
39 |     }
40 | 
41 |     @keyframes animate {
42 | 
43 |         0%,
44 |         100% {
45 |             color: lawngreen;
46 |         }
47 | 
48 |         25% {
49 |             color: deeppink;
50 |         }
51 | 
52 |         50% {
53 |             color: deepskyblue;
54 |         }
55 | 
56 |         75% {
57 |             color: white;
58 |         }
59 |     }
60 | </style>
61 | 
62 | <body>
63 |     <div class="logo">
64 |         <i class="fab fa-apple"></i>
65 |     </div>
66 | </body>
67 | 
68 | </html>


--------------------------------------------------------------------------------
/07_Loading Blend with CSS/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <!-- Font Awesome Icons  -->
15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
17 |         crossorigin="anonymous" />
18 | 
19 |     <title>Loading Blend using CSS - @code.scientist</title>
20 | </head>
21 | 
22 | <style>
23 |     * {
24 |         font-family: 'Poppins', sans-serif;
25 |     }
26 | 
27 |     body {
28 |         background-color: #111827;
29 |         color: white;
30 |         display: flex;
31 |         align-items: center;
32 |         justify-content: center;
33 |     }
34 | 
35 |     .loader {
36 |         font-size: 5rem;
37 |         color: white;
38 |         position: relative;
39 |     }
40 | 
41 |     .loader span {
42 |         mix-blend-mode: difference;
43 |     }
44 | 
45 |     .loader::after {
46 |         content: '';
47 |         position: absolute;
48 |         height: calc(100% - 40px);
49 |         left: 0;
50 |         top: 20px;
51 |         width: 30%;
52 |         background-color: white;
53 |         z-index: -1;
54 |         color: black;
55 |         overflow: hidden;
56 |         animation: animate 4s infinite linear;
57 |     }
58 | 
59 | 
60 |     @keyframes animate {
61 | 
62 |         0%,
63 |         100% {
64 |             transform: translateX(0px);
65 | 
66 |         }
67 | 
68 |         50% {
69 |             transform: translateX(250px);
70 | 
71 |         }
72 |     }
73 | </style>
74 | 
75 | <body>
76 |     <div class="loader">
77 |         <span>LOADING</span>
78 |     </div>
79 | </body>
80 | 
81 | </html>


--------------------------------------------------------------------------------
/08_Neomorphic Toggle Button/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html class="my-2 rounded-full h-10 w-[16rem] px-4">
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <!-- Font Awesome Icons  -->
15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
17 |         crossorigin="anonymous" />
18 | 
19 |     <title>Neomorphic Toggle Button - @code.scientist</title>
20 | </head>
21 | 
22 | <style>
23 |     * {
24 |         font-family: 'Poppins', sans-serif;
25 |     }
26 | 
27 |     body {
28 |         background-color: #111827;
29 |         color: white;
30 |         display: flex;
31 |         align-items: center;
32 |         justify-content: center;
33 |     }
34 | 
35 |     .checkbox {
36 |         height: 40px;
37 |         width: 100px;
38 |         margin: 5px;
39 |         border-radius: 20px;
40 |         position: relative;
41 |     }
42 | 
43 |     .checkbox input {
44 |         position: absolute;
45 |         height: 100%;
46 |         width: 100%;
47 |         appearance: none;
48 |         cursor: pointer;
49 |     }
50 | 
51 |     .checkbox input::before {
52 |         content: "";
53 |         position: absolute;
54 |         top: 0;
55 |         left: 0;
56 |         height: 100%;
57 |         width: 100%;
58 |         border-radius: 150px;
59 |         background: linear-gradient(45deg, #0f1623, #121a2a);
60 |         box-shadow: 5px -5px 10px #070a10,
61 |             -5px 5px 10px #1b263e;
62 |     }
63 | 
64 |     .checkbox input:checked::before {
65 |         background: linear-gradient(45deg, deepskyblue, deeppink);
66 |     }
67 | 
68 |     .checkbox input::after {
69 |         content: "";
70 |         position: absolute;
71 |         top: 0;
72 |         left: 0;
73 |         height: 40px;
74 |         width: 40px;
75 |         border-radius: 150px;
76 |         background: #111827;
77 |         box-shadow: inset 5px -5px 10px #070a10,
78 |             inset -5px 5px 10px #1b263e;
79 |         transform: translate(0px, 0px);
80 |         transition: 0.3s ease;
81 |     }
82 | 
83 |     .checkbox input:checked::after {
84 |         transform: translate(60px, 0px);
85 |     }
86 | </style>
87 | 
88 | <body>
89 |     <div class="checkbox">
90 |         <input type="checkbox">
91 |     </div>
92 | </body>
93 | 
94 | </html>


--------------------------------------------------------------------------------
/09_Three Dots Loader using CSS/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html class="my-2 rounded-full h-10 w-[16rem] px-4">
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <!-- Font Awesome Icons  -->
15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
17 |         crossorigin="anonymous" />
18 | 
19 |     <title>Three Dots Loader - @code.scientist</title>
20 | </head>
21 | 
22 | <style>
23 |     * {
24 |         font-family: 'Poppins', sans-serif;
25 |     }
26 | 
27 |     body {
28 |         background-color: #111827;
29 |         color: white;
30 |         display: flex;
31 |         align-items: center;
32 |         justify-content: center;
33 |     }
34 | 
35 |     .loader {
36 |         height: 100px;
37 |         width: 100px;
38 |         border-radius: 50%;
39 |         display: flex;
40 |     }
41 | 
42 |     .circle {
43 |         background: deepskyblue;
44 |         width: 20px;
45 |         height: 20px;
46 |         margin: 0 4px;
47 |         border-radius: 50%;
48 |         animation: animate 2s infinite linear;
49 |     }
50 | 
51 |     .circle:nth-child(1) {
52 |         animation-delay: 0.5s;
53 |     }
54 | 
55 |     .circle:nth-child(2) {
56 |         animation-delay: 1s;
57 |     }
58 | 
59 |     .circle:nth-child(3) {
60 |         animation-delay: 1.5s;
61 |     }
62 | 
63 |     @keyframes animate {
64 | 
65 |         0%,
66 |         100% {
67 |             opacity: 0;
68 |         }
69 | 
70 |         50% {
71 |             opacity: 1;
72 |         }
73 |     }
74 | </style>
75 | 
76 | <body>
77 |     <div class="loader">
78 |         <div class="circle"></div>
79 |         <div class="circle"></div>
80 |         <div class="circle"></div>
81 |     </div>
82 | </body>
83 | 
84 | </html>


--------------------------------------------------------------------------------
/10_Gradient Underline Button/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html class="my-2 rounded-full h-10 w-[16rem] px-4">
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <title>Underline with gradient effect - @code.scientist</title>
15 | </head>
16 | 
17 | <style>
18 |     * {
19 |         font-family: 'Poppins', sans-serif;
20 |     }
21 | 
22 |     body {
23 |         background-color: #111827;
24 |         color: white;
25 |         display: flex;
26 |         align-items: center;
27 |         justify-content: center;
28 |     }
29 | 
30 |     .gradient-underline {
31 |         border: none;
32 |         background: none;
33 |         color: white;
34 |         cursor: pointer;
35 |         font-size: 2rem;
36 |         position: relative;
37 |     }
38 | 
39 |     .gradient-underline::before {
40 |         content: '';
41 |         position: absolute;
42 |         left: 0;
43 |         bottom: 0;
44 |         height: 4px;
45 |         width: 0;
46 |         background: linear-gradient(90deg, deepskyblue, deeppink);
47 |         border-radius: 10px;
48 |         transition: 0.5s ease;
49 |     }
50 | 
51 |     .gradient-underline:hover::before {
52 |         width: 100%;
53 |     }
54 | </style>
55 | 
56 | <body>
57 |     <button class="gradient-underline">
58 |         Code Scientist
59 |     </button>
60 | 
61 | </body>
62 | 
63 | </html>


--------------------------------------------------------------------------------
/11_Underline with background fill on hover/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html class="my-2 rounded-full h-10 w-[16rem] px-4">
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <!-- Font Awesome Icons  -->
15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
17 |         crossorigin="anonymous" />
18 | 
19 |     <title>Button Hover Fill Background - @code.scientist</title>
20 | </head>
21 | 
22 | <style>
23 |     * {
24 |         font-family: 'Poppins', sans-serif;
25 |     }
26 | 
27 |     body {
28 |         background-color: #111827;
29 |         color: white;
30 |         display: flex;
31 |         align-items: center;
32 |         justify-content: center;
33 |     }
34 | 
35 |     .button-hover {
36 |         border: none;
37 |         background: none;
38 |         color: white;
39 |         cursor: pointer;
40 |         font-size: 2rem;
41 |         position: relative;
42 |     }
43 | 
44 |     .button-hover::before {
45 |         content: '';
46 |         position: absolute;
47 |         left: 0;
48 |         bottom: 0;
49 |         height: 4px;
50 |         width: 0;
51 |         background-color: deepskyblue;
52 |         transition: 0.5s ease;
53 |     }
54 | 
55 |     .button-hover:hover::before {
56 |         width: 100%;
57 |     }
58 | 
59 |     .button-hover::after {
60 |         content: '';
61 |         position: absolute;
62 |         left: 0;
63 |         bottom: 0;
64 |         height: 0;
65 |         width: 100%;
66 |         background-color: deepskyblue;
67 |         transition: 0.4s ease;
68 |         z-index: -1;
69 |     }
70 | 
71 |     .button-hover:hover::after {
72 |         height: 100%;
73 |         transition-delay: 0.5s;
74 |     }
75 | </style>
76 | 
77 | <body>
78 |     <button class="button-hover">
79 |         Code Scientist
80 |     </button>
81 | 
82 | </body>
83 | 
84 | </html>


--------------------------------------------------------------------------------
/12_Youtube Logo using CSS/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html class="my-2 rounded-full h-10 w-[16rem] px-4">
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <!-- Font Awesome Icons  -->
15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
17 |         crossorigin="anonymous" />
18 | 
19 |     <title>Youtube Logo using CSS - @code.scientist</title>
20 | </head>
21 | 
22 | <style>
23 |     * {
24 |         font-family: 'Poppins', sans-serif;
25 |     }
26 | 
27 |     body {
28 |         background-color: #111827;
29 |         color: white;
30 |         display: flex;
31 |         align-items: center;
32 |         justify-content: center;
33 |     }
34 | 
35 |     .logo {
36 |         height: 4rem;
37 |         width: 7rem;
38 |         border-radius: 20px;
39 |         background-color: #FF0000;
40 |         display: flex;
41 |         align-items: center;
42 |         justify-content: center;
43 |     }
44 | 
45 |     .triangle {
46 |         border-top: 15px solid transparent;
47 |         border-bottom: 15px solid transparent;
48 |         border-left: 25px solid white;
49 |     }
50 | </style>
51 | 
52 |     <body>
53 |         <div class="logo">
54 |             <div class="triangle"></div>
55 |         </div>
56 |     </body>
57 | 
58 | </html>


--------------------------------------------------------------------------------
/13_Ship Logo using CSS/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html class="my-2 rounded-full h-10 w-[16rem] px-4">
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <title>Ship Logo using CSS - @code.scientist</title>
 10 | </head>
 11 | 
 12 | <style>
 13 |     * {
 14 |         margin: 0px;
 15 |         padding: 0px;
 16 |         background: #191919;
 17 |     }
 18 | 
 19 |     div.window {
 20 |         display: flex;
 21 |         position: absolute;
 22 |         width: 400px;
 23 |         height: 300px;
 24 |     }
 25 | 
 26 |     div {
 27 |         margin-left: 175px;
 28 |         background: #191919;
 29 |         border-width: 10px;
 30 |         border-style: solid;
 31 |         border-color: #5DBCF9;
 32 |         height: 20px;
 33 |         width: 30px;
 34 |         margin-top: 66px;
 35 |     }
 36 | 
 37 |     div.ship {
 38 |         border-width: 10px;
 39 |         height: 44px;
 40 |         width: 80px;
 41 |         margin-left: 150px;
 42 |         margin-top: 100px;
 43 |         border-bottom-width: 5px;
 44 |         border-bottom-color: #191919
 45 |     }
 46 | 
 47 |     div.body {
 48 |         position: absolute;
 49 |         height: 26px;
 50 |         width: 80px;
 51 |         margin-left: 125px;
 52 |         border-right: none;
 53 |         border-bottom: transparent;
 54 |         transform: rotate(-30deg);
 55 |         background: transparent;
 56 |         top: 80px;
 57 |     }
 58 | 
 59 |     div.body1 {
 60 |         position: absolute;
 61 |         height: 26px;
 62 |         width: 80px;
 63 |         margin-left: 184px;
 64 |         border-left: none;
 65 |         border-bottom: transparent;
 66 |         transform: rotate(30deg);
 67 |         background: transparent;
 68 |         top: 80px;
 69 |     }
 70 | 
 71 |     p.line {
 72 |         border-left: 10px solid #5DBCF9;
 73 |         height: 65px;
 74 |         position: absolute;
 75 |         left: 50%;
 76 |         margin-left: -5px;
 77 |         top: 130px;
 78 |     }
 79 | 
 80 |     p.line1 {
 81 |         border-left: 10px solid #5DBCF9;
 82 |         height: 110px;
 83 |         position: absolute;
 84 |         left: 50%;
 85 |         margin-left: -5px;
 86 |         top: 180px;
 87 |         transform: rotate(90deg)
 88 |     }
 89 | 
 90 |     p.line2 {
 91 |         border-left: 10px solid #5DBCF9;
 92 |         height: 200px;
 93 |         position: absolute;
 94 |         left: 50%;
 95 |         margin-left: -5px;
 96 |         top: 100px;
 97 |         transform: rotate(90deg)
 98 |     }
 99 | </style>
100 | 
101 | <body>
102 |     <div class="window">
103 |         <div class="ship"></div>
104 |         <div class="body"></div>
105 |         <div class="body1"></div>
106 |         <p class="line"></p>
107 |         <p class="line1"></p>
108 |         <p class="line2"></p>
109 |     </div>
110 | 
111 | </body>
112 | 
113 | </html>


--------------------------------------------------------------------------------
/14_Triangular CSS Loader/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html class="my-2 rounded-full h-10 w-[16rem] px-4">
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 10 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
 11 |     <link rel="stylesheet" type="text/css"
 12 |         href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css">
 13 | 
 14 |     <title>Triagnular CSS Loader - @code.scientist</title>
 15 | </head>
 16 | 
 17 | <style>
 18 |     body {
 19 |         background-color: #111827;
 20 |         color: white;
 21 |     }
 22 | 
 23 |     .cssload-triangles {
 24 |         transform: translate(-50%, -50%);
 25 |         height: 79px;
 26 |         width: 88px;
 27 |         position: relative;
 28 |         left: 50%;
 29 |         transition: 5s;
 30 |         top: 50%;
 31 |     }
 32 | 
 33 |     .cssload-tri {
 34 |         position: absolute;
 35 |         animation: cssload-pulse 862.5ms ease-in infinite;
 36 |         border-top: 26px solid rgb(33, 90, 109);
 37 |         border-left: 15px solid transparent;
 38 |         border-right: 15px solid transparent;
 39 |         border-bottom: 0px;
 40 |     }
 41 | 
 42 |     .cssload-tri.cssload-invert {
 43 |         border-top: 0px;
 44 |         border-bottom: 26px solid rgb(33, 90, 109);
 45 |         border-left: 15px solid transparent;
 46 |         border-right: 15px solid transparent;
 47 |     }
 48 | 
 49 |     .cssload-tri:nth-child(1) {
 50 |         left: 29px;
 51 |     }
 52 | 
 53 |     .cssload-tri:nth-child(2) {
 54 |         left: 15px;
 55 |         top: 26px;
 56 |         animation-delay: -143.75ms;
 57 |     }
 58 | 
 59 |     .cssload-tri:nth-child(3) {
 60 |         left: 29px;
 61 |         top: 26px;
 62 |     }
 63 | 
 64 |     .cssload-tri:nth-child(4) {
 65 |         left: 44px;
 66 |         top: 26px;
 67 |         animation-delay: -718.75ms;
 68 |     }
 69 | 
 70 |     .cssload-tri:nth-child(5) {
 71 |         top: 53px;
 72 |         animation-delay: -287.5ms;
 73 |     }
 74 | 
 75 |     .cssload-tri:nth-child(6) {
 76 |         top: 53px;
 77 |         left: 15px;
 78 |         animation-delay: -287.5ms;
 79 |     }
 80 | 
 81 |     .cssload-tri:nth-child(7) {
 82 |         top: 53px;
 83 |         left: 29px;
 84 |         animation-delay: -431.25ms;
 85 |     }
 86 | 
 87 |     .cssload-tri:nth-child(8) {
 88 |         top: 53px;
 89 |         left: 44px;
 90 |         animation-delay: -575ms;
 91 |     }
 92 | 
 93 |     .cssload-tri:nth-child(9) {
 94 |         top: 53px;
 95 |         left: 58px;
 96 |         animation-delay: -575ms;
 97 |     }
 98 | 
 99 |     @keyframes cssload-pulse {
100 |         0% {
101 |             opacity: 1;
102 |         }
103 | 
104 |         16.666% {
105 |             opacity: 1;
106 |         }
107 | 
108 |         100% {
109 |             opacity: 0;
110 |         }
111 |     }
112 | </style>
113 | 
114 | <body>
115 |     <div id="b" class="cssload-triangles">
116 |         <div class="cssload-tri cssload-invert"></div>
117 |         <div class="cssload-tri cssload-invert"></div>
118 |         <div class="cssload-tri"></div>
119 |         <div class="cssload-tri cssload-invert"></div>
120 |         <div class="cssload-tri cssload-invert"></div>
121 |         <div class="cssload-tri"></div>
122 |         <div class="cssload-tri cssload-invert"></div>
123 |         <div class="cssload-tri"></div>
124 |         <div class="cssload-tri cssload-invert"></div>
125 |     </div>
126 | </body>
127 | 
128 | </html>


--------------------------------------------------------------------------------
/15_Earth And moon Animation/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html class="my-2 rounded-full h-10 w-[16rem] px-4">
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
10 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
11 |     <link rel="stylesheet" type="text/css"
12 |         href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css">
13 | 
14 |     <title>Earth and Moon CSS Animation - @code.scientist</title>
15 | </head>
16 | 
17 | <style>
18 |     body {
19 |         background-color: black;
20 |     }
21 | 
22 |     .earth {
23 |         position: absolute;
24 |         top: calc(50% - 100px);
25 |         left: calc(50% - 100px);
26 |     }
27 | 
28 |     .earth img {
29 |         height: 200px;
30 |         position: absolute;
31 |         top: 0;
32 |         left: 0;
33 |         width: 200px;
34 |     }
35 | 
36 |     .moon-container {
37 |         position: absolute;
38 |         top: calc(50% - 25px);
39 |         left: calc(50% - 25px);
40 |     }
41 | 
42 |     .moon {
43 |         animation: spin 20s linear infinite;
44 |         background: none;
45 |         height: 50px;
46 |         pointer-events: none;
47 |         transform-origin: 25px;
48 |         width: 50px;
49 |     }
50 | 
51 |     .moon img {
52 |         height: 50px;
53 |         transform: translateX(-160px) translateY(-160px);
54 |         width: 50px;
55 |     }
56 | 
57 |     .earth img,
58 |     .moon img {
59 |         border-radius: 50%;
60 |         box-shadow: 0 0 12em 1em rgba(110, 140, 200, .6);
61 |     }
62 | 
63 |     .earth img,
64 |     .moon img {
65 |         border-radius: 50%;
66 |         box-shadow: 0 0 12em 1em rgba(110, 140, 200, .6);
67 |     }
68 | 
69 |     @keyframes spin {
70 |         to {
71 |             transform: rotateZ(360deg);
72 |         }
73 |     }
74 | </style>
75 | 
76 | <body>
77 |     <article class="earth-demo">
78 |         <div class="earth">
79 |             <img src="https://cssanimation.rocks/images/random/earth.png" alt="">
80 |         </div>
81 | 
82 |         <div class="moon-container">
83 |             <div class="moon">
84 |                 <img src="https://cssanimation.rocks/images/random/moon.png" alt="">
85 |             </div>
86 |         </div>
87 |     </article>
88 | </body>
89 | 
90 | </html>


--------------------------------------------------------------------------------
/16_Hamburger Menu/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html class="my-2 rounded-full h-10 w-[16rem] px-4">
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <title>Animated Hamburger Menu - @code.scientist</title>
10 | </head>
11 | 
12 | <style>
13 |     body {
14 |         background-color: #111827;
15 |         color: white;
16 |         display: flex;
17 |         align-items: center;
18 |         justify-content: center;
19 |     }
20 | 
21 |     .menu {
22 |         height: 100px;
23 |         width: 100px;
24 |         display: inline-flex;
25 |         justify-content: center;
26 |         align-items: center;
27 |         cursor: pointer;
28 |     }
29 | 
30 |     .hamberger-menu {
31 |         --height: 10px;
32 |         height: 10px;
33 |         width: 100%;
34 |         background-color: white;
35 |         border-radius: calc(var(--height));
36 |         position: relative;
37 |         transform: rotate(0deg);
38 |         transition: all ease 0.5s;
39 |     }
40 | 
41 |     .hamberger-menu::before,
42 |     .hamberger-menu::after {
43 |         content: "";
44 |         position: absolute;
45 |         background-color: inherit;
46 |         height: 100%;
47 |         width: 50%;
48 |         margin: auto;
49 |         border-radius: inherit;
50 |         transition: all ease 0.5s;
51 |     }
52 | 
53 |     .hamberger-menu::before {
54 |         top: -20px;
55 |         left: 0;
56 |         transform-origin: left;
57 |     }
58 | 
59 |     .hamberger-menu::after {
60 |         bottom: -20px;
61 |         right: 0;
62 |         transform-origin: right;
63 |     }
64 | 
65 |     .open {
66 |         transform: rotate(135deg);
67 |     }
68 | 
69 |     .open::before {
70 |         top: 0;
71 |         transform: translateX(100%) rotate(-90deg);
72 |     }
73 | 
74 |     .open::after {
75 |         bottom: 0;
76 |         transform: translateX(-100%) rotate(-90deg);
77 |     }
78 | </style>
79 | 
80 | <body>
81 |     <div class="menu">
82 |         <link rel="stylesheet" href="style.css" />
83 |         <div class="hamberger-menu"></div>
84 |     </div>
85 | 
86 |     <script>
87 |         const menus = document.querySelectorAll(".menu");
88 |         menus.forEach(function (menu) {
89 |             const hambergerMenu = menu.querySelector(".hamberger-menu");
90 |             menu.addEventListener("click", function () {
91 |                 hambergerMenu.classList.toggle("open");
92 |             });
93 |         });
94 |     </script>
95 | </body>
96 | 
97 | </html>


--------------------------------------------------------------------------------
/17_Arrange Image parts on hover/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html class="my-2 rounded-full h-10 w-[16rem] px-4">
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <title>Arrange image parts on hover - @code.scientist</title>
 10 | </head>
 11 | 
 12 | <style>
 13 |     * {
 14 |         margin: 0;
 15 |         padding: 0;
 16 |         box-sizing: border-box;
 17 |     }
 18 | 
 19 |     body {
 20 |         background-color: #111827;
 21 |     }
 22 | 
 23 |     img {
 24 |         display: block;
 25 |         width: 100%;
 26 |     }
 27 | 
 28 |     .section {
 29 |         border: 1px solid black;
 30 |         min-height: 100vh;
 31 |         display: flex;
 32 |         align-items: center;
 33 |         justify-content: center;
 34 |     }
 35 | 
 36 |     .card {
 37 |         max-width: 300px;
 38 |         position: relative;
 39 |         transition: box-shadow 0.2s linear;
 40 |     }
 41 | 
 42 |     .card:hover {
 43 |         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
 44 |     }
 45 | 
 46 |     .card>img {
 47 |         visibility: hidden;
 48 |     }
 49 | 
 50 |     .card .card-part {
 51 |         position: absolute;
 52 |         height: 50%;
 53 |         width: 50%;
 54 |         background-image: url('../img/one.jpg');
 55 |         background-repeat: no-repeat;
 56 |         background-size: 200%;
 57 |         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
 58 |         transition: all 0.3s linear;
 59 |     }
 60 | 
 61 |     .card:hover .card-part {
 62 |         transform: translate(0, 0);
 63 |         box-shadow: none;
 64 |     }
 65 | 
 66 |     .card .top-left {
 67 |         top: 0;
 68 |         left: 0;
 69 |         background-position: 0 0;
 70 |         transform: translate(-20px, -25px);
 71 |     }
 72 | 
 73 |     .card .top-right {
 74 |         top: 0;
 75 |         right: 0;
 76 |         background-position: right 0;
 77 |         transform: translate(5px, -5px);
 78 |     }
 79 | 
 80 |     .card .bottom-left {
 81 |         bottom: 0;
 82 |         left: 0;
 83 |         background-position: 0 bottom;
 84 |         transform: translate(-5px, -5px);
 85 |     }
 86 | 
 87 |     .card .bottom-right {
 88 |         bottom: 0;
 89 |         right: 0;
 90 |         background-position: right bottom;
 91 |         transform: translate(15px, 15px);
 92 |     }
 93 | </style>
 94 | 
 95 | <body>
 96 |     <section class="section">
 97 |         <div class="card">
 98 |             <img src="../img/one.jpg" alt="" />
 99 |             <div class="card-part top-left"></div>
100 |             <div class="card-part top-right"></div>
101 |             <div class="card-part bottom-left"></div>
102 |             <div class="card-part bottom-right"></div>
103 |         </div>
104 |     </section>
105 | </body>
106 | 
107 | </html>


--------------------------------------------------------------------------------
/18_Social media icons with hover and inverse actions/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <!-- Font Awesome Icons  -->
 10 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
 11 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
 12 |         crossorigin="anonymous" />
 13 | 
 14 |     <!-- Google Fonts  -->
 15 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 16 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 17 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
 18 | 
 19 | 
 20 |     <title>Social Media icons with hover and inverse actions - @code.scientist</title>
 21 | </head>
 22 | 
 23 | <style>
 24 |     * {
 25 |         font-family: 'Poppins', sans-serif;
 26 |     }
 27 | 
 28 |     body {
 29 |         background-color: #111827;
 30 |         color: white;
 31 |         display: flex;
 32 |         align-items: center;
 33 |         justify-content: center;
 34 |     }
 35 | 
 36 |     .social-icons {
 37 |         display: flex;
 38 |         justify-content: center;
 39 |         list-style: none;
 40 |     }
 41 | 
 42 |     .social-icons li {
 43 |         margin: 0 10px;
 44 |     }
 45 | 
 46 |     .social-icons li a {
 47 |         font-size: 30px;
 48 |         height: 70px;
 49 |         width: 70px;
 50 |         border-radius: 50%;
 51 |         display: flex;
 52 |         align-items: center;
 53 |         justify-content: center;
 54 |         text-decoration: none;
 55 |         color: white;
 56 |         position: relative;
 57 |         transition: 0.5s ease;
 58 |     }
 59 | 
 60 |     .social-icons li a:hover {
 61 |         background-image: linear-gradient(45deg, #12c2e9, #c471ed, #f64f59);
 62 |         background-clip: text;
 63 |         color: transparent;
 64 |         -webkit-text-fill-color: transparent;
 65 |         -webkit-background-clip: text;
 66 |         font-size: 40px;
 67 |     }
 68 | 
 69 |     .social-icons li a::before {
 70 |         content: '';
 71 |         position: absolute;
 72 |         z-index: -1;
 73 |         height: 70px;
 74 |         width: 70px;
 75 |         border-radius: 50%;
 76 |         background: linear-gradient(45deg, #12c2e9, #c471ed, #f64f59);
 77 |         transform: scale(1);
 78 |         transition: 0.5s ease-in-out;
 79 |     }
 80 | 
 81 |     .social-icons li a:hover::before {
 82 |         transform: scale(0);
 83 |     }
 84 | </style>
 85 | 
 86 | <body>
 87 |     <ul class="social-icons">
 88 |         <li>
 89 |             <a href="#"><i class="fab fa-whatsapp"></i></a>
 90 |         </li>
 91 |         <li>
 92 |             <a href="#"><i class="fab fa-instagram"></i></a>
 93 |         </li>
 94 |         <li>
 95 |             <a href="#"><i class="fab fa-twitter"></i></a>
 96 |         </li>
 97 |         <li>
 98 |             <a href="#"><i class="fab fa-snapchat"></i></a>
 99 |         </li>
100 |     </ul>
101 | </body>
102 | 
103 | </html>


--------------------------------------------------------------------------------
/19_Page Loader using CSS/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <!-- Font Awesome Icons  -->
15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
17 |         crossorigin="anonymous" />
18 | 
19 |     <title>Page loader using CSS - @code.scientist</title>
20 | </head>
21 | 
22 | <style>
23 |     * {
24 |         font-family: 'Poppins', sans-serif;
25 |         padding-top: 10rem;
26 |     }
27 | 
28 |     .loader {
29 |         margin: 600px;
30 |         width: 100px;
31 |         height: 100px;
32 |         position: relative;
33 |     }
34 | 
35 |     .loader::before,
36 |     .loader::after {
37 |         content: '';
38 |         position: absolute;
39 |         width: inherit;
40 |         height: inherit;
41 |         border-radius: 50%;
42 |         mix-blend-mode: multiply;
43 |         animation: rotate 1s infinite cubic-bezier(0.77, 0, 0.175, 1);
44 |     }
45 | 
46 |     .loader::before {
47 |         background-color: deeppink;
48 |     }
49 | 
50 |     .loader::after {
51 |         background-color: deepskyblue;
52 |         animation-delay: .5s;
53 |     }
54 | 
55 |     @keyframes rotate {
56 | 
57 |         0%,
58 |         100% {
59 |             left: 95px;
60 |         }
61 | 
62 |         25% {
63 |             transform: scale(.3);
64 |         }
65 | 
66 |         50% {
67 |             left: 0;
68 |         }
69 | 
70 |         75% {
71 |             transform: scale(1);
72 |         }
73 |     }
74 | </style>
75 | 
76 | <body>
77 |     <span class="loader"></span>
78 | </body>
79 | 
80 | </html>


--------------------------------------------------------------------------------
/20_Toggle Youtube Subscribe Button/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <!-- Font Awesome Icons  -->
15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
17 |         crossorigin="anonymous" />
18 | 
19 |     <title>Toggle Subscribe Button - @code.scientist</title>
20 | </head>
21 | 
22 | <style>
23 |     * {
24 |         font-family: 'Poppins', sans-serif;
25 |     }
26 | 
27 |     body {
28 |         background-color: #111827;
29 |         color: white;
30 |         display: flex;
31 |         align-items: center;
32 |         justify-content: center;
33 |         padding-top: 20rem;
34 |     }
35 | 
36 |     .subscribe {
37 |         padding: 10px 20px;
38 |         text-transform: uppercase;
39 |         border: none;
40 |         border-radius: 2px;
41 |         background-color: red;
42 |         color: white;
43 |         font-size: 20px;
44 |         letter-spacing: 1px;
45 |         cursor: pointer;
46 |         content: 'subscribe';
47 |     }
48 | </style>
49 | 
50 | <body>
51 |     <button id="subscribe" class="subscribe">subscribe</button>
52 | 
53 |     <script>
54 |         let subscribeBtn = document.getElementById("subscribe");
55 |         let subscribe = false;
56 | 
57 |         subscribeBtn.addEventListener('click', () => {
58 |             if (subscribe) {
59 |                 subscribeBtn.innerText = "subscribed"
60 |                 subscribeBtn.style = `background-color: gray;`
61 |                 subscribe = false
62 |             } else {
63 |                 subscribeBtn.innerText = "subscribe"
64 |                 subscribeBtn.style = `background-color: red;`
65 |                 subscribe = true
66 |             }
67 |         })
68 |     </script>
69 | </body>
70 | 
71 | </html>


--------------------------------------------------------------------------------
/21_Neon Text using CSS/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Lora&display=swap" rel="stylesheet">
13 | 
14 |     <title>Neon Text - @code.scientist x @julianvelez1997</title>
15 | </head>
16 | 
17 | <style>
18 |     body {
19 |         background-color: black;
20 |         margin: 0;
21 |         height: 100vh;
22 |     }
23 | 
24 |     .cont {
25 |         position: absolute;
26 |         top: calc(50% - 250px);
27 |         left: calc(50% - 400px);
28 |         text-align: center;
29 |         height: 500px;
30 |         width: 800px;
31 |         display: flex;
32 |         justify-content: center;
33 |     }
34 | 
35 |     #julian {
36 |         color: #fff;
37 |         align-self: center;
38 |         font-size: 120px;
39 |         text-transform: uppercase;
40 |         letter-spacing: 10px;
41 |         font-family: Lora, sans-serif;
42 |         animation: glow 1200ms ease-in-out infinite alternate;
43 |     }
44 | 
45 |     @keyframes glow {
46 |         0% {
47 |             color: rgba(255, 255, 255, 0.2);
48 |             text-shadow: 10px 10px 100px #fff, 10px 10px 100px #fff, 10px 10px 100px #E91E63, 10px 10px 100px #E91E63, 10px 10px 100px #E91E63, 10px 10px 100px #E91E63, 10px 10px 100px #E91E63;
49 |         }
50 | 
51 |         100% {
52 |             color: rgba(255, 255, 255, 0.8);
53 |             text-shadow: 0px 0px 5px #fff, 0px 0px 5px #fff, 10px 10px 150px #E91E63, 10px 10px 150px #E91E63, 10px 10px 150px #E91E63, 10px 10px 150px #E91E63, 10px 10px 150px #E91E63;
54 |         }
55 |     }
56 | </style>
57 | 
58 | <body>
59 |     <div class="cont">
60 |         <h1 id="julian">julian</h1>
61 |     </div>
62 | </body>
63 | 
64 | </html>


--------------------------------------------------------------------------------
/22_CSS Gradient button with Gradient Shadow/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Font Awesome Icons  -->
10 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
11 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
12 |         crossorigin="anonymous" />
13 | 
14 |     <!-- Google Fonts  -->
15 |     <link rel="preconnect" href="https://fonts.googleapis.com">
16 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
17 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
18 | 
19 |     <title>CSS Gradient Button with Gradient Shadow - @code.scientist</title>
20 | </head>
21 | 
22 | <style>
23 |     * {
24 |         font-family: 'Poppins', sans-serif;
25 |     }
26 | 
27 |     body {
28 |         background-color: #111827;
29 |         color: white;
30 |         display: flex;
31 |         align-items: center;
32 |         justify-content: center;
33 |         padding-top: 20rem;
34 |     }
35 | 
36 |     .gradient-btn {
37 |         height: 4rem;
38 |         width: 12rem;
39 |         font-size: 16px;
40 |         font-weight: bold;
41 |         border-radius: 40px;
42 |         border: none;
43 |         background: linear-gradient(45deg, #ef32d9, #89fffd);
44 |         color: white;
45 |         cursor: pointer;
46 |         position: relative;
47 |     }
48 | 
49 |     .gradient-btn::after {
50 |         content: '';
51 |         position: absolute;
52 |         bottom: 0;
53 |         left: 0;
54 |         height: 100%;
55 |         width: 100%;
56 |         border-radius: 40px;
57 |         background: linear-gradient(45deg, #ef32d9, #89fffd);
58 |         color: white;
59 |         z-index: -1;
60 |         filter: blur(0px);
61 |         transition: 0.5s ease;
62 |     }
63 | 
64 |     .gradient-btn:hover::after {
65 |         filter: blur(15px);
66 |     }
67 | </style>
68 | 
69 | <body>
70 |     <button class="gradient-btn">Call To Action</button>
71 | </body>
72 | 
73 | </html>


--------------------------------------------------------------------------------
/23_Amazing Effect using CSS/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <title>Amazing Effect using CSS - @code.scientist x @julianvelez1997</title>
 10 | </head>
 11 | 
 12 | <style>
 13 |     body {
 14 |         margin: 0;
 15 |         padding: 0;
 16 |         width: 100vw;
 17 |         height: 100vh;
 18 |         overflow: hidden;
 19 |         display: flex;
 20 |         align-items: center;
 21 |         justify-content: center;
 22 |         background: radial-gradient(circle at 50% 50%, #222, #111, #080808);
 23 |     }
 24 | 
 25 |     .content {
 26 |         width: 80vmin;
 27 |         height: 80vmin;
 28 |         position: relative;
 29 |         animation: spin 5s linear 0s infinite;
 30 |     }
 31 | 
 32 |     @keyframes spin {
 33 |         100% {
 34 |             transform: rotate(360deg);
 35 |         }
 36 |     }
 37 | 
 38 |     .content>div {
 39 |         --line: #47c;
 40 |         position: absolute;
 41 |         width: 70%;
 42 |         height: 70%;
 43 |         border-radius: 100%;
 44 |         box-sizing: border-box;
 45 |         box-shadow: -3vmin 3vmin 3vmin 0 #161616 inset,
 46 |             1vmin -1vmin 0.125vmin -1.25vmin var(--line);
 47 |         background: radial-gradient(circle at 36% 64%,
 48 |                 #fff0 0 calc(53.5% - 1px),
 49 |                 var(--line) 53.5% 54%,
 50 |                 #fff0 calc(54% + 1px) 100%),
 51 |             radial-gradient(circle at 38% 62%,
 52 |                 #fff0 0 calc(54.5% - 1px),
 53 |                 var(--line) 54.5% 55%,
 54 |                 #fff0 calc(55% + 1px) 100%),
 55 |             radial-gradient(circle at 42% 58%,
 56 |                 #fff0 0 calc(57.75% - 1px),
 57 |                 var(--line) 57.75% 58%,
 58 |                 #fff0 calc(58% + 1px) 100%),
 59 |             radial-gradient(circle at 40% 60%,
 60 |                 #fff0 0 calc(56.75% - 1px),
 61 |                 var(--line) 56.75% 57%,
 62 |                 #fff0 calc(57% + 1px) 100%),
 63 |             radial-gradient(circle at 45% 55%,
 64 |                 #fff0 0 calc(61.75% - 1px),
 65 |                 var(--line) 61.75% 62%,
 66 |                 #fff0 calc(62% + 1px) 100%),
 67 |             radial-gradient(circle at 43.5% 56.5%,
 68 |                 #fff0 0 calc(59.75% - 1px),
 69 |                 var(--line) 59.75% 60%,
 70 |                 #fff0 calc(60% + 1px) 100%),
 71 |             radial-gradient(circle at 45% 55%,
 72 |                 #fff0 0 calc(64.5% - 1px),
 73 |                 var(--line) 64.5% 64.75%,
 74 |                 #fff0 calc(64.75% + 1px) 100%),
 75 |             radial-gradient(circle at 46.5% 53.5%,
 76 |                 #fff0 0 calc(65.5% - 1px),
 77 |                 var(--line) 65.5% 65.75%,
 78 |                 #fff0 calc(65.75% + 1px) 100%),
 79 |             radial-gradient(circle at 48.5% 51.5%,
 80 |                 #fff0 0 calc(67.75% - 1px),
 81 |                 var(--line) 67.75% 68.25%,
 82 |                 #fff0 calc(68.25% + 1px) 100%),
 83 |             radial-gradient(circle at 49% 51%,
 84 |                 #fff0 0 calc(69.5% - 1px),
 85 |                 var(--line) 69.5% 70%,
 86 |                 #fff0 calc(70% + 1px) 100%);
 87 |     }
 88 | 
 89 |     .top-left {
 90 |         left: 11vmin;
 91 |         top: 2vmin;
 92 |     }
 93 | 
 94 |     .left-bot {
 95 |         bottom: 11vmin;
 96 |         left: 2vmin;
 97 |         transform: rotate(-90deg);
 98 |     }
 99 | 
100 |     .bot-right {
101 |         right: 11vmin;
102 |         bottom: 2vmin;
103 |         transform: rotate(-180deg);
104 |     }
105 | 
106 |     .right-top {
107 |         right: 2vmin;
108 |         top: 11vmin;
109 |         transform: rotate(-270deg);
110 |     }
111 | </style>
112 | 
113 | <body>
114 |     <div class="content">
115 |         <div class="top-left"></div>
116 |         <div class="left-bot"></div>
117 |         <div class="bot-right"></div>
118 |         <div class="right-top"></div>
119 |     </div>
120 | 
121 | </body>
122 | 
123 | </html>


--------------------------------------------------------------------------------
/24_3D Plane Effect using CSS/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <title>3D plane effect using CSS - @code.scientist x @julianvelez1997</title>
 10 | </head>
 11 | 
 12 | <style>
 13 |     *,
 14 |     *::after,
 15 |     *::before {
 16 |         box-sizing: border-box;
 17 |         transform-style: preserve-3d;
 18 |         position: relative;
 19 |     }
 20 | 
 21 | 
 22 |     /*********************/
 23 |     /* CUSTOM PROPERTIES */
 24 |     /*********************/
 25 |     :root {
 26 |         --color-main: #333;
 27 |         --color-background: #ccc;
 28 | 
 29 |         --color-plane: dodgerblue;
 30 |     }
 31 | 
 32 |     /********************/
 33 |     /* */
 34 |     /********************/
 35 |     body {
 36 |         margin: 0;
 37 |         height: 100vh;
 38 |         background-color: lightskyblue;
 39 |         font-family: 'Saira', sans-serif;
 40 |         color: var(--color-main);
 41 | 
 42 |         display: grid;
 43 |         place-items: center;
 44 |     }
 45 | 
 46 |     div.scene {
 47 |         perspective: 30deg;
 48 |     }
 49 | 
 50 |     div.plane {
 51 |         --size-plane: 40vmin;
 52 |         width: var(--size-plane);
 53 |         aspect-ratio: 210/297;
 54 | 
 55 |         display: flex;
 56 | 
 57 |         animation: rotate 120s infinite linear;
 58 |     }
 59 | 
 60 |     @keyframes rotate {
 61 |         100% {
 62 |             transform: rotatex(3turn) rotatey(5turn) rotatez(7turn);
 63 |         }
 64 |     }
 65 | 
 66 |     div.wing {
 67 |         flex-grow: 1;
 68 |         display: flex;
 69 |     }
 70 | 
 71 |     div.wing:first-of-type {
 72 |         transform-origin: right center;
 73 |         transform: rotatey(60deg);
 74 |     }
 75 | 
 76 |     div.wing:last-of-type {
 77 |         transform-origin: left center;
 78 |         transform: rotatey(-60deg);
 79 |     }
 80 | 
 81 |     div.wing::after {
 82 |         content: "";
 83 |         position: absolute;
 84 |         width: 100%;
 85 |         height: 100%;
 86 |     }
 87 | 
 88 |     div.wing:first-of-type::after {
 89 |         clip-path: polygon(100% 0, 100% 100%, 50% 100%, 100% 0);
 90 |         background-color: #cccccc;
 91 |     }
 92 | 
 93 |     div.wing:last-of-type::after {
 94 |         clip-path: polygon(0 0, 50% 100%, 0 100%, 0 0);
 95 |         background-color: #ffffff;
 96 |     }
 97 | 
 98 |     div.innerwing {
 99 |         width: 100%;
100 |     }
101 | 
102 |     div.wing:first-of-type div.innerwing {
103 |         transform-origin: right top;
104 |         transform: rotate3d(52.55, -297, 0, 120deg);
105 |     }
106 | 
107 |     div.wing:last-of-type div.innerwing {
108 |         transform-origin: left top;
109 |         transform: rotate3d(-52.55, -297, 0, 60deg);
110 |     }
111 | 
112 | 
113 |     div.wing div.innerwing::after {
114 |         content: "";
115 |         position: absolute;
116 |         width: 100%;
117 |         height: 100%;
118 | 
119 |     }
120 | 
121 |     div.wing:first-of-type div.innerwing::after {
122 |         clip-path: polygon(100% 0, 50% 100%, 0 100%, 100% 0);
123 |         background-color: #ffffff;
124 |     }
125 | 
126 | 
127 | 
128 |     div.wing:last-of-type div.innerwing::after {
129 |         clip-path: polygon(0 0, 0% 100%, 50% 100%, 0 0);
130 |         background-color: #cccccc;
131 |     }
132 | </style>
133 | 
134 | <body>
135 |     <div class="scene">
136 |         <div class="plane">
137 |             <div class="wing">
138 |                 <div class="innerwing"></div>
139 |             </div>
140 |             <div class="wing">
141 |                 <div class="innerwing"></div>
142 |             </div>
143 |         </div>
144 |     </div>
145 | </body>
146 | 
147 | </html>


--------------------------------------------------------------------------------
/25_Cat Animation using CSS/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <title>walking Cat Animation using CSS - @data._.pirates x @code.scientist</title>
  9 |     <link rel="stylesheet" href="style.css">
 10 | </head>
 11 | 
 12 | <style>
 13 |     html {
 14 |         font-size: 20px;
 15 |         margin: 0;
 16 |         background: #0c0207;
 17 |     }
 18 | 
 19 |     #marco {
 20 |         width: 1325px;
 21 |         height: 500px;
 22 |         margin: 0 auto;
 23 |         overflow: hidden;
 24 |         border-radius: 16px;
 25 |         margin-top: 2em;
 26 |     }
 27 | 
 28 |     #cielo {
 29 |         border-radius: 16px;
 30 |         width: 1325px;
 31 |         height: 500px;
 32 |         background: linear-gradient(to bottom, #0B4C5F 0%, #04B4AE 52%, #0c0207 100%);
 33 |         position: absolute;
 34 |         z-index: -30;
 35 |         top: 0;
 36 |         margin-top: 2em;
 37 |     }
 38 | 
 39 |     #edificios {
 40 |         background: url('https://res.cloudinary.com/pastelitos/image/upload/v1610526533/eva/edificiosOne_fsg7nx.svg');
 41 |         height: 500px;
 42 |         width: 1325px;
 43 |         z-index: -10;
 44 |         top: 6.5em;
 45 |         background-position: 0px 0px;
 46 |         background-repeat: repeat-x;
 47 |         -webkit-animation: animar_edificios 120s linear infinite;
 48 |         -ms-animation: animar_edificios 120s linear infinite;
 49 |         -moz-animation: animar_edificios 120s linear infinite;
 50 |         position: absolute;
 51 |     }
 52 | 
 53 |     /* Animacion edificios */
 54 | 
 55 |     @keyframes animar_edificios {
 56 |         from {
 57 |             background-position: 0 0;
 58 |         }
 59 | 
 60 |         to {
 61 |             background-position: 100% 0;
 62 |         }
 63 |     }
 64 | 
 65 |     @-webkit-keyframes animar_edificios {
 66 |         from {
 67 |             background-position: 0 0;
 68 |         }
 69 | 
 70 |         to {
 71 |             background-position: 100% 0;
 72 |         }
 73 |     }
 74 | 
 75 |     @-ms-keyframes animar_edificios {
 76 |         from {
 77 |             background-position: 0 0;
 78 |         }
 79 | 
 80 |         to {
 81 |             background-position: 100% 0;
 82 |         }
 83 |     }
 84 | 
 85 |     @-moz-keyframes animar_edificios {
 86 |         from {
 87 |             background-position: 0 0;
 88 |         }
 89 | 
 90 |         to {
 91 |             background-position: 100% 0;
 92 |         }
 93 |     }
 94 | 
 95 |     #luna {
 96 |         width: 6em;
 97 |         height: 6em;
 98 |         -moz-border-radius: 50%;
 99 |         -webkit-border-radius: 50%;
100 |         border-radius: 50%;
101 |         -moz-box-shadow: 30px 10px 0 #F7F8E0;
102 |         -webkit-box-shadow: 30px 10px 0 #F7F8E0;
103 |         box-shadow: 30px 10px 0 #F7F8E0;
104 |         margin-top: 1em;
105 |         margin-left: 50%;
106 |         position: absolute;
107 |         z-index: -19;
108 |     }
109 | 
110 |     #muro {
111 |         height: 23em;
112 |         width: 100%;
113 |         background: -moz-linear-gradient(top, #416663 0%, #0c0207 19%);
114 |         background: -webkit-linear-gradient(top, #416663 0%, #0c0207 19%);
115 |         background: linear-gradient(to bottom, #416663 0%, #0c0207 19%);
116 |         bottom: 0px;
117 |     }
118 | 
119 |     #gato {
120 |         background: url('https://res.cloudinary.com/pastelitos/image/upload/v1610526571/eva/gatito_pushui.svg');
121 |         height: 297px;
122 |         width: 507.5px;
123 |         margin-top: 2em;
124 |         margin-left: 2em;
125 |         z-index: 10;
126 |         -webkit-animation: sprite-animation 1.2s steps(16, end) infinite;
127 |         -moz-animation: sprite-animation 1.2s steps(16, end) infinite;
128 |         -ms-animation: sprite-animation 1.2s steps(16, end) infinite;
129 |         animation: sprite-animation 1.2s steps(16, end) infinite;
130 |     }
131 | 
132 |     @-webkit-keyframes sprite-animation {
133 |         from {
134 |             background-position: 0 0;
135 |         }
136 | 
137 |         to {
138 |             background-position: -8120px 0;
139 |         }
140 |     }
141 | 
142 |     @-ms-keyframes sprite-animation {
143 |         from {
144 |             background-position: 0 0;
145 |         }
146 | 
147 |         to {
148 |             background-position: -8120px 0;
149 |         }
150 |     }
151 | 
152 |     @-moz-keyframes sprite-animation {
153 |         from {
154 |             background-position: 0 0;
155 |         }
156 | 
157 |         to {
158 |             background-position: -8120px 0;
159 |         }
160 |     }
161 | 
162 |     @keyframes sprite-animation {
163 |         from {
164 |             background-position: 0 0;
165 |         }
166 | 
167 |         to {
168 |             background-position: -8120px 0;
169 |         }
170 |     }
171 | </style>
172 | 
173 | <body>
174 |     <div id="marco">
175 |         <div id="cielo"></div>
176 |         <div id="luna"></div>
177 |         <div id="gato"></div>
178 |         <div id="muro"></div>
179 |         <div id="edificios"></div>
180 |     </div>
181 | </body>
182 | 
183 | </html>


--------------------------------------------------------------------------------
/26_Simple Toggle Button using CSS/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <!-- Font Awesome Icons  -->
15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
17 |         crossorigin="anonymous" />
18 | 
19 |     <title>Simple Toggle Button using CSS - @code.scientist x @coders_community_</title>
20 | </head>
21 | 
22 | <style>
23 |     * {
24 |         font-family: 'Poppins', sans-serif;
25 |     }
26 | 
27 |     body {
28 |         background-color: #111827;
29 |         color: white;
30 |         display: flex;
31 |         align-items: center;
32 |         justify-content: center;
33 |         padding-top: 15rem;
34 |     }
35 | 
36 |     input[type=checkbox] {
37 |         height: 0;
38 |         width: 0;
39 |         visibility: hidden;
40 |     }
41 | 
42 |     label {
43 |         cursor: pointer;
44 |         width: 200px;
45 |         height: 100px;
46 |         background-color: gray;
47 |         display: block;
48 |         border-radius: 90px;
49 |         position: relative;
50 |     }
51 | 
52 |     label::after {
53 |         content: '';
54 |         position: absolute;
55 |         top: 5px;
56 |         left: 5px;
57 |         width: 90px;
58 |         height: 90px;
59 |         background-color: #f2eee3;
60 |         border-radius: 90px;
61 |         transition: 0.3s;
62 |     }
63 | 
64 |     input:checked+label {
65 |         background: #bada53;
66 |     }
67 | 
68 |     input:checked+label::after {
69 |         left: calc(100% - 5px);
70 |         transform: translateX(-100%);
71 |     }
72 | 
73 |     label:active::after {
74 |         width: 130px;
75 |     }
76 | </style>
77 | 
78 | <body>
79 |     <input type="checkbox" id="switch">
80 |     <label for="switch"></label>
81 | </body>
82 | 
83 | </html>


--------------------------------------------------------------------------------
/27_Gradient Border Like IG Story/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <!-- Font Awesome Icons  -->
15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
17 |         crossorigin="anonymous" />
18 | 
19 |     <title>Gradient Border Like IG Story - @code.scientist x @codingtorque</title>
20 | </head>
21 | 
22 | <style>
23 |     * {
24 |         font-family: 'Poppins', sans-serif;
25 |     }
26 | 
27 |     body {
28 |         background-color: #111827;
29 |         color: white;
30 |         display: flex;
31 |         align-items: center;
32 |         justify-content: center;
33 |         padding-top: 15rem;
34 |     }
35 | 
36 |     .profile-image {
37 |         background: linear-gradient(45deg, #833ab4, #fd1d1d, #fcb045);
38 |         display: flex;
39 |         align-items: center;
40 |         justify-content: center;
41 |         padding: 5px;
42 |         border-radius: 50%;
43 |     }
44 | 
45 |     .profile-image img {
46 |         height: 8rem;
47 |         width: 8rem;
48 |         border-radius: 50%;
49 |     }
50 | </style>
51 | 
52 | <body>
53 |     <div class="profile-image">
54 |         <img src="../img/coding-torque-logo.png" alt="profile">
55 |     </div>
56 | </body>
57 | 
58 | </html>


--------------------------------------------------------------------------------
/28_Glassmorphic Social Media icons/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <!-- Google Fonts  -->
 10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
 13 | 
 14 |     <!-- Font Awesome Icons  -->
 15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
 16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
 17 |         crossorigin="anonymous" />
 18 | 
 19 |     <title>Glassmorphic Social Media Icons using CSS - @code.scientist x @codingtorque</title>
 20 | </head>
 21 | 
 22 | <style>
 23 |     * {
 24 |         font-family: 'Poppins', sans-serif;
 25 |     }
 26 | 
 27 |     body {
 28 |         background-color: #111827;
 29 |         color: white;
 30 |         display: flex;
 31 |         align-items: center;
 32 |         justify-content: center;
 33 |         padding-top: 15rem;
 34 |     }
 35 | 
 36 |     .social-icons {
 37 |         display: flex;
 38 |         justify-content: center;
 39 |         list-style: none;
 40 |         height: fit-content;
 41 |         padding: 0;
 42 |         overflow: hidden;
 43 |     }
 44 | 
 45 |     .social-icons li {
 46 |         margin: 10px 10px;
 47 |     }
 48 | 
 49 |     .social-icons li a {
 50 |         font-size: 30px;
 51 |         height: 80px;
 52 |         width: 80px;
 53 |         border-radius: 50%;
 54 |         display: flex;
 55 |         align-items: center;
 56 |         justify-content: center;
 57 |         text-decoration: none;
 58 |         color: white;
 59 |         position: relative;
 60 |         transition: 0.5s ease;
 61 |         text-shadow: 0 0 30px;
 62 |     }
 63 | 
 64 |     .social-icons li a::after {
 65 |         content: '';
 66 |         position: absolute;
 67 |         top: 0;
 68 |         left: 0;
 69 |         height: 100%;
 70 |         width: 100%;
 71 |         backdrop-filter: blur(1px) saturate(180%);
 72 |         -webkit-backdrop-filter: blur(6px) saturate(180%);
 73 |         background-color: rgba(17, 25, 40, 0);
 74 |         border-radius: 50%;
 75 |         border: 1px solid rgba(255, 255, 255, 0.125);
 76 |     }
 77 | 
 78 |     .social-icons li a:hover {
 79 |         text-shadow: 0 0 0px;
 80 |     }
 81 | </style>
 82 | 
 83 | <body>
 84 |     <ul class="social-icons">
 85 |         <li>
 86 |             <a href="#" style="color: lawngreen;"><i class="fab fa-whatsapp"></i></a>
 87 |         </li>
 88 |         <li>
 89 |             <a href="#" style="color: red;"><i class="fab fa-youtube"></i></a>
 90 |         </li>
 91 |         <li>
 92 |             <a href="#" style="color: #6DD5FA;"><i class="fab fa-twitter"></i></a>
 93 |         </li>
 94 |         <li>
 95 |             <a href="#" style="color: yellow;"><i class="fab fa-snapchat"></i></a>
 96 |         </li>
 97 |     </ul>
 98 | </body>
 99 | 
100 | </html>


--------------------------------------------------------------------------------
/29_Floating Profile Image/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <!-- Font Awesome Icons  -->
15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
17 |         crossorigin="anonymous" />
18 | 
19 |     <title>Floating Profile Image using CSS - @code.scientist x @codingtorque</title>
20 | </head>
21 | 
22 | <style>
23 |     * {
24 |         font-family: 'Poppins', sans-serif;
25 |     }
26 | 
27 |     body {
28 |         background-color: #111827;
29 |         color: white;
30 |         display: flex;
31 |         align-items: center;
32 |         justify-content: center;
33 |         padding-top: 15rem;
34 |     }
35 | 
36 |     .profile-image img {
37 |         height: 8rem;
38 |         width: 8rem;
39 |         border-radius: 50%;
40 |         animation: float 4s linear infinite;
41 |     }
42 | 
43 |     @keyframes float {
44 | 
45 |         0%,
46 |         100% {
47 |             box-shadow: 0 5px 15px 0px rgba(255, 255, 255, 0.6);
48 |             transform: translatey(0px);
49 |         }
50 | 
51 |         50% {
52 |             box-shadow: 0 25px 15px 0px rgba(255, 255, 255, 0.2);
53 |             transform: translatey(-20px);
54 |         }
55 |     }
56 | </style>
57 | 
58 | <body>
59 |     <div class="profile-image">
60 |         <img src="../img/coding-torque-logo.png" alt="profile">
61 |     </div>
62 | </body>
63 | 
64 | </html>


--------------------------------------------------------------------------------
/30_Simple CTA button using Pseudo Selectors/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <!-- Font Awesome Icons  -->
15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
17 |         crossorigin="anonymous" />
18 | 
19 |     <title>Simple CTA button using pseudo selectors - @code.scientist x @codingtorque</title>
20 | </head>
21 | 
22 | <style>
23 |     * {
24 |         font-family: 'Poppins', sans-serif;
25 |     }
26 | 
27 |     body {
28 |         background-color: #111827;
29 |         color: white;
30 |         display: flex;
31 |         align-items: center;
32 |         justify-content: center;
33 |         padding-top: 15rem;
34 |     }
35 | 
36 |     .btn {
37 |         position: relative;
38 |         color: white;
39 |         border: none;
40 |         font-size: 2rem;
41 |         background: transparent;
42 |         cursor: pointer;
43 |         z-index: 1;
44 |     }
45 | 
46 |     .btn::after {
47 |         content: '';
48 |         position: absolute;
49 |         left: 0;
50 |         height: 100%;
51 |         width: 30%;
52 |         background: deepskyblue;
53 |         border-radius: 10px;
54 |         z-index: -1;
55 |         transition: 0.3s ease;
56 |     }
57 | 
58 |     .btn:hover::after {
59 |         width: 100%;
60 |     }
61 | </style>
62 | 
63 | <body>
64 |     <button class="btn">Hover me</button>
65 | </body>
66 | 
67 | </html>


--------------------------------------------------------------------------------
/31_Toggle Light and Dark Mode/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <!-- Google Fonts  -->
 10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
 13 | 
 14 |     <!-- Font Awesome Icons  -->
 15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
 16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
 17 |         crossorigin="anonymous" />
 18 | 
 19 |     <title>Toggle Light and Dark Mode - @code.scientist x @julianvelez1997</title>
 20 | </head>
 21 | 
 22 | <style>
 23 |     * {
 24 |         border: 0;
 25 |         box-sizing: border-box;
 26 |         margin: 0;
 27 |         padding: 0;
 28 |     }
 29 | 
 30 |     :root {
 31 |         --hue: 223;
 32 |         --bg: hsl(var(--hue), 10%, 100%);
 33 |         --fg: hsl(var(--hue), 10%, 0%);
 34 |         --primary: hsl(var(--hue), 90%, 55%);
 35 |         --primaryT: hsla(var(--hue), 90%, 55%, 0);
 36 |         --transDur: 0.3s;
 37 |         font-size: calc(16px + (32 - 16) * (100vw - 320px) / (1280 - 320));
 38 |     }
 39 | 
 40 |     html,
 41 |     body {
 42 |         background-color: var(--bg);
 43 |     }
 44 | 
 45 |     body,
 46 |     input {
 47 |         font: 1em/1.5 Fredoka, sans-serif;
 48 |     }
 49 | 
 50 |     body {
 51 |         color: var(--fg);
 52 |         height: 100vh;
 53 |         display: grid;
 54 |         place-items: center;
 55 |     }
 56 | 
 57 |     /* Default */
 58 |     .theme {
 59 |         display: flex;
 60 |         align-items: center;
 61 |         -webkit-tap-highlight-color: transparent;
 62 |     }
 63 | 
 64 |     .theme__fill,
 65 |     .theme__icon {
 66 |         transition: transform var(--transDur) ease-in-out;
 67 |     }
 68 | 
 69 |     .theme__fill {
 70 |         background-color: var(--bg);
 71 |         display: block;
 72 |         mix-blend-mode: difference;
 73 |         position: fixed;
 74 |         inset: 0;
 75 |         height: 100%;
 76 |         transform: translateX(-100%);
 77 |     }
 78 | 
 79 |     .theme__icon,
 80 |     .theme__toggle {
 81 |         z-index: 1;
 82 |     }
 83 | 
 84 |     .theme__icon,
 85 |     .theme__icon-part {
 86 |         position: absolute;
 87 |     }
 88 | 
 89 |     .theme__icon {
 90 |         display: block;
 91 |         top: 0.75em;
 92 |         left: 0.75em;
 93 |         width: 1.5em;
 94 |         height: 1.5em;
 95 |     }
 96 | 
 97 |     .theme__icon-part {
 98 |         border-radius: 50%;
 99 |         box-shadow: 0.4em -0.4em 0 0.5em hsl(0, 0%, 100%) inset;
100 |         top: calc(50% - 0.5em);
101 |         left: calc(50% - 0.5em);
102 |         width: 1em;
103 |         height: 1em;
104 |         transition:
105 |             box-shadow var(--transDur) ease-in-out,
106 |             opacity var(--transDur) ease-in-out,
107 |             transform var(--transDur) ease-in-out;
108 |         transform: scale(0.5);
109 |     }
110 | 
111 |     .theme__icon-part~.theme__icon-part {
112 |         background-color: hsl(0, 0%, 100%);
113 |         border-radius: 0.05em;
114 |         box-shadow: none;
115 |         top: 50%;
116 |         left: calc(50% - 0.05em);
117 |         transform: rotate(0deg) translateY(0.5em);
118 |         transform-origin: 50% 0;
119 |         width: 0.1em;
120 |         height: 0.2em;
121 |     }
122 | 
123 |     .theme__icon-part:nth-child(3) {
124 |         transform: rotate(45deg) translateY(0.5em);
125 |     }
126 | 
127 |     .theme__icon-part:nth-child(4) {
128 |         transform: rotate(90deg) translateY(0.5em);
129 |     }
130 | 
131 |     .theme__icon-part:nth-child(5) {
132 |         transform: rotate(135deg) translateY(0.5em);
133 |     }
134 | 
135 |     .theme__icon-part:nth-child(6) {
136 |         transform: rotate(180deg) translateY(0.5em);
137 |     }
138 | 
139 |     .theme__icon-part:nth-child(7) {
140 |         transform: rotate(225deg) translateY(0.5em);
141 |     }
142 | 
143 |     .theme__icon-part:nth-child(8) {
144 |         transform: rotate(270deg) translateY(0.5em);
145 |     }
146 | 
147 |     .theme__icon-part:nth-child(9) {
148 |         transform: rotate(315deg) translateY(0.5em);
149 |     }
150 | 
151 |     .theme__label,
152 |     .theme__toggle,
153 |     .theme__toggle-wrap {
154 |         position: relative;
155 |     }
156 | 
157 |     .theme__toggle,
158 |     .theme__toggle:before {
159 |         display: block;
160 |     }
161 | 
162 |     .theme__toggle {
163 |         background-color: hsl(48, 90%, 85%);
164 |         border-radius: 25% / 50%;
165 |         box-shadow: 0 0 0 0.125em var(--primaryT);
166 |         padding: 0.25em;
167 |         width: 6em;
168 |         height: 3em;
169 |         -webkit-appearance: none;
170 |         appearance: none;
171 |         transition:
172 |             background-color var(--transDur) ease-in-out,
173 |             box-shadow 0.15s ease-in-out,
174 |             transform var(--transDur) ease-in-out;
175 |     }
176 | 
177 |     .theme__toggle:before {
178 |         background-color: hsl(48, 90%, 55%);
179 |         border-radius: 50%;
180 |         content: "";
181 |         width: 2.5em;
182 |         height: 2.5em;
183 |         transition:
184 |             background-color var(--transDur) ease-in-out,
185 |             transform var(--transDur) ease-in-out;
186 |     }
187 | 
188 |     .theme__toggle:focus {
189 |         box-shadow: 0 0 0 0.125em var(--primary);
190 |         outline: transparent;
191 |     }
192 | 
193 |     /* Checked */
194 |     .theme__toggle:checked {
195 |         background-color: hsl(198, 90%, 15%);
196 |     }
197 | 
198 |     .theme__toggle:checked:before,
199 |     .theme__toggle:checked~.theme__icon {
200 |         transform: translateX(3em);
201 |     }
202 | 
203 |     .theme__toggle:checked:before {
204 |         background-color: hsl(198, 90%, 55%);
205 |     }
206 | 
207 |     .theme__toggle:checked~.theme__fill {
208 |         transform: translateX(0);
209 |     }
210 | 
211 |     .theme__toggle:checked~.theme__icon .theme__icon-part:nth-child(1) {
212 |         box-shadow: 0.2em -0.2em 0 0.2em hsl(0, 0%, 100%) inset;
213 |         transform: scale(1);
214 |     }
215 | 
216 |     .theme__toggle:checked~.theme__icon .theme__icon-part~.theme__icon-part {
217 |         opacity: 0;
218 |     }
219 | 
220 |     .theme__toggle:checked~.theme__icon .theme__icon-part:nth-child(2) {
221 |         transform: rotate(45deg) translateY(0.8em);
222 |     }
223 | 
224 |     .theme__toggle:checked~.theme__icon .theme__icon-part:nth-child(3) {
225 |         transform: rotate(90deg) translateY(0.8em);
226 |     }
227 | 
228 |     .theme__toggle:checked~.theme__icon .theme__icon-part:nth-child(4) {
229 |         transform: rotate(135deg) translateY(0.8em);
230 |     }
231 | 
232 |     .theme__toggle:checked~.theme__icon .theme__icon-part:nth-child(5) {
233 |         transform: rotate(180deg) translateY(0.8em);
234 |     }
235 | 
236 |     .theme__toggle:checked~.theme__icon .theme__icon-part:nth-child(6) {
237 |         transform: rotate(225deg) translateY(0.8em);
238 |     }
239 | 
240 |     .theme__toggle:checked~.theme__icon .theme__icon-part:nth-child(7) {
241 |         transform: rotate(270deg) translateY(0.8em);
242 |     }
243 | 
244 |     .theme__toggle:checked~.theme__icon .theme__icon-part:nth-child(8) {
245 |         transform: rotate(315deg) translateY(0.8em);
246 |     }
247 | 
248 |     .theme__toggle:checked~.theme__icon .theme__icon-part:nth-child(9) {
249 |         transform: rotate(360deg) translateY(0.8em);
250 |     }
251 | 
252 |     .theme__toggle-wrap {
253 |         margin: 0 0.75em;
254 |     }
255 | 
256 |     @supports selector(:focus-visible) {
257 |         .theme__toggle:focus {
258 |             box-shadow: 0 0 0 0.125em var(--primaryT);
259 |         }
260 | 
261 |         .theme__toggle:focus-visible {
262 |             box-shadow: 0 0 0 0.125em var(--primary);
263 |         }
264 |     }
265 | </style>
266 | 
267 | <body>
268 | 
269 |     <label for="theme" class="theme">
270 |         <span>Light</span>
271 |         <span class="theme__toggle-wrap">
272 |             <input id="theme" class="theme__toggle" type="checkbox" role="switch" name="theme" value="dark" />
273 |             <span class="theme__fill"></span>
274 |             <span class="theme__icon">
275 |                 <span class="theme__icon-part"></span>
276 |                 <span class="theme__icon-part"></span>
277 |                 <span class="theme__icon-part"></span>
278 |                 <span class="theme__icon-part"></span>
279 |                 <span class="theme__icon-part"></span>
280 |                 <span class="theme__icon-part"></span>
281 |                 <span class="theme__icon-part"></span>
282 |                 <span class="theme__icon-part"></span>
283 |                 <span class="theme__icon-part"></span>
284 |             </span>
285 |         </span>
286 |         <span>Dark</span>
287 |     </label>
288 | </body>
289 | 
290 | </html>


--------------------------------------------------------------------------------
/32_Simple Counter using JS/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- font-awesome icons css  -->
10 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
11 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
12 |         crossorigin="anonymous" />
13 | 
14 |     <title>Simple Counter using JavaScript - @code.scientist x @codingtorque</title>
15 | </head>
16 | 
17 | <style>
18 |     @import url("https://fonts.googleapis.com/css2?family=Poppins&family=Potta+One&display=swap");
19 | 
20 |     * {
21 |         margin: 0;
22 |         padding: 0;
23 |         box-sizing: border-box;
24 |         font-family: "Poppins", sans-serif;
25 |     }
26 | 
27 |     body {
28 |         display: flex;
29 |         align-items: center;
30 |         justify-content: center;
31 |         padding-top: 10rem;
32 |         background: #111827;
33 |     }
34 | 
35 |     .container {
36 |         display: flex;
37 |         align-items: center;
38 |         justify-content: center;
39 |         flex-direction: column;
40 |         border: 2px solid;
41 |         border-radius: 10px;
42 |         height: 12rem;
43 |         width: 12rem;
44 |         background: linear-gradient(45deg, #2193b0, #6dd5ed);
45 |         color: white;
46 |         position: relative;
47 |     }
48 | 
49 |     #incr,
50 |     #decr {
51 |         border-radius: 50%;
52 |         font-size: 15px;
53 |         position: absolute;
54 |         bottom: 20px;
55 |         right: -14px;
56 |         height: 30px;
57 |         width: 30px;
58 |         background: white;
59 |         border: 1px solid gainsboro;
60 |         box-shadow: 0 5px 26px -8px black;
61 |         cursor: pointer;
62 |     }
63 | 
64 |     #decr {
65 |         right: 20px;
66 |         bottom: -10px;
67 |     }
68 | </style>
69 | 
70 | <body>
71 |     <div class="container">
72 |         <h1>Counter</h1>
73 |         <h1 id="counter">0</h1>
74 |         <button id="incr">+</button>
75 |         <button id="decr">-</button>
76 |     </div>
77 | 
78 |     <script>
79 |         const counter = document.getElementById("counter");
80 |         const incr = document.getElementById("incr");
81 |         const decr = document.getElementById("decr");
82 | 
83 |         let count = 0;
84 |         incr.addEventListener("click", () => {
85 |             count++;
86 |             counter.innerText = count;
87 |         });
88 | 
89 |         decr.addEventListener("click", () => {
90 |             count--;
91 |             counter.innerText = count;
92 |         })
93 |     </script>
94 | </body>
95 | 
96 | </html>


--------------------------------------------------------------------------------
/33_Download button using CSS/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <!-- Font Awesome Icons  -->
15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
17 |         crossorigin="anonymous" />
18 | 
19 |     <title>Download Button using CSS - @code.scientist x @coders_community_</title>
20 | </head>
21 | 
22 | <style>
23 |     * {
24 |         font-family: 'Poppins', sans-serif;
25 |     }
26 | 
27 |     body {
28 |         background-color: #111827;
29 |         color: white;
30 |         display: flex;
31 |         align-items: center;
32 |         justify-content: center;
33 |         padding-top: 15rem;
34 |     }
35 | 
36 |     .btn {
37 |         padding: 10px 25px;
38 |         font-size: 16px;
39 |         background-color: deepskyblue;
40 |         color: white;
41 |         border-radius: 25px;
42 |         cursor: pointer;
43 |         transition: 0.3s ease;
44 |     }
45 | 
46 |     .btn i {
47 |         margin-right: 6px;
48 |     }
49 | 
50 |     .btn:hover {
51 |         letter-spacing: 1px;
52 |         background-color: rgb(55, 205, 255);
53 |     }
54 | </style>
55 | 
56 | <body>
57 |     <button class="btn">
58 |         <i class="fas fa-download"></i>
59 |         <span>Download</span>
60 |     </button>
61 | </body>
62 | 
63 | </html>


--------------------------------------------------------------------------------
/34_Curly Bracket Animated Loader using CSS/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <!-- Font Awesome Icons  -->
15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
17 |         crossorigin="anonymous" />
18 | 
19 |     <title>Curly Bracket Animated Loader using CSS - @code.scientist</title>
20 | </head>
21 | 
22 | <style>
23 |     * {
24 |         font-family: 'Poppins', sans-serif;
25 |     }
26 | 
27 |     body {
28 |         background-color: #111827;
29 |         color: white;
30 |         display: flex;
31 |         align-items: center;
32 |         justify-content: center;
33 |         padding-top: 15rem;
34 |     }
35 | 
36 |     .loader {
37 |         font-size: 5rem;
38 |         display: flex;
39 |     }
40 | 
41 |     .loader p:nth-child(1) {
42 |         transform: scale(1.3);
43 |         margin-right: 1rem;
44 |         animation: loader 1s linear infinite;
45 |     }
46 | 
47 |     .loader p:nth-child(2) {
48 |         transform: scale(1);
49 |         animation: loader 1s linear infinite;
50 |         animation-delay: 0.5s;
51 |     }
52 | 
53 |     @keyframes loader {
54 | 
55 |         0%,
56 |         100% {
57 |             transform: scale(1);
58 |         }
59 | 
60 |         50% {
61 |             transform: scale(1.3);
62 |         }
63 |     }
64 | </style>
65 | 
66 | <body>
67 |     <div class="loader">
68 |         <p>{</p>
69 |         <p>}</p>
70 |     </div>
71 | </body>
72 | 
73 | </html>


--------------------------------------------------------------------------------
/35_Animated Gradient Text using CSS/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <!-- Font Awesome Icons  -->
15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
17 |         crossorigin="anonymous" />
18 | 
19 |     <title>Animated Gradient Text using CSS - @code.scientist</title>
20 | </head>
21 | 
22 | <style>
23 |     * {
24 |         font-family: 'Poppins', sans-serif;
25 |     }
26 | 
27 |     body {
28 |         background-color: #111827;
29 |         color: white;
30 |         display: flex;
31 |         align-items: center;
32 |         justify-content: center;
33 |         padding-top: 15rem;
34 |     }
35 | 
36 |     h1 {
37 |         font-size: 5rem;
38 |         background: linear-gradient(to right, #fff 20%, #65C7F7 40%, #0052D4 60%, #fff 80%);
39 |         background-size: 200% auto;
40 |         color: #000;
41 |         background-clip: text;
42 |         text-fill-color: transparent;
43 |         -webkit-background-clip: text;
44 |         -webkit-text-fill-color: transparent;
45 |         animation: animate 2s linear infinite;
46 |     }
47 | 
48 |     @keyframes animate {
49 |         to {
50 |             background-position: 200% center;
51 |         }
52 |     }
53 | </style>
54 | 
55 | <body>
56 |     <h1>code.scientist</h1>
57 | </body>
58 | 
59 | </html>


--------------------------------------------------------------------------------
/36_20k Followes/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <!-- Google Fonts  -->
 10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 12 |     <link href="https://fonts.googleapis.com/css2?family=Bungee Outline&display=swap" rel="stylesheet">
 13 | 
 14 |     <!-- Font Awesome Icons  -->
 15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
 16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
 17 |         crossorigin="anonymous" />
 18 | 
 19 |     <title>20k Followers - @code.scientist x @julianvelez1997</title>
 20 | </head>
 21 | 
 22 | <style>
 23 |     * {
 24 |         font-family: 'Poppins', sans-serif;
 25 |     }
 26 | 
 27 |     body {
 28 |         overflow: hidden;
 29 |     }
 30 | 
 31 |     .followDiv,
 32 |     .numDiv {
 33 |         position: absolute;
 34 |         top: 0;
 35 |         left: 0;
 36 |         width: 100vw;
 37 |         height: 100vh;
 38 |         display: flex;
 39 |         justify-content: center;
 40 |         align-items: center;
 41 |         color: #ffffff;
 42 |         transform: translateY(-1.6rem);
 43 |         --sizeVar: 12vmin;
 44 |         --neonColor: 100, 100, 255;
 45 |         text-shadow: 0 0 6px rgba(var(--neonColor), 0.98),
 46 |             0 0 30px rgba(var(--neonColor), 0.42), 0 0 12px rgba(var(--neonColor), 0.58),
 47 |             0 0 22px rgba(var(--neonColor), 0.84), 0 0 38px rgba(var(--neonColor), 0.88),
 48 |             0 0 60px rgba(var(--neonColor), 1);
 49 |     }
 50 | 
 51 |     .followDiv {
 52 |         font-size: var(--sizeVar);
 53 |         margin-left: calc(var(--sizeVar) / 10);
 54 |         margin-top: calc(var(--sizeVar) * 1.5);
 55 |         letter-spacing: calc(var(--sizeVar) / 1.75);
 56 |         font-family: "Yellowtail", cursive;
 57 |         --neonColor: 255, 100, 255;
 58 |     }
 59 | 
 60 |     .numDiv {
 61 |         font-size: calc(var(--sizeVar) * 3.8);
 62 |         letter-spacing: normal;
 63 |         font-family: "Bungee Outline", cursive;
 64 |     }
 65 | 
 66 |     .numDiv span {
 67 |         animation: flicker 600ms linear infinite;
 68 |     }
 69 | 
 70 |     .numDiv span:nth-of-type(2) {
 71 |         animation-delay: -200ms;
 72 |         animation-duration: 500ms;
 73 |     }
 74 | 
 75 |     .numDiv span:nth-of-type(3) {
 76 |         animation-delay: -50ms;
 77 |         animation-duration: 700ms;
 78 |     }
 79 | 
 80 |     @keyframes flicker {
 81 |         0% {
 82 |             color: #666;
 83 |             text-shadow: none;
 84 |         }
 85 | 
 86 |         5% {
 87 |             color: #666;
 88 |             text-shadow: none;
 89 |         }
 90 | 
 91 |         10% {
 92 |             color: #fff;
 93 |             text-shadow: none;
 94 |         }
 95 | 
 96 |         15% {
 97 |             color: #fff;
 98 |             text-shadow: inherit;
 99 |         }
100 | 
101 |         80% {
102 |             color: #fff;
103 |             text-shadow: inherit;
104 |         }
105 | 
106 |         90% {
107 |             color: #666;
108 |             text-shadow: none;
109 |         }
110 | 
111 |         100% {
112 |             color: #666;
113 |             text-shadow: none;
114 |         }
115 |     }
116 | 
117 |     body {
118 |         background-color: #000000;
119 |     }
120 | </style>
121 | 
122 | <body>
123 |     <div class="numDiv"><span>2</span><span>0</span><span>k</span></div>
124 |     <div class="followDiv">Followers</div>
125 | </body>
126 | 
127 | </html>


--------------------------------------------------------------------------------
/37_Loader with ripple effect/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <!-- Google Fonts  -->
 10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
 13 | 
 14 |     <!-- Font Awesome Icons  -->
 15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
 16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
 17 |         crossorigin="anonymous" />
 18 | 
 19 |     <title>Loader with ripple effect - @code.scientist</title>
 20 | </head>
 21 | 
 22 | <style>
 23 |     * {
 24 |         font-family: 'Poppins', sans-serif;
 25 |     }
 26 | 
 27 |     body {
 28 |         margin: 0;
 29 |         min-height: 180vh;
 30 |         display: flex;
 31 |         justify-content: center;
 32 |         align-items: center;
 33 |         background-color: #f2eee3;
 34 |     }
 35 | 
 36 |     span {
 37 |         width: 35px;
 38 |         display: inline-block;
 39 |         height: 35px;
 40 |         border-radius: 50%;
 41 |         margin: 0 5px;
 42 |         position: relative;
 43 |     }
 44 | 
 45 |     span::before {
 46 |         content: "";
 47 |         position: absolute;
 48 |         width: 100%;
 49 |         height: 100%;
 50 |         background-color: inherit;
 51 |         border-radius: 50%;
 52 |         z-index: -1;
 53 |         animation: ripple 1.5s ease-out infinite;
 54 |     }
 55 | 
 56 |     span:first-child {
 57 |         background-color: #e4d8e6;
 58 |     }
 59 | 
 60 |     span:first-child::before {
 61 |         animation-delay: 0.2s;
 62 |     }
 63 | 
 64 |     span:nth-child(2) {
 65 |         background-color: #c9b2ce;
 66 |         transform: scale(0.9);
 67 |     }
 68 | 
 69 |     span:nth-child(2)::before {
 70 |         animation-delay: 0.4s;
 71 |     }
 72 | 
 73 |     span:nth-child(3) {
 74 |         background-color: #ad8bb5;
 75 |         transform: scale(0.8);
 76 |     }
 77 | 
 78 |     span:nth-child(3)::before {
 79 |         animation-delay: 0.65;
 80 |     }
 81 | 
 82 |     span:nth-child(4) {
 83 |         background-color: #92659d;
 84 |         transform: scale(0.7);
 85 |     }
 86 | 
 87 |     span:nth-child(4)::before {
 88 |         animation-delay: 0.8s;
 89 |     }
 90 | 
 91 |     span:last-child {
 92 |         background-color: #773+84;
 93 |         transform: scale(0.6);
 94 | 
 95 |     }
 96 | 
 97 |     span:last-child::before {
 98 |         animation-delay: 1s;
 99 |     }
100 | 
101 |     @keyframes ripple {
102 |         from {
103 |             opacity: 1;
104 |             transform: scale(0);
105 |         }
106 | 
107 |         to {
108 |             opacity: 0;
109 |             transform: scale(3);
110 |         }
111 |     }
112 | </style>
113 | 
114 | <body>
115 |     <div>
116 | 
117 |         <span></span>
118 | 
119 |         <span></span>
120 | 
121 |         <span></span>
122 | 
123 |         <span></span>
124 | 
125 |         <span></span>
126 | 
127 |     </div>
128 | </body>
129 | 
130 | </html>


--------------------------------------------------------------------------------
/38_Shopping Cart Loading Animation/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <!-- Google Fonts  -->
 10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
 13 | 
 14 |     <!-- Font Awesome Icons  -->
 15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
 16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
 17 |         crossorigin="anonymous" />
 18 | 
 19 |     <title>Shopping Cart Loading Animation - @code.scientist x @julianvelez1997</title>
 20 | </head>
 21 | 
 22 | <style>
 23 |     * {
 24 |         border: 0;
 25 |         box-sizing: border-box;
 26 |         margin: 0;
 27 |         padding: 0;
 28 |     }
 29 | 
 30 |     :root {
 31 |         --hue: 223;
 32 |         --bg: hsl(var(--hue), 10%, 90%);
 33 |         --fg: hsl(var(--hue), 10%, 10%);
 34 |         --primary: hsl(var(--hue), 90%, 55%);
 35 |         --trans-dur: 0.3s;
 36 |         font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));
 37 |     }
 38 | 
 39 |     body {
 40 |         background-color: var(--bg);
 41 |         color: var(--fg);
 42 |         font: 1em/1.5 "DM Sans", sans-serif;
 43 |         height: 100vh;
 44 |         display: grid;
 45 |         place-items: center;
 46 |         transition:
 47 |             background-color var(--trans-dur),
 48 |             color var(--trans-dur);
 49 |     }
 50 | 
 51 |     .preloader {
 52 |         text-align: center;
 53 |         max-width: 20em;
 54 |         width: 100%;
 55 |     }
 56 | 
 57 |     .preloader__text {
 58 |         position: relative;
 59 |         height: 1.5em;
 60 |     }
 61 | 
 62 |     .preloader__msg {
 63 |         animation: msg 0.3s 13.7s linear forwards;
 64 |         position: absolute;
 65 |         width: 100%;
 66 |     }
 67 | 
 68 |     .preloader__msg--last {
 69 |         animation-direction: reverse;
 70 |         animation-delay: 14s;
 71 |         visibility: hidden;
 72 |     }
 73 | 
 74 |     .cart {
 75 |         display: block;
 76 |         margin: 0 auto 1.5em auto;
 77 |         width: 8em;
 78 |         height: 8em;
 79 |     }
 80 | 
 81 |     .cart__lines,
 82 |     .cart__top,
 83 |     .cart__wheel1,
 84 |     .cart__wheel2,
 85 |     .cart__wheel-stroke {
 86 |         animation: cartLines 2s ease-in-out infinite;
 87 |     }
 88 | 
 89 |     .cart__lines {
 90 |         stroke: var(--primary);
 91 |     }
 92 | 
 93 |     .cart__top {
 94 |         animation-name: cartTop;
 95 |     }
 96 | 
 97 |     .cart__wheel1 {
 98 |         animation-name: cartWheel1;
 99 |         transform: rotate(-0.25turn);
100 |         transform-origin: 43px 111px;
101 |     }
102 | 
103 |     .cart__wheel2 {
104 |         animation-name: cartWheel2;
105 |         transform: rotate(0.25turn);
106 |         transform-origin: 102px 111px;
107 |     }
108 | 
109 |     .cart__wheel-stroke {
110 |         animation-name: cartWheelStroke
111 |     }
112 | 
113 |     .cart__track {
114 |         stroke: hsla(var(--hue), 10%, 10%, 0.1);
115 |         transition: stroke var(--trans-dur);
116 |     }
117 | 
118 |     /* Dark theme */
119 |     @media (prefers-color-scheme: dark) {
120 |         :root {
121 |             --bg: hsl(var(--hue), 10%, 10%);
122 |             --fg: hsl(var(--hue), 10%, 90%);
123 |         }
124 | 
125 |         .cart__track {
126 |             stroke: hsla(var(--hue), 10%, 90%, 0.1);
127 |         }
128 |     }
129 | 
130 |     /* Animations */
131 |     @keyframes msg {
132 |         from {
133 |             opacity: 1;
134 |             visibility: visible;
135 |         }
136 | 
137 |         99.9% {
138 |             opacity: 0;
139 |             visibility: visible;
140 |         }
141 | 
142 |         to {
143 |             opacity: 0;
144 |             visibility: hidden;
145 |         }
146 |     }
147 | 
148 |     @keyframes cartLines {
149 | 
150 |         from,
151 |         to {
152 |             opacity: 0;
153 |         }
154 | 
155 |         8%,
156 |         92% {
157 |             opacity: 1;
158 |         }
159 |     }
160 | 
161 |     @keyframes cartTop {
162 |         from {
163 |             stroke-dashoffset: -338;
164 |         }
165 | 
166 |         50% {
167 |             stroke-dashoffset: 0;
168 |         }
169 | 
170 |         to {
171 |             stroke-dashoffset: 338;
172 |         }
173 |     }
174 | 
175 |     @keyframes cartWheel1 {
176 |         from {
177 |             transform: rotate(-0.25turn);
178 |         }
179 | 
180 |         to {
181 |             transform: rotate(2.75turn);
182 |         }
183 |     }
184 | 
185 |     @keyframes cartWheel2 {
186 |         from {
187 |             transform: rotate(0.25turn);
188 |         }
189 | 
190 |         to {
191 |             transform: rotate(3.25turn);
192 |         }
193 |     }
194 | 
195 |     @keyframes cartWheelStroke {
196 | 
197 |         from,
198 |         to {
199 |             stroke-dashoffset: 81.68;
200 |         }
201 | 
202 |         50% {
203 |             stroke-dashoffset: 40.84;
204 |         }
205 |     }
206 | </style>
207 | 
208 | <body>
209 |     <div class="preloader">
210 |         <svg class="cart" role="img" aria-label="Shopping cart line animation" viewBox="0 0 128 128" width="128px"
211 |             height="128px" xmlns="http://www.w3.org/2000/svg">
212 |             <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="8">
213 |                 <g class="cart__track" stroke="hsla(0,10%,10%,0.1)">
214 |                     <polyline points="4,4 21,4 26,22 124,22 112,64 35,64 39,80 106,80" />
215 |                     <circle cx="43" cy="111" r="13" />
216 |                     <circle cx="102" cy="111" r="13" />
217 |                 </g>
218 |                 <g class="cart__lines" stroke="currentColor">
219 |                     <polyline class="cart__top" points="4,4 21,4 26,22 124,22 112,64 35,64 39,80 106,80"
220 |                         stroke-dasharray="338 338" stroke-dashoffset="-338" />
221 |                     <g class="cart__wheel1" transform="rotate(-90,43,111)">
222 |                         <circle class="cart__wheel-stroke" cx="43" cy="111" r="13" stroke-dasharray="81.68 81.68"
223 |                             stroke-dashoffset="81.68" />
224 |                     </g>
225 |                     <g class="cart__wheel2" transform="rotate(90,102,111)">
226 |                         <circle class="cart__wheel-stroke" cx="102" cy="111" r="13" stroke-dasharray="81.68 81.68"
227 |                             stroke-dashoffset="81.68" />
228 |                     </g>
229 |                 </g>
230 |             </g>
231 |         </svg>
232 |         <div class="preloader__text">
233 |             <p class="preloader__msg">Bringing you the goods…</p>
234 |             <p class="preloader__msg preloader__msg--last">This is taking long. Something’s wrong.</p>
235 |         </div>
236 |     </div>
237 | </body>
238 | 
239 | </html>


--------------------------------------------------------------------------------
/39_Cube Animation/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <!-- Google Fonts  -->
 10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
 13 | 
 14 |     <!-- Font Awesome Icons  -->
 15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
 16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
 17 |         crossorigin="anonymous" />
 18 | 
 19 |     <title>Cube Animation - @code.scientist x @julianvelez1997</title>
 20 | </head>
 21 | 
 22 | <style>
 23 |     /* basic style */
 24 |     html,
 25 |     body {
 26 |         position: relative;
 27 |         overflow: hidden;
 28 |     }
 29 | 
 30 |     body {
 31 |         display: flex;
 32 |         justify-content: center;
 33 |         align-items: center;
 34 |         height: 100vh;
 35 |         margin: 0;
 36 |         background: radial-gradient(circle at center, #222, #000);
 37 |         transform-style: preserve-3d;
 38 |         -webkit-transform-style: preserve-3d;
 39 |     }
 40 | 
 41 |     .flex {
 42 |         display: flex;
 43 |         justify-content: center;
 44 |         align-items: center;
 45 |         width: 80px;
 46 |         height: 80px;
 47 |         margin: 0 -80px 0 0;
 48 |     }
 49 | 
 50 |     /* cube */
 51 |     .cube {
 52 |         position: relative;
 53 |         width: 1px;
 54 |         height: 1px;
 55 |         margin: 0 80px 0 0;
 56 |         transform-style: preserve-3d;
 57 |     }
 58 | 
 59 |     .wall {
 60 |         width: 80px;
 61 |         height: 80px;
 62 |         position: absolute;
 63 |         left: calc(-80px / 2);
 64 |         top: calc(-80px / 2);
 65 |         text-align: center;
 66 |         line-height: 100px;
 67 |         border: solid 1px #fff;
 68 |     }
 69 | 
 70 |     .front {
 71 |         transform: translateZ(calc(80px / 2));
 72 |     }
 73 | 
 74 |     .back {
 75 |         transform: translateZ(calc(-80px / 2)) rotateY(180deg);
 76 |     }
 77 | 
 78 |     .right {
 79 |         transform: translateX(calc(80px / 2)) rotateY(90deg);
 80 |     }
 81 | 
 82 |     .left {
 83 |         transform: translateX(calc(-80px / 2)) rotateY(-90deg);
 84 |     }
 85 | 
 86 |     .top {
 87 |         transform: translateY(calc(-80px / 2)) rotateX(90deg);
 88 |     }
 89 | 
 90 |     .bottom {
 91 |         transform: translateY(calc(80px / 2)) rotateX(-90deg);
 92 |     }
 93 | 
 94 |     /* animation */
 95 | 
 96 |     /* //first */
 97 |     .flex:nth-of-type(4) .cube:nth-of-type(1) {
 98 |         animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s forwards;
 99 |     }
100 | 
101 |     /* //sec */
102 |     .flex:nth-of-type(3) .cube:nth-of-type(1) {
103 |         animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s forwards;
104 |     }
105 | 
106 |     .flex:nth-of-type(4) .cube:nth-of-type(2) {
107 |         animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s forwards;
108 |     }
109 | 
110 |     /* //third */
111 |     .flex:nth-of-type(2) .cube:nth-of-type(1) {
112 |         animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s forwards;
113 |     }
114 | 
115 |     .flex:nth-of-type(3) .cube:nth-of-type(2) {
116 |         animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s forwards;
117 |     }
118 | 
119 |     .flex:nth-of-type(4) .cube:nth-of-type(3) {
120 |         animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
121 |     }
122 | 
123 |     /* //forth */
124 |     .flex:nth-of-type(1) .cube:nth-of-type(1) {
125 |         animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
126 |     }
127 | 
128 |     .flex:nth-of-type(2) .cube:nth-of-type(2) {
129 |         animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
130 |     }
131 | 
132 |     .flex:nth-of-type(3) .cube:nth-of-type(3) {
133 |         animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
134 |     }
135 | 
136 |     .flex:nth-of-type(4) .cube:nth-of-type(4) {
137 |         animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
138 |     }
139 | 
140 |     /* //five */
141 |     .flex:nth-of-type(1) .cube:nth-of-type(2) {
142 |         animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s forwards;
143 |     }
144 | 
145 |     .flex:nth-of-type(2) .cube:nth-of-type(3) {
146 |         animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s forwards;
147 |     }
148 | 
149 |     .flex:nth-of-type(3) .cube:nth-of-type(4) {
150 |         animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s forwards;
151 |     }
152 | 
153 |     /* //six */
154 |     .flex:nth-of-type(1) .cube:nth-of-type(3) {
155 |         animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1s forwards;
156 |     }
157 | 
158 |     .flex:nth-of-type(2) .cube:nth-of-type(4) {
159 |         animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1s forwards;
160 |     }
161 | 
162 |     /* //seven */
163 |     .flex:nth-of-type(1) .cube:nth-of-type(4) {
164 |         animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1.1s forwards;
165 |     }
166 | 
167 |     @keyframes rotation {
168 |         100% {
169 |             transform: rotateX(270deg) rotateY(270deg);
170 |         }
171 |     }
172 | 
173 |     .wall {
174 |         animation: color 2s linear 1.5s forwards;
175 |     }
176 | 
177 |     @keyframes color {
178 |         100% {
179 |             background-color: #fff;
180 |         }
181 |     }
182 | </style>
183 | 
184 | <body>
185 |     <div class="container">
186 |         <div class="flex">
187 |             <div class="cube">
188 |                 <div class="wall front"></div>
189 |                 <div class="wall back"></div>
190 |                 <div class="wall left"></div>
191 |                 <div class="wall right"></div>
192 |                 <div class="wall top"></div>
193 |                 <div class="wall bottom"></div>
194 |             </div>
195 |             <div class="cube">
196 |                 <div class="wall front"></div>
197 |                 <div class="wall back"></div>
198 |                 <div class="wall left"></div>
199 |                 <div class="wall right"></div>
200 |                 <div class="wall top"></div>
201 |                 <div class="wall bottom"></div>
202 |             </div>
203 |             <div class="cube">
204 |                 <div class="wall front"></div>
205 |                 <div class="wall back"></div>
206 |                 <div class="wall left"></div>
207 |                 <div class="wall right"></div>
208 |                 <div class="wall top"></div>
209 |                 <div class="wall bottom"></div>
210 |             </div>
211 |             <div class="cube">
212 |                 <div class="wall front"></div>
213 |                 <div class="wall back"></div>
214 |                 <div class="wall left"></div>
215 |                 <div class="wall right"></div>
216 |                 <div class="wall top"></div>
217 |                 <div class="wall bottom"></div>
218 |             </div>
219 |         </div>
220 |         <div class="flex">
221 |             <div class="cube">
222 |                 <div class="wall front"></div>
223 |                 <div class="wall back"></div>
224 |                 <div class="wall left"></div>
225 |                 <div class="wall right"></div>
226 |                 <div class="wall top"></div>
227 |                 <div class="wall bottom"></div>
228 |             </div>
229 |             <div class="cube">
230 |                 <div class="wall front"></div>
231 |                 <div class="wall back"></div>
232 |                 <div class="wall left"></div>
233 |                 <div class="wall right"></div>
234 |                 <div class="wall top"></div>
235 |                 <div class="wall bottom"></div>
236 |             </div>
237 |             <div class="cube">
238 |                 <div class="wall front"></div>
239 |                 <div class="wall back"></div>
240 |                 <div class="wall left"></div>
241 |                 <div class="wall right"></div>
242 |                 <div class="wall top"></div>
243 |                 <div class="wall bottom"></div>
244 |             </div>
245 |             <div class="cube">
246 |                 <div class="wall front"></div>
247 |                 <div class="wall back"></div>
248 |                 <div class="wall left"></div>
249 |                 <div class="wall right"></div>
250 |                 <div class="wall top"></div>
251 |                 <div class="wall bottom"></div>
252 |             </div>
253 |         </div>
254 |         <div class="flex">
255 |             <div class="cube">
256 |                 <div class="wall front"></div>
257 |                 <div class="wall back"></div>
258 |                 <div class="wall left"></div>
259 |                 <div class="wall right"></div>
260 |                 <div class="wall top"></div>
261 |                 <div class="wall bottom"></div>
262 |             </div>
263 |             <div class="cube">
264 |                 <div class="wall front"></div>
265 |                 <div class="wall back"></div>
266 |                 <div class="wall left"></div>
267 |                 <div class="wall right"></div>
268 |                 <div class="wall top"></div>
269 |                 <div class="wall bottom"></div>
270 |             </div>
271 |             <div class="cube">
272 |                 <div class="wall front"></div>
273 |                 <div class="wall back"></div>
274 |                 <div class="wall left"></div>
275 |                 <div class="wall right"></div>
276 |                 <div class="wall top"></div>
277 |                 <div class="wall bottom"></div>
278 |             </div>
279 |             <div class="cube">
280 |                 <div class="wall front"></div>
281 |                 <div class="wall back"></div>
282 |                 <div class="wall left"></div>
283 |                 <div class="wall right"></div>
284 |                 <div class="wall top"></div>
285 |                 <div class="wall bottom"></div>
286 |             </div>
287 |         </div>
288 |         <div class="flex">
289 |             <div class="cube">
290 |                 <div class="wall front"></div>
291 |                 <div class="wall back"></div>
292 |                 <div class="wall left"></div>
293 |                 <div class="wall right"></div>
294 |                 <div class="wall top"></div>
295 |                 <div class="wall bottom"></div>
296 |             </div>
297 |             <div class="cube">
298 |                 <div class="wall front"></div>
299 |                 <div class="wall back"></div>
300 |                 <div class="wall left"></div>
301 |                 <div class="wall right"></div>
302 |                 <div class="wall top"></div>
303 |                 <div class="wall bottom"></div>
304 |             </div>
305 |             <div class="cube">
306 |                 <div class="wall front"></div>
307 |                 <div class="wall back"></div>
308 |                 <div class="wall left"></div>
309 |                 <div class="wall right"></div>
310 |                 <div class="wall top"></div>
311 |                 <div class="wall bottom"></div>
312 |             </div>
313 |             <div class="cube">
314 |                 <div class="wall front"></div>
315 |                 <div class="wall back"></div>
316 |                 <div class="wall left"></div>
317 |                 <div class="wall right"></div>
318 |                 <div class="wall top"></div>
319 |                 <div class="wall bottom"></div>
320 |             </div>
321 |         </div>
322 |     </div>
323 | 
324 | </body>
325 | 
326 | </html>


--------------------------------------------------------------------------------
/3d Glowing Text/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <title>3d Glowing Text - @code.scientist</title>
 10 | </head>
 11 | 
 12 | <style>
 13 |     @import url(https://fonts.googleapis.com/css?family=Concert+One);
 14 | 
 15 |     h1 {
 16 |         animation: glow 10s ease-in-out infinite;
 17 |         /* For less laggy effect, uncomment this
 18 |         animation:none;
 19 |         -webkit-text-stroke:1px #fff; 
 20 |         =========== */
 21 |     }
 22 | 
 23 |     * {
 24 |         box-sizing: border-box;
 25 |     }
 26 | 
 27 |     body {
 28 |         background: #0a0a0a;
 29 |         overflow: hidden;
 30 |         text-align: center;
 31 |     }
 32 | 
 33 |     figure {
 34 |         animation: wobble 5s ease-in-out infinite;
 35 |         transform-origin: center center;
 36 |         transform-style: preserve-3d;
 37 |     }
 38 | 
 39 |     @keyframes wobble {
 40 | 
 41 |         0%,
 42 |         100% {
 43 |             transform: rotate3d(1, 1, 0, 40deg);
 44 |         }
 45 | 
 46 |         25% {
 47 |             transform: rotate3d(-1, 1, 0, 40deg);
 48 |         }
 49 | 
 50 |         50% {
 51 |             transform: rotate3d(-1, -1, 0, 40deg);
 52 |         }
 53 | 
 54 |         75% {
 55 |             transform: rotate3d(1, -1, 0, 40deg);
 56 |         }
 57 |     }
 58 | 
 59 |     h1 {
 60 |         display: block;
 61 |         width: 100%;
 62 |         padding: 40px;
 63 |         line-height: 1.5;
 64 |         font: 900 8em 'Concert One', sans-serif;
 65 |         text-transform: uppercase;
 66 |         position: absolute;
 67 |         color: #0a0a0a;
 68 |     }
 69 | 
 70 |     @keyframes glow {
 71 | 
 72 |         0%,
 73 |         100% {
 74 |             text-shadow: 0 0 30px red;
 75 |         }
 76 | 
 77 |         25% {
 78 |             text-shadow: 0 0 30px orange;
 79 |         }
 80 | 
 81 |         50% {
 82 |             text-shadow: 0 0 30px forestgreen;
 83 |         }
 84 | 
 85 |         75% {
 86 |             text-shadow: 0 0 30px cyan;
 87 |         }
 88 |     }
 89 | 
 90 |     h1:nth-child(2) {
 91 |         transform: translateZ(5px);
 92 |     }
 93 | 
 94 |     h1:nth-child(3) {
 95 |         transform: translateZ(10px);
 96 |     }
 97 | 
 98 |     h1:nth-child(4) {
 99 |         transform: translateZ(15px);
100 |     }
101 | 
102 |     h1:nth-child(5) {
103 |         transform: translateZ(20px);
104 |     }
105 | 
106 |     h1:nth-child(6) {
107 |         transform: translateZ(25px);
108 |     }
109 | 
110 |     h1:nth-child(7) {
111 |         transform: translateZ(30px);
112 |     }
113 | 
114 |     h1:nth-child(8) {
115 |         transform: translateZ(35px);
116 |     }
117 | 
118 |     h1:nth-child(9) {
119 |         transform: translateZ(40px);
120 |     }
121 | 
122 |     h1:nth-child(10) {
123 |         transform: translateZ(45px);
124 |     }
125 | </style>
126 | 
127 | <body>
128 |     <figure>
129 |         <h1>julian</h1>
130 |         <h1>julian</h1>
131 |         <h1>julian</h1>
132 |         <h1>julian</h1>
133 |         <h1>julian</h1>
134 |         <h1>julian</h1>
135 |         <h1>julian</h1>
136 |         <h1>julian</h1>
137 |         <h1>julian</h1>
138 |         <h1>julian</h1>
139 |     </figure>
140 | </body>
141 | 
142 | </html>


--------------------------------------------------------------------------------
/40_Gradient infinite loader using CSS/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <!-- Font Awesome Icons  -->
15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
17 |         crossorigin="anonymous" />
18 | 
19 |     <title>Gradient infinite loader using CSS - @code.scientist</title>
20 | </head>
21 | 
22 | <style>
23 |     * {
24 |         margin: 0;
25 |         padding: 0;
26 |         box-sizing: border-box;
27 |     }
28 | 
29 |     body {
30 |         width: 100%;
31 |         height: 100vh;
32 |         display: flex;
33 |         justify-content: center;
34 |         align-items: center;
35 |         background: black;
36 |     }
37 | 
38 |     .loading-box {
39 |         position: relative;
40 |         width: 400px;
41 |         height: 50px;
42 |         border-radius: 50px;
43 |         border: 2px solid black;
44 |         overflow: hidden;
45 |     }
46 | 
47 |     .loader {
48 |         width: 100%;
49 |         height: 100%;
50 |         position: absolute;
51 |         border-radius: 50px;
52 |         background: linear-gradient(45deg, #b6b5ff, #ff9797);
53 |         left: 0%;
54 |     }
55 | 
56 |     .loader {
57 |         left: -100%;
58 |         animation: load 3s linear infinite;
59 |     }
60 | 
61 |     @keyframes load {
62 |         0% {
63 |             left: -100%;
64 |         }
65 | 
66 |         100% {
67 |             left: 100%;
68 |         }
69 |     }
70 | </style>
71 | 
72 | <body>
73 |     <div class="loading-box">
74 |         <div class="loader"></div>
75 |     </div>
76 | </body>
77 | 
78 | </html>


--------------------------------------------------------------------------------
/41_Gradient Balls Loading Animation using CSS/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <!-- Google Fonts  -->
 10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
 13 | 
 14 |     <!-- Font Awesome Icons  -->
 15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
 16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
 17 |         crossorigin="anonymous" />
 18 | 
 19 |     <title>Loading Animation using CSS - @code.scientist</title>
 20 | </head>
 21 | 
 22 | <style>
 23 |     :root {
 24 |         --yellow: #ffc744;
 25 |         --red: #ff0062;
 26 |         --blue: #3ae8ff;
 27 |         --violet: #e72fff;
 28 |     }
 29 | 
 30 |     body {
 31 |         margin: 0;
 32 |         display: flex;
 33 |         justify-content: center;
 34 |         align-items: center;
 35 |         height: 100vh;
 36 |         background-color: black;
 37 |     }
 38 | 
 39 |     div.container {
 40 |         display: flex;
 41 |         justify-content: center;
 42 |         align-items: center;
 43 |     }
 44 | 
 45 |     div>div {
 46 |         width: 3vw;
 47 |         height: 3vw;
 48 |         border-radius: 100%;
 49 |         margin: 2vw;
 50 |         background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
 51 |         animation: bounce 1.5s 0.5s linear infinite;
 52 |     }
 53 | 
 54 |     .yellow {
 55 |         background-color: var(--yellow);
 56 |     }
 57 | 
 58 |     .red {
 59 |         background-color: var(--red);
 60 |         animation-delay: 0.1s;
 61 |     }
 62 | 
 63 |     .blue {
 64 |         background-color: var(--blue);
 65 |         animation-delay: 0.2s;
 66 |     }
 67 | 
 68 |     .violet {
 69 |         background-color: var(--violet);
 70 |         animation-delay: 0.3s;
 71 |     }
 72 | 
 73 |     @keyframes bounce {
 74 | 
 75 |         0%,
 76 |         50%,
 77 |         100% {
 78 |             transform: scale(1);
 79 |             filter: blur(0px);
 80 |         }
 81 | 
 82 |         25% {
 83 |             transform: scale(0.6);
 84 |             filter: blur(3px);
 85 |         }
 86 | 
 87 |         75% {
 88 |             filter: blur(3px);
 89 |             transform: scale(1.4);
 90 |         }
 91 |     }
 92 | </style>
 93 | 
 94 | <body>
 95 |     <div class="container">
 96 |         <div class="yellow"></div>
 97 |         <div class="red"></div>
 98 |         <div class="blue"></div>
 99 |         <div class="violet"></div>
100 |     </div>
101 | </body>
102 | 
103 | </html>


--------------------------------------------------------------------------------
/42_Ferb using HTML and CSS/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <!-- Google Fonts  -->
 10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
 13 | 
 14 |     <!-- Font Awesome Icons  -->
 15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
 16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
 17 |         crossorigin="anonymous" />
 18 | 
 19 |     <title>Ferb using HTML & CSS - @code.scientist</title>
 20 | </head>
 21 | 
 22 | <style>
 23 |     body {
 24 |         margin: 0;
 25 |         padding: 0;
 26 |         background: #1d1b38;
 27 |     }
 28 | 
 29 |     .container {
 30 |         position: absolute;
 31 |         left: 40%;
 32 |         top: 40%;
 33 |         transform: translate(-50%, -50%);
 34 |     }
 35 | 
 36 |     .head {
 37 |         position: absolute;
 38 |         height: 10px;
 39 |         width: 10px;
 40 |         border-bottom-left-radius: 20px;
 41 |         border-bottom: 200px solid #ecbcb4;
 42 |         border-left: 160px solid transparent;
 43 |         border-right: 160px solid transparent;
 44 |         transform: rotate(150deg);
 45 |     }
 46 | 
 47 |     .head::before {
 48 |         content: "";
 49 |         position: absolute;
 50 |         width: 120px;
 51 |         height: 200px;
 52 |         top: 100px;
 53 |         left: -36px;
 54 |         border: solid 5px #a1665e;
 55 |         border-color: #a1665e transparent transparent transparent;
 56 |         border-radius: 50%/10px 10px 0 0;
 57 |     }
 58 | 
 59 |     .head::after {
 60 |         content: "";
 61 |         position: absolute;
 62 |         height: 20px;
 63 |         width: 34px;
 64 |         background: #ecbcb4;
 65 |         border: 2px solid #a1665e;
 66 |         border-bottom: none;
 67 |         border-top-left-radius: 40px;
 68 |         border-top-right-radius: 40px;
 69 |         transform: rotate(-51deg);
 70 |         top: 110px;
 71 |         left: -122px;
 72 |     }
 73 | 
 74 |     .eye {
 75 |         position: absolute;
 76 |         height: 70px;
 77 |         width: 80px;
 78 |         background: white;
 79 |         border-radius: 50%;
 80 |         border: 2px solid black;
 81 |         transform: rotate(-30deg);
 82 |         left: 100px;
 83 |         top: -36px;
 84 |     }
 85 | 
 86 |     .eye::before {
 87 |         content: "";
 88 |         position: absolute;
 89 |         height: 22px;
 90 |         width: 26px;
 91 |         border-radius: 50%;
 92 |         background: #1d1b38;
 93 |         top: 28px;
 94 |         left: 10px;
 95 |         transform: rotate(-10deg);
 96 |     }
 97 | 
 98 |     .eye:after {
 99 |         content: "";
100 |         position: absolute;
101 |         height: 8px;
102 |         width: 10px;
103 |         border-radius: 50%;
104 |         background: #fff;
105 |         top: 35px;
106 |         left: 24px;
107 |         transform: rotate(-10deg);
108 |         box-shadow: 100px 36px 0 -1px #a1665e,
109 |             70px 36px 0 -1px #a1665e,
110 |             85px 50px 0 -1px #a1665e;
111 |     }
112 | 
113 |     .eye1 {
114 |         top: -28px;
115 |         left: 50px;
116 |         z-index: -1;
117 |     }
118 | 
119 |     .hair {
120 |         position: relative;
121 |         z-index: -2;
122 |         top: 2px;
123 |         right: 6px;
124 |     }
125 | 
126 |     .hair>div:nth-child(1) {
127 |         position: absolute;
128 |         background: transparent;
129 |         height: 30px;
130 |         width: 100px;
131 |         border-top: 20px solid red;
132 |         border-radius: 50px 40px 0 0;
133 |         bottom: 40px;
134 |         left: 180px;
135 |         transform: rotate(30deg);
136 |     }
137 | 
138 |     .hair>div:nth-child(2) {
139 |         position: absolute;
140 |         background: transparent;
141 |         height: 30px;
142 |         width: 100px;
143 |         border-top: 20px solid red;
144 |         border-radius: 50px 40px 0 0;
145 |         bottom: 40px;
146 |         left: 200px;
147 |         transform: rotate(70deg);
148 |     }
149 | 
150 |     .hair>div:nth-child(3) {
151 |         position: absolute;
152 |         background: transparent;
153 |         height: 30px;
154 |         width: 80px;
155 |         border-top: 20px solid red;
156 |         border-radius: 50px 40px 0 0;
157 |         bottom: 50px;
158 |         left: 220px;
159 |         transform: rotate(130deg);
160 |     }
161 | 
162 |     .hair>div:nth-child(4) {
163 |         position: absolute;
164 |         background: transparent;
165 |         height: 30px;
166 |         width: 100px;
167 |         border-top: 20px solid red;
168 |         border-radius: 50px 40px 0 0;
169 |         bottom: 20px;
170 |         left: 200px;
171 |         transform: rotate(20deg);
172 |     }
173 | 
174 |     .hair>div:nth-child(5) {
175 |         position: absolute;
176 |         background: transparent;
177 |         height: 30px;
178 |         width: 50px;
179 |         border-top: 20px solid red;
180 |         border-radius: 50px 40px 0 0;
181 |         bottom: 20px;
182 |         left: 260px;
183 |         transform: rotate(10deg);
184 |     }
185 | </style>
186 | 
187 | <body>
188 |     <div class="container">
189 |         <div class="head"></div>
190 |         <div class="eye"></div>
191 |         <div class="eye eye1"></div>
192 |         <div class="hair">
193 |             <div></div>
194 |             <div></div>
195 |             <div></div>
196 |             <div></div>
197 |             <div></div>
198 |         </div>
199 |     </div>
200 | </body>
201 | 
202 | </html>


--------------------------------------------------------------------------------
/43_Social Media icons Hover Effect/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <!-- Google Fonts  -->
 10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
 13 | 
 14 |     <!-- Font Awesome Icons  -->
 15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
 16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
 17 |         crossorigin="anonymous" />
 18 | 
 19 |     <title>Social Media Icons Hover Effect - @code.scientist x @codingtorque</title>
 20 | </head>
 21 | 
 22 | <style>
 23 |     body {
 24 |         display: flex;
 25 |         justify-content: center;
 26 |         padding-top: 20rem;
 27 |         background: #000;
 28 |     }
 29 | 
 30 |     div {
 31 |         display: flex;
 32 |     }
 33 | 
 34 |     .link {
 35 |         text-decoration: none;
 36 |         color: #b7b7b7;
 37 |         margin: 10px;
 38 |         width: 50px;
 39 |         height: 50px;
 40 |         display: flex;
 41 |         justify-content: center;
 42 |         align-items: center;
 43 |         background: rgb(28, 28, 28);
 44 |         border-radius: 10px;
 45 |         position: relative;
 46 |         transition: 0.4s;
 47 |     }
 48 | 
 49 |     .link:hover {
 50 |         transform: rotate(45deg);
 51 |     }
 52 | 
 53 |     .link::before {
 54 |         content: " ";
 55 |         position: absolute;
 56 |         width: 100%;
 57 |         height: 100%;
 58 |         opacity: 0;
 59 |         background: #373737;
 60 |         border-radius: 10px;
 61 |         transition: opasity 0.2s;
 62 |     }
 63 | 
 64 |     .link:hover::before {
 65 |         opacity: 0.4;
 66 |     }
 67 | 
 68 |     .link:nth-child(1)::before {
 69 |         background: #c32aa3;
 70 |     }
 71 | 
 72 |     .link:nth-child(2)::before {
 73 |         background: #1da1f2;
 74 |     }
 75 | 
 76 |     .link:nth-child(3)::before {
 77 |         background: #25d366;
 78 |     }
 79 | 
 80 |     .link:nth-child(4)::before {
 81 |         background: #0a66c2;
 82 |     }
 83 | 
 84 |     .link:hover::before {
 85 |         transform: translate(-4px, -4px);
 86 |         filter: blur(10px);
 87 |     }
 88 | 
 89 |     .link i {
 90 |         font-size: 1.7em;
 91 |         transition: all 0.4s;
 92 |     }
 93 | 
 94 |     .link:hover i {
 95 |         color: #c8c8c8;
 96 |         transform: rotate(-45deg);
 97 |     }
 98 | 
 99 |     .link:hover i.instagram {
100 |         color: #c32aa3;
101 |     }
102 | 
103 |     .link:hover i.twitter {
104 |         color: #1da1f2;
105 |     }
106 | 
107 |     .link:hover i.whatsapp {
108 |         color: #25d366;
109 |     }
110 | 
111 |     .link:hover i.linkedin {
112 |         color: #0a66ca;
113 |     }
114 | </style>
115 | 
116 | <body>
117 |     <div>
118 |         <a href="#" class="link">
119 |             <i class="fab fa-instagram instagram"></i>
120 |         </a>
121 |         <a href="#" class="link">
122 |             <i class="fab fa-twitter twitter"></i>
123 |         </a>
124 |         <a href="#" class="link">
125 |             <i class="fab fa-whatsapp whatsapp"></i>
126 |         </a>
127 |         <a href="#" class="link">
128 |             <i class="fab fa-linkedin linkedin"></i>
129 |         </a>
130 |     </div>
131 | 
132 | </body>
133 | 
134 | </html>


--------------------------------------------------------------------------------
/44_Underline link on hover/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <!-- Font Awesome Icons  -->
15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
17 |         crossorigin="anonymous" />
18 | 
19 |     <title>Underline link on hover - @code.scientist x @codingtorque</title>
20 | </head>
21 | 
22 | <style>
23 |     * {
24 |         margin: 0;
25 |         padding: 0;
26 |         box-sizing: border-box;
27 |         font-family: 'Poppins';
28 |     }
29 | 
30 |     body {
31 |         background-color: #111827;
32 |         color: white;
33 |         display: flex;
34 |         align-items: center;
35 |         justify-content: center;
36 |         padding-top: 15rem;
37 |     }
38 | 
39 |     .nav-links {
40 |         list-style: none;
41 |         display: flex;
42 |     }
43 | 
44 |     .nav-links li {
45 |         margin: 0 10px;
46 |     }
47 | 
48 |     .nav-link {
49 |         text-decoration: none;
50 |         color: white;
51 |         position: relative;
52 |     }
53 | 
54 |     .nav-link::after {
55 |         content: '';
56 |         position: absolute;
57 |         left: 0;
58 |         bottom: -4px;
59 |         height: 3px;
60 |         width: 0px;
61 |         border-radius: 2px;
62 |         background-color: deepskyblue;
63 |         transition: 0.4s ease;
64 |     }
65 | 
66 |     .nav-link:hover::after {
67 |         width: 100%;
68 |     }
69 | </style>
70 | 
71 | <body>
72 |     <div class="navbar">
73 |         <ul class="nav-links">
74 |             <li>
75 |                 <a href="#" class="nav-link">Home</a>
76 |             </li>
77 |             <li>
78 |                 <a href="#" class="nav-link">About</a>
79 |             </li>
80 |             <li>
81 |                 <a href="#" class="nav-link">Contact</a>
82 |             </li>
83 |             <li>
84 |                 <a href="#" class="nav-link">Privacy Policy</a>
85 |             </li>
86 |         </ul>
87 |     </div>
88 | </body>
89 | 
90 | </html>


--------------------------------------------------------------------------------
/45_Navbar Toggle using JS/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <!-- Google Fonts  -->
 10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
 13 | 
 14 |     <!-- Font Awesome Icons  -->
 15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
 16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
 17 |         crossorigin="anonymous" />
 18 | 
 19 |     <title>Animated Navbar Toggle using javascript - @code.scientist x @codingtorque</title>
 20 | </head>
 21 | 
 22 | <style>
 23 |     * {
 24 |         margin: 0;
 25 |         padding: 0;
 26 |         box-sizing: border-box;
 27 |         font-family: 'Poppins';
 28 |     }
 29 | 
 30 |     body {
 31 |         background-color: #111827;
 32 |         color: white;
 33 |         display: flex;
 34 |         align-items: center;
 35 |         justify-content: center;
 36 |         padding-top: 15rem;
 37 |     }
 38 | 
 39 |     .navbar {
 40 |         display: flex;
 41 |         align-items: center;
 42 |         background: white;
 43 |         height: 3rem;
 44 |         border-radius: 5px;
 45 |         overflow: hidden;
 46 |     }
 47 | 
 48 |     .nav-links {
 49 |         list-style: none;
 50 |         display: flex;
 51 |         width: 0;
 52 |     }
 53 | 
 54 |     .toggled {
 55 |         width: 100%;
 56 |     }
 57 | 
 58 |     .nav-links li {
 59 |         margin: 0 10px;
 60 |     }
 61 | 
 62 |     .nav-link {
 63 |         text-decoration: none;
 64 |         color: black;
 65 |     }
 66 | 
 67 |     .toggle-nav {
 68 |         height: 100%;
 69 |         width: 3rem;
 70 |         border: none;
 71 |         background: white;
 72 |         color: deepskyblue;
 73 |         cursor: pointer;
 74 |     }
 75 | </style>
 76 | 
 77 | <body>
 78 |     <div class="navbar">
 79 |         <ul class="nav-links" id="nav-links">
 80 |             <li>
 81 |                 <a href="#" class="nav-link">Home</a>
 82 |             </li>
 83 |             <li>
 84 |                 <a href="#" class="nav-link">About</a>
 85 |             </li>
 86 |             <li>
 87 |                 <a href="#" class="nav-link">Contact</a>
 88 |             </li>
 89 |             <li>
 90 |                 <a href="#" class="nav-link">Privacy Policy</a>
 91 |             </li>
 92 |         </ul>
 93 |         <button class="toggle-nav" id="toggle-nav">
 94 |             <i class="fas fa-bars"></i>
 95 |         </button>
 96 |     </div>
 97 | 
 98 |     <script>
 99 |         let toggleBtn = document.getElementById("toggle-nav");
100 |         let navLinks = document.getElementById("nav-links");
101 |         let isNavOpen = false;
102 | 
103 |         toggleBtn.addEventListener('click', () => {
104 |             if (isNavOpen) {
105 |                 toggleBtn.innerHTML = `<i class="fas fa-bars"></i>`;
106 |                 isNavOpen = false;
107 |                 navLinks.classList.remove("toggled");
108 |             } else {
109 |                 toggleBtn.innerHTML = `<i class="fas fa-times"></i>`;
110 |                 isNavOpen = true;
111 |                 navLinks.classList.add("toggled");
112 |             }
113 |         })
114 |     </script>
115 | </body>
116 | 
117 | </html>


--------------------------------------------------------------------------------
/46_Digital Clock/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <!-- Font Awesome Icons  -->
15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
17 |         crossorigin="anonymous" />
18 | 
19 |     <title>Digital Clock using JavaScript - @code.scientist</title>
20 | </head>
21 | 
22 | <style>
23 |     * {
24 |         margin: 0;
25 |         padding: 0;
26 |         box-sizing: border-box;
27 |         font-family: 'Poppins';
28 |     }
29 | 
30 |     body {
31 |         background-color: #111827;
32 |         color: white;
33 |         display: flex;
34 |         align-items: center;
35 |         justify-content: center;
36 |         padding-top: 15rem;
37 |     }
38 | 
39 |     .clock {
40 |         font-size: 30px;
41 |         font-weight: bold;
42 |     }
43 | </style>
44 | 
45 | <body>
46 |     <div id="clockDisplay" class="clock" onload="showTime"></div>
47 | 
48 |     <script>
49 |         const showTime = () => {
50 |             let date = new Date();
51 |             let h = date.getHours(); // 0 - 23
52 |             let m = date.getMinutes(); // 0 - 59
53 |             let s = date.getSeconds(); // 0 - 59
54 |             let session = "AM";
55 |             let day = date.getDay();
56 | 
57 |             if (h == 0) {
58 |                 h = 12;
59 |             }
60 | 
61 |             if (h > 12) {
62 |                 h = h - 12;
63 |                 session = "PM";
64 |             }
65 | 
66 |             h = (h < 10) ? "0" + h : h;
67 |             m = (m < 10) ? "0" + m : m;
68 |             s = (s < 10) ? "0" + s : s;
69 | 
70 |             let time = h + " : " + m + " : " + s + " " + session;
71 |             document.getElementById("clockDisplay").innerText = time;
72 |             document.getElementById("clockDisplay").textContent = time;
73 | 
74 |             setTimeout(showTime, 1000);
75 | 
76 |         }
77 |         showTime();
78 |     </script>
79 | </body>
80 | 
81 | </html>


--------------------------------------------------------------------------------
/47_Card hover effect using CSS/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <!-- Font Awesome Icons  -->
15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
17 |         crossorigin="anonymous" />
18 | 
19 |     <title>Card hover effect uisng CSS - @code.scientist</title>
20 | </head>
21 | 
22 | <style>
23 |     * {
24 |         margin: 0;
25 |         padding: 0;
26 |         box-sizing: border-box;
27 |         font-family: 'Poppins';
28 |     }
29 | 
30 |     body {
31 |         background-color: #111827;
32 |         color: white;
33 |         display: flex;
34 |         align-items: center;
35 |         justify-content: center;
36 |         padding-top: 15rem;
37 |     }
38 | 
39 |     .card {
40 |         height: 20rem;
41 |         width: 15rem;
42 |         border-radius: 10px;
43 |         background-color: white;
44 |         color: black;
45 |         padding: 0 10px;
46 |         padding-top: 2rem;
47 |         position: relative;
48 |         z-index: 1;
49 |         overflow: hidden;
50 |         cursor: pointer;
51 |         transition: 0.5s ease;
52 |     }
53 | 
54 |     .card:hover {
55 |         color: white;
56 |     }
57 | 
58 |     .card h2 {
59 |         margin-bottom: 10px;
60 |     }
61 | 
62 |     .card p {
63 |         font-size: 14px;
64 |     }
65 | 
66 |     .card::before {
67 |         content: '';
68 |         position: absolute;
69 |         left: -25px;
70 |         top: -25px;
71 |         height: 10rem;
72 |         width: 10rem;
73 |         background: linear-gradient(45deg, #2193b0, #6dd5ed);
74 |         border-radius: 50%;
75 |         z-index: -1;
76 |         transform: scale(1);
77 |         transition: 0.5s ease;
78 |     }
79 | 
80 |     .card:hover::before {
81 |         transform: scale(4.5);
82 |     }
83 | </style>
84 | 
85 | <body>
86 |     <div class="card">
87 |         <h2>What is Frontend Development?</h2>
88 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi assumenda accusamus fugiat tempore ullam
89 |             amet voluptatibus doloribus optio illo dicta, tenetur magni quibusdam perferendis placeat minus
90 |         </p>
91 |     </div>
92 | </body>
93 | 
94 | </html>


--------------------------------------------------------------------------------
/48_Card with onHover inverse effect using CSS/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <!-- Google Fonts  -->
 10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
 13 | 
 14 |     <!-- Font Awesome Icons  -->
 15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
 16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
 17 |         crossorigin="anonymous" />
 18 | 
 19 |     <title>Card with onHover inverse effect uisng CSS - @code.scientist</title>
 20 | </head>
 21 | 
 22 | <style>
 23 |     * {
 24 |         margin: 0;
 25 |         padding: 0;
 26 |         box-sizing: border-box;
 27 |         font-family: 'Poppins';
 28 |     }
 29 | 
 30 |     body {
 31 |         background-color: #111827;
 32 |         color: white;
 33 |         display: flex;
 34 |         align-items: center;
 35 |         justify-content: center;
 36 |         padding-top: 15rem;
 37 |     }
 38 | 
 39 |     .card {
 40 |         height: 14rem;
 41 |         width: 14rem;
 42 |         border-radius: 10px;
 43 |         background-color: white;
 44 |         color: black;
 45 |         padding: 0 10px;
 46 |         display: flex;
 47 |         align-items: center;
 48 |         justify-content: center;
 49 |         position: relative;
 50 |         z-index: 100;
 51 |         cursor: pointer;
 52 |         transition: 0.5s ease;
 53 |     }
 54 | 
 55 |     .card::after {
 56 |         content: '';
 57 |         position: absolute;
 58 |         bottom: -10px;
 59 |         right: -10px;
 60 |         width: 2.5rem;
 61 |         height: 2.5rem;
 62 |         border-radius: 50%;
 63 |         background-color: deepskyblue;
 64 |         z-index: 1;
 65 |         transition: 0.5s ease;
 66 |     }
 67 | 
 68 |     .card:hover::after {
 69 |         bottom: 0px;
 70 |         right: 0px;
 71 |         width: 100%;
 72 |         height: 100%;
 73 |         border-radius: 10px;
 74 |         z-index: -1;
 75 |     }
 76 | 
 77 |     .card::before {
 78 |         content: '';
 79 |         position: absolute;
 80 |         bottom: 0px;
 81 |         right: 0px;
 82 |         width: 100%;
 83 |         height: 100%;
 84 |         border-radius: 10px;
 85 |         z-index: -1;
 86 |         background-color: white;
 87 |         transition: 0.5s ease;
 88 |     }
 89 | 
 90 |     .card:hover::before {
 91 |         bottom: -10px;
 92 |         right: -10px;
 93 |         width: 2.5rem;
 94 |         height: 2.5rem;
 95 |         border-radius: 50%;
 96 |         z-index: 1;
 97 |     }
 98 | </style>
 99 | 
100 | <body>
101 |     <div class="card">
102 |         <h2>Code Scientist</h2>
103 |     </div>
104 | </body>
105 | 
106 | </html>


--------------------------------------------------------------------------------
/49_Starbucks Card using HTML and CSS copy/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <!-- Google Fonts  -->
 10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
 13 | 
 14 |     <!-- Font Awesome Icons  -->
 15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
 16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
 17 |         crossorigin="anonymous" />
 18 | 
 19 |     <title>Starbuck card using HTML and CSS - @code.scientist x @julianvelez1997</title>
 20 | </head>
 21 | 
 22 | <style>
 23 |     @import url('https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap');
 24 | 
 25 |     .container {
 26 |         justify-content: space-between;
 27 |         position: relative;
 28 |         top: 150px;
 29 |         left: 600px;
 30 |         bottom: 500px;
 31 |         margin-bottom: 10px;
 32 |         width: 320px;
 33 |         height: 450px;
 34 |         font-family: 'RocknRoll One', sans-serif;
 35 |     }
 36 | 
 37 |     .container .card {
 38 |         position: relative;
 39 |         width: 320px;
 40 |         height: 450px;
 41 |         background: #232323;
 42 |         border-radius: 20px;
 43 |         overflow: hidden;
 44 |     }
 45 | 
 46 |     .container .card:before {
 47 |         content: "";
 48 |         position: absolute;
 49 |         top: 0;
 50 |         left: 0;
 51 |         width: 100%;
 52 |         height: 100%;
 53 |         background: #1CBB00;
 54 |         clip-path: circle(150px at 80% 20%);
 55 |         transition: 0.5s ease-in-out;
 56 |     }
 57 | 
 58 |     .container .card:hover:before {
 59 |         clip-path: circle(300px at 80% 20%);
 60 |     }
 61 | 
 62 |     .container .card:after {
 63 |         content: "Starbucks";
 64 |         position: absolute;
 65 |         top: 30%;
 66 |         left: -20%;
 67 |         font-size: 5em;
 68 |         font-weight: 800;
 69 |         color: rgba(255, 255, 255, 0.04)
 70 |     }
 71 | 
 72 |     .container .card .imgBx {
 73 |         position: relative;
 74 |         top: 50%;
 75 |         transform: translateY(-50%);
 76 |         z-index: 10000;
 77 |         width: 100%;
 78 |         height: 200px;
 79 |         align-items: center;
 80 |         transition: 0.5s;
 81 |     }
 82 | 
 83 |     .container .card:hover .imgBx {
 84 |         top: 0%;
 85 |         transform: translateY(0%);
 86 |     }
 87 | 
 88 | 
 89 |     /* not happening forthis product*/
 90 |     .container .card .imgBx img {
 91 |         position: absolute;
 92 |         top: 50%;
 93 |         left: 50%;
 94 |         transform: translate(-50%, -50%) rotate(-25deg);
 95 |         width: 270px;
 96 |     }
 97 | 
 98 | 
 99 |     .container .card .contentBx {
100 |         position: absolute;
101 |         bottom: 0;
102 |         width: 100%;
103 |         height: 100px;
104 |         text-align: center;
105 |         transition: 1s;
106 |         z-index: 10;
107 |     }
108 | 
109 |     .container .card:hover .contentBx {
110 |         height: 210px;
111 |     }
112 | 
113 |     .container .card .contentBx h2 {
114 |         position: relative;
115 |         font-weight: 600;
116 |         letter-spacing: 1px;
117 |         color: #fff;
118 |     }
119 | 
120 |     .container .card .contentBx .size,
121 |     .container .card .contentBx .color,
122 |     .container .card .contentBx .price {
123 |         display: flex;
124 |         justify-content: center;
125 |         align-items: center;
126 |         padding: 8px 20px;
127 |         transition: 0.5%;
128 |         opacity: 0;
129 |         visibility: hidden;
130 |     }
131 | 
132 |     .container .card:hover .contentBx .size {
133 |         opacity: 1;
134 |         visibility: visible;
135 |         transition-delay: 0.5s;
136 |     }
137 | 
138 |     .container .card:hover .contentBx .price {
139 |         opacity: 1;
140 |         visibility: visible;
141 |         transition-delay: 0.5s;
142 |     }
143 | 
144 |     .container .card .contentBx .size h3,
145 |     .container .card .contentBx .color h3 .container .card .contentBx .price h3 {
146 |         color: #fff;
147 |         font-weight: 300;
148 |         font-size: 14px;
149 |         text-transform: uppercase;
150 |         letter-spacing: 2px;
151 |         margin-right: 10px;
152 |     }
153 | 
154 |     .container .card .contentBx .size span {
155 |         width: 35px;
156 |         height: 25px;
157 |         text-align: center;
158 |         line-height: 26px;
159 |         font-size: 14px;
160 |         display: inline-block;
161 |         color: #111;
162 |         background: #fff;
163 |         margin: 0 5px;
164 |         transition: 00.5s;
165 |         color: #111;
166 |         border-radius: 4px;
167 |         cursor: pointer;
168 |     }
169 | 
170 |     .container .card .contentBx .price span {
171 |         width: 35px;
172 |         height: 25px;
173 |         text-align: center;
174 |         line-height: 26px;
175 |         font-size: 14px;
176 |         display: inline-block;
177 |         color: #111;
178 |         background: #fff;
179 |         margin: 0 5px;
180 |         transition: 00.5s;
181 |         color: #111;
182 |         border-radius: 4px;
183 |         cursor: pointer;
184 |     }
185 | 
186 |     .container .card .contentBx .size span:hover {
187 |         background: #9bdc28;
188 |     }
189 | 
190 |     .container .card .contentBx .price span:hover {
191 |         background: #9bdc28;
192 |     }
193 | 
194 |     .container .card .contentBx a {
195 |         display: inline-block;
196 |         padding: 10px 20px;
197 |         background: #fff;
198 |         border-radius: 4px;
199 |         margin-top: 10px;
200 |         text-decoration: none;
201 |         font-weight: 600;
202 |         color: #111;
203 |         opacity: 0;
204 |         transform: translateY(50px);
205 |         transition: 0.5s;
206 |     }
207 | 
208 |     .container .card .contentBx a {
209 |         opacity: 1;
210 |         transform: translateY(0px);
211 |         transition: 0.75s;
212 |         visibility: hidden;
213 |     }
214 | 
215 |     .container .card:hover .contentBx a {
216 |         opacity: 1;
217 |         visibility: visible;
218 |         transition-delay: 0.6s;
219 |     }
220 | 
221 |     .container .card .contentBx a:hover {
222 |         background: #C3F899;
223 |     }
224 | </style>
225 | 
226 | <body>
227 |     <div class="container">
228 |         <div class="card">
229 |             <div class="imgBx">
230 |                 <img src="../img/fondo.jpg" height="300" width="200">
231 |             </div>
232 |             <div class="contentBx">
233 |                 <h2>Cappuccino</h2>
234 |                 <div class="price">
235 |                     <h3>Price:</h3>
236 |                     <span>$15</span>
237 |                 </div>
238 |                 <div class="size">
239 |                     <h3>Quantity:</h3>
240 |                     <span>S</span>
241 |                     <span>M</span>
242 |                     <span>L</span>
243 |                 </div>
244 |                 <a href="#">Buy now</a>
245 |             </div>
246 |         </div>
247 |     </div>
248 | 
249 | </body>
250 | 
251 | </html>


--------------------------------------------------------------------------------
/50_Image Card hover effect/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <!-- Font Awesome Icons  -->
15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
17 |         crossorigin="anonymous" />
18 | 
19 |     <title>Image hover effect using CSS - @code.scientist x @julianvelez1997</title>
20 | </head>
21 | 
22 | <style>
23 |     picture {
24 |         position: relative;
25 |         cursor: pointer;
26 |         display: inline-grid;
27 |         overflow: hidden;
28 |     }
29 | 
30 |     picture::after {
31 |         content: "";
32 |         position: absolute;
33 |         inset: -1px;
34 |         /* -1px instead of 0 to avoid tiny gaps on the edges */
35 |         --_g: conic-gradient(at 50% 25%, rgb(0 0 0/68%) 75%, #0000 0) no-repeat;
36 |         background: var(--_g) 0 calc(34% - var(--_p, 0%)) / 50.1% 400%,
37 |             var(--_g) 100% calc(100% - var(--_p, 0%)) / 50.1% 400%;
38 |         transition: 0.5s linear;
39 |     }
40 | 
41 |     picture.alt::after {
42 |         transform: scale(-1);
43 |     }
44 | 
45 |     picture:hover::after {
46 |         --_p: 134%;
47 |     }
48 | 
49 |     body {
50 |         margin: 0;
51 |         min-height: 100vh;
52 |         display: grid;
53 |         grid-auto-flow: column;
54 |         grid-gap: 30px;
55 |         place-content: center;
56 |         background: #a8dba8;
57 |     }
58 | </style>
59 | 
60 | <body>
61 |     <picture>
62 |         <img src="../img/one.jpg" alt="a astronaut" />
63 |     </picture>
64 | 
65 |     <picture class="alt">
66 |         <img src="../img/two.jpg" alt="a astronaut" />
67 |     </picture>
68 | 
69 | </body>
70 | 
71 | </html>


--------------------------------------------------------------------------------
/51_Image text reveal onhover/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <!-- Google Fonts  -->
 10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
 13 | 
 14 |     <!-- Font Awesome Icons  -->
 15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
 16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
 17 |         crossorigin="anonymous" />
 18 | 
 19 |     <title>Image Text reveal on hover - @code.scientist x @julianvelez1997</title>
 20 | </head>
 21 | 
 22 | <style>
 23 |     *,
 24 |     :before,
 25 |     :after {
 26 |         margin: 0;
 27 |         padding: 0;
 28 |         box-sizing: border-box;
 29 |     }
 30 | 
 31 |     body {
 32 |         height: 100vh;
 33 |         display: flex;
 34 |         justify-content: center;
 35 |         align-items: center;
 36 |         background: black;
 37 |     }
 38 | 
 39 |     .image_container {
 40 |         position: relative;
 41 |         width: 95%;
 42 |         max-width: 500px;
 43 |         height: min(70vw, 300px);
 44 |         cursor: pointer;
 45 |     }
 46 | 
 47 |     img {
 48 |         width: 100%;
 49 |         height: 100%;
 50 |         object-fit: cover;
 51 |     }
 52 | 
 53 |     .image_container:before {
 54 |         content: "";
 55 |         position: absolute;
 56 |         top: 0;
 57 |         left: 0;
 58 |         width: 100%;
 59 |         height: 100%;
 60 |         background-color: hsl(271, 76%, 53%);
 61 |         transform: scale(0);
 62 |         transition: all 800ms linear;
 63 |         transform-origin: 0 50%;
 64 |         z-index: 2;
 65 |         opacity: 0.3;
 66 |     }
 67 | 
 68 |     .image_container:hover:before {
 69 |         transform: scale(1);
 70 |     }
 71 | 
 72 |     span {
 73 |         position: absolute;
 74 |         color: #fff;
 75 |         opacity: 0;
 76 |         transition: all 800ms linear;
 77 |         z-index: 3;
 78 |     }
 79 | 
 80 |     .title {
 81 |         font-size: 2rem;
 82 |         left: 25%;
 83 |         top: 50%;
 84 |     }
 85 | 
 86 |     .description {
 87 |         font-size: 1rem;
 88 |         left: 25%;
 89 |         top: 65%;
 90 |         width: 50%;
 91 |     }
 92 | 
 93 |     .image_container:hover span {
 94 |         opacity: 1;
 95 |     }
 96 | 
 97 |     .line {
 98 |         left: 0;
 99 |         top: 0;
100 |         position: absolute;
101 |         background: #fff;
102 |         transition: all 800ms linear;
103 |     }
104 | 
105 |     .top {
106 |         width: 3px;
107 |         height: 0;
108 |         left: 20%;
109 |     }
110 | 
111 |     .image_container:hover .top {
112 |         height: 100%;
113 |     }
114 | 
115 |     .left {
116 |         width: 0;
117 |         height: 3px;
118 |         top: 95%;
119 |     }
120 | 
121 |     .image_container:hover .left {
122 |         width: 100%;
123 |     }
124 | 
125 |     @media (max-width: 424px) {
126 |         .title {
127 |             font-size: 1.5rem;
128 |             left: 25%;
129 |             top: 50%;
130 |         }
131 | 
132 |         .description {
133 |             font-size: 0.8rem;
134 |             left: 25%;
135 |             top: 65%;
136 |             width: 50%;
137 |         }
138 |     }
139 | </style>
140 | 
141 | <body>
142 |     <div class="image_container">
143 |         <img src="https://cdn.pixabay.com/photo/2019/10/19/03/50/bmw-4560531_960_720.jpg" />
144 |         <span class="title">Humming Bird</span>
145 |         <span class="description">They are the only birds that can fly backwards and are capable of
146 |             hovering for a period of time during flight.</span>
147 |         <span class="line top"></span>
148 |         <span class="line left"></span>
149 |     </div>
150 | </body>
151 | 
152 | </html>


--------------------------------------------------------------------------------
/52_Lamp using CSS/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <!-- Google Fonts  -->
 10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
 13 | 
 14 |     <!-- Font Awesome Icons  -->
 15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
 16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
 17 |         crossorigin="anonymous" />
 18 | 
 19 |     <title>Lamp Animation using CSS - @code.scientist x @julianvelez1997</title>
 20 | </head>
 21 | 
 22 | <style>
 23 |     body {
 24 |         background: rgb(0, 49, 20);
 25 |         background: radial-gradient(circle,
 26 |                 rgba(0, 49, 20, 1) 10%,
 27 |                 rgba(0, 16, 8, 1) 25%,
 28 |                 rgba(0, 0, 0, 1) 100%);
 29 |         margin: 0;
 30 |         height: 100vh;
 31 |         width: 100vw;
 32 |         display: flex;
 33 |         flex-direction: column;
 34 |         justify-content: center;
 35 |         align-items: center;
 36 |     }
 37 | 
 38 |     .lamp {
 39 |         height: 23rem;
 40 |         width: 12rem;
 41 |         position: relative;
 42 |         background: rgb(36, 154, 97);
 43 |         background: linear-gradient(90deg,
 44 |                 rgba(36, 154, 97, 1) 10%,
 45 |                 rgba(56, 170, 113, 1) 30%,
 46 |                 rgba(36, 154, 97, 1) 55%);
 47 |         clip-path: polygon(30% 0, 70% 0, 100% 65%, 70% 100%, 30% 100%, 0 65%);
 48 |         z-index: 20;
 49 |         border-radius: 50%;
 50 |     }
 51 | 
 52 |     .top-cover,
 53 |     .bottom-cover {
 54 |         width: 100%;
 55 |         height: 17.5%;
 56 |         position: absolute;
 57 |     }
 58 | 
 59 |     .top-cover {
 60 |         background: rgb(24, 24, 24);
 61 |         background: linear-gradient(90deg,
 62 |                 rgba(24, 24, 24, 1) 30%,
 63 |                 rgba(37, 41, 36, 1) 45%,
 64 |                 rgba(24, 24, 24, 1) 100%);
 65 |     }
 66 | 
 67 |     .bottom-cover {
 68 |         background: rgb(35, 40, 33);
 69 |         background: linear-gradient(90deg,
 70 |                 rgba(35, 40, 33, 1) 25%,
 71 |                 rgba(42, 50, 41, 1) 45%,
 72 |                 rgba(35, 40, 33, 1) 63%);
 73 |         top: 85%;
 74 |     }
 75 | 
 76 |     .lamp-bottom {
 77 |         width: 0;
 78 |         height: 0;
 79 |         border-left: 6rem solid transparent;
 80 |         border-right: 6rem solid transparent;
 81 |         border-top: 6rem solid rgba(35, 40, 33, 1);
 82 |         border-radius: 50%;
 83 |         transform: rotate(180deg);
 84 |         position: absolute;
 85 |         top: 70%;
 86 |     }
 87 | 
 88 |     .blob1,
 89 |     .blob2,
 90 |     .blob3 {
 91 |         position: absolute;
 92 |         top: 0;
 93 |         left: 0;
 94 |         fill: #00ff73;
 95 |         z-index: -1;
 96 |     }
 97 | 
 98 |     .blob1 {
 99 |         width: 150px;
100 |         animation: move 8s ease-in-out infinite;
101 |         transform-origin: 25% 75%;
102 |     }
103 | 
104 |     .blob2 {
105 |         width: 200px;
106 |         animation: move 5s ease-in-out infinite;
107 |         transform-origin: 50% 50%;
108 |     }
109 | 
110 |     .blob3 {
111 |         width: 175px;
112 |         animation: move 10s ease-in-out infinite;
113 |         transform-origin: 10% 60%;
114 |     }
115 | 
116 |     .bubble1,
117 |     .bubble2,
118 |     .bubble3 {
119 |         width: 15px;
120 |         height: 15px;
121 |         background-color: rgba(0, 40, 16, 0.1);
122 |         position: absolute;
123 |         border-radius: 50%;
124 |         left: 50%;
125 |         top: 50%;
126 |         z-index: -10;
127 |     }
128 | 
129 |     .bubble1 {
130 |         tranform-origin: 30% 50%;
131 |         animation: bubbly 15s ease infinite;
132 |     }
133 | 
134 |     .bubble2 {
135 |         tranform-origin: 10% 70%;
136 |         animation: bubbly 10s ease-in-out infinite;
137 |     }
138 | 
139 |     .bubble3 {
140 |         tranform-origin: 50% 30%;
141 |         animation: bubbly 12s linear infinite;
142 |     }
143 | 
144 |     @keyframes move {
145 |         0% {
146 |             transform: scale(0.25) translate(10px, -30px);
147 |         }
148 | 
149 |         40% {
150 |             transform: scale(0.35, 0.45) translate(180px, 300px) rotate(180deg);
151 |         }
152 | 
153 |         80% {
154 |             transform: scale(0.35) translate(0, 50px) rotate(-20deg);
155 |         }
156 | 
157 |         100% {
158 |             transform: scale(0.25) translate(10px, -30px);
159 |         }
160 |     }
161 | 
162 |     @keyframes bubbly {
163 |         0% {
164 |             transform: translate(-50px, -50px);
165 |         }
166 | 
167 |         25% {
168 |             transform: translate(30px, 100px);
169 |         }
170 | 
171 |         75% {
172 |             transform: translate(60px, -30px);
173 |         }
174 | 
175 |         100% {
176 |             transform: translate(-50px, -50px);
177 |         }
178 |     }
179 | </style>
180 | 
181 | <body>
182 |     <div class="lamp">
183 |         <div class="top-cover"></div>
184 |         <div class="bubble1"></div>
185 |         <div class="bubble2"></div>
186 |         <div class="bubble3"></div>
187 |         <div class="blob1">
188 |             <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg"
189 |                 viewBox="0 0 310 350">
190 |                 <path
191 |                     d="M156.4,339.5c31.8-2.5,59.4-26.8,80.2-48.5c28.3-29.5,40.5-47,56.1-85.1c14-34.3,20.7-75.6,2.3-111  c-18.1-34.8-55.7-58-90.4-72.3c-11.7-4.8-24.1-8.8-36.8-11.5l-0.9-0.9l-0.6,0.6c-27.7-5.8-56.6-6-82.4,3c-38.8,13.6-64,48.8-66.8,90.3c-3,43.9,17.8,88.3,33.7,128.8c5.3,13.5,10.4,27.1,14.9,40.9C77.5,309.9,111,343,156.4,339.5z" />
192 |             </svg>
193 |         </div>
194 |         <div class="blob2">
195 |             <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg"
196 |                 viewBox="0 0 310 350">
197 |                 <path
198 |                     d="M156.4,339.5c31.8-2.5,59.4-26.8,80.2-48.5c28.3-29.5,40.5-47,56.1-85.1c14-34.3,20.7-75.6,2.3-111  c-18.1-34.8-55.7-58-90.4-72.3c-11.7-4.8-24.1-8.8-36.8-11.5l-0.9-0.9l-0.6,0.6c-27.7-5.8-56.6-6-82.4,3c-38.8,13.6-64,48.8-66.8,90.3c-3,43.9,17.8,88.3,33.7,128.8c5.3,13.5,10.4,27.1,14.9,40.9C77.5,309.9,111,343,156.4,339.5z" />
199 |             </svg>
200 |         </div>
201 |         <div class="blob3">
202 |             <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg"
203 |                 viewBox="0 0 310 350">
204 |                 <path
205 |                     d="M156.4,339.5c31.8-2.5,59.4-26.8,80.2-48.5c28.3-29.5,40.5-47,56.1-85.1c14-34.3,20.7-75.6,2.3-111  c-18.1-34.8-55.7-58-90.4-72.3c-11.7-4.8-24.1-8.8-36.8-11.5l-0.9-0.9l-0.6,0.6c-27.7-5.8-56.6-6-82.4,3c-38.8,13.6-64,48.8-66.8,90.3c-3,43.9,17.8,88.3,33.7,128.8c5.3,13.5,10.4,27.1,14.9,40.9C77.5,309.9,111,343,156.4,339.5z" />
206 |             </svg>
207 |         </div>
208 |         <div class="bottom-cover"></div>
209 |     </div>
210 |     <div class="lamp-bottom"></div>
211 | </body>
212 | 
213 | </html>


--------------------------------------------------------------------------------
/53_Simple Heartbeat effect using CSS/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <!-- Font Awesome Icons  -->
15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
17 |         crossorigin="anonymous" />
18 | 
19 |     <title>Underline link on hover - @code.scientist x @codingtorque</title>
20 | </head>
21 | 
22 | <style>
23 |     * {
24 |         margin: 0;
25 |         padding: 0;
26 |         box-sizing: border-box;
27 |         font-family: 'Poppins';
28 |     }
29 | 
30 |     body {
31 |         background-color: #111827;
32 |         color: white;
33 |         display: flex;
34 |         align-items: center;
35 |         justify-content: center;
36 |         padding-top: 15rem;
37 |     }
38 | 
39 |     .heart {
40 |         color: #ff4033;
41 |         font-size: 5rem;
42 |         animation: heartbeat 0.5s infinite alternate;
43 |         transform-origin: center;
44 |     }
45 | 
46 |     @keyframes heartbeat {
47 |         to {
48 |             transform: scale(1.5);
49 |         }
50 |     }
51 | </style>
52 | 
53 | <body>
54 |     <h1 class="heart"><i class="fas fa-heart"></i></h1>
55 | </body>
56 | 
57 | </html>


--------------------------------------------------------------------------------
/54_Animated Gradient Underglow/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <!-- Font Awesome Icons  -->
15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
17 |         crossorigin="anonymous" />
18 | 
19 |     <title>Animated Gradient Underglow - @code.scientist x @codingtorque</title>
20 | </head>
21 | 
22 | <style>
23 |     body {
24 |         display: flex;
25 |         align-items: center;
26 |         justify-content: center;
27 |         margin-top: 15rem;
28 |         background-color: black;
29 |         color: #999;
30 |         font-family: 'Poppins', sans-serif;
31 |     }
32 | 
33 |     .text-box {
34 |         background: hsl(0, -3%, 14%);
35 |         padding: 16px 24px;
36 |         position: relative;
37 |         border-radius: 8px;
38 |         box-shadow: 0 0 0 1px rgba(0, 0, 0, .01);
39 |         cursor: pointer;
40 |         letter-spacing: 2px;
41 |     }
42 | 
43 |     .text-box::after {
44 |         position: absolute;
45 |         content: "";
46 |         top: 15px;
47 |         left: 0;
48 |         right: 0;
49 |         z-index: -1;
50 |         height: 100%;
51 |         width: 100%;
52 |         transform: scale(0.9) translateZ(0);
53 |         filter: blur(15px);
54 |         background: linear-gradient(to left,
55 |                 #ff5770,
56 |                 #e4428d,
57 |                 #c42da8,
58 |                 #9e16c3,
59 |                 #6501de,
60 |                 #9e16c3,
61 |                 #c42da8,
62 |                 #e4428d,
63 |                 #ff5770);
64 |         background-size: 200% 200%;
65 |         animation: animateGlow 1.25s linear infinite;
66 |     }
67 | 
68 |     @keyframes animateGlow {
69 |         0% {
70 |             background-position: 0% 50%;
71 |         }
72 | 
73 |         100% {
74 |             background-position: 200% 50%;
75 |         }
76 |     }
77 | </style>
78 | 
79 | <body>
80 |     <div class="text-box">
81 |         @code.scientist x @codingtorque
82 |     </div>
83 | </body>
84 | 
85 | </html>


--------------------------------------------------------------------------------
/55_Name Lightning Animation using CSS/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <!-- Google Fonts  -->
 10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
 13 | 
 14 |     <!-- Font Awesome Icons  -->
 15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
 16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
 17 |         crossorigin="anonymous" />
 18 | 
 19 |     <title>Name lightning animation effect - @code.scientist x @julianvelez1997</title>
 20 | </head>
 21 | 
 22 | <style>
 23 |     :root {
 24 |         --effect: hover 1s linear infinite;
 25 |     }
 26 | 
 27 |     * {
 28 |         margin: 0;
 29 |     }
 30 | 
 31 |     body {
 32 |         display: flex;
 33 |         width: 100vw;
 34 |         height: 100vh;
 35 |         background: black;
 36 |         align-items: center;
 37 |         justify-content: center;
 38 |     }
 39 | 
 40 |     div {
 41 |         text-align: center;
 42 |     }
 43 | 
 44 |     p {
 45 |         display: inline-block;
 46 |         text-transform: uppercase;
 47 |         text-align: center;
 48 |         font-size: 4em;
 49 |         font-family: arial;
 50 |         font-weight: 600;
 51 |         transform: scale(0.5);
 52 |         color: #121212;
 53 |         -webkit-text-stroke: 2px gray;
 54 |     }
 55 | 
 56 |     p:nth-child(1) {
 57 |         animation: var(--effect);
 58 |     }
 59 | 
 60 |     p:nth-child(2) {
 61 |         animation: var(--effect) 0.125s;
 62 |     }
 63 | 
 64 |     p:nth-child(3) {
 65 |         animation: var(--effect) 0.25s;
 66 |     }
 67 | 
 68 |     p:nth-child(4) {
 69 |         animation: var(--effect) 0.375s;
 70 |     }
 71 | 
 72 |     p:nth-child(5) {
 73 |         animation: var(--effect) 0.5s;
 74 |     }
 75 | 
 76 |     p:nth-child(6) {
 77 |         animation: var(--effect) 0.675s;
 78 |     }
 79 | 
 80 |     p:nth-child(7) {
 81 |         animation: var(--effect) 0.75s;
 82 |     }
 83 | 
 84 |     @keyframes hover {
 85 |         0% {
 86 |             transform: scale(0.5);
 87 |             color: #121212;
 88 |             -webkit-text-stroke: 2px gray;
 89 |         }
 90 | 
 91 |         20% {
 92 |             transform: scale(1);
 93 |             color: pink;
 94 |             -webkit-text-stroke: 3px red;
 95 |             filter: drop-shadow(0 0 1px black) drop-shadow(0 0 1px black) drop-shadow(0 0 3px red) drop-shadow(0 0 5px red) hue-rotate(10turn);
 96 |         }
 97 | 
 98 |         50% {
 99 |             transform: scale(0.5);
100 |             color: #121212;
101 |             -webkit-text-stroke: 2px gray;
102 |         }
103 |     }
104 | </style>
105 | 
106 | <body>
107 |     <div>
108 |         <p>J</p>
109 |         <p>U</p>
110 |         <p>L</p>
111 |         <p>I</p>
112 |         <p>A</p>
113 |         <p>N</p>
114 |         <p>V</p>
115 |     </div>
116 | </body>
117 | 
118 | </html>


--------------------------------------------------------------------------------
/56_Neon button effect/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <!-- Font Awesome Icons  -->
15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
17 |         crossorigin="anonymous" />
18 | 
19 |     <title>Neon button hover effect - @code.scientist x @julianvelez1997</title>
20 | </head>
21 | 
22 | <style>
23 |     * {
24 |         margin: 0;
25 |         padding: 0;
26 |         font-family: consolas;
27 |         box-sizing: border-box;
28 |     }
29 | 
30 |     body {
31 |         display: flex;
32 |         align-items: center;
33 |         justify-content: center;
34 |         min-height: 100vh;
35 |         background-color: #000;
36 |     }
37 | 
38 |     a {
39 |         position: relative;
40 |         padding: 10px 30px;
41 |         margin: 45px 0;
42 |         color: #21ebff;
43 |         text-decoration: none;
44 |         font-size: 20px;
45 |         text-transform: uppercase;
46 |         transition: 0.5s;
47 |     }
48 | 
49 |     a::before {
50 |         content: " ";
51 |         position: absolute;
52 |         top: -1px;
53 |         left: -1px;
54 |         width: 10px;
55 |         height: 10px;
56 |         border-top: 2px solid #21ebff;
57 |         border-left: 2px solid #21ebff;
58 |         transition: 0.5s;
59 |         transition-delay: 0.5s;
60 |     }
61 | 
62 |     a::after {
63 |         content: " ";
64 |         position: absolute;
65 |         bottom: -1px;
66 |         right: -1px;
67 |         width: 10px;
68 |         height: 10px;
69 |         border-bottom: 2px solid #21ebff;
70 |         border-right: 2px solid #21ebff;
71 |         transition: 0.5s;
72 |         transition-delay: 0.5s;
73 |     }
74 | 
75 |     a:hover::before,
76 |     a:hover::after {
77 |         width: 100%;
78 |         height: 100%;
79 |         transition-delay: 0s;
80 |     }
81 | 
82 |     a:hover {
83 |         background: #21ebff;
84 |         color: #000;
85 |         box-shadow: 0 0 50px #21ebff;
86 |         transition-delay: 0.5s;
87 |     }
88 | </style>
89 | 
90 | <body>
91 | 
92 |     <a href="#">Julian Velez G</a>
93 | 
94 | </body>
95 | 
96 | </html>


--------------------------------------------------------------------------------
/Animated Like Button using CSS/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html class="my-2 rounded-full h-10 w-[16rem] px-4">
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <title>Animated Like Button using HTML & CSS - @code.scientist</title>
 10 | </head>
 11 | 
 12 | <style>
 13 |     /*#ff3c41*/
 14 |     /*#444857*/
 15 | 
 16 |     :root {
 17 |         --u: 1.5vmin;
 18 |         --clr: #777;
 19 |         --bg: #444857;
 20 |     }
 21 | 
 22 |     body {
 23 |         margin: 0;
 24 |         width: 100vw;
 25 |         height: 100vh;
 26 |         overflow: hidden;
 27 |         display: flex;
 28 |         align-items: center;
 29 |         justify-content: center;
 30 |         background-color: #131417;
 31 |         background-image: linear-gradient(315deg, #131417 0%, #1e1f26 74%);
 32 |     }
 33 | 
 34 |     .button {
 35 |         position: relative;
 36 |         width: calc(var(--u) * 10);
 37 |         height: calc(var(--u) * 10);
 38 |     }
 39 | 
 40 |     input {
 41 |         display: none;
 42 |     }
 43 | 
 44 |     label {
 45 |         background: var(--bg);
 46 |         width: 100%;
 47 |         height: 100%;
 48 |         position: absolute;
 49 |         border-radius: calc(var(--u) * 1.5);
 50 |         cursor: pointer;
 51 |         display: flex;
 52 |         align-items: center;
 53 |         justify-content: center;
 54 |     }
 55 | 
 56 |     label:before {
 57 |         content: "49";
 58 |         position: absolute;
 59 |         min-width: 50%;
 60 |         left: 25%;
 61 |         text-align: center;
 62 |         top: 0;
 63 |         bottom: 0;
 64 |         background: var(--bg);
 65 |         border-radius: calc(var(--u) * 2);
 66 |         font-size: calc(var(--u) * 2);
 67 |         font-family: Arial, Helvetica, serif;
 68 |         padding: calc(var(--u) * 0.5);
 69 |         box-sizing: border-box;
 70 |         color: var(--clr);
 71 |         line-height: calc(var(--u) * 2.25);
 72 |         z-index: -1;
 73 |         transition: all 0.5s ease 0s;
 74 |         animation: counter-bot 1s ease 0s;
 75 |     }
 76 | 
 77 |     input:checked+label:before {
 78 |         content: "50";
 79 |         color: #fff;
 80 |         background: #ff3c41;
 81 | 
 82 |         bottom: inherit;
 83 |         transition: all 0.5s ease 0s;
 84 |         animation: counter-top 1s ease 0s;
 85 |     }
 86 | 
 87 |     @keyframes counter-top {
 88 |         70% {
 89 |             top: calc(var(--u) * -4.75);
 90 |         }
 91 |     }
 92 | 
 93 |     @keyframes counter-bot {
 94 |         70% {
 95 |             top: inherit;
 96 |             bottom: calc(var(--u) * -5);
 97 |         }
 98 |     }
 99 | 
100 | 
101 |     label:after {
102 |         content: "";
103 |         width: calc(var(--u) * 8);
104 |         height: calc(var(--u) * 8);
105 |         position: absolute;
106 |         border-radius: 100%;
107 |         box-sizing: border-box;
108 |         z-index: -2;
109 |         animation: disc-gray 1s ease 0s, spin-gray 0.65s ease-in-out 0.25s;
110 |         transform: rotate(0deg);
111 |         --pos: 95%;
112 |         background:
113 |             radial-gradient(circle at 50% 50%, #fff0 0 62%, var(--bg) 63% 65%, #fff0 66% 100%),
114 |             radial-gradient(circle at 50% var(--pos), var(--bg) 0 4%, #fff0 4.5% 100%);
115 |     }
116 | 
117 |     @keyframes spin-gray {
118 |         100% {
119 |             transform: rotate(-360deg);
120 |         }
121 |     }
122 | 
123 |     @keyframes spin-red {
124 |         100% {
125 |             transform: rotate(360deg);
126 |         }
127 |     }
128 | 
129 |     @keyframes disc-gray {
130 |         70% {
131 |             width: calc(var(--u) * 19);
132 |             height: calc(var(--u) * 19);
133 |         }
134 |     }
135 | 
136 |     @keyframes disc-red {
137 |         70% {
138 |             width: calc(var(--u) * 19);
139 |             height: calc(var(--u) * 19);
140 |         }
141 |     }
142 | 
143 |     input:checked+label:after {
144 |         --bg: #ff3c41;
145 |         --pos: 5%;
146 |         animation: disc-red 1s ease 0s, spin-red 0.65s ease-in-out 0.25s;
147 |     }
148 | 
149 | 
150 | 
151 | 
152 | 
153 | 
154 |     label span {
155 |         position: absolute;
156 |         width: 100%;
157 |         height: 100%;
158 |         animation: dislike 0.5s ease 0s;
159 |     }
160 | 
161 |     /*
162 |     label span:before {
163 |         content: "";
164 |         width: 2px;
165 |         height: 2px;
166 |         position: absolute;
167 |         border-radius: calc(var(--u) * 5);
168 |         transform: translate(calc(var(--u) * 2.235), calc(var(--u) * 4.5));
169 |         border: calc(var(--u) * 2.71) solid transparent;
170 |         border-top: calc(var(--u) * 2.9) solid var(--clr);
171 |     }
172 | 
173 |     label span:after {
174 |         content: "";
175 |         background: 
176 |             radial-gradient(circle at 40% 45%, var(--clr) 0 calc(var(--u) * 1.25), #fff0 calc(var(--u) * 1.325) 100%), 
177 |             radial-gradient(circle at 60% 45%, var(--clr) 0 calc(var(--u) * 1.25), #fff0 calc(var(--u) * 1.325) 100%);
178 |         width: 100%;
179 |         height: 100%;
180 |         position: absolute;
181 |     }
182 |     */
183 |     label span:before {
184 |         content: "";
185 |         position: absolute;
186 |         border-radius: 0.25vmin;
187 |         border: 3.6vmin solid #fff0;
188 |         border-top: 4vmin solid var(--clr);
189 |         margin-top: 7.65vmin;
190 |         margin-left: 4vmin;
191 |     }
192 | 
193 |     label span:after {
194 |         content: "";
195 |         position: absolute;
196 |         background: var(--clr);
197 |         width: 5vmin;
198 |         height: 5vmin;
199 |         border-radius: 100%;
200 |         margin-left: 3.35vmin;
201 |         margin-top: 3.5vmin;
202 |         box-shadow: 3.5vmin 0 0 0 var(--clr);
203 |     }
204 | 
205 |     input:checked+label span {
206 |         --clr: #ff3c41;
207 |         animation: like 0.5s ease 0s;
208 |     }
209 | 
210 | 
211 |     @keyframes like {
212 |         75% {
213 |             transform: scale(1.25);
214 |         }
215 |     }
216 | 
217 |     @keyframes dislike {
218 |         75% {
219 |             transform: scale(0.75);
220 |         }
221 |     }
222 | 
223 | 
224 | 
225 | 
226 | 
227 | 
228 |     .button:hover label span:before,
229 |     .button:hover label span:after {
230 |         --clr: #9d4958;
231 |     }
232 | 
233 |     .button:hover input:checked+label span:before,
234 |     .button:hover input:checked+label span:after {
235 |         --clr: #ff3c41;
236 |     }
237 | </style>
238 | 
239 | <body>
240 |     <div class="button">
241 |         <input type="checkbox" id="liked"><label for="liked"><span></span></label>
242 |     </div>
243 | </body>
244 | 
245 | </html>


--------------------------------------------------------------------------------
/Clip Path/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <title>Clip Path - @code.scientist</title>
10 | </head>
11 | 
12 | <style>
13 |     body {
14 |         background-color: #111827;
15 |         color: white;
16 |         display: flex;
17 |         align-items: center;
18 |         justify-content: center;
19 |     }
20 | 
21 |     img {
22 |         clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
23 |         transition: 0.3s;
24 |         display: block;
25 |         margin: 40px auto;
26 |     }
27 | 
28 |     img:hover {
29 |         clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
30 |     }
31 | </style>
32 | 
33 | <body>
34 |     <img src="https://cdn.pixabay.com/photo/2022/01/04/19/01/fantastic-6915749_960_720.jpg" />
35 | </body>
36 | 
37 | </html>


--------------------------------------------------------------------------------
/Cool css loader/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <title>Cool loader using CSS - @code.scientist</title>
 10 | </head>
 11 | 
 12 | <style>
 13 |     * {
 14 |         margin: 0;
 15 |         padding: 0;
 16 |         box-sizing: border-box;
 17 |     }
 18 | 
 19 |     body {
 20 |         display: flex;
 21 |         align-items: center;
 22 |         justify-content: center;
 23 |         height: 100vh;
 24 |         background-color: black;
 25 |     }
 26 | 
 27 |     .music {
 28 |         display: inline-flex;
 29 |         align-items: center;
 30 |         justify-content: space-between;
 31 |         position: relative;
 32 |         width: 300px;
 33 |         height: 200px;
 34 |     }
 35 | 
 36 |     .music .bar {
 37 |         width: 12px;
 38 |         height: 2px;
 39 |         border-radius: 10px;
 40 |         background-color: white;
 41 |         animation: up_down 1.5s ease-in-out infinite;
 42 |     }
 43 | 
 44 |     @keyframes up_down {
 45 | 
 46 |         0%,
 47 |         100% {
 48 |             height: 2px;
 49 |         }
 50 | 
 51 |         50% {
 52 |             height: 80px;
 53 |         }
 54 |     }
 55 | 
 56 |     .music .bar:nth-child(1) {
 57 |         background-color: purple;
 58 |         animation-delay: 1s;
 59 |     }
 60 | 
 61 |     .music .bar:nth-child(2) {
 62 |         background-color: crimson;
 63 |         animation-delay: 0.8s;
 64 |     }
 65 | 
 66 |     .music .bar:nth-child(3) {
 67 |         background-color: deeppink;
 68 |         animation-delay: 0.6s;
 69 |     }
 70 | 
 71 |     .music .bar:nth-child(4) {
 72 |         background-color: orange;
 73 |         animation-delay: 0.4s;
 74 |     }
 75 | 
 76 |     .music .bar:nth-child(5) {
 77 |         background-color: gold;
 78 |         animation-delay: 0.2s;
 79 |     }
 80 | 
 81 |     .music .bar:nth-child(6) {
 82 |         background-color: gold;
 83 |         animation-delay: 0.2s;
 84 |     }
 85 | 
 86 |     .music .bar:nth-child(7) {
 87 |         background-color: orange;
 88 |         animation-delay: 0.4s;
 89 |     }
 90 | 
 91 |     .music .bar:nth-child(8) {
 92 |         background-color: deeppink;
 93 |         animation-delay: 0.6s;
 94 |     }
 95 | 
 96 |     .music .bar:nth-child(9) {
 97 |         background-color: crimson;
 98 |         animation-delay: 0.8s;
 99 |     }
100 | 
101 |     .music .bar:nth-child(10) {
102 |         background-color: purple;
103 |         animation-delay: 1s;
104 |     }
105 | </style>
106 | 
107 | <body>
108 |     <div class='music'>
109 |         <div class='bar'></div>
110 |         <div class='bar'></div>
111 |         <div class='bar'></div>
112 |         <div class='bar'></div>
113 |         <div class='bar'></div>
114 |         <div class='bar'></div>
115 |         <div class='bar'></div>
116 |         <div class='bar'></div>
117 |         <div class='bar'></div>
118 |         <div class='bar'></div>
119 |     </div>
120 | 
121 | </body>
122 | 
123 | </html>


--------------------------------------------------------------------------------
/Glowing Text using CSS/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <!-- Required meta tags -->
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <title>Glowing Text using CSS - @code.scientist</title>
 10 | </head>
 11 | 
 12 | <style>
 13 |     body {
 14 |         padding: 0;
 15 |         margin: 0;
 16 |         height: 100vh;
 17 |         background: #18191f;
 18 |         /* font-family: 'Poppins', sans-serif; */
 19 |         display: flex;
 20 |         justify-content: center;
 21 |         align-items: center;
 22 |     }
 23 | 
 24 |     ul {
 25 |         position: relative;
 26 |         display: flex;
 27 |     }
 28 | 
 29 |     li {
 30 |         list-style: none;
 31 |     }
 32 | 
 33 |     label {
 34 |         position: relative;
 35 |     }
 36 | 
 37 |     input[type="checkbox"] {
 38 |         position: absolute;
 39 |         opacity: 0;
 40 |         cursor: pointer;
 41 |         height: 80px;
 42 |         width: 80px;
 43 |         z-index: 100;
 44 |     }
 45 | 
 46 |     div {
 47 |         position: relative;
 48 |         height: 80px;
 49 |         width: 80px;
 50 |         background: #18191f;
 51 |         color: #555;
 52 |         display: flex;
 53 |         display: flex;
 54 |         justify-content: center;
 55 |         align-items: center;
 56 |         font-size: 46px;
 57 |         cursor: pointer;
 58 |         margin: 0 4px;
 59 |         border-radius: 20px;
 60 |         box-shadow: -1px -1px 4px rgba(255, 255, 255, 0.05),
 61 |             4px 4px 6px rgba(0, 0, 0, 0.2),
 62 |             inset -1px -1px 4px rgba(255, 255, 255, 0.05),
 63 |             inset 1px 1px 1px rgba(0, 0, 0, 0.1);
 64 |     }
 65 | 
 66 |     div:before {
 67 |         content: "";
 68 |         position: absolute;
 69 |         top: 2px;
 70 |         left: 2px;
 71 |         width: 75px;
 72 |         height: 38px;
 73 |         border-top-left-radius: 20px;
 74 |         border-top-right-radius: 20px;
 75 |         background: rgba(255, 255, 255, 0.05);
 76 |     }
 77 | 
 78 |     input[type="checkbox"]:checked~div {
 79 |         box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.05),
 80 |             inset 4px 4px 6px rgba(0, 0, 0, 0.2);
 81 |         color: yellow;
 82 |         text-shadow: 0 0 15px yellow, 0 0 25px yellow;
 83 |         animation: glow 1.5s linear infinite;
 84 |     }
 85 | 
 86 |     @keyframes glow {
 87 |         0% {
 88 |             filter: hue-rotate(0deg);
 89 |         }
 90 | 
 91 |         100% {
 92 |             filter: hue-rotate(360deg);
 93 |         }
 94 |     }
 95 | </style>
 96 | 
 97 | <body>
 98 |     <ul>
 99 |         <li>
100 |             <input type="checkbox" />
101 |             <div>J</div>
102 |         </li>
103 |         <li>
104 |             <input type="checkbox" />
105 |             <div>U</div>
106 |         </li>
107 |         <li>
108 |             <input type="checkbox" />
109 |             <div>L</div>
110 |         </li>
111 |         <li>
112 |             <input type="checkbox" />
113 |             <div>I</div>
114 |         </li>
115 |         <li>
116 |             <input type="checkbox" />
117 |             <div>A</div>
118 |         </li>
119 |         <li>
120 |             <input type="checkbox" />
121 |             <div>N</div>
122 |         </li>
123 |         <li>
124 |             <input type="checkbox" />
125 |             <div>V</div>
126 |         </li>
127 |     </ul>
128 | </body>
129 | 
130 | </html>


--------------------------------------------------------------------------------
/Neon text using css/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html class="my-2 rounded-full h-10 w-[16rem] px-4">
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <!-- Google Fonts  -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
13 | 
14 |     <!-- Font Awesome Icons  -->
15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |         integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
17 |         crossorigin="anonymous" />
18 | 
19 |     <title>Neon text using CSS - @code.scientist</title>
20 | </head>
21 | 
22 | <style>
23 |     @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
24 | 
25 |     * {
26 |         margin: 0;
27 |         padding: 0;
28 |         box-sizing: border-box;
29 |     }
30 | 
31 |     body {
32 |         font-family: "Poppins", sans-serif;
33 |         display: flex;
34 |         justify-content: center;
35 |         align-items: center;
36 |         min-height: 100vh;
37 |         background: #000;
38 |     }
39 | 
40 |     h2 {
41 |         font-size: 6em;
42 |         font-weight: 500;
43 |         color: #222;
44 |         letter-spacing: 5px;
45 |         cursor: pointer;
46 |         text-transform: uppercase;
47 |         transition: 0.5s;
48 |     }
49 | 
50 |     h2:hover {
51 |         color: #fff;
52 |         text-shadow: 0 0 5px #03e9f4,
53 |             0 0 25px #03e9f4,
54 |             0 0 50px #03e9f4,
55 |             0 0 100px #03e9f4;
56 |     }
57 | </style>
58 | 
59 | <body>
60 |     <h2>julian</h2>
61 | </body>
62 | 
63 | </html>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 | # CSS Animations
3 | 
4 | Awesome CSS Animations using Pure CSS😍
5 | 
6 | ![Learn Web Developement by making projects (2)](https://user-images.githubusercontent.com/66505013/170861540-529d3053-793f-40f9-a9d7-5cfb485c316f.png)
7 | 


--------------------------------------------------------------------------------