├── Chapter1
    ├── CSS Animations
    ├── CSS Variables
    ├── Creating a Simple Grid Layout
    ├── Layout with Flexbox
    ├── Positioning Elements
    ├── Responsive Design with Media Queries
    ├── Styling Links
    ├── Styling Text
    ├── The Box Model
    └── Using CSS Transitions
├── Chapter11
    ├── Animated Gradient Border
    ├── CSS Grid Gallery with Hover Effect
    ├── CSS Only Modal Dialog
    ├── CSS Perspective Card Flip
    ├── Diagonal Section Dividers
    ├── Floating Labels for Form Input
    ├── Infinite Horizontal Scrolling Text
    ├── Ripple Effect on Button Click
    ├── Rotating Navigation Wheel
    └── Simple CSS Loader Animation
├── Chapter12
    ├── 2Floating CSS Bubbles Background
    ├── Background Image Zoom on Scroll
    ├── CSS Shapes Layout
    ├── CSS Variable Themes
    ├── Expanding Cards on Hover
    ├── Flip Card with Depth Effects
    ├── Floating CSS Bubbles Background
    ├── Hover Slide-in Details Card
    ├── Pure CSS Accordion with Plus and Minus Icons
    ├── Ripple Click Effect
    └── Text Gradient with Animation
├── Chapter13
    ├── Background Blend Mode Gallery
    ├── Bouncing Ball Animation
    ├── CSS-only Toast Notifications
    ├── Circle Navigation Menu
    ├── Fading Carousel
    ├── Flip Switch Toggle
    ├── Hoverable Dropdown Menu
    ├── Multi-Step Progress Bar
    ├── Rotating Gallery Carousel
    └── Typewriter Text Effect
├── Chapter14
    ├── Animated Background Gradient Transition
    ├── CSS Grid Photo Gallery
    ├── CSS-only Slide Toggle
    ├── Continuous Text Marquee
    ├── Dynamic Shadow on Hover
    ├── Flip Card with Detailed Back
    ├── Glowing Neon Text Effect
    ├── Parallax Scrolling Effect on Background Images
    ├── Responsive Masonry Layout with CSS Columns
    └── Ripple Effect Button
├── Chapter15
    ├── Animated Gradient Text
    ├── Automatic Slideshow
    ├── CSS Tilt Hover Effect
    ├── CSS Variables for Dynamic Themes
    ├── Floating Labels in Forms
    ├── Fold-out Card Details
    ├── Hover-Over Image Zoom Effect
    ├── Responsive Navigation Bar
    ├── Simple CSS Loader Animation
    └── Stacked Cards Layout
├── Chapter16
    ├── Animated Wave Background
    ├── Bouncing Loader Animation
    ├── Corner Ribbon
    ├── Diagonal Section Dividers
    ├── Hover Effect with Image and Caption Overlay
    ├── Infinite Scrolling Background
    ├── Pure CSS Masonry Layout
    ├── Pure CSS Modal Window
    └── Responsive Tabs with Pure CSS
├── Chapter17
    ├── CSS Accordion with Plus and Minus Icons
    ├── CSS Floating Action Button
    ├── Content Cards with Hover Shadow Effect
    ├── Custom Checkbox Style
    ├── Grid-Based Responsive Photo Gallery
    ├── Horizontal Scrolling Gallery
    ├── Pure CSS Dropdown Menu
    ├── Simple Fade-in Page Animation
    ├── Sticky Footer with Flexbox
    └── Sticky Header on Scroll
├── Chapter18
    ├── Animated Checkbox Customization
    ├── Background Image with Overlay and Text
    ├── CSS Breadcrumbs Navigation
    ├── CSS-only Dropdown Menu
    ├── Creating a CSS-only Star Rating Component
    ├── Custom Scrollbar Styling
    ├── Dynamic Grid Layout with CSS Grid
    ├── Expandable Search Bar
    ├── Responsive Side Navigation Menu
    └── Simple CSS Lightbox
├── Chapter19
    ├── Accordion FAQ
    ├── Animated Underline on Hover
    ├── CSS Loader with Bouncing Dots
    ├── Hover to Reveal Content
    ├── Neumorphic Button Design
    ├── Responsive Circle Shapes with Text
    ├── Responsive Masonry Layout with CSS Columns
    ├── Rotating Navigation Menu
    ├── Smooth Scrolling Links with CSS
    └── Text Reveal on Scroll
├── Chapter2
    ├── Advanced Selectors
    ├── CSS 3D Transformations
    ├── CSS Filters for Images
    ├── CSS Shapes
    ├── Creating a Sticky Navigation Bar
    ├── Custom Checkbox Styles
    ├── Hover Effects on Cards
    ├── Implementing CSS Grid for Complex Layouts
    ├── Styling Forms with CSS
    └── Styling Lists
├── Chapter20
    ├── Animated Gradient Background
    ├── CSS-only Slider Control
    ├── CSS-only Zigzag Border
    ├── Content Tabs with CSS and JavaScript
    ├── Creating a Collapsible Content Section
    ├── Expanding Search Bar
    ├── Hover-over Text Reveal
    ├── Overflowing Text with Ellipsis
    ├── Simple Image Carousel
    └── Vertical Timeline Design
├── Chapter21
    ├── CSS Speech Bubble
    ├── Custom Animated Checkbox
    ├── Diagonal Divider Between Sections
    ├── Dynamic Shadow on Hover
    ├── Full-Screen Navigation Overlay
    ├── Infinite Scrolling Text Marquee
    ├── Interactive Image Gallery with CSS Grid
    ├── Multi-Column Text Layout
    ├── Responsive Cards with Hover Effects
    └── Slide-In Sidebar Menu
├── Chapter22
    ├── Animated Loading Dots
    ├── CSS AccordionPure CSS
    ├── CSS Flip Card on Mouse Hover
    ├── Circular Progress Bar
    ├── Creating a Responsive Navigation Bar
    ├── Fade-in Section on Scroll
    ├── Full-page Background Image
    ├── Hover Over Image to Reveal Text
    ├── JS CSS Accordion
    ├── Parallax Scrolling Effect
    └── Scroll-triggered Animation
├── Chapter3
    ├── CSS Grid with Overlapping Items
    ├── CSS Variables for Themes
    ├── Creative List Bullets with Pseudo-Elements
    ├── Custom Animated Loading Spinner
    ├── Custom Cursors
    ├── Flexbox for Navigation Bar
    ├── Gradient Background Animation
    ├── Parallax Scrolling Effect
    ├── Responsive Typography
    └── Variable Fonts
├── Chapter4
    ├── Building a Responsive Navbar
    ├── CSS Gradient Text Effect
    ├── CSS Perspective Hover Effect
    ├── Creating a CSS Tooltip
    ├── Flexbox Photo Gallery
    ├── Fullscreen Background Video
    ├── Hover Effect with Box Shadow and Transform
    ├── Implement a Fullscreen Background Video
    ├── Responsive Grid with CSS Variables and Media Queries
    └── Styling Forms with CSS
├── Chapter5
    ├── CSS Gradient Background Animation
    ├── CSS Hover Image Gallery
    ├── CSS Keyframe Animation
    ├── CSS Sticky Footer
    ├── Creating a CSS-only Accordion
    ├── Custom Checkbox Styles
    ├── Flip Card Effect using CSS
    ├── Hover Over Image Effects
    ├── Pure CSS Modal Popup
    └── Responsive Tiles Layout
├── Chapter6
    ├── Animated Loading Spinner
    ├── CSS Grid Area Layout
    ├── CSS Star Ratings
    ├── CSS-only Tabs
    ├── Creating a Masonry Layout with CSS Columns
    ├── Custom Animated Checkbox
    ├── Hover to Reveal Content
    ├── Infinite Scrolling Background
    ├── Pure CSS Dropdown Navigation Menu
    └── Transforming Navigation Bar on Scroll
├── Chapter7
    ├── Animated Background Color Switcher
    ├── CSS Scroll Snap
    ├── CSS-only Carousel
    ├── CSS-only Slideshow
    ├── Creating a Typewriter Effect
    ├── Dynamic Shadow on Hover
    ├── Flip Card on Hover
    ├── Night Mode Toggle Button
    ├── Pure CSS Collapsible Sections
    └── Responsive Cards with Flexbox
├── Chapter8
    ├── Animated Gradient Background
    ├── CSS 3D Cube
    ├── CSS Variables Theme Switcher
    ├── Diagonal Section Divider
    ├── Expanding Search Bar
    ├── Floating Action Button with Tooltip
    ├── Hover-over Tooltips
    ├── Pulse Animation Effect
    ├── Responsive CSS Timeline
    └── Rotating Words with CSS Animations
├── Chapter9
    ├── Background Clip Text
    ├── CSS Hover Flip Card
    ├── CSS Wave Animation
    ├── Glowing Text Effect
    ├── Gradient Text Color
    ├── Infinite Scrolling Text Animation
    ├── Neumorphic Button Design
    ├── Pure CSS Accordion with Details Summary
    ├── Responsive CSS Grid with Spanning Items
    └── Responsive Sidebar with Flexbox
├── README.md
└── chapter10
    ├── CSS Clip-path Hover Effects
    ├── CSS Columns for Text Flow
    ├── Fade-out Text with CSS Gradient
    ├── Fixed Background Scrolling Effect
    ├── Floating Clouds Background
    ├── Hover Scale Animation on Images
    ├── Neumorphic Switch Toggle
    ├── Parallax Scrolling Effect
    ├── Rainbow Text Animation
    └── Ripple Effect Button


/Chapter1/CSS Animations:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes example {
 6 |  from {background-color: red;}
 7 |  to {background-color: yellow;}
 8 |  }
 9 |  .animated-box {
10 |  width: 100px;
11 |  height: 100px;
12 |  background-color: red;
13 |  animation-name: example;
14 |  animation-duration: 4s;
15 |  }
16 |  </style>
17 | </head>
18 | <body>
19 | <div class="animated-box"></div>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Chapter1/CSS Variables:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  :root {
 6 |  --main-bg-color: coral;
 7 |  --main-text-color: white;
 8 |  }
 9 |  body {
10 |  background-color: var(--main-bg-color);
11 |  color: var(--main-text-color);
12 |  }
13 |  </style>
14 | </head>
15 | <body>
16 | <p>Welcome to the world of CSS variables!</p>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/Chapter1/Creating a Simple Grid Layout:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .grid-container {
 6 |  display: grid;
 7 |  grid-template-columns: auto auto auto;
 8 |  gap: 10px;
 9 |  background-color: #f2f2f2;
10 |  }
11 |  .grid-item {
12 |  background-color: rgba(255, 99, 71, 0.6);
13 |  padding: 20px;
14 |  text-align: center;
15 |  }
16 |  </style>
17 | </head>
18 | <body>
19 | <div class="grid-container">
20 |  <div class="grid-item">1</div>
21 |  <div class="grid-item">2</div>
22 |  <div class="grid-item">3</div>
23 | </div>
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Chapter1/Layout with Flexbox:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .flex-container {
 6 |  display: flex;
 7 |  justify-content: space-around;
 8 |  align-items: center;
 9 |  height: 200px;
10 |  background-color: lightgray;
11 |  }
12 |  .flex-item {
13 |  background-color: cornflowerblue;
14 |  padding: 20px;
15 |  margin: 5px;
16 |  }
17 |  </style>
18 | </head>
19 | <body>
20 | <div class="flex-container">
21 |  <div class="flex-item">Flex Item 1</div>
22 |  <div class="flex-item">Flex Item 2</div>
23 |  <div class="flex-item">Flex Item 3</div>
24 | </div>
25 | </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/Chapter1/Positioning Elements:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .relative {
 6 |  position: relative;
 7 |  left: 20px;
 8 |  top: 10px;
 9 |  }
10 |  .absolute {
11 |  position: absolute;
12 |  top: 50px;
13 |  right: 30px;
14 |  }
15 |  .fixed {
16 |  position: fixed;
17 |  bottom: 0;
18 |  right: 0;
19 |  }
20 |  </style>
21 | </head>
22 | <body>
23 | <div class="relative">Relative Positioning</div>
24 | <div class="absolute">Absolute Positioning</div>
25 | <div class="fixed">Fixed Positioning</div>
26 | </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/Chapter1/Responsive Design with Media Queries:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  body {
 6 |  background-color: lightgreen;
 7 |  }
 8 |  @media (max-width: 600px) {
 9 |  body {
10 |  background-color: lightblue;
11 |  }
12 |  }
13 |  </style>
14 | </head>
15 | <body>
16 | <p>Resize the window to see the background color change.</p>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/Chapter1/Styling Links:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  a:link {
 6 |  color: green;
 7 |  }
 8 |  a:visited {
 9 |  color: purple;
10 |  }
11 |  a:hover {
12 |  color: red;
13 |  }
14 |  a:active {
15 |  color: yellow;
16 |  }
17 |  </style>
18 | </head>
19 | <body>
20 | <a href="https://www.example.com">Visit Example.com</a>
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/Chapter1/Styling Text:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .highlighted-text {
 6 |  color: blue;
 7 |  font-size: 20px;
 8 |  text-align: center;
 9 |  }
10 |  </style>
11 | </head>
12 | <body>
13 | <h1 class="highlighted-text">Hello, CSS World!</h1>
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/Chapter1/The Box Model:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .box {
 6 |  background-color: lightcoral;
 7 |  width: 100px;
 8 |  padding: 20px;
 9 |  border: 5px solid black;
10 |  margin: 10px;
11 |  }
12 |  </style>
13 | </head>
14 | <body>
15 | <div class="box">Content</div>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/Chapter1/Using CSS Transitions:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .transition-box {
 6 |  width: 100px;
 7 |  height: 100px;
 8 |  background-color: tomato;
 9 |  transition: width 2s, background-color 2s ease-in-out;
10 |  }
11 |  .transition-box:hover {
12 |  width: 200px;
13 |  background-color: skyblue;
14 |  }
15 |  </style>
16 | </head>
17 | <body>
18 | <div class="transition-box"></div>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter11/Animated Gradient Border:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes gradientBorder {
 6 |  0% { border-image: linear-gradient(45deg, #3498db, #9b59b6) 1; }
 7 |  50% { border-image: linear-gradient(45deg, #9b59b6, #e74c3c) 1; }
 8 |  100% { border-image: linear-gradient(45deg, #e74c3c, #3498db) 1; }
 9 |  }
10 |  .animated-border {
11 |  padding: 20px;
12 |  border: 4px solid;
13 |  border-image: linear-gradient(45deg, #3498db, #9b59b6) 1;
14 |  animation: gradientBorder 3s infinite linear;
15 |  }
16 |  </style>
17 | </head>
18 | <body>
19 | <div class="animated-border">Animated Gradient Border</div>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Chapter11/CSS Grid Gallery with Hover Effect:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .grid-gallery {
 6 |  display: grid;
 7 |  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 8 |  gap: 10px;
 9 |  }
10 |  .gallery-item {
11 |  position: relative;
12 |  overflow: hidden;
13 |  }
14 |  .gallery-item img {
15 |  width: 100%;
16 |  height: auto;
17 |  transition: transform 0.3s ease;
18 |  }
19 |  .gallery-item:hover img {
20 |  transform: scale(1.1);
21 |  }
22 |  .caption {
23 |  position: absolute;
24 |  bottom: 0;
25 |  background: rgba(0, 0, 0, 0.7);
26 |  color: #fff;
27 |  width: 100%;
28 |  padding: 10px;
29 |  transform: translateY(100%);
30 |  transition: transform 0.3s ease;
31 |  }
32 |  .gallery-item:hover .caption {
33 |  transform: translateY(0);
34 |  }
35 |  </style>
36 | </head>
37 | <body>
38 | <div class="grid-gallery">
39 |  <div class="gallery-item">
40 |  <img src="image1.jpg" alt="Image 1">
41 |  <div class="caption">Image 1 Caption</div>
42 |  </div>
43 |  <!-- Repeat for more images -->
44 | </div>
45 | </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/Chapter11/CSS Only Modal Dialog:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .modal {
 6 |  display: none;
 7 |  position: fixed;
 8 |  left: 0;
 9 |  top: 0;
10 |  width: 100%;
11 |  height: 100%;
12 |  background: rgba(0, 0, 0, 0.5);
13 |  justify-content: center;
14 |  align-items: center;
15 |  }
16 |  .modal:target {
17 |  display: flex;
18 |  }
19 |  .modal-content {
20 |  background: white;
21 |  padding: 20px;
22 |  border-radius: 5px;
23 |  }
24 |  </style>
25 | </head>
26 | <body>
27 | <a href="#modal1">Open Modal</a>
28 | <div id="modal1" class="modal">
29 |  <div class="modal-content">
30 |  <a href="#">Close</a>
31 |  <p>This is a CSS-only modal.</p>
32 |  </div>
33 | </div>
34 | </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/Chapter11/CSS Perspective Card Flip:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .card-container {
 6 |  perspective: 1000px;
 7 |  width: 200px;
 8 |  height: 300px;
 9 |  position: relative;
10 |  margin: 0 auto;
11 |  }
12 |  .card {
13 |  width: 100%;
14 |  height: 100%;
15 |  position: absolute;
16 |  transition: transform 1s;
17 |  transform-style: preserve-3d;
18 |  cursor: pointer;
19 |  }
20 |  .card:hover {
21 |  transform: rotateY(180deg);
22 |  }
23 |  .card-face {
24 |  position: absolute;
25 |  width: 100%;
26 |  height: 100%;
27 |  backface-visibility: hidden;
28 |  display: flex;
29 |  align-items: center;
30 |  justify-content: center;
31 |  font-size: 24px;
32 |  }
33 |  .card-front {
34 |  background: #3498db;
35 |  }
36 |  .card-back {
37 |  background: #9b59b6;
38 |  transform: rotateY(180deg);
39 |  }
40 |  </style>
41 | </head>
42 | <body>
43 | <div class="card-container">
44 |  <div class="card">
45 |  <div class="card-face card-front">Front</div>
46 |  <div class="card-face card-back">Back</div>
47 |  </div>
48 | </div>
49 | </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/Chapter11/Diagonal Section Dividers:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .section {
 6 |  padding: 50px 0;
 7 |  text-align: center;
 8 |  color: #fff;
 9 |  }
10 |  .section:nth-child(odd) {
11 |  background: #3498db;
12 |  }
13 |  .section:nth-child(even) {
14 |  background: #e74c3c;
15 |  }
16 |  .section::after {
17 |  content: '';
18 |  display: block;
19 |  height: 50px;
20 |  background: inherit;
21 |  transform: skewY(-3deg);
22 |  margin-top: -25px;
23 |  }
24 |  </style>
25 | </head>
26 | <body>
27 | <div class="section">Section 1</div>
28 | <div class="section">Section 2</div>
29 | <div class="section">Section 3</div>
30 | </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/Chapter11/Floating Labels for Form Input:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .form-group {
 6 |  position: relative;
 7 |  margin: 20px 0;
 8 |  }
 9 |  .form-control {
10 |  width: 100%;
11 |  padding: 10px;
12 |  padding-top: 25px;
13 |  font-size: 16px;
14 |  }
15 |  .form-label {
16 |  position: absolute;
17 |  top: 10px;
18 |  left: 10px;
19 |  transition: all 0.2s ease;
20 |  pointer-events: none;
21 |  }
22 |  .form-control:focus + .form-label,
23 |  .form-control:not(:placeholder-shown) + .form-label {
24 |  top: -10px;
25 |  font-size: 12px;
26 |  color: #3498db;
27 |  }
28 |  </style>
29 | </head>
30 | <body>
31 | <div class="form-group">
32 |  <input type="text" class="form-control" placeholder=" ">
33 |  <label class="form-label">Username</label>
34 | </div>
35 | </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/Chapter11/Infinite Horizontal Scrolling Text:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>Infinite Horizontal Scrolling Text</title>
 6 | <style>
 7 | @keyframes scrollHorizontal {
 8 |     from { transform: translateX(100%); }
 9 |     to { transform: translateX(-100%); }
10 | }
11 | .scrolling-text {
12 |     white-space: nowrap;
13 |     overflow: hidden;
14 |     position: relative;
15 |     background: #f0f0f0; /* Added for better visibility */
16 |     width: 100%; /* Ensure it spans the full width of the viewport */
17 |     height: 50px; /* Set a fixed height */
18 |     line-height: 50px; /* Center text vertically */
19 | }
20 | 
21 | .text-content {
22 |     position: absolute;
23 |     display: inline-block;
24 |     animation: scrollHorizontal 10s linear infinite;
25 | }
26 | </style>
27 | </head>
28 | <body>
29 | <div class="scrolling-text">
30 |     <span class="text-content">This is an infinitely scrolling text. Great for news tickers and announcements.</span>
31 | </div>
32 | </body>
33 | </html>
34 | 
35 | 


--------------------------------------------------------------------------------
/Chapter11/Ripple Effect on Button Click:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | .ripple-button {
 6 |   position: relative;
 7 |   overflow: hidden;
 8 |   background-color: #3498db;
 9 |   color: white;
10 |   padding: 10px 20px;
11 |   border: none;
12 |   border-radius: 5px;
13 |   cursor: pointer;
14 | }
15 | .ripple {
16 |   position: absolute;
17 |   border-radius: 50%;
18 |   background-color: rgba(255, 255, 255, 0.7);
19 |   transform: scale(0);
20 |   animation: ripple-effect 0.5s linear;
21 |   pointer-events: none; /* Ensures the animation doesn't interfere with other interactions */
22 | }
23 | @keyframes ripple-effect {
24 |   to {
25 |     transform: scale(4);
26 |     opacity: 0;
27 |   }
28 | }
29 | </style>
30 | </head>
31 | <body>
32 | <button class="ripple-button">Click Me</button>
33 | <script>
34 | document.querySelector('.ripple-button').addEventListener('click', function(e) {
35 |   // Create the circle
36 |   let circle = document.createElement('span');
37 |   circle.classList.add('ripple');
38 |   this.appendChild(circle);
39 |   // Calculate the size and position
40 |   let d = Math.max(this.clientWidth, this.clientHeight);
41 |   circle.style.width = circle.style.height = `${d}px`;
42 |   let rect = this.getBoundingClientRect();
43 |   circle.style.left = `${e.clientX - rect.left - d / 2}px`;
44 |   circle.style.top = `${e.clientY - rect.top - d / 2}px`;
45 |   // Clean up the circle after the animation ends
46 |   setTimeout(() => circle.remove(), 500);
47 | });
48 | </script>
49 | </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/Chapter11/Rotating Navigation Wheel:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .nav-wheel {
 6 |  width: 200px;
 7 |  height: 200px;
 8 |  border-radius: 50%;
 9 |  position: relative;
10 |  }
11 |  .nav-item {
12 |  width: 100%;
13 |  position: absolute;
14 |  text-align: center;
15 |  transform-origin: 50% 100%;
16 |  }
17 |  /* Sample positioning for three items */
18 |  .nav-item:nth-child(1) { transform: rotate(0deg) translateY(-100px); }
19 |  .nav-item:nth-child(2) { transform: rotate(120deg) translateY(-100px); }
20 |  .nav-item:nth-child(3) { transform: rotate(240deg) translateY(-100px); }
21 |  .nav-wheel:hover {
22 |  animation: rotateWheel 2s infinite linear;
23 |  }
24 |  @keyframes rotateWheel {
25 |  from { transform: rotate(0deg); }
26 |  to { transform: rotate(360deg); }
27 |  }
28 |  </style>
29 | </head>
30 | <body>
31 | <div class="nav-wheel">
32 |  <div class="nav-item">Item 1</div>
33 |  <div class="nav-item">Item 2</div>
34 |  <div class="nav-item">Item 3</div>
35 |  <!-- More items as needed -->
36 | </div>
37 | </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/Chapter11/Simple CSS Loader Animation:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes spin {
 6 |  0% { transform: rotate(0deg); }
 7 |  100% { transform: rotate(360deg); }
 8 |  }
 9 |  .loader {
10 |  border: 16px solid #f3f3f3;
11 |  border-top: 16px solid #3498db;
12 |  border-radius: 50%;
13 |  width: 120px;
14 |  height: 120px;
15 |  animation: spin 2s linear infinite;
16 |  margin: auto;
17 |  }
18 |  </style>
19 | </head>
20 | <body>
21 | <div class="loader"></div>
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/Chapter12/2Floating CSS Bubbles Background:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |     body{
 6 |         background-color: aqua;
 7 |     }
 8 |     @keyframes floatBubbles {
 9 |         0% { transform: translateY(100vh); }
10 |         100% { transform: translateY(-100vh); }
11 |     }
12 |     .bubbles-container {
13 |         position: relative;
14 |         height: 100vh;
15 |         width: 100%;
16 |         overflow: hidden;
17 |     }
18 |     .bubble {
19 |         position: absolute;
20 |         bottom: -100px;  /* Start below the viewport */
21 |         background-color: rgba(255, 255, 255, 0.7);
22 |         border-radius: 50%;
23 |         opacity: 0.7;
24 |         text-align: center;
25 |     }
26 |     .bubble:nth-child(odd) {
27 |         animation: floatBubbles 20s infinite linear;
28 |     }
29 |     .bubble:nth-child(even) {
30 |         animation: floatBubbles 15s infinite linear;
31 |     }
32 |     /* Example bubble sizes */
33 |     .bubble.small { width: 20px; height: 20px; left: 10%;line-height: 20px; }
34 |     .bubble.medium { width: 40px; height: 40px; left: 50%; line-height: 40px;}
35 |     .bubble.large { width: 60px; height: 60px; left: 80%; line-height: 60px;}
36 |  </style>
37 | </head>
38 | <body>
39 | <div class="bubbles-container">
40 |     <div class="bubble small">1</div>
41 |     <div class="bubble medium">2</div>
42 |     <div class="bubble large">3</div>
43 |     <!-- Add more bubbles as needed -->
44 | </div>
45 | </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/Chapter12/Background Image Zoom on Scroll:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .zoom-background {
 6 |  height: 500px;
 7 |  background-image: url('Images/Image1.jpg');
 8 |  background-size: 100%;
 9 |  background-attachment: fixed;
10 |  transition: background-size 0.2s ease-out;
11 |  }
12 |  </style>
13 | </head>
14 | <body onscroll="zoomEffect()">
15 | <div class="zoom-background"></div>
16 | <script>
17 |  function zoomEffect() {
18 |  var scroll = window.pageYOffset || document.documentElement.scrollTop;
19 |  var size = 100 + scroll / 5; // Adjust the /5 to control the zoom speed
20 |  document.querySelector('.zoom-background').style.backgroundSize = size + '%';
21 |  }
22 | </script>
23 | </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/Chapter12/CSS Shapes Layout:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .circle {
 6 |  width: 100px;
 7 |  height: 100px;
 8 |  background-color: #007bff;
 9 |  border-radius: 50%;
10 |  float: left;
11 |  shape-outside: circle(50%);
12 |  margin-right: 20px;
13 |  }
14 |  .polygon {
15 |  width: 120px;
16 |  height: 100px;
17 |  background-color: #28a745;
18 |  float: left;
19 |  shape-outside: polygon(0 0, 100% 0, 50% 100%);
20 |  margin-right: 20px;
21 |  }
22 |  p {
23 |  text-align: justify;
24 |  }
25 |  </style>
26 | </head>
27 | <body>
28 | <div class="circle"></div>
29 | <div class="polygon"></div>
30 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.</p>
31 | </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/Chapter12/CSS Variable Themes:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  :root {
 6 |  --primary-color: #007bff;
 7 |  --secondary-color: #6c757d;
 8 |  }
 9 |  body {
10 |  background-color: var(--primary-color);
11 |  color: var(--secondary-color);
12 |  padding: 20px;
13 |  transition: background-color 0.3s, color 0.3s;
14 |  }
15 |  .theme-dark {
16 |  --primary-color: #343a40;
17 |  --secondary-color: #ffffff;
18 |  }
19 |  .theme-light {
20 |  --primary-color: #f8f9fa;
21 |  --secondary-color: #343a40;
22 |  }
23 |  button {
24 |  margin-top: 20px;
25 |  padding: 10px;
26 |  border: none;
27 |  background-color: var(--secondary-color);
28 |  color: var(--primary-color);
29 |  cursor: pointer;
30 |  }
31 |  </style>
32 | </head>
33 | <body>
34 | <h1>Theme Switcher</h1>
35 | <p>This text color changes based on the theme.</p>
36 | <button onclick="document.body.className='theme-dark'">Dark Theme</button>
37 | <button onclick="document.body.className='theme-light'">Light Theme</button>
38 | </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/Chapter12/Expanding Cards on Hover:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .card-container {
 6 |  display: grid;
 7 |  grid-template-columns: repeat(3, 1fr);
 8 |  gap: 20px;
 9 |  padding: 20px;
10 |  }
11 |  .card {
12 |  background-color: #fff;
13 |  padding: 20px;
14 |  border-radius: 10px;
15 |  transition: transform 0.3s ease, box-shadow 0.3s ease;
16 |  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
17 |  }
18 |  .card:hover {
19 |  transform: translateY(-10px);
20 |  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
21 |  }
22 |  </style>
23 | </head>
24 | <body>
25 | <div class="card-container">
26 |  <div class="card">Card 1</div>
27 |  <div class="card">Card 2</div>
28 |  <div class="card">Card 3</div>
29 |  <!-- Additional cards can be added here -->
30 | </div>
31 | </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/Chapter12/Flip Card with Depth Effects:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .scene {
 6 |  perspective: 1000px;
 7 |  width: 200px;
 8 |  height: 300px;
 9 |  position: relative;
10 |  margin: 40px auto;
11 |  }
12 |  .card {
13 |  width: 100%;
14 |  height: 100%;
15 |  position: absolute;
16 |  transition: transform 1s;
17 |  transform-style: preserve-3d;
18 |  }
19 |  .card:hover {
20 |  transform: rotateY(180deg);
21 |  }
22 |  .card-face {
23 |  position: absolute;
24 |  width: 100%;
25 |  height: 100%;
26 |  backface-visibility: hidden;
27 |  display: flex;
28 |  justify-content: center;
29 |  align-items: center;
30 |  font-size: 24px;
31 |  }
32 |  .card-front {
33 |  background-color: #3498db;
34 |  }
35 |  .card-back {
36 |  background-color: #e74c3c;
37 |  color: white;
38 |  transform: rotateY(180deg);
39 |  }
40 |  </style>
41 | </head>
42 | <body>
43 | <div class="scene">
44 |  <div class="card">
45 |  <div class="card-face card-front">Front</div>
46 |  <div class="card-face card-back">Back</div>
47 |  </div>
48 | </div>
49 | </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/Chapter12/Floating CSS Bubbles Background:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |     body{
 6 |         background-color: aqua;
 7 |     }
 8 |     @keyframes floatBubbles {
 9 |         0% { transform: translateY(100vh); }
10 |         100% { transform: translateY(-100vh); }
11 |     }
12 |     .bubbles-container {
13 |         position: relative;
14 |         height: 100vh;
15 |         width: 100%;
16 |         overflow: hidden;
17 |     }
18 |     .bubble {
19 |         position: absolute;
20 |         bottom: -100px;  /* Start below the viewport */
21 |         background-color: rgba(255, 255, 255, 0.7);
22 |         border-radius: 50%;
23 |         opacity: 0.7;
24 |         text-align: center;
25 |     }
26 |     .bubble:nth-child(odd) {
27 |         animation: floatBubbles 20s infinite linear;
28 |     }
29 |     .bubble:nth-child(even) {
30 |         animation: floatBubbles 15s infinite linear;
31 |     }
32 |     /* Example bubble sizes */
33 |     .bubble.small { width: 20px; height: 20px; left: 10%;line-height: 20px; }
34 |     .bubble.medium { width: 40px; height: 40px; left: 50%; line-height: 40px;}
35 |     .bubble.large { width: 60px; height: 60px; left: 80%; line-height: 60px;}
36 |  </style>
37 | </head>
38 | <body>
39 | <div class="bubbles-container">
40 |     <div class="bubble small">1</div>
41 |     <div class="bubble medium">2</div>
42 |     <div class="bubble large">3</div>
43 |     <!-- Add more bubbles as needed -->
44 | </div>
45 | </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/Chapter12/Hover Slide-in Details Card:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .card {
 6 |  position: relative;
 7 |  width: 200px;
 8 |  height: 300px;
 9 |  background-color: #3498db;
10 |  overflow: hidden;
11 |  border-radius: 8px;
12 |  transition: box-shadow 0.3s ease;
13 |  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
14 |  }
15 |  .card:hover {
16 |  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
17 |  }
18 |  .details {
19 |  position: absolute;
20 |  bottom: -100px;
21 |  width: 100%;
22 |  background-color: rgba(255,255,255,0.9);
23 |  transition: bottom 0.3s ease;
24 |  padding: 20px;
25 |  box-sizing: border-box;
26 |  }
27 |  .card:hover .details {
28 |  bottom: 0;
29 |  }
30 |  </style>
31 | </head>
32 | <body>
33 | <div class="card">
34 |  <div class="details">
35 |  More information here. Hover to reveal.
36 |  </div>
37 | </div>
38 | </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/Chapter12/Pure CSS Accordion with Plus and Minus Icons:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .accordion {
 6 |  border: solid 1px #ddd;
 7 |  border-radius: 5px;
 8 |  overflow: hidden;
 9 |  }
10 |  .accordion-item {
11 |  border-top: solid 1px #ddd;
12 |  }
13 |  .accordion-item:first-child {
14 |  border-top: none;
15 |  }
16 |  .accordion-header {
17 |  background-color: #f7f7f7;
18 |  cursor: pointer;
19 |  padding: 15px;
20 |  position: relative;
21 |  }
22 |  .accordion-header::after {
23 |  content: '+';
24 |  position: absolute;
25 |  right: 20px;
26 |  top: 50%;
27 |  transform: translateY(-50%);
28 |  transition: transform 0.2s ease;
29 |  }
30 |  .accordion-header.active::after {
31 |  content: '-';
32 |  }
33 |  .accordion-content {
34 |  max-height: 0;
35 |  overflow: hidden;
36 |  transition: max-height 0.2s ease-out;
37 |  padding: 0 15px;
38 |  }
39 |  .accordion-content.show {
40 |  max-height: 200px; /* Adjust based on content */
41 |  padding: 15px;
42 |  }
43 |  </style>
44 | </head>
45 | <body>
46 | <div class="accordion">
47 |  <div class="accordion-item">
48 |  <div class="accordion-header">Section 1</div>
49 |  <div class="accordion-content">Content 1</div>
50 |  </div>
51 |  <!-- Repeat for more sections -->
52 | </div>
53 | <script>
54 |  document.querySelectorAll('.accordion-header').forEach(button => {
55 |  button.addEventListener('click', () => {
56 |  const accordionContent = button.nextElementSibling;
57 |  button.classList.toggle('active');
58 |  accordionContent.classList.toggle('show');
59 |  });
60 |  });
61 | </script>
62 | </body>
63 | </html>
64 | 


--------------------------------------------------------------------------------
/Chapter12/Ripple Click Effect:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .button {
 6 |  position: relative;
 7 |  background-color: #007bff;
 8 |  color: white;
 9 |  padding: 10px 20px;
10 |  border: none;
11 |  cursor: pointer;
12 |  overflow: hidden;
13 |  }
14 |  .ripple {
15 |  position: absolute;
16 |  border-radius: 50%;
17 |  background: white;
18 |  transform: scale(0);
19 |  animation: ripple-effect 0.6s linear;
20 |  opacity: 0.4;
21 |  }
22 |  @keyframes ripple-effect {
23 |  to {
24 |  transform: scale(4);
25 |  opacity: 0;
26 |  }
27 |  }
28 |  </style>
29 | </head>
30 | <body>
31 | <button class="button" onclick="createRipple(event)">Click Me</button>
32 | <script>
33 |  function createRipple(event) {
34 |  const button = event.currentTarget;
35 |  const circle = document.createElement("span");
36 |  const diameter = Math.max(button.clientWidth, button.clientHeight);
37 |  const radius = diameter / 2;
38 |  circle.style.width = circle.style.height = `${diameter}px`;
39 |  circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;
40 |  circle.style.top = `${event.clientY - button.offsetTop - radius}px`;
41 |  circle.classList.add("ripple");
42 |  const ripple = button.getElementsByClassName("ripple")[0];
43 |  if (ripple) {
44 |  ripple.remove();
45 |  }
46 |  button.appendChild(circle);
47 |  }
48 | </script>
49 | </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/Chapter12/Text Gradient with Animation:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes gradientAnimation {
 6 |  0% { background-position: 0% 50%; }
 7 |  50% { background-position: 100% 50%; }
 8 |  100% { background-position: 0% 50%; }
 9 |  }
10 |  .gradient-text {
11 |  font-size: 2em;
12 |  background: linear-gradient(45deg, #ff6b6b, #fbc531, #48dbfb, #1dd1a1);
13 |  background-size: 300% 300%;
14 |  animation: gradientAnimation 5s ease infinite;
15 |  -webkit-background-clip: text;
16 |  -webkit-text-fill-color: transparent;
17 |  display: inline-block;
18 |  }
19 |  </style>
20 | </head>
21 | <body>
22 | <div class="gradient-text">Animated Gradient Text</div>
23 | </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/Chapter13/Background Blend Mode Gallery:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .image-container {
 6 |  width: 200px;
 7 |  height: 300px;
 8 |  position: relative;
 9 |  overflow: hidden;
10 |  }
11 |  .image-container img {
12 |  width: 100%;
13 |  height: 100%;
14 |  transition: opacity 0.5s ease;
15 |  }
16 |  .image-container:hover img {
17 |  opacity: 0.5;
18 |  }
19 |  .image-container::before {
20 |  content: '';
21 |  position: absolute;
22 |  top: 0;
23 |  left: 0;
24 |  right: 0;
25 |  bottom: 0;
26 |  background: #008CBA;
27 |  mix-blend-mode: multiply;
28 |  transition: opacity 0.5s ease;
29 |  opacity: 0;
30 |  }
31 |  .image-container:hover::before {
32 |  opacity: 1;
33 |  }
34 |  </style>
35 | </head>
36 | <body>
37 | <div class="image-container">
38 |  <img src="Images/Image1.jpg" alt="Image">
39 | </div>
40 | <!-- Repeat for more images -->
41 | </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/Chapter13/Bouncing Ball Animation:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes bounce {
 6 |  0%, 100% { transform: translateY(0); }
 7 |  50% { transform: translateY(-100px); }
 8 |  }
 9 |  .ball {
10 |  width: 40px;
11 |  height: 40px;
12 |  background-color: #3498db;
13 |  border-radius: 50%;
14 |  animation: bounce 2s infinite ease-in-out;
15 |  }
16 |  </style>
17 | </head>
18 | <body>
19 | <div class="ball"></div>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Chapter13/CSS-only Toast Notifications:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes slideIn {
 6 |  from { transform: translateY(100%); opacity: 0; }
 7 |  to { transform: translateY(0); opacity: 1; }
 8 |  }
 9 |  @keyframes fadeOut {
10 |  from { opacity: 1; }
11 |  to { opacity: 0; }
12 |  }
13 |  .toast {
14 |  position: fixed;
15 |  bottom: 20px;
16 |  right: 20px;
17 |  background-color: #333;
18 |  color: #fff;
19 |  padding: 10px;
20 |  border-radius: 5px;
21 |  animation: slideIn 0.5s ease forwards, fadeOut 0.5s 2.5s ease forwards;
22 |  }
23 |  </style>
24 | </head>
25 | <body>
26 | <div class="toast">This is a toast message.</div>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/Chapter13/Circle Navigation Menu:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .circle-menu {
 6 |  width: 200px;
 7 |  height: 200px;
 8 |  border-radius: 50%;
 9 |  position: relative;
10 |  }
11 |  .menu-item {
12 |  width: 40px;
13 |  height: 40px;
14 |  position: absolute;
15 |  text-align: center;
16 |  line-height: 40px;
17 |  background-color: #3498db;
18 |  color: #fff;
19 |  border-radius: 50%;
20 |  }
21 |  /* Example positioning for 4 items. Adjust degrees for more/less items */
22 |  .menu-item:nth-child(1) { transform: translate(150%, 0); }
23 |  .menu-item:nth-child(2) { transform: translate(0, 150%); }
24 |  .menu-item:nth-child(3) { transform: translate(-50%, 150%); }
25 |  .menu-item:nth-child(4) { transform: translate(150%, -50%); }
26 |  </style>
27 | </head>
28 | <body>
29 | <div class="circle-menu">
30 |  <div class="menu-item">1</div>
31 |  <div class="menu-item">2</div>
32 |  <div class="menu-item">3</div>
33 |  <div class="menu-item">4</div>
34 |  <!-- Add more menu items as needed -->
35 | </div>
36 | </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/Chapter13/Fading Carousel:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .carousel {
 6 |  position: relative;
 7 |  width: 600px;
 8 |  height: 400px;
 9 |  overflow: hidden;
10 |  }
11 |  .carousel-image {
12 |  position: absolute;
13 |  width: 100%;
14 |  height: 100%;
15 |  opacity: 0;
16 |  transition: opacity 2s ease;
17 |  }
18 |  .carousel-image.active {
19 |  opacity: 1;
20 |  }
21 |  </style>
22 | </head>
23 | <body>
24 | <div class="carousel">
25 |  <img src="Images/Image1.jpg" class="carousel-image active">
26 |  <img src="Images/Image2.jpg" class="carousel-image">
27 |  <!-- More images can be added -->
28 | </div>
29 | <script>
30 |  let currentIndex = 0;
31 |  const images = document.querySelectorAll('.carousel-image');
32 |  setInterval(() => {
33 |  images[currentIndex].classList.remove('active');
34 |  currentIndex = (currentIndex + 1) % images.length;
35 |  images[currentIndex].classList.add('active');
36 |  }, 4000); // Change image every 4 seconds
37 | </script>
38 | </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/Chapter13/Flip Switch Toggle:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .switch {
 6 |  position: relative;
 7 |  display: inline-block;
 8 |  width: 60px;
 9 |  height: 34px;
10 |  background-color: #ccc;
11 |  border-radius: 34px;
12 |  transition: background-color 0.3s ease;
13 |  cursor: pointer;
14 |  }
15 |  .switch::after {
16 |  content: '';
17 |  position: absolute;
18 |  top: 2px;
19 |  left: 2px;
20 |  width: 30px;
21 |  height: 30px;
22 |  background-color: white;
23 |  border-radius: 50%;
24 |  transition: transform 0.3s ease;
25 |  }
26 |  .switch.on {
27 |  background-color: #4CAF50;
28 |  }
29 |  .switch.on::after {
30 |  transform: translateX(26px);
31 |  }
32 |  </style>
33 | </head>
34 | <body>
35 | <div class="switch" onclick="this.classList.toggle('on');"></div>
36 | </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/Chapter13/Hoverable Dropdown Menu:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .dropdown {
 6 |  position: relative;
 7 |  display: inline-block;
 8 |  }
 9 |  .dropdown-content {
10 |  display: none;
11 |  position: absolute;
12 |  background-color: #f9f9f9;
13 |  min-width: 160px;
14 |  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
15 |  padding: 12px 16px;
16 |  z-index: 1;
17 |  }
18 |  .dropdown:hover .dropdown-content {
19 |  display: block;
20 |  }
21 |  </style>
22 | </head>
23 | <body>
24 | <div class="dropdown">
25 |  Hover me
26 |  <div class="dropdown-content">
27 |  <p>Option 1</p>
28 |  <p>Option 2</p>
29 |  <p>Option 3</p>
30 |  </div>
31 | </div>
32 | </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/Chapter13/Multi-Step Progress Bar:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .progress-container {
 6 |  display: flex;
 7 |  align-items: center;
 8 |  justify-content: space-between;
 9 |  margin: 20px;
10 |  list-style-type: none;
11 |  padding: 0;
12 |  }
13 |  .progress-step {
14 |  width: 30px;
15 |  height: 30px;
16 |  background-color: #ddd;
17 |  border-radius: 50%;
18 |  display: flex;
19 |  align-items: center;
20 |  justify-content: center;
21 |  color: #fff;
22 |  transition: background-color 0.4s ease;
23 |  }
24 |  .progress-step.active {
25 |  background-color: #3498db;
26 |  }
27 |  .progress-bar {
28 |  flex-grow: 1;
29 |  height: 5px;
30 |  background-color: #ddd;
31 |  position: relative;
32 |  margin: 0 10px;
33 |  }
34 |  .progress-bar::after {
35 |  content: '';
36 |  position: absolute;
37 |  top: 0;
38 |  left: 0;
39 |  height: 100%;
40 |  width: 33%; /* Update this value based on the current step */
41 |  background-color: #3498db;
42 |  transition: width 0.4s ease;
43 |  }
44 |  </style>
45 | </head>
46 | <body>
47 | <ul class="progress-container">
48 |  <li class="progress-step active">1</li>
49 |  <li class="progress-bar"></li>
50 |  <li class="progress-step">2</li>
51 |  <li class="progress-bar"></li>
52 |  <li class="progress-step">3</li>
53 | </ul>
54 | </body>
55 | </html>
56 | 


--------------------------------------------------------------------------------
/Chapter13/Rotating Gallery Carousel:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .carousel {
 6 |  perspective: 1000px;
 7 |  width: 600px;
 8 |  height: 400px;
 9 |  position: relative;
10 |  margin: auto;
11 |  overflow: hidden;
12 |  }
13 |  .carousel-image {
14 |  position: absolute;
15 |  width: 100%;
16 |  height: 100%;
17 |  opacity: 0;
18 |  transition: opacity 0.5s ease, transform 1s ease;
19 |  transform: rotateY(0deg) translateZ(-500px);
20 |  }
21 |  .carousel-image.active {
22 |  opacity: 1;
23 |  transform: rotateY(0deg) translateZ(0);
24 |  }
25 |  @keyframes rotateCarousel {
26 |  from { transform: rotateY(0deg); }
27 |  to { transform: rotateY(360deg); }
28 |  }
29 |  .carousel:hover {
30 |  animation: rotateCarousel 10s infinite linear;
31 |  }
32 |  </style>
33 | </head>
34 | <body>
35 | <div class="carousel">
36 |  <img src="image1.jpg" class="carousel-image active">
37 |  <img src="image2.jpg" class="carousel-image">
38 |  <img src="image3.jpg" class="carousel-image">
39 |  <!-- Additional images -->
40 | </div>
41 | </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/Chapter13/Typewriter Text Effect:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes typewriter {
 6 |  from { width: 0; }
 7 |  to { width: 100%; }
 8 |  }
 9 |  .typewriter-text {
10 |  border-right: 2px solid;
11 |  white-space: nowrap;
12 |  overflow: hidden;
13 |  animation: typewriter 4s steps(40, end) forwards;
14 |  }
15 |  .container {
16 |  max-width: 640px;
17 |  margin: 0 auto;
18 |  font-family: monospace;
19 |  font-size: 20px;
20 |  }
21 |  </style>
22 | </head>
23 | <body>
24 | <div class="container">
25 |  <div class="typewriter-text">This is a typewriter effect created with CSS.</div>
26 | </div>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/Chapter14/Animated Background Gradient Transition:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes gradientBackground {
 6 |  0% { background-position: 0% 50%; }
 7 |  50% { background-position: 100% 50%; }
 8 |  100% { background-position: 0% 50%; }
 9 |  }
10 |  body {
11 |  height: 100vh;
12 |  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
13 |  background-size: 400% 400%;
14 |  animation: gradientBackground 15s ease infinite;
15 |  }
16 |  </style>
17 | </head>
18 | <body>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter14/CSS Grid Photo Gallery:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .gallery {
 6 |  display: grid;
 7 |  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 8 |  gap: 10px;
 9 |  padding: 10px;
10 |  }
11 |  .gallery img {
12 |  width: 100%;
13 |  height: auto;
14 |  object-fit: cover;
15 |  }
16 |  /* Example of assigning grid areas for different images, optional based on your design preference */
17 |  .gallery img:nth-child(1) { grid-row: span 2; }
18 |  .gallery img:nth-child(2) { grid-column: span 2; }
19 |  </style>
20 | </head>
21 | <body>
22 | <div class="gallery">
23 |  <img src="Images/Image1.jpg" alt="Photo 1">
24 |  <img src="Images/Image2.jpg" alt="Photo 2">
25 |  <img src="Images/Image1.jpg" alt="Photo 3">
26 |  <!-- More images -->
27 | </div>
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/Chapter14/CSS-only Slide Toggle:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .toggle-switch {
 6 |  position: relative;
 7 |  width: 60px;
 8 |  height: 34px;
 9 |  background-color: #ccc;
10 |  border-radius: 34px;
11 |  cursor: pointer;
12 |  }
13 |  .toggle-switch::before {
14 |  content: '';
15 |  position: absolute;
16 |  top: 2px;
17 |  left: 2px;
18 |  width: 30px;
19 |  height: 30px;
20 |  background-color: #fff;
21 |  border-radius: 50%;
22 |  transition: 0.3s;
23 |  }
24 |  .toggle-switch.active {
25 |  background-color: #4CAF50;
26 |  }
27 |  .toggle-switch.active::before {
28 |  transform: translateX(26px);
29 |  }
30 |  </style>
31 | </head>
32 | <body>
33 | <div class="toggle-switch" onclick="this.classList.toggle('active');"></div>
34 | </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/Chapter14/Continuous Text Marquee:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes marquee {
 6 |  0% { transform: translateX(100%); }
 7 |  100% { transform: translateX(-100%); }
 8 |  }
 9 |  .marquee {
10 |  display: block;
11 |  white-space: nowrap;
12 |  overflow: hidden;
13 |  background: #eee;
14 |  }
15 |  .marquee-text {
16 |  display: inline-block;
17 |  padding-left: 100%;
18 |  animation: marquee 10s linear infinite;
19 |  }
20 |  </style>
21 | </head>
22 | <body>
23 | <div class="marquee">
24 |  <span class="marquee-text">This is a continuous scrolling marquee. Repeat your message here. </span>
25 | </div>
26 | </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/Chapter14/Dynamic Shadow on Hover:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .dynamic-shadow {
 6 |  margin: 40px;
 7 |  display: inline-block;
 8 |  background-color: #f0f0f0;
 9 |  padding: 20px;
10 |  border-radius: 8px;
11 |  transition: box-shadow 0.3s ease;
12 |  box-shadow: 10px 10px 30px rgba(0,0,0,0.1);
13 |  }
14 |  .dynamic-shadow:hover {
15 |  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
16 |  }
17 |  </style>
18 | </head>
19 | <body>
20 | <div class="dynamic-shadow">Hover over me!</div>
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/Chapter14/Flip Card with Detailed Back:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .flip-card {
 6 |  perspective: 1000px;
 7 |  width: 200px;
 8 |  height: 300px;
 9 |  position: relative;
10 |  margin: 50px;
11 |  }
12 |  .flip-card-inner {
13 |  width: 100%;
14 |  height: 100%;
15 |  transition: transform 0.8s;
16 |  transform-style: preserve-3d;
17 |  position: relative;
18 |  }
19 |  .flip-card:hover .flip-card-inner {
20 |  transform: rotateY(180deg);
21 |  }
22 |  .flip-card-front, .flip-card-back {
23 |  width: 100%;
24 |  height: 100%;
25 |  position: absolute;
26 |  backface-visibility: hidden;
27 |  display: flex;
28 |  justify-content: center;
29 |  align-items: center;
30 |  font-size: 20px;
31 |  }
32 |  .flip-card-front {
33 |  background-color: #bbb;
34 |  }
35 |  .flip-card-back {
36 |  background-color: #2980b9;
37 |  color: white;
38 |  transform: rotateY(180deg);
39 |  }
40 |  </style>
41 | </head>
42 | <body>
43 | <div class="flip-card">
44 |  <div class="flip-card-inner">
45 |  <div class="flip-card-front">
46 |  Front
47 |  </div>
48 |  <div class="flip-card-back">
49 |  Detailed Information Here
50 |  </div>
51 |  </div>
52 | </div>
53 | </body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/Chapter14/Glowing Neon Text Effect:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .neon-text {
 6 |  font-size: 40px;
 7 |  color: #fff;
 8 |  text-align: center;
 9 |  text-shadow:
10 |  0 0 5px #fff,
11 |  0 0 10px #fff,
12 |  0 0 20px #fff,
13 |  0 0 40px #0ff,
14 |  0 0 80px #0ff,
15 |  0 0 90px #0ff,
16 |  0 0 100px #0ff,
17 |  0 0 150px #0ff;
18 |  animation: glow 1s infinite alternate;
19 |  }
20 |  @keyframes glow {
21 |  from { text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff, 0 0 40px #00ffff, 0 0 50px #00ffff, 0 0 60px #00ffff, 0 0 70px #00ffff; }
22 |  to { text-shadow: 0 0 20px #00ffff, 0 0 30px #ff00ff, 0 0 40px #ff00ff, 0 0 50px #ff00ff, 0 0 60px #ff00ff, 0 0 70px #ff00ff, 0 0 80px #ff00ff; }
23 |  }
24 |  </style>
25 | </head>
26 | <body>
27 | <div class="neon-text">Neon Glow</div>
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/Chapter14/Parallax Scrolling Effect on Background Images:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .parallax {
 6 |  height: 500px;
 7 |  background-image: url('your-image-url.jpg');
 8 |  background-attachment: fixed;
 9 |  background-position: center;
10 |  background-repeat: no-repeat;
11 |  background-size: cover;
12 |  }
13 |  .content {
14 |  height: 500px;
15 |  background-color: rgba(255, 255, 255, 0.6);
16 |  display: flex;
17 |  justify-content: center;
18 |  align-items: center;
19 |  font-size: 24px;
20 |  }
21 |  </style>
22 | </head>
23 | <body>
24 | <div class="parallax"></div>
25 | <div class="content">Scroll to see the parallax effect.</div>
26 | <div class="parallax"></div>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/Chapter14/Responsive Masonry Layout with CSS Columns:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .masonry-layout {
 6 |  column-count: 4;
 7 |  column-gap: 16px;
 8 |  }
 9 |  .masonry-item {
10 |  background-color: #f2f2f2;
11 |  margin-bottom: 16px;
12 |  break-inside: avoid;
13 |  padding: 10px;
14 |  }
15 |  @media (max-width: 768px) {
16 |  .masonry-layout {
17 |  column-count: 2;
18 |  }
19 |  }
20 |  @media (max-width: 480px) {
21 |  .masonry-layout {
22 |  column-count: 1;
23 |  }
24 |  }
25 |  </style>
26 | </head>
27 | <body>
28 | <div class="masonry-layout">
29 |  <div class="masonry-item">Item 1</div>
30 |  <div class="masonry-item">Item 2</div>
31 |  <!-- More items -->
32 | </div>
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/Chapter14/Ripple Effect Button:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |   .ripple-button {
 6 |     position: relative;
 7 |     overflow: hidden;
 8 |     background-color: #6200ea;
 9 |     color: #ffffff;
10 |     padding: 10px 20px;
11 |     border: none;
12 |     border-radius: 4px;
13 |     cursor: pointer;
14 |     outline: none;
15 |   }
16 | 
17 |   .ripple {
18 |     position: absolute;
19 |     border-radius: 50%;
20 |     background: rgba(255, 255, 255, 0.7);
21 |     transform: scale(0);
22 |     animation: ripple-effect 0.5s linear;
23 |     pointer-events: none;
24 |   }
25 | 
26 |   @keyframes ripple-effect {
27 |     to {
28 |       transform: scale(4);
29 |       opacity: 0;
30 |     }
31 |   }
32 |  </style>
33 | </head>
34 | <body>
35 |   <button class="ripple-button">Click Me</button>
36 |   <script>
37 |     document.querySelector('.ripple-button').addEventListener('click', function(e) {
38 |       let circle = document.createElement('span');
39 |       circle.classList.add('ripple');
40 |       this.appendChild(circle);
41 |       let d = Math.max(this.clientWidth, this.clientHeight);
42 |       circle.style.width = circle.style.height = `${d}px`;
43 |       let rect = this.getBoundingClientRect();
44 |       circle.style.left = `${e.clientX - rect.left - d / 2}px`;
45 |       circle.style.top = `${e.clientY - rect.top - d / 2}px`;
46 |       setTimeout(() => circle.remove(), 500); // Clean up after animation
47 |     });
48 |   </script>
49 | </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/Chapter15/Animated Gradient Text:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes gradientShift {
 6 |  0% { background-position: 0% 50%; }
 7 |  50% { background-position: 100% 50%; }
 8 |  100% { background-position: 0% 50%; }
 9 |  }
10 |  .gradient-text {
11 |  font-size: 36px;
12 |  background: linear-gradient(45deg, #ff6b6b, #fbc531, #48dbfb, #1dd1a1);
13 |  background-size: 200% 200%;
14 |  animation: gradientShift 5s ease infinite;
15 |  -webkit-background-clip: text;
16 |  -webkit-text-fill-color: transparent;
17 |  }
18 |  </style>
19 | </head>
20 | <body>
21 | <div class="gradient-text">Animated Gradient Text</div>
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/Chapter15/Automatic Slideshow:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <style>
 5 |         .slideshow-container {
 6 |             position: relative;
 7 |             width: 100%;
 8 |             height: 300px;
 9 |         }
10 |         .slide {
11 |             position: absolute;
12 |             width: 100%;
13 |             height: 100%;
14 |             background-size: cover;
15 |             background-position: center;
16 |             opacity: 0; /* Start all slides as invisible */
17 |             visibility: hidden; /* Hide slides by default */
18 |             transition: visibility 0s, opacity 0.5s linear;
19 |             transition-delay: 0s, 0s; /* Apply no delay on fade in but on fade out */
20 |         }
21 |         .slide.active {
22 |             opacity: 1;
23 |             visibility: visible;
24 |             transition: visibility 0s, opacity 0.5s linear;
25 |             transition-delay: 0s, 0s;
26 |         }
27 |     </style>
28 | </head>
29 | <body>
30 |     <div class="slideshow-container">
31 |         <div class="slide active" style="background-image: url('https://via.placeholder.com/600x300?text=Slide+1');">Slide 1</div>
32 |         <div class="slide" style="background-image: url('https://via.placeholder.com/600x300?text=Slide+2');">Slide 2</div>
33 |         <!-- Add more slides -->
34 |     </div>
35 |     <script>
36 |         let slideIndex = 0;
37 |         showSlides();
38 | 
39 |         function showSlides() {
40 |             let slides = document.querySelectorAll(".slide");
41 |             for (let i = 0; i < slides.length; i++) {
42 |                 slides[i].classList.remove("active");
43 |             }
44 |             slideIndex++;
45 |             if (slideIndex >= slides.length) slideIndex = 0;
46 |             slides[slideIndex].classList.add("active");
47 |             setTimeout(showSlides, 2500); // Change image every 2.5 seconds
48 |         }
49 |     </script>
50 | </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/Chapter15/CSS Tilt Hover Effect:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .tilt-card {
 6 |  perspective: 1000px;
 7 |  width: 300px;
 8 |  height: 200px;
 9 |  margin: 20px;
10 |  transition: transform 0.5s ease;
11 |  transform-style: preserve-3d;
12 |  }
13 |  .tilt-card:hover {
14 |  transform: rotateY(20deg);
15 |  }
16 |  .card-content {
17 |  background-color: #3498db;
18 |  width: 100%;
19 |  height: 100%;
20 |  border-radius: 10px;
21 |  color: white;
22 |  display: flex;
23 |  justify-content: center;
24 |  align-items: center;
25 |  transform: rotateY(0deg);
26 |  }
27 |  </style>
28 | </head>
29 | <body>
30 | <div class="tilt-card">
31 |  <div class="card-content">Hover over me!</div>
32 | </div>
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/Chapter15/CSS Variables for Dynamic Themes:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  :root {
 6 |  --primary-color: #007bff;
 7 |  --secondary-color: #6c757d;
 8 |  }
 9 |  body {
10 |  background-color: var(--primary-color);
11 |  color: var(--secondary-color);
12 |  transition: background-color 0.3s ease, color 0.3s ease;
13 |  }
14 |  .theme-switcher {
15 |  padding: 10px;
16 |  margin: 20px;
17 |  cursor: pointer;
18 |  }
19 |  </style>
20 | </head>
21 | <body>
22 | <div class="theme-switcher" onclick="document.documentElement.style.setProperty('--primary-color', '#28a745'); document.documentElement.style.setProperty('--secondary-color', '#ffffff');">Switch Theme</div>
23 | </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/Chapter15/Floating Labels in Forms:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .form-group {
 6 |  position: relative;
 7 |  margin-bottom: 15px;
 8 |  }
 9 |  .form-input {
10 |  width: 100%;
11 |  padding: 10px;
12 |  padding-top: 25px;
13 |  font-size: 16px;
14 |  }
15 |  .form-label {
16 |  position: absolute;
17 |  left: 10px;
18 |  top: 10px;
19 |  transition: 0.3s ease all;
20 |  pointer-events: none;
21 |  }
22 |  .form-input:focus + .form-label,
23 |  .form-input:not(:placeholder-shown) + .form-label {
24 |  top: -10px;
25 |  font-size: 12px;
26 |  color: #3498db;
27 |  }
28 |  </style>
29 | </head>
30 | <body>
31 | <div class="form-group">
32 |  <input type="text" class="form-input" placeholder=" " id="name">
33 |  <label class="form-label" for="name">Name</label>
34 | </div>
35 | </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/Chapter15/Fold-out Card Details:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .card {
 6 |  width: 200px;
 7 |  height: 100px;
 8 |  overflow: hidden;
 9 |  transition: height 0.3s ease;
10 |  cursor: pointer;
11 |  background-color: #eee;
12 |  border-radius: 5px;
13 |  }
14 |  .card-content {
15 |  padding: 20px;
16 |  display: none;
17 |  }
18 |  .card.expanded {
19 |  height: 200px;
20 |  }
21 |  .card.expanded .card-content {
22 |  display: block;
23 |  }
24 |  </style>
25 | </head>
26 | <body>
27 | <div class="card" onclick="this.classList.toggle('expanded');">
28 |  <div class="card-content">More information here...</div>
29 | </div>
30 | </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/Chapter15/Hover-Over Image Zoom Effect:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .zoom-effect-container {
 6 |  overflow: hidden;
 7 |  position: relative;
 8 |  display: inline-block;
 9 |  }
10 |  .image {
11 |  transition: transform 0.5s ease;
12 |  display: block;
13 |  width: 100%;
14 |  height: auto;
15 |  }
16 |  .zoom-effect-container:hover .image {
17 |  transform: scale(1.2);
18 |  }
19 |  </style>
20 | </head>
21 | <body>
22 | <div class="zoom-effect-container">
23 |  <img src="example-image.jpg" class="image" alt="Example">
24 | </div>
25 | </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/Chapter15/Responsive Navigation Bar:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .navbar {
 6 |  display: flex;
 7 |  justify-content: space-between;
 8 |  background-color: #333;
 9 |  padding: 1rem;
10 |  }
11 |  .nav-links {
12 |  display: flex;
13 |  list-style: none;
14 |  }
15 |  .nav-links li {
16 |  padding: 0 1rem;
17 |  }
18 |  .nav-links a {
19 |  text-decoration: none;
20 |  color: white;
21 |  }
22 |  .hamburger {
23 |  display: none;
24 |  cursor: pointer;
25 |  }
26 |  .bar {
27 |  display: block;
28 |  width: 25px;
29 |  height: 3px;
30 |  margin: 5px auto;
31 |  background-color: white;
32 |  }
33 |  @media (max-width: 600px) {
34 |  .nav-links {
35 |  display: none;
36 |  }
37 |  .hamburger {
38 |  display: block;
39 |  }
40 |  }
41 |  </style>
42 | </head>
43 | <body>
44 | <div class="navbar">
45 |  <h1 style="color: white;">Logo</h1>
46 |  <ul class="nav-links">
47 |  <li><a href="#">Home</a></li>
48 |  <li><a href="#">Services</a></li>
49 |  <li><a href="#">About</a></li>
50 |  <li><a href="#">Contact</a></li>
51 |  </ul>
52 |  <div class="hamburger" onclick="toggleMenu()">
53 |  <div class="bar"></div>
54 |  <div class="bar"></div>
55 |  <div class="bar"></div>
56 |  </div>
57 | </div>
58 | <script>
59 |  function toggleMenu() {
60 |  var links = document.querySelector('.nav-links');
61 |  links.style.display = links.style.display === 'flex' ? 'none' : 'flex';
62 |  }
63 | </script>
64 | </body>
65 | 


--------------------------------------------------------------------------------
/Chapter15/Simple CSS Loader Animation:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes spin {
 6 |  0% { transform: rotate(0deg); }
 7 |  100% { transform: rotate(360deg); }
 8 |  }
 9 |  .loader {
10 |  border: 16px solid #f3f3f3;
11 |  border-top: 16px solid #3498db;
12 |  border-radius: 50%;
13 |  width: 120px;
14 |  height: 120px;
15 |  animation: spin 2s linear infinite;
16 |  margin: auto;
17 |  }
18 |  </style>
19 | </head>
20 | <body>
21 | <div class="loader"></div>
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/Chapter15/Stacked Cards Layout:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .card-stack {
 6 |  perspective: 1000px;
 7 |  width: 300px;
 8 |  margin: auto;
 9 |  }
10 |  .card {
11 |  background-color: #fff;
12 |  padding: 20px;
13 |  margin: 10px 0;
14 |  border-radius: 8px;
15 |  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
16 |  transform: rotateX(10deg);
17 |  transition: transform 0.3s ease;
18 |  }
19 |  .card:hover {
20 |  transform: rotateX(0deg);
21 |  margin-top: -20px;
22 |  }
23 |  </style>
24 | </head>
25 | <body>
26 | <div class="card-stack">
27 |  <div class="card">Card 1</div>
28 |  <div class="card">Card 2</div>
29 |  <div class="card">Card 3</div>
30 |  <!-- More cards can be added here -->
31 | </div>
32 | </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/Chapter16/Animated Wave Background:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes wave {
 6 |  0% { background-position-x: 0; }
 7 |  100% { background-position-x: 1000px; }
 8 |  }
 9 |  body {
10 |  animation: wave 30s linear infinite;
11 |  background-image: url('Images/Image1.jpg');
12 |  background-size: cover;
13 |  }
14 |  </style>
15 | </head>
16 | <body>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/Chapter16/Bouncing Loader Animation:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes bounce {
 6 |  0%, 100% { transform: translateY(0); }
 7 |  50% { transform: translateY(-20px); }
 8 |  }
 9 |  .loader {
10 |  display: inline-block;
11 |  padding: 10px;
12 |  }
13 |  .dot {
14 |  width: 10px;
15 |  height: 10px;
16 |  background-color: #007bff;
17 |  border-radius: 50%;
18 |  display: inline-block;
19 |  animation: bounce 0.6s infinite alternate;
20 |  }
21 |  .dot:nth-child(2) {
22 |  animation-delay: 0.2s;
23 |  }
24 |  .dot:nth-child(3) {
25 |  animation-delay: 0.4s;
26 |  }
27 |  </style>
28 | </head>
29 | <body>
30 | <div class="loader">
31 |  <div class="dot"></div>
32 |  <div class="dot"></div>
33 |  <div class="dot"></div>
34 | </div>
35 | </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/Chapter16/Corner Ribbon:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .card {
 6 |  position: relative;
 7 |  width: 200px;
 8 |  height: 200px;
 9 |  background-color: #ddd;
10 |  margin: 50px;
11 |  }
12 |  .ribbon {
13 |  position: absolute;
14 |  top: 0;
15 |  right: 0;
16 |  background-color: #007bff;
17 |  color: white;
18 |  padding: 5px 10px;
19 |  transform: rotate(45deg);
20 |  transform-origin: top right;
21 |  }
22 |  </style>
23 | </head>
24 | <body>
25 | <div class="card">
26 |  <div class="ribbon">New</div>
27 | </div>
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/Chapter16/Diagonal Section Dividers:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .section {
 6 |  padding: 50px 0;
 7 |  overflow: hidden;
 8 |  position: relative;
 9 |  background-color: #f8f9fa;
10 |  }
11 |  .section:nth-child(odd) {
12 |  background-color: #e9ecef;
13 |  }
14 |  .section::after {
15 |  content: '';
16 |  position: absolute;
17 |  bottom: 0;
18 |  left: 0;
19 |  width: 100%;
20 |  height: 50px;
21 |  background: inherit;
22 |  transform: skewY(-3deg);
23 |  transform-origin: top left;
24 |  }
25 |  .section:nth-child(odd)::after {
26 |  transform-origin: top right;
27 |  }
28 |  </style>
29 | </head>
30 | <body>
31 | <div class="section">Section 1</div>
32 | <div class="section">Section 2</div>
33 | <div class="section">Section 3</div>
34 | <!-- More sections -->
35 | </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/Chapter16/Hover Effect with Image and Caption Overlay:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .image-card {
 6 |  position: relative;
 7 |  width: 300px;
 8 |  height: 200px;
 9 |  overflow: hidden;
10 |  }
11 |  .image-card img {
12 |  width: 100%;
13 |  height: 100%;
14 |  transition: transform 0.5s ease;
15 |  }
16 |  .caption {
17 |  position: absolute;
18 |  bottom: 0;
19 |  left: 0;
20 |  width: 100%;
21 |  background: rgba(0,0,0,0.5);
22 |  color: white;
23 |  padding: 10px;
24 |  transform: translateY(100%);
25 |  transition: transform 0.5s ease;
26 |  }
27 |  .image-card:hover img {
28 |  transform: scale(1.1);
29 |  }
30 |  .image-card:hover .caption {
31 |  transform: translateY(0);
32 |  }
33 |  </style>
34 | </head>
35 | <body>
36 | <div class="image-card">
37 |  <img src="example-image.jpg" alt="Example Image">
38 |  <div class="caption">Caption Text Here</div>
39 | </div>
40 | </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/Chapter16/Infinite Scrolling Background:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes scroll {
 6 |  0% { background-position: 0 0; }
 7 |  100% { background-position: 0 100%; }
 8 |  }
 9 |  body {
10 |  animation: scroll 20s linear infinite;
11 |  background-image: url('background-pattern.png');
12 |  background-size: auto 100%;
13 |  }
14 |  </style>
15 | </head>
16 | <body>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/Chapter16/Pure CSS Masonry Layout:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .masonry {
 6 |  column-count: 4;
 7 |  column-gap: 1rem;
 8 |  }
 9 |  .masonry-item {
10 |  background-color: #f7f7f7;
11 |  margin-bottom: 1rem;
12 |  break-inside: avoid;
13 |  padding: 1rem;
14 |  }
15 |  @media screen and (max-width: 800px) {
16 |  .masonry {
17 |  column-count: 3;
18 |  }
19 |  }
20 |  @media screen and (max-width: 600px) {
21 |  .masonry {
22 |  column-count: 2;
23 |  }
24 |  }
25 |  @media screen and (max-width: 400px) {
26 |  .masonry {
27 |  column-count: 1;
28 |  }
29 |  }
30 |  </style>
31 | </head>
32 | <body>
33 | <div class="masonry">
34 |  <div class="masonry-item">Item 1</div>
35 |  <div class="masonry-item">Item 2</div>
36 |  <!-- More items here -->
37 | </div>
38 | </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/Chapter16/Pure CSS Modal Window:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .modal {
 6 |  display: none;
 7 |  position: fixed;
 8 |  z-index: 1;
 9 |  padding-top: 100px;
10 |  left: 0;
11 |  top: 0;
12 |  width: 100%;
13 |  height: 100%;
14 |  overflow: auto;
15 |  background-color: rgba(0,0,0,0.4);
16 |  }
17 |  .modal-content {
18 |  background-color: #fefefe;
19 |  margin: auto;
20 |  padding: 20px;
21 |  border: 1px solid #888;
22 |  width: 80%;
23 |  }
24 |  #modal-toggle {
25 |  display: none;
26 |  }
27 |  #modal-toggle:checked + .modal {
28 |  display: block;
29 |  }
30 |  .close {
31 |  color: #aaa;
32 |  float: right;
33 |  font-size: 28px;
34 |  font-weight: bold;
35 |  }
36 |  .close:hover,
37 |  .close:focus {
38 |  color: black;
39 |  text-decoration: none;
40 |  cursor: pointer;
41 |  }
42 |  </style>
43 | </head>
44 | <body>
45 | <label for="modal-toggle">Open Modal</label>
46 | <input type="checkbox" id="modal-toggle">
47 | <div class="modal">
48 |  <div class="modal-content">
49 |  <span class="close" onclick="document.getElementById('modal-toggle').checked = false;">&times;</span>
50 |  <p>Some text in the Modal..</p>
51 |  </div>
52 | </div>
53 | </body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/Chapter16/Responsive Tabs with Pure CSS:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .tabs {
 6 |  display: flex;
 7 |  flex-direction: column;
 8 |  }
 9 |  .tabs input[type="radio"] {
10 |  display: none;
11 |  }
12 |  .tabs label {
13 |  padding: 10px;
14 |  background: #ddd;
15 |  cursor: pointer;
16 |  }
17 |  .tab-content {
18 |  display: none;
19 |  padding: 20px;
20 |  border-top: 1px solid #ddd;
21 |  }
22 |  input[type="radio"]:checked + label + .tab-content {
23 |  display: block;
24 |  }
25 |  </style>
26 | </head>
27 | <body>
28 | <div class="tabs">
29 |  <input type="radio" id="tab1" name="tab-control" checked>
30 |  <label for="tab1">Tab One</label>
31 |  <div class="tab-content">Content One</div>
32 |  <input type="radio" id="tab2" name="tab-control">
33 |  <label for="tab2">Tab Two</label>
34 |  <div class="tab-content">Content Two</div>
35 |  <input type="radio" id="tab3" name="tab-control">
36 |  <label for="tab3">Tab Three</label>
37 |  <div class="tab-content">Content Three</div>
38 |  <!-- Add more tabs as needed -->
39 | </div>
40 | </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/Chapter17/CSS Accordion with Plus and Minus Icons:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .accordion {
 6 |  background-color: #eee;
 7 |  color: #444;
 8 |  cursor: pointer;
 9 |  padding: 18px;
10 |  width: 100%;
11 |  border: none;
12 |  text-align: left;
13 |  outline: none;
14 |  transition: 0.4s;
15 |  }
16 |  .active, .accordion:hover {
17 |  background-color: #ccc;
18 |  }
19 |  .panel {
20 |  padding: 0 18px;
21 |  background-color: white;
22 |  display: none;
23 |  overflow: hidden;
24 |  }
25 |  .accordion:after {
26 |  content: '\002B'; /* Plus sign */
27 |  font-size: 13px;
28 |  color: #777;
29 |  float: right;
30 |  margin-left: 5px;
31 |  }
32 |  .active:after {
33 |  content: "\2212"; /* Minus sign */
34 |  }
35 |  </style>
36 | </head>
37 | <body>
38 | <button class="accordion">Section 1</button>
39 | <div class="panel">
40 |  <p>Lorem ipsum...</p>
41 | </div>
42 | <script>
43 | let acc = document.getElementsByClassName("accordion");
44 | for (let i = 0; i < acc.length; i++) {
45 |  acc[i].addEventListener("click", function() {
46 |  this.classList.toggle("active");
47 |  var panel = this.nextElementSibling;
48 |  if (panel.style.display === "block") {
49 |  panel.style.display = "none";
50 |  } else {
51 |  panel.style.display = "block";
52 |  }
53 |  });
54 | }
55 | </script>
56 | </body>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/Chapter17/CSS Floating Action Button:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .fab {
 6 |  position: fixed;
 7 |  bottom: 20px;
 8 |  right: 20px;
 9 |  width: 56px;
10 |  height: 56px;
11 |  background-color: #007bff;
12 |  border-radius: 50%;
13 |  display: flex;
14 |  justify-content: center;
15 |  align-items: center;
16 |  color: white;
17 |  font-size: 24px;
18 |  cursor: pointer;
19 |  }
20 |  </style>
21 | </head>
22 | <body>
23 | <div class="fab">+</div>
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Chapter17/Content Cards with Hover Shadow Effect:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .card {
 6 |  transition: box-shadow 0.3s ease;
 7 |  padding: 20px;
 8 |  margin: 10px;
 9 |  border-radius: 8px;
10 |  background-color: #fff;
11 |  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
12 |  }
13 |  .card:hover {
14 |  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
15 |  }
16 |  </style>
17 | </head>
18 | <body>
19 | <div class="card">Card Content</div>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Chapter17/Custom Checkbox Style:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .checkbox-container {
 6 |  display: block;
 7 |  position: relative;
 8 |  padding-left: 35px;
 9 |  margin-bottom: 12px;
10 |  cursor: pointer;
11 |  font-size: 22px;
12 |  user-select: none;
13 |  }
14 |  .checkbox-container input {
15 |  position: absolute;
16 |  opacity: 0;
17 |  cursor: pointer;
18 |  height: 0;
19 |  width: 0;
20 |  }
21 |  .checkmark {
22 |  position: absolute;
23 |  top: 0;
24 |  left: 0;
25 |  height: 25px;
26 |  width: 25px;
27 |  background-color: #eee;
28 |  border-radius: 4px;
29 |  }
30 |  .checkbox-container:hover input ~ .checkmark {
31 |  background-color: #ccc;
32 |  }
33 |  .checkbox-container input:checked ~ .checkmark {
34 |  background-color: #2196F3;
35 |  }
36 |  .checkmark:after {
37 |  content: "";
38 |  position: absolute;
39 |  display: none;
40 |  }
41 |  .checkbox-container input:checked ~ .checkmark:after {
42 |  display: block;
43 |  }
44 |  .checkbox-container .checkmark:after {
45 |  left: 9px;
46 |  top: 5px;
47 |  width: 5px;
48 |  height: 10px;
49 |  border: solid white;
50 |  border-width: 0 3px 3px 0;
51 |  transform: rotate(45deg);
52 |  }
53 |  </style>
54 | </head>
55 | <body>
56 | <label class="checkbox-container">Custom Checkbox
57 |  <input type="checkbox">
58 |  <span class="checkmark"></span>
59 | </label>
60 | </body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/Chapter17/Grid-Based Responsive Photo Gallery:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .photo-gallery {
 6 |  display: grid;
 7 |  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 8 |  gap: 10px;
 9 |  padding: 10px;
10 |  }
11 |  .photo {
12 |  width: 100%;
13 |  height: 200px;
14 |  object-fit: cover;
15 |  }
16 |  @media (max-width: 600px) {
17 |  .photo-gallery {
18 |  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
19 |  }
20 |  }
21 |  </style>
22 | </head>
23 | <body>
24 | <div class="photo-gallery">
25 |  <img src="Images/Image1.jpg" alt="Photo 1" class="photo">
26 |  <img src="Images/Image2.jpg" alt="Photo 2" class="photo">
27 |  <!-- More photos here -->
28 | </div>
29 | </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/Chapter17/Horizontal Scrolling Gallery:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .scrolling-gallery {
 6 |  display: flex;
 7 |  overflow-x: auto;
 8 |  padding: 20px;
 9 |  }
10 |  .gallery-item {
11 |  flex: 0 0 auto;
12 |  width: 200px;
13 |  margin-right: 20px;
14 |  background: #f0f0f0;
15 |  text-align: center;
16 |  }
17 |  </style>
18 | </head>
19 | <body>
20 | <div class="scrolling-gallery">
21 |  <div class="gallery-item">Item 1</div>
22 |  <div class="gallery-item">Item 2</div>
23 |  <!-- More items here -->
24 | </div>
25 | </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/Chapter17/Pure CSS Dropdown Menu:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .dropdown {
 6 |  position: relative;
 7 |  display: inline-block;
 8 |  }
 9 |  .dropdown-content {
10 |  display: none;
11 |  position: absolute;
12 |  background-color: #f9f9f9;
13 |  min-width: 160px;
14 |  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
15 |  padding: 12px 16px;
16 |  z-index: 1;
17 |  }
18 |  .dropdown:hover .dropdown-content {
19 |  display: block;
20 |  }
21 |  </style>
22 | </head>
23 | <body>
24 | <div class="dropdown">
25 |  Hover over me
26 |  <div class="dropdown-content">
27 |  <p>Link 1</p>
28 |  <p>Link 2</p>
29 |  <p>Link 3</p>
30 |  </div>
31 | </div>
32 | </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/Chapter17/Simple Fade-in Page Animation:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes fadeIn {
 6 |  from { opacity: 0; }
 7 |  to { opacity: 1; }
 8 |  }
 9 |  body {
10 |  animation: fadeIn 2s ease-in-out;
11 |  }
12 |  </style>
13 | </head>
14 | <body>
15 | <h1>Welcome to My Page</h1>
16 | <p>This is a simple intro animation.</p>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/Chapter17/Sticky Footer with Flexbox:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html style="height: 100%;">
 3 | <head>
 4 |  <style>
 5 |  body, html {
 6 |  margin: 0;
 7 |  padding: 0;
 8 |  height: 100%;
 9 |  display: flex;
10 |  flex-direction: column;
11 |  }
12 |  .content {
13 |  flex: 1;
14 |  display: flex;
15 |  flex-direction: column;
16 |  justify-content: center;
17 |  align-items: center;
18 |  background: #f8f9fa;
19 |  }
20 |  .footer {
21 |  width: 100%;
22 |  background: #007bff;
23 |  color: white;
24 |  text-align: center;
25 |  padding: 20px 0;
26 |  }
27 |  </style>
28 | </head>
29 | <body>
30 | <div class="content">
31 |  <h1>Page Content Here</h1>
32 |  <!-- Content goes here -->
33 | </div>
34 | <div class="footer">
35 |  Sticky Footer
36 | </div>
37 | </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/Chapter17/Sticky Header on Scroll:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  body {
 6 |  margin: 0;
 7 |  font-family: Arial, sans-serif;
 8 |  }
 9 |  .header {
10 |  background-color: #f1f1f1;
11 |  padding: 20px;
12 |  text-align: center;
13 |  }
14 |  .sticky {
15 |  position: fixed;
16 |  top: 0;
17 |  width: 100%;
18 |  z-index: 1000;
19 |  }
20 |  </style>
21 | </head>
22 | <body>
23 | <div class="header" id="myHeader">I'm a sticky header on scroll!</div>
24 | <div style="padding:20px;height:1500px;background-color:#ddd;font-size:35px">
25 |  Scroll down this page to see the effect<br>The header will stick to the top of the page when you reach its scroll position.
26 | </div>
27 | <script>
28 | window.onscroll = function() {myFunction()};
29 | var header = document.getElementById("myHeader");
30 | var sticky = header.offsetTop;
31 | function myFunction() {
32 |  if (window.pageYOffset > sticky) {
33 |  header.classList.add("sticky");
34 |  } else {
35 |  header.classList.remove("sticky");
36 |  }
37 | }
38 | </script>
39 | </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/Chapter18/Animated Checkbox Customization:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .checkbox-wrapper {
 6 |  position: relative;
 7 |  display: inline-block;
 8 |  width: 40px;
 9 |  height: 20px;
10 |  background-color: #ccc;
11 |  border-radius: 20px;
12 |  transition: background-color 0.3s;
13 |  }
14 |  .checkbox-wrapper input {
15 |  opacity: 0;
16 |  width: 0;
17 |  height: 0;
18 |  }
19 |  .slider {
20 |  position: absolute;
21 |  cursor: pointer;
22 |  top: 0;
23 |  left: 0;
24 |  right: 0;
25 |  bottom: 0;
26 |  background-color: #ccc;
27 |  transition: .4s;
28 |  border-radius: 20px;
29 |  }
30 |  .slider:before {
31 |  position: absolute;
32 |  content: "";
33 |  height: 16px;
34 |  width: 16px;
35 |  left: 2px;
36 |  bottom: 2px;
37 |  background-color: white;
38 |  transition: .4s;
39 |  border-radius: 50%;
40 |  }
41 |  input:checked + .slider {
42 |  background-color: #2196F3;
43 |  }
44 |  input:checked + .slider:before {
45 |  transform: translateX(20px);
46 |  }
47 |  </style>
48 | </head>
49 | <body>
50 | <label class="checkbox-wrapper">
51 |  <input type="checkbox">
52 |  <span class="slider"></span>
53 | </label>
54 | </body>
55 | </html>
56 | 


--------------------------------------------------------------------------------
/Chapter18/Background Image with Overlay and Text:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .overlay-section {
 6 |  position: relative;
 7 |  color: white;
 8 |  background-image: url('background.jpg');
 9 |  background-size: cover;
10 |  height: 300px;
11 |  display: flex;
12 |  justify-content: center;
13 |  align-items: center;
14 |  }
15 |  .overlay-section::before {
16 |  content: '';
17 |  position: absolute;
18 |  top: 0;
19 |  right: 0;
20 |  bottom: 0;
21 |  left: 0;
22 |  background: rgba(0, 0, 0, 0.5);
23 |  z-index: 1;
24 |  }
25 |  .text {
26 |  position: relative;
27 |  z-index: 2;
28 |  text-align: center;
29 |  }
30 |  </style>
31 | </head>
32 | <body>
33 | <div class="overlay-section">
34 |  <div class="text">
35 |  <h1>Title Goes Here</h1>
36 |  <p>Description text...</p>
37 |  </div>
38 | </div>
39 | </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/Chapter18/CSS Breadcrumbs Navigation:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .breadcrumbs {
 6 |  list-style: none;
 7 |  padding: 0;
 8 |  display: flex;
 9 |  }
10 |  .breadcrumbs li {
11 |  margin-right: 5px;
12 |  }
13 |  .breadcrumbs a {
14 |  text-decoration: none;
15 |  color: #0275d8;
16 |  }
17 |  .breadcrumbs a:hover {
18 |  text-decoration: underline;
19 |  }
20 |  .breadcrumbs li::after {
21 |  content: '/';
22 |  margin-left: 5px;
23 |  }
24 |  .breadcrumbs li:last-child::after {
25 |  content: '';
26 |  margin-left: 0;
27 |  }
28 |  </style>
29 | </head>
30 | <body>
31 | <ul class="breadcrumbs">
32 |  <li><a href="#">Home</a></li>
33 |  <li><a href="#">Category</a></li>
34 |  <li>Current Page</li>
35 | </ul>
36 | </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/Chapter18/CSS-only Dropdown Menu:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .dropdown {
 6 |  position: relative;
 7 |  display: inline-block;
 8 |  }
 9 |  .dropdown-content {
10 |  display: none;
11 |  position: absolute;
12 |  background-color: #f9f9f9;
13 |  min-width: 160px;
14 |  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
15 |  z-index: 1;
16 |  }
17 |  .dropdown-content a {
18 |  color: black;
19 |  padding: 12px 16px;
20 |  text-decoration: none;
21 |  display: block;
22 |  }
23 |  .dropdown-content a:hover {background-color: #f1f1f1;}
24 |  .dropdown:hover .dropdown-content {
25 |  display: block;
26 |  }
27 |  </style>
28 | </head>
29 | <body>
30 | <div class="dropdown">
31 |  <span>Menu</span>
32 |  <div class="dropdown-content">
33 |  <a href="#">Link 1</a>
34 |  <a href="#">Link 2</a>
35 |  <a href="#">Link 3</a>
36 |  </div>
37 | </div>
38 | </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/Chapter18/Creating a CSS-only Star Rating Component:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |     .star-rating {
 6 |         unicode-bidi: bidi-override;
 7 |         direction: rtl;
 8 |         font-size: 30px;
 9 |     }
10 |     .star-rating > span {
11 |         display: inline-block;
12 |         position: relative;
13 |     }
14 |     .star-rating > span:before {
15 |         content: "\2606"; /* Empty star */
16 |         position: absolute;
17 |     }
18 |     .star-rating > span.filled:before {
19 |         content: "\2605"; /* Filled star */
20 |     }
21 |  </style>
22 | </head>
23 | <body>
24 | <div class="star-rating">
25 |     <span class="filled">★</span>
26 |     <span class="filled">★</span>
27 |     <span class="filled">★</span>
28 |     <span>☆</span>
29 |     <span>☆</span>
30 | </div>
31 | </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/Chapter18/Custom Scrollbar Styling:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  /* Customizes the scrollbar track */
 6 |  ::-webkit-scrollbar-track {
 7 |  background-color: #f0f0f0;
 8 |  }
 9 |  /* Customizes the scrollbar thumb */
10 |  ::-webkit-scrollbar-thumb {
11 |  background-color: #007bff;
12 |  border-radius: 10px;
13 |  }
14 |  /* Customizes the scrollbar itself */
15 |  ::-webkit-scrollbar {
16 |  width: 8px;
17 |  }
18 |  body {
19 |  height: 200vh; /* Ensures the scrollbar is visible for demonstration */
20 |  }
21 |  </style>
22 | </head>
23 | <body>
24 | <h1>Custom Scrollbar Styling</h1>
25 | <p>Scroll down to see the custom scrollbar in action.</p>
26 | </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/Chapter18/Dynamic Grid Layout with CSS Grid:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .grid-container {
 6 |  display: grid;
 7 |  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 8 |  gap: 10px;
 9 |  padding: 10px;
10 |  }
11 |  .grid-item {
12 |  background-color: #2196F3;
13 |  color: #ffffff;
14 |  display: flex;
15 |  justify-content: center;
16 |  align-items: center;
17 |  height: 100px;
18 |  }
19 |  </style>
20 | </head>
21 | <body>
22 | <div class="grid-container">
23 |  <div class="grid-item">1</div>
24 |  <div class="grid-item">2</div>
25 |  <div class="grid-item">3</div>
26 |  <!-- More grid items -->
27 | </div>
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/Chapter18/Expandable Search Bar:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .search-bar {
 6 |  transition: width 0.5s ease;
 7 |  width: 150px;
 8 |  height: 20px;
 9 |  padding: 10px;
10 |  border: 1px solid #ddd;
11 |  font-size: 16px;
12 |  }
13 |  .search-bar:focus {
14 |  width: 250px;
15 |  }
16 |  </style>
17 | </head>
18 | <body>
19 | <input type="text" class="search-bar" placeholder="Search...">
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Chapter18/Responsive Side Navigation Menu:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  /* Side Navigation Menu Base Styles */
 6 |  .sidenav {
 7 |  height: 100%;
 8 |  width: 250px;
 9 |  position: fixed;
10 |  z-index: 1;
11 |  top: 0;
12 |  left: -250px; /* Hidden by default */
13 |  background-color: #111;
14 |  overflow-x: hidden;
15 |  transition: 0.5s; /* Smooth sliding effect */
16 |  padding-top: 60px;
17 |  }
18 |  .sidenav a {
19 |  padding: 10px 15px;
20 |  text-decoration: none;
21 |  font-size: 25px;
22 |  color: #818181;
23 |  display: block;
24 |  transition: 0.3s;
25 |  }
26 |  .sidenav a:hover {
27 |  color: #f1f1f1;
28 |  }
29 |  /* Hamburger Menu - for demonstration */
30 |  .hamburger {
31 |  cursor: pointer;
32 |  font-size: 30px;
33 |  margin: 10px;
34 |  }
35 |  </style>
36 | </head>
37 | <body>
38 | <div id="mySidenav" class="sidenav">
39 |  <a href="#">About</a>
40 |  <a href="#">Services</a>
41 |  <a href="#">Clients</a>
42 |  <a href="#">Contact</a>
43 | </div>
44 | <span class="hamburger" onclick="toggleNav()">☰</span>
45 | <script>
46 |  function toggleNav() {
47 |  var nav = document.getElementById("mySidenav");
48 |  if (nav.style.left === "-250px") {
49 |  nav.style.left = "0";
50 |  } else {
51 |  nav.style.left = "-250px";
52 |  }
53 |  }
54 | </script>
55 | </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/Chapter18/Simple CSS Lightbox:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .lightbox {
 6 |  display: none;
 7 |  position: fixed;
 8 |  z-index: 2;
 9 |  left: 0;
10 |  top: 0;
11 |  width: 100%;
12 |  height: 100%;
13 |  background-color: rgba(0, 0, 0, 0.8);
14 |  justify-content: center;
15 |  align-items: center;
16 |  }
17 |  .lightbox img {
18 |  max-width: 90%;
19 |  max-height: 90%;
20 |  }
21 |  .lightbox:target {
22 |  display: flex;
23 |  }
24 |  </style>
25 | </head>
26 | <body>
27 | <a href="#img1">
28 |  <img src="thumbnail1.jpg" alt="Thumbnail 1" style="width:100px;height:auto;">
29 | </a>
30 | <div id="img1" class="lightbox">
31 |  <img src="image1.jpg" alt="Image 1">
32 | </div>
33 | <!-- Repeat for more images -->
34 | </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/Chapter19/Accordion FAQ:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .accordion {
 6 |  background-color: #eee;
 7 |  color: #444;
 8 |  cursor: pointer;
 9 |  padding: 18px;
10 |  width: 100%;
11 |  border: none;
12 |  text-align: left;
13 |  outline: none;
14 |  transition: 0.4s;
15 |  margin-top: 5px;
16 |  }
17 |  .panel {
18 |  padding: 0 18px;
19 |  background-color: white;
20 |  display: none;
21 |  overflow: hidden;
22 |  }
23 |  </style>
24 | </head>
25 | <body>
26 | <button class="accordion">Question 1</button>
27 | <div class="panel">
28 |  <p>Answer to question 1.</p>
29 | </div>
30 | <button class="accordion">Question 2</button>
31 | <div class="panel">
32 |  <p>Answer to question 2.</p>
33 | </div>
34 | <script>
35 |  var acc = document.getElementsByClassName("accordion");
36 |  var i;
37 |  for (i = 0; i < acc.length; i++) {
38 |  acc[i].addEventListener("click", function() {
39 |  this.classList.toggle("active");
40 |  var panel = this.nextElementSibling;
41 |  if (panel.style.display === "block") {
42 |  panel.style.display = "none";
43 |  } else {
44 |  panel.style.display = "block";
45 |  }
46 |  });
47 |  }
48 | </script>
49 | </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/Chapter19/Animated Underline on Hover:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .animated-underline {
 6 |  position: relative;
 7 |  padding-bottom: 5px;
 8 |  }
 9 |  .animated-underline::after {
10 |  content: '';
11 |  position: absolute;
12 |  bottom: 0;
13 |  left: 0;
14 |  width: 0%;
15 |  height: 2px;
16 |  background-color: #3498db;
17 |  transition: width 0.3s ease;
18 |  }
19 |  .animated-underline:hover::after {
20 |  width: 100%;
21 |  }
22 |  </style>
23 | </head>
24 | <body>
25 | <p><span class="animated-underline">Hover over me</span> to see the underline effect.</p>
26 | </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/Chapter19/CSS Loader with Bouncing Dots:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes bounce {
 6 |  0%, 100% {
 7 |  transform: translateY(0);
 8 |  }
 9 |  50% {
10 |  transform: translateY(-20px);
11 |  }
12 |  }
13 |  .loader {
14 |  display: flex;
15 |  justify-content: space-around;
16 |  align-items: flex-end;
17 |  width: 100px;
18 |  height: 50px;
19 |  margin: 0 auto;
20 |  }
21 |  .dot {
22 |  width: 15px;
23 |  height: 15px;
24 |  background-color: #3498db;
25 |  border-radius: 50%;
26 |  animation: bounce 0.6s infinite alternate;
27 |  }
28 |  .dot:nth-child(2) {
29 |  animation-delay: 0.2s;
30 |  }
31 |  .dot:nth-child(3) {
32 |  animation-delay: 0.4s;
33 |  }
34 |  </style>
35 | </head>
36 | <body>
37 | <div class="loader">
38 |  <div class="dot"></div>
39 |  <div class="dot"></div>
40 |  <div class="dot"></div>
41 | </div>
42 | </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/Chapter19/Hover to Reveal Content:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .image-container {
 6 |  position: relative;
 7 |  width: 300px;
 8 |  height: 200px;
 9 |  }
10 |  .image-overlay {
11 |  position: absolute;
12 |  bottom: 0;
13 |  background: rgb(0, 0, 0);
14 |  background: rgba(0, 0, 0, 0.5); /* Black see-through */
15 |  color: #f1f1f1;
16 |  width: 100%;
17 |  transition: .5s ease;
18 |  opacity:0;
19 |  color: white;
20 |  font-size: 20px;
21 |  padding: 20px;
22 |  text-align: center;
23 |  }
24 |  .image-container:hover .image-overlay {
25 |  opacity: 1;
26 |  }
27 |  </style>
28 | </head>
29 | <body>
30 | <div class="image-container">
31 |  <img src="example-image.jpg" alt="Example" style="width:100%;">
32 |  <div class="image-overlay">Hover to Reveal Content</div>
33 | </div>
34 | </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/Chapter19/Neumorphic Button Design:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  body {
 6 |  background-color: #e0e0e0;
 7 |  }
 8 |  .neu-button {
 9 |  background-color: #e0e0e0;
10 |  border: none;
11 |  padding: 10px 30px;
12 |  font-size: 16px;
13 |  border-radius: 30px;
14 |  box-shadow: 8px 8px 15px #bebebe,
15 |  -8px -8px 15px #ffffff;
16 |  cursor: pointer;
17 |  }
18 |  .neu-button:active {
19 |  box-shadow: inset 8px 8px 15px #bebebe,
20 |  inset -8px -8px 15px #ffffff;
21 |  }
22 |  </style>
23 | </head>
24 | <body>
25 | <button class="neu-button">Neumorphism</button>
26 | </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/Chapter19/Responsive Circle Shapes with Text:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .circle-container {
 6 |  display: flex;
 7 |  justify-content: space-around;
 8 |  flex-wrap: wrap;
 9 |  }
10 |  .circle {
11 |  width: 30vw;
12 |  height: 30vw;
13 |  background-color: #3498db;
14 |  border-radius: 50%;
15 |  display: flex;
16 |  align-items: center;
17 |  justify-content: center;
18 |  color: white;
19 |  font-size: 4vw;
20 |  margin: 20px;
21 |  }
22 |  </style>
23 | </head>
24 | <body>
25 | <div class="circle-container">
26 |  <div class="circle">Circle 1</div>
27 |  <div class="circle">Circle 2</div>
28 |  <div class="circle">Circle 3</div>
29 | </div>
30 | </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/Chapter19/Responsive Masonry Layout with CSS Columns:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .masonry-layout {
 6 |  column-count: 4;
 7 |  column-gap: 1em;
 8 |  }
 9 |  @media (max-width: 1200px) {
10 |  .masonry-layout { column-count: 3; }
11 |  }
12 |  @media (max-width: 900px) {
13 |  .masonry-layout { column-count: 2; }
14 |  }
15 |  @media (max-width: 600px) {
16 |  .masonry-layout { column-count: 1; }
17 |  }
18 |  .masonry-item {
19 |  background-color: #eee;
20 |  display: inline-block;
21 |  margin: 0 0 1em;
22 |  width: 100%;
23 |  }
24 |  .masonry-item img {
25 |  max-width: 100%;
26 |  height: auto;
27 |  }
28 |  </style>
29 | </head>
30 | <body>
31 | <div class="masonry-layout">
32 |  <div class="masonry-item"><img src="image1.jpg" alt="Image 1"></div>
33 |  <div class="masonry-item"><img src="image2.jpg" alt="Image 2"></div>
34 |  <!-- More items -->
35 | </div>
36 | </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/Chapter19/Rotating Navigation Menu:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |   nav {
 6 |     perspective: 1000px; /* Adds perspective to make the rotation effect more dramatic */
 7 |   }
 8 |   @keyframes itemEntrance {
 9 |     from {
10 |       transform: rotateX(90deg);
11 |       opacity: 0;
12 |     }
13 |     to {
14 |       transform: rotateX(0deg);
15 |       opacity: 1;
16 |     }
17 |   }
18 |   .nav-item {
19 |     animation: itemEntrance 0.5s ease forwards;
20 |     opacity: 0; /* Start fully transparent */
21 |   }
22 |   /* Delay the animation of each item */
23 |   .nav-item:nth-child(1) { animation-delay: 0s; }
24 |   .nav-item:nth-child(2) { animation-delay: 0.2s; }
25 |   .nav-item:nth-child(3) { animation-delay: 0.4s; }
26 |  </style>
27 | </head>
28 | <body>
29 | <nav>
30 |   <div class="nav-item">Home</div>
31 |   <div class="nav-item">About</div>
32 |   <div class="nav-item">Services</div>
33 | </nav>
34 | </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/Chapter19/Smooth Scrolling Links with CSS:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  html {
 6 |  scroll-behavior: smooth;
 7 |  }
 8 |  </style>
 9 | </head>
10 | <body>
11 | <h2>Smooth Scrolling</h2>
12 | <p>Click on the links below to smoothly scroll to the corresponding section.</p>
13 | <div style="background-color:lightgray;height:2000px;padding-top:10px;">
14 |  <a href="#section1">Go to Section 1</a>
15 |  <a href="#section2" style="margin-left:20px;">Go to Section 2</a>
16 |  <div id="section1" style="height:500px;">
17 |  <h2>Section 1</h2>
18 |  </div>
19 |  <div id="section2" style="height:500px;">
20 |  <h2>Section 2</h2>
21 |  </div>
22 | </div>
23 | </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/Chapter19/Text Reveal on Scroll:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes fadeInUp {
 6 |  from {
 7 |  transform: translateY(20px);
 8 |  opacity: 0;
 9 |  }
10 |  to {
11 |  transform: translateY(0);
12 |  opacity: 1;
13 |  }
14 |  }
15 |  .reveal-text {
16 |  opacity: 0;
17 |  animation: fadeInUp 1s ease-out forwards;
18 |  }
19 |  .reveal-text.visible {
20 |  opacity: 1;
21 |  }
22 |  </style>
23 | </head>
24 | <body onscroll="revealOnScroll()">
25 | <h1>Scroll down to see the effect</h1>
26 | <div class="reveal-text" style="margin-top: 500px;">This text will reveal on scroll!</div>
27 | <script>
28 | function revealOnScroll() {
29 |  var reveals = document.querySelectorAll('.reveal-text');
30 |  for (var i = 0; i < reveals.length; i++) {
31 |  var windowHeight = window.innerHeight;
32 |  var elementTop = reveals[i].getBoundingClientRect().top;
33 |  var elementVisible = 150; // Adjust based on when you want the text to appear
34 |  if (elementTop < windowHeight - elementVisible) {
35 |  reveals[i].classList.add("visible");
36 |  } else {
37 |  reveals[i].classList.remove("visible");
38 |  }
39 |  }
40 | }
41 | window.addEventListener('scroll', revealOnScroll);
42 | </script>
43 | </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/Chapter2/Advanced Selectors:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  /* Style the first paragraph */
 6 |  p:first-of-type {
 7 |  color: red;
 8 |  }
 9 |  /* Style paragraphs that are directly after h2 elements */
10 |  h2 + p {
11 |  font-style: italic;
12 |  }
13 |  /* Style the last child paragraph within any div */
14 |  div p:last-child {
15 |  font-weight: bold;
16 |  }
17 |  </style>
18 | </head>
19 | <body>
20 | <h2>Heading</h2>
21 | <p>This paragraph is styled italic because it directly follows an h2.</p>
22 | <p>This is the first paragraph and it is red.</p>
23 | <div>
24 |  <p>This paragraph is not bold because it's not the last child.</p>
25 |  <p>This paragraph is bold because it's the last child within its parent div.</p>
26 | </div>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/Chapter2/CSS 3D Transformations:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .container {
 6 |  perspective: 500px;
 7 |  }
 8 |  .cube {
 9 |  width: 100px;
10 |  height: 100px;
11 |  background-color: teal;
12 |  transform: rotateX(45deg) rotateY(45deg);
13 |  transition: transform 1s;
14 |  }
15 |  .cube:hover {
16 |  transform: rotateX(180deg) rotateY(180deg);
17 |  }
18 |  </style>
19 | </head>
20 | <body>
21 | <div class="container">
22 |  <div class="cube"></div>
23 | </div>
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Chapter2/CSS Filters for Images:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .original-image {
 6 |  margin: 20px;
 7 |  }
 8 |  .blurred-image {
 9 |  filter: blur(5px);
10 |  margin: 20px;
11 |  }
12 |  .grayscale-image {
13 |  filter: grayscale(100%);
14 |  margin: 20px;
15 |  }
16 |  </style>
17 | </head>
18 | <body>
19 | <img src="image.jpg" alt="Original Image" class="original-image">
20 | <img src="image.jpg" alt="Blurred Image" class="blurred-image">
21 | <img src="image.jpg" alt="Grayscale Image" class="grayscale-image">
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/Chapter2/CSS Shapes:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .circle {
 6 |  width: 100px;
 7 |  height: 100px;
 8 |  background-color: red;
 9 |  border-radius: 50%;
10 |  }
11 |  .square {
12 |  width: 100px;
13 |  height: 100px;
14 |  background-color: blue;
15 |  }
16 |  .triangle {
17 |  width: 0;
18 |  height: 0;
19 |  border-left: 50px solid transparent;
20 |  border-right: 50px solid transparent;
21 |  border-bottom: 100px solid green;
22 |  }
23 |  </style>
24 | </head>
25 | <body>
26 | <div class="circle"></div>
27 | <div class="square"></div>
28 | <div class="triangle"></div>
29 | </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/Chapter2/Creating a Sticky Navigation Bar:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .navbar {
 6 |  overflow: hidden;
 7 |  background-color: #333;
 8 |  position: fixed;
 9 |  top: 0;
10 |  width: 100%;
11 |  }
12 |  .navbar a {
13 |  float: left;
14 |  display: block;
15 |  color: #f2f2f2;
16 |  text-align: center;
17 |  padding: 14px 16px;
18 |  text-decoration: none;
19 |  }
20 |  .navbar a:hover {
21 |  background-color: #ddd;
22 |  color: black;
23 |  }
24 |  body {
25 |  padding-top: 60px; /* Add a top padding to avoid content being hidden behind the navbar */
26 |  }
27 |  </style>
28 | </head>
29 | <body>
30 | <div class="navbar">
31 |  <a href="#home">Home</a>
32 |  <a href="#news">News</a>
33 |  <a href="#contact">Contact</a>
34 | </div>
35 | <div class="content">
36 |  <h1>Scroll Down</h1>
37 |  <p>Scroll down to see the sticky effect.</p>
38 |  <p>This navbar will stick at the top of the page while scrolling.</p>
39 | </div>
40 | </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/Chapter2/Custom Checkbox Styles:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .checkbox-custom {
 6 |  display: none;
 7 |  }
 8 |  .checkbox-custom + label {
 9 |  position: relative;
10 |  padding-left: 25px;
11 |  cursor: pointer;
12 |  }
13 |  .checkbox-custom + label:before {
14 |  content: '';
15 |  position: absolute;
16 |  left: 0;
17 |  top: 0;
18 |  width: 18px;
19 |  height: 18px;
20 |  border: 2px solid #555;
21 |  border-radius: 3px;
22 |  }
23 |  .checkbox-custom:checked + label:after {
24 |  content: '';
25 |  position: absolute;
26 |  left: 5px;
27 |  top: 9px;
28 |  width: 5px;
29 |  height: 10px;
30 |  border: solid white;
31 |  border-width: 0 3px 3px 0;
32 |  transform: rotate(45deg);
33 |  background-color: #555;
34 |  }
35 |  </style>
36 | </head>
37 | <body>
38 | <input type="checkbox" id="check1" class="checkbox-custom">
39 | <label for="check1">Check this custom checkbox</label>
40 | </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/Chapter2/Hover Effects on Cards:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .card {
 6 |  background-color: #f2f2f2;
 7 |  padding: 20px;
 8 |  margin-top: 20px;
 9 |  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
10 |  }
11 |  .card:hover {
12 |  transform: scale(1.05);
13 |  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
14 |  }
15 |  </style>
16 | </head>
17 | <body>
18 | <div class="card">
19 |  <h2>Card Title</h2>
20 |  <p>Some example text some example text. John Doe is an architect and engineer</p>
21 | </div>
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/Chapter2/Implementing CSS Grid for Complex Layouts:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .grid-container {
 6 |  display: grid;
 7 |  grid-template-columns: repeat(3, 1fr);
 8 |  grid-gap: 10px;
 9 |  padding: 10px;
10 |  }
11 |  .grid-item {
12 |  background-color: rgba(255, 218, 185, 0.8);
13 |  padding: 20px;
14 |  text-align: center;
15 |  border: 1px solid salmon;
16 |  }
17 |  </style>
18 | </head>
19 | <body>
20 | <div class="grid-container">
21 |  <div class="grid-item">1</div>
22 |  <div class="grid-item">2</div>
23 |  <div class="grid-item">3</div>
24 |  <div class="grid-item">4</div>
25 |  <div class="grid-item">5</div>
26 |  <div class="grid-item">6</div>
27 | </div>
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/Chapter2/Styling Forms with CSS:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .form-input {
 6 |  padding: 10px;
 7 |  margin-bottom: 15px;
 8 |  border: 1px solid #ccc;
 9 |  border-radius: 4px;
10 |  }
11 |  .submit-button {
12 |  padding: 10px 15px;
13 |  background-color: dodgerblue;
14 |  color: white;
15 |  border: none;
16 |  border-radius: 4px;
17 |  cursor: pointer;
18 |  }
19 |  .submit-button:hover {
20 |  background-color: deepskyblue;
21 |  }
22 |  </style>
23 | </head>
24 | <body>
25 | <form>
26 |  <input type="text" class="form-input" placeholder="Your Name">
27 |  <input type="email" class="form-input" placeholder="Your Email">
28 |  <button type="submit" class="submit-button">Submit</button>
29 | </form>
30 | </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/Chapter2/Styling Lists:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  ul {
 6 |  list-style-type: none;
 7 |  padding: 0;
 8 |  }
 9 |  li::before {
10 |  content: "→ ";
11 |  color: blue;
12 |  }
13 |  li {
14 |  margin: 5px 0;
15 |  padding-left: 5px;
16 |  border-left: 2px solid blue;
17 |  }
18 |  </style>
19 | </head>
20 | <body>
21 | <ul>
22 |  <li>Item 1</li>
23 |  <li>Item 2</li>
24 |  <li>Item 3</li>
25 | </ul>
26 | </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/Chapter20/Animated Gradient Background:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  body {
 6 |  height: 100vh;
 7 |  margin: 0;
 8 |  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 9 |  background-size: 400% 400%;
10 |  animation: gradientBG 15s ease infinite;
11 |  }
12 |  @keyframes gradientBG {
13 |  0% { background-position: 0% 50%; }
14 |  50% { background-position: 100% 50%; }
15 |  100% { background-position: 0% 50%; }
16 |  }
17 |  </style>
18 | </head>
19 | <body>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Chapter20/CSS-only Slider Control:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .slider-container {
 6 |  width: 300px;
 7 |  margin: 50px;
 8 |  }
 9 |  .slider {
10 |  -webkit-appearance: none;
11 |  width: 100%;
12 |  height: 15px;
13 |  border-radius: 5px;
14 |  background: #d3d3d3;
15 |  outline: none;
16 |  opacity: 0.7;
17 |  -webkit-transition: .2s;
18 |  transition: opacity .2s;
19 |  }
20 |  .slider:hover {
21 |  opacity: 1;
22 |  }
23 |  .slider::-webkit-slider-thumb {
24 |  -webkit-appearance: none;
25 |  appearance: none;
26 |  width: 25px;
27 |  height: 25px;
28 |  border-radius: 50%;
29 |  background: #4CAF50;
30 |  cursor: pointer;
31 |  }
32 |  .slider::-moz-range-thumb {
33 |  width: 25px;
34 |  height: 25px;
35 |  border-radius: 50%;
36 |  background: #4CAF50;
37 |  cursor: pointer;
38 |  }
39 |  </style>
40 | </head>
41 | <body>
42 | <div class="slider-container">
43 |  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
44 | </div>
45 | </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/Chapter20/CSS-only Zigzag Border:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <style>
 5 |         .zigzag {
 6 |             position: relative;
 7 |             background-color: #f0f0f0;
 8 |             padding: 50px;
 9 |             text-align: center;
10 |             overflow: hidden; /* Ensures the pseudo-element does not cause scroll */
11 |         }
12 |         .zigzag::before {
13 |             content: "";
14 |             position: absolute;
15 |             bottom: 0;
16 |             left: 0;
17 |             width: 100%;
18 |             height: 20px;
19 |             background: repeating-linear-gradient(
20 |                 -45deg,
21 |                 #f0f0f0,
22 |                 #f0f0f0 10px,
23 |                 #ffffff 10px,
24 |                 #ffffff 20px
25 |             );
26 |         }
27 |     </style>
28 | </head>
29 | <body>
30 |     <div class="zigzag">This is a content box with a zigzag border.</div>
31 | </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/Chapter20/Content Tabs with CSS and JavaScript:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .tab {
 6 |  overflow: hidden;
 7 |  border: 1px solid #ccc;
 8 |  background-color: #f1f1f1;
 9 |  }
10 |  .tab button {
11 |  background-color: inherit;
12 |  float: left;
13 |  border: none;
14 |  outline: none;
15 |  cursor: pointer;
16 |  padding: 14px 16px;
17 |  transition: 0.3s;
18 |  }
19 |  .tab button:hover {
20 |  background-color: #ddd;
21 |  }
22 |  .tab button.active {
23 |  background-color: #ccc;
24 |  }
25 |  .tab-content {
26 |  display: none;
27 |  padding: 6px 12px;
28 |  border: 1px solid #ccc;
29 |  border-top: none;
30 |  }
31 |  </style>
32 | </head>
33 | <body>
34 | <div class="tab">
35 |  <button class="tablinks" onclick="openTab(event, 'Tab1')">Tab 1</button>
36 |  <button class="tablinks" onclick="openTab(event, 'Tab2')">Tab 2</button>
37 |  <button class="tablinks" onclick="openTab(event, 'Tab3')">Tab 3</button>
38 | </div>
39 | <div id="Tab1" class="tab-content">
40 |  <h3>Tab 1</h3>
41 |  <p>This is Tab 1 content.</p>
42 | </div>
43 | <div id="Tab2" class="tab-content">
44 |  <h3>Tab 2</h3>
45 |  <p>This is Tab 2 content.</p>
46 | </div>
47 | <div id="Tab3" class="tab-content">
48 |  <h3>Tab 3</h3>
49 |  <p>This is Tab 3 content.</p>
50 | </div>
51 | <script>
52 | function openTab(evt, tabName) {
53 |  var i, tabcontent, tablinks;
54 |  tabcontent = document.getElementsByClassName("tab-content");
55 |  for (i = 0; i < tabcontent.length; i++) {
56 |  tabcontent[i].style.display = "none";
57 |  }
58 |  tablinks = document.getElementsByClassName("tablinks");
59 |  for (i = 0; i < tablinks.length; i++) {
60 |  tablinks[i].className = tablinks[i].className.replace(" active", "");
61 |  }
62 |  document.getElementById(tabName).style.display = "block";
63 |  evt.currentTarget.className += " active";
64 | }
65 | </script>
66 | </body>
67 | </html>
68 | 


--------------------------------------------------------------------------------
/Chapter20/Creating a Collapsible Content Section:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .collapsible {
 6 |  background-color: #3498db;
 7 |  color: white;
 8 |  cursor: pointer;
 9 |  padding: 18px;
10 |  width: 100%;
11 |  border: none;
12 |  text-align: left;
13 |  outline: none;
14 |  font-size: 15px;
15 |  }
16 |  .active, .collapsible:hover {
17 |  background-color: #2980b9;
18 |  }
19 |  .content {
20 |  padding: 0 18px;
21 |  display: none;
22 |  overflow: hidden;
23 |  background-color: #f1f1f1;
24 |  }
25 |  </style>
26 | </head>
27 | <body>
28 | <button class="collapsible">Click Me</button>
29 | <div class="content">
30 |  <p>This is the collapsible content. It is hidden by default, and will be shown when clicking on the button.</p>
31 | </div>
32 | <script>
33 | var coll = document.getElementsByClassName("collapsible");
34 | var i;
35 | for (i = 0; i < coll.length; i++) {
36 |  coll[i].addEventListener("click", function() {
37 |  this.classList.toggle("active");
38 |  var content = this.nextElementSibling;
39 |  if (content.style.display === "block") {
40 |  content.style.display = "none";
41 |  } else {
42 |  content.style.display = "block";
43 |  }
44 |  });
45 | }
46 | </script>
47 | </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/Chapter20/Expanding Search Bar:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .search-bar input[type="text"] {
 6 |  width: 100px;
 7 |  padding: 10px;
 8 |  border: solid 1px #ddd;
 9 |  border-radius: 20px;
10 |  transition: width 0.4s ease-in-out;
11 |  }
12 |  .search-bar input[type="text"]:focus {
13 |  width: 200px;
14 |  }
15 |  </style>
16 | </head>
17 | <body>
18 | <div class="search-bar">
19 |  <input type="text" placeholder="Search...">
20 | </div>
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/Chapter20/Hover-over Text Reveal:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .text-reveal-container {
 6 |  position: relative;
 7 |  display: inline-block;
 8 |  }
 9 |  .reveal-text {
10 |  visibility: hidden;
11 |  width: 120px;
12 |  background-color: black;
13 |  color: white;
14 |  text-align: center;
15 |  border-radius: 6px;
16 |  padding: 5px 0;
17 |  position: absolute;
18 |  z-index: 1;
19 |  bottom: 100%;
20 |  left: 50%;
21 |  margin-left: -60px;
22 |  }
23 |  .text-reveal-container:hover .reveal-text {
24 |  visibility: visible;
25 |  }
26 |  </style>
27 | </head>
28 | <body>
29 | <div class="text-reveal-container">Hover over me
30 |  <span class="reveal-text">Additional information</span>
31 | </div>
32 | </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/Chapter20/Overflowing Text with Ellipsis:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <style>
 5 |         /* Sets the basic styling for the container */
 6 |         .text-container {
 7 |             width: 200px; /* Fixed width to trigger overflow */
 8 |             white-space: nowrap; /* Prevents text from wrapping to the next line */
 9 |             overflow: hidden; /* Hides any overflow beyond the set width */
10 |             text-overflow: ellipsis; /* Replaces overflow text with ellipsis */
11 |             border: 1px solid #ccc; /* Optional: adds a border to visualize the container's bounds */
12 |             padding: 10px; /* Optional: adds padding for aesthetic spacing */
13 |         }
14 |     </style>
15 | </head>
16 | <body>
17 |     <div class="text-container">
18 |         This is an example of a very long text that will not fit in the container.
19 |     </div>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Chapter20/Simple Image Carousel:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .carousel-container {
 6 |  width: 300px;
 7 |  overflow: hidden;
 8 |  margin: auto;
 9 |  }
10 |  .carousel-slide {
11 |  display: flex;
12 |  }
13 |  .carousel-slide img {
14 |  max-width: 300px;
15 |  display: block;
16 |  }
17 |  </style>
18 | </head>
19 | <body>
20 | <div class="carousel-container">
21 |  <div class="carousel-slide">
22 |  <img src="img1.jpg" alt="Image 1">
23 |  <img src="img2.jpg" alt="Image 2">
24 |  <img src="img3.jpg" alt="Image 3">
25 |  </div>
26 | </div>
27 | <button id="prevBtn">Prev</button>
28 | <button id="nextBtn">Next</button>
29 | <script>
30 |  let slideIndex = 1;
31 |  showSlides(slideIndex);
32 |  function plusSlides(n) {
33 |  showSlides(slideIndex += n);
34 |  }
35 |  function showSlides(n) {
36 |  let i;
37 |  let slides = document.getElementsByClassName("carousel-slide")[0].getElementsByTagName("img");
38 |  if (n > slides.length) {slideIndex = 1}
39 |  if (n < 1) {slideIndex = slides.length}
40 |  for (i = 0; i < slides.length; i++) {
41 |  slides[i].style.display = "none";
42 |  }
43 |  slides[slideIndex-1].style.display = "block";
44 |  }
45 |  document.getElementById("prevBtn").addEventListener("click", function() {
46 |  plusSlides(-1);
47 |  });
48 |  document.getElementById("nextBtn").addEventListener("click", function() {
49 |  plusSlides(1);
50 |  });
51 | </script>
52 | </body>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/Chapter20/Vertical Timeline Design:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .timeline {
 6 |  position: relative;
 7 |  max-width: 600px;
 8 |  margin: 0 auto;
 9 |  }
10 |  .timeline::after {
11 |  content: '';
12 |  position: absolute;
13 |  width: 6px;
14 |  background-color: #ddd;
15 |  top: 0;
16 |  bottom: 0;
17 |  left: 50%;
18 |  margin-left: -3px;
19 |  }
20 |  .container {
21 |  padding: 10px 40px;
22 |  position: relative;
23 |  background-color: inherit;
24 |  width: 50%;
25 |  }
26 |  .left {
27 |  left: 0;
28 |  }
29 |  .right {
30 |  left: 50%;
31 |  }
32 |  .container::after {
33 |  content: '';
34 |  position: absolute;
35 |  width: 25px;
36 |  height: 25px;
37 |  right: -17px;
38 |  background-color: white;
39 |  border: 4px solid #ddd;
40 |  top: 15px;
41 |  border-radius: 50%;
42 |  z-index: 1;
43 |  }
44 |  .right::after {
45 |  left: -17px;
46 |  }
47 |  .content {
48 |  padding: 20px;
49 |  background-color: #f9f9f9;
50 |  position: relative;
51 |  border-radius: 6px;
52 |  }
53 |  /* Add media queries for small screens */
54 |  </style>
55 | </head>
56 | <body>
57 | <div class="timeline">
58 |  <div class="container left">
59 |  <div class="content">
60 |  <h2>2021</h2>
61 |  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
62 |  </div>
63 |  </div>
64 |  <div class="container right">
65 |  <div class="content">
66 |  <h2>2022</h2>
67 |  <p>Phasellus scelerisque sed mi sit amet varius.</p>
68 |  </div>
69 |  </div>
70 |  <!-- Add more events here -->
71 | </div>
72 | </body>
73 | </html>
74 | 


--------------------------------------------------------------------------------
/Chapter21/CSS Speech Bubble:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .speech-bubble {
 6 |  position: relative;
 7 |  background: #00aabb;
 8 |  border-radius: .4em;
 9 |  padding: 20px;
10 |  color: white;
11 |  width: 200px;
12 |  text-align: center;
13 |  }
14 |  .speech-bubble:after {
15 |  content: '';
16 |  position: absolute;
17 |  bottom: 0;
18 |  left: 50%;
19 |  width: 0;
20 |  height: 0;
21 |  border: 20px solid transparent;
22 |  border-top-color: #00aabb;
23 |  border-bottom: 0;
24 |  margin-left: -10px;
25 |  margin-bottom: -20px;
26 |  }
27 |  </style>
28 | </head>
29 | <body>
30 | <div class="speech-bubble">This is a speech bubble!</div>
31 | </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/Chapter21/Custom Animated Checkbox:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .checkbox-container {
 6 |  display: block;
 7 |  position: relative;
 8 |  padding-left: 35px;
 9 |  margin-bottom: 12px;
10 |  cursor: pointer;
11 |  user-select: none;
12 |  }
13 |  .checkbox-container input {
14 |  position: absolute;
15 |  opacity: 0;
16 |  cursor: pointer;
17 |  height: 0;
18 |  width: 0;
19 |  }
20 |  .checkmark {
21 |  position: absolute;
22 |  top: 0;
23 |  left: 0;
24 |  height: 25px;
25 |  width: 25px;
26 |  background-color: #eee;
27 |  transition: background-color 0.2s ease;
28 |  }
29 |  .checkbox-container:hover input ~ .checkmark {
30 |  background-color: #ccc;
31 |  }
32 |  .checkbox-container input:checked ~ .checkmark {
33 |  background-color: #2196F3;
34 |  }
35 |  .checkmark:after {
36 |  content: "";
37 |  position: absolute;
38 |  display: none;
39 |  }
40 |  .checkbox-container input:checked ~ .checkmark:after {
41 |  display: block;
42 |  }
43 |  .checkbox-container .checkmark:after {
44 |  left: 9px;
45 |  top: 5px;
46 |  width: 5px;
47 |  height: 10px;
48 |  border: solid white;
49 |  border-width: 0 3px 3px 0;
50 |  transform: rotate(45deg);
51 |  }
52 |  </style>
53 | </head>
54 | <body>
55 | <label class="checkbox-container">Check this custom checkbox
56 |  <input type="checkbox">
57 |  <span class="checkmark"></span>
58 | </label>
59 | </body>
60 | </html>
61 | 


--------------------------------------------------------------------------------
/Chapter21/Diagonal Divider Between Sections:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .section {
 6 |  position: relative;
 7 |  width: 100%;
 8 |  padding: 50px 0;
 9 |  }
10 |  .section:nth-child(even) {
11 |  background-color: #f9f9f9;
12 |  }
13 |  .diagonal-divider {
14 |  position: absolute;
15 |  top: 100%;
16 |  left: 0;
17 |  width: 100%;
18 |  height: 50px;
19 |  background: linear-gradient(to right bottom, transparent 49%, #f9f9f9 50%);
20 |  }
21 |  .section:nth-child(odd) .diagonal-divider {
22 |  background: linear-gradient(to right top, transparent 49%, #fff 50%);
23 |  }
24 |  </style>
25 | </head>
26 | <body>
27 | <div class="section">
28 |  Section 1
29 |  <div class="diagonal-divider"></div>
30 | </div>
31 | <div class="section">
32 |  Section 2
33 |  <div class="diagonal-divider"></div>
34 | </div>
35 | </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/Chapter21/Dynamic Shadow on Hover:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .hover-lift {
 6 |  transition: box-shadow 0.3s ease;
 7 |  padding: 20px;
 8 |  margin: 30px;
 9 |  border-radius: 5px;
10 |  box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
11 |  }
12 |  .hover-lift:hover {
13 |  box-shadow: 10px 10px 20px rgba(0,0,0,0.4);
14 |  }
15 |  </style>
16 | </head>
17 | <body>
18 | <div class="hover-lift">Hover over me!</div>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter21/Full-Screen Navigation Overlay:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .overlay {
 6 |  height: 0%;
 7 |  width: 100%;
 8 |  position: fixed;
 9 |  z-index: 1;
10 |  top: 0;
11 |  left: 0;
12 |  background-color: rgb(0,0,0, 0.9);
13 |  overflow-y: hidden;
14 |  transition: 0.5s;
15 |  }
16 |  .overlay-content {
17 |  position: relative;
18 |  top: 25%;
19 |  width: 100%;
20 |  text-align: center;
21 |  margin-top: 30px;
22 |  }
23 |  .overlay a {
24 |  padding: 10px;
25 |  text-decoration: none;
26 |  font-size: 36px;
27 |  color: #818181;
28 |  display: block;
29 |  transition: 0.3s;
30 |  }
31 |  .overlay a:hover, .overlay a:focus {
32 |  color: #f1f1f1;
33 |  }
34 |  .overlay .closebtn {
35 |  position: absolute;
36 |  top: 20px;
37 |  right: 45px;
38 |  font-size: 60px;
39 |  }
40 |  </style>
41 | </head>
42 | <body>
43 | <div id="myNav" class="overlay">
44 |  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
45 |  <div class="overlay-content">
46 |  <a href="#">Home</a>
47 |  <a href="#">About</a>
48 |  <a href="#">Services</a>
49 |  <a href="#">Contact</a>
50 |  </div>
51 | </div>
52 | <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Open</span>
53 | <script>
54 | function openNav() {
55 |  document.getElementById("myNav").style.height = "100%";
56 | }
57 | function closeNav() {
58 |  document.getElementById("myNav").style.height = "0%";
59 | }
60 | </script>
61 | </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/Chapter21/Infinite Scrolling Text Marquee:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .marquee {
 6 |  width: 100%;
 7 |  overflow: hidden;
 8 |  white-space: nowrap;
 9 |  box-sizing: content-box;
10 |  }
11 |  .marquee p {
12 |  display: inline-block;
13 |  padding-left: 100%;
14 |  animation: scrolling 20s linear infinite;
15 |  }
16 |  @keyframes scrolling {
17 |  from { transform: translateX(0); }
18 |  to { transform: translateX(-100%); }
19 |  }
20 |  </style>
21 | </head>
22 | <body>
23 | <div class="marquee">
24 |  <p>This text scrolls infinitely from right to left. This text scrolls infinitely from right to left.</p>
25 | </div>
26 | </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/Chapter21/Interactive Image Gallery with CSS Grid:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .gallery {
 6 |  display: grid;
 7 |  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 8 |  gap: 10px;
 9 |  padding: 10px;
10 |  }
11 |  .gallery img {
12 |  width: 100%;
13 |  height: auto;
14 |  border-radius: 8px;
15 |  transition: transform 0.3s ease;
16 |  }
17 |  .gallery img:hover {
18 |  transform: scale(1.1);
19 |  }
20 |  </style>
21 | </head>
22 | <body>
23 | <div class="gallery">
24 |  <img src="Images/Image1.jpg" alt="Image 1">
25 |  <img src="Images/Image2.jpg" alt="Image 2">
26 |  <img src="Images/Image1.jpg" alt="Image 3">
27 |  <!-- More images -->
28 | </div>
29 | </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/Chapter21/Multi-Column Text Layout:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .multi-column {
 6 |  column-count: 3;
 7 |  column-gap: 20px;
 8 |  padding: 10px;
 9 |  }
10 |  </style>
11 | </head>
12 | <body>
13 | <div class="multi-column">
14 |  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor, et feugiat libero facilisis. Nullam nec aliquam odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque varius faucibus condimentum. Sed ac faucibus dolor, vel efficitur arcu.</p>
15 |  <!-- Additional content -->
16 | </div>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/Chapter21/Responsive Cards with Hover Effects:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .card {
 6 |  background-color: #fff;
 7 |  width: 100%;
 8 |  max-width: 300px;
 9 |  margin: 20px;
10 |  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
11 |  transition: transform 0.3s ease, box-shadow 0.3s ease;
12 |  overflow: hidden;
13 |  border-radius: 10px;
14 |  }
15 |  .card:hover {
16 |  transform: scale(1.05);
17 |  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
18 |  }
19 |  .card img {
20 |  width: 100%;
21 |  height: auto;
22 |  }
23 |  .card-content {
24 |  padding: 20px;
25 |  }
26 |  .card-title {
27 |  margin: 0;
28 |  color: #333;
29 |  }
30 |  .card-description {
31 |  color: #666;
32 |  font-size: 14px;
33 |  }
34 |  </style>
35 | </head>
36 | <body>
37 | <div class="card">
38 |  <img src="image-url.jpg" alt="Image">
39 |  <div class="card-content">
40 |  <h2 class="card-title">Card Title</h2>
41 |  <p class="card-description">This is a brief description of what the card is about.</p>
42 |  </div>
43 | </div>
44 | </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/Chapter21/Slide-In Sidebar Menu:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .sidebar {
 6 |  height: 100%;
 7 |  width: 0;
 8 |  position: fixed;
 9 |  z-index: 1;
10 |  top: 0;
11 |  left: 0;
12 |  background-color: #111;
13 |  overflow-x: hidden;
14 |  transition: 0.5s;
15 |  padding-top: 60px;
16 |  }
17 |  .sidebar a {
18 |  padding: 10px 15px;
19 |  text-decoration: none;
20 |  font-size: 25px;
21 |  color: #818181;
22 |  display: block;
23 |  transition: 0.3s;
24 |  }
25 |  .sidebar a:hover {
26 |  color: #f1f1f1;
27 |  }
28 |  .sidebar .closebtn {
29 |  position: absolute;
30 |  top: 0;
31 |  right: 25px;
32 |  font-size: 36px;
33 |  margin-left: 50px;
34 |  }
35 |  .openbtn {
36 |  font-size: 20px;
37 |  cursor: pointer;
38 |  background-color: #111;
39 |  color: white;
40 |  padding: 10px 15px;
41 |  border: none;
42 |  }
43 |  .openbtn:hover {
44 |  background-color: #444;
45 |  }
46 |  </style>
47 | </head>
48 | <body>
49 | <div id="mySidebar" class="sidebar">
50 |  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
51 |  <!-- Add your menu items here -->
52 |  <a href="#">About</a>
53 |  <a href="#">Services</a>
54 |  <a href="#">Clients</a>
55 |  <a href="#">Contact</a>
56 | </div>
57 | <button class="openbtn" onclick="openNav()">☰ Open Sidebar</button>
58 | <script>
59 | function openNav() {
60 |  document.getElementById("mySidebar").style.width = "250px";
61 | }
62 | function closeNav() {
63 |  document.getElementById("mySidebar").style.width = "0";
64 | }
65 | </script>
66 | </body>
67 | </html>
68 | 


--------------------------------------------------------------------------------
/Chapter22/Animated Loading Dots:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .dot {
 6 |  height: 20px;
 7 |  width: 20px;
 8 |  background-color: #333;
 9 |  border-radius: 50%;
10 |  display: inline-block;
11 |  animation: bounce 1.4s infinite ease-in-out both;
12 |  }
13 |  .dot:nth-child(1) { animation-delay: -0.32s; }
14 |  .dot:nth-child(2) { animation-delay: -0.16s; }
15 |  @keyframes bounce {
16 |  0%, 80%, 100% { transform: scale(0); }
17 |  40% { transform: scale(1.0); }
18 |  }
19 |  </style>
20 | </head>
21 | <body>
22 | <div class="dot"></div>
23 | <div class="dot"></div>
24 | <div class="dot"></div>
25 | </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/Chapter22/CSS AccordionPure CSS:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <style>
 5 |         .accordion {
 6 |             background-color: #eee;
 7 |             color: #444;
 8 |             cursor: pointer;
 9 |             padding: 18px;
10 |             width: 100%;
11 |             text-align: left;
12 |             border: none;
13 |             outline: none;
14 |             margin-top: 5px;
15 |             transition: background-color 0.6s ease;
16 |         }
17 | 
18 |         /* Hidden checkbox */
19 |         .accordion-toggle {
20 |             display: none;
21 |         }
22 | 
23 |         .accordion-toggle:checked + .accordion + .panel {
24 |             max-height: 1000px; /* Sufficiently high */
25 |             transition: max-height 0.2s ease-out;
26 |         }
27 | 
28 |         .panel {
29 |             padding: 0 18px;
30 |             background-color: white;
31 |             max-height: 0;
32 |             overflow: hidden;
33 |             transition: max-height 0.2s ease-out;
34 |         }
35 | 
36 |         .accordion:hover, .accordion-toggle:checked + .accordion {
37 |             background-color: #ccc;
38 |         }
39 |     </style>
40 | </head>
41 | <body>
42 |     <!-- Section 1 -->
43 |     <input type="checkbox" id="toggle1" class="accordion-toggle" />
44 |     <label for="toggle1" class="accordion">Section 1</label>
45 |     <div class="panel">
46 |         <p>Lorem ipsum...</p>
47 |     </div>
48 | 
49 |     <!-- Section 2 -->
50 |     <input type="checkbox" id="toggle2" class="accordion-toggle" />
51 |     <label for="toggle2" class="accordion">Section 2</label>
52 |     <div class="panel">
53 |         <p>Dolor sit amet...</p>
54 |     </div>
55 | </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/Chapter22/CSS Flip Card on Mouse Hover:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .flip-card {
 6 |  background-color: transparent;
 7 |  width: 200px;
 8 |  height: 300px;
 9 |  perspective: 1000px;
10 |  margin: 20px;
11 |  }
12 |  .flip-card-inner {
13 |  position: relative;
14 |  width: 100%;
15 |  height: 100%;
16 |  text-align: center;
17 |  transition: transform 0.6s;
18 |  transform-style: preserve-3d;
19 |  }
20 |  .flip-card:hover .flip-card-inner {
21 |  transform: rotateY(180deg);
22 |  }
23 |  .flip-card-front, .flip-card-back {
24 |  position: absolute;
25 |  width: 100%;
26 |  height: 100%;
27 |  backface-visibility: hidden;
28 |  }
29 |  .flip-card-front {
30 |  background-color: #bbb;
31 |  color: black;
32 |  }
33 |  .flip-card-back {
34 |  background-color: #2980b9;
35 |  color: white;
36 |  transform: rotateY(180deg);
37 |  }
38 |  </style>
39 | </head>
40 | <body>
41 | <div class="flip-card">
42 |  <div class="flip-card-inner">
43 |  <div class="flip-card-front">
44 |  <h3>Front Side</h3>
45 |  </div>
46 |  <div class="flip-card-back">
47 |  <h3>Back Side</h3>
48 |  <p>More information here.</p>
49 |  </div>
50 |  </div>
51 | </div>
52 | </body>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/Chapter22/Circular Progress Bar:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .circle-progress {
 6 |  width: 100px;
 7 |  height: 100px;
 8 |  border-radius: 50%;
 9 |  background: conic-gradient(#4caf50 75%, #f3f3f3 0%);
10 |  display: flex;
11 |  justify-content: center;
12 |  align-items: center;
13 |  font-size: 20px;
14 |  color: #333;
15 |  }
16 |  .percent {
17 |  position: relative;
18 |  z-index: 2;
19 |  }
20 |  .circle-progress::before {
21 |  content: '';
22 |  position: absolute;
23 |  top: 5px;
24 |  left: 5px;
25 |  right: 5px;
26 |  bottom: 5px;
27 |  background: #fff;
28 |  border-radius: 50%;
29 |  z-index: 1;
30 |  }
31 |  </style>
32 | </head>
33 | <body>
34 | <div class="circle-progress">
35 |  <div class="percent">75%</div>
36 | </div>
37 | </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/Chapter22/Creating a Responsive Navigation Bar:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <meta name="viewport" content="width=device-width, initial-scale=1">
 5 |  <style>
 6 |  body {
 7 |  margin: 0;
 8 |  font-family: Arial, sans-serif;
 9 |  }
10 |  .navbar {
11 |  overflow: hidden;
12 |  background-color: #333;
13 |  }
14 |  .navbar a {
15 |  float: left;
16 |  display: block;
17 |  color: #f2f2f2;
18 |  text-align: center;
19 |  padding: 14px 16px;
20 |  text-decoration: none;
21 |  }
22 |  .navbar a:hover {
23 |  background-color: #ddd;
24 |  color: black;
25 |  }
26 |  @media screen and (max-width: 600px) {
27 |  .navbar a {
28 |  float: none;
29 |  display: block;
30 |  text-align: left;
31 |  }
32 |  }
33 |  </style>
34 | </head>
35 | <body>
36 | <div class="navbar">
37 |  <a href="#home">Home</a>
38 |  <a href="#news">News</a>
39 |  <a href="#contact">Contact</a>
40 |  <a href="#about">About</a>
41 | </div>
42 | </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/Chapter22/Fade-in Section on Scroll:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .fade-in-section {
 6 |  opacity: 0;
 7 |  transform: translateY(20px);
 8 |  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
 9 |  will-change: opacity, transform;
10 |  }
11 |  .fade-in-section.visible {
12 |  opacity: 1;
13 |  transform: none;
14 |  }
15 |  </style>
16 | </head>
17 | <body>
18 | <div class="fade-in-section">Section 1</div>
19 | <div class="fade-in-section">Section 2</div>
20 | <div class="fade-in-section">Section 3</div>
21 | <script>
22 | window.addEventListener('scroll', fadeInSections);
23 | function fadeInSections() {
24 |  const sections = document.querySelectorAll('.fade-in-section');
25 |  for (const section of sections) {
26 |  const sectionTop = section.getBoundingClientRect().top;
27 |  const isVisible = sectionTop < window.innerHeight - 50; // Adjust as needed
28 |  if (isVisible) {
29 |  section.classList.add('visible');
30 |  }
31 |  }
32 | }
33 | </script>
34 | </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/Chapter22/Full-page Background Image:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  body, html {
 6 |  height: 100%;
 7 |  margin: 0;
 8 |  }
 9 |  .bg-image {
10 |  background-image: url('background.jpg');
11 |  background-size: cover;
12 |  background-position: center;
13 |  height: 100%;
14 |  }
15 |  </style>
16 | </head>
17 | <body>
18 | <div class="bg-image"></div>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter22/Hover Over Image to Reveal Text:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .image-container {
 6 |  position: relative;
 7 |  width: 50%;
 8 |  }
 9 |  .overlay {
10 |  position: absolute;
11 |  bottom: 0;
12 |  left: 0;
13 |  right: 0;
14 |  background-color: #008CBA;
15 |  overflow: hidden;
16 |  width: 100%;
17 |  height: 0;
18 |  transition: .5s ease;
19 |  }
20 |  .image-container:hover .overlay {
21 |  height: 100%;
22 |  }
23 |  .text {
24 |  color: white;
25 |  font-size: 20px;
26 |  position: absolute;
27 |  top: 50%;
28 |  left: 50%;
29 |  transform: translate(-50%, -50%);
30 |  text-align: center;
31 |  }
32 |  </style>
33 | </head>
34 | <body>
35 | <div class="image-container">
36 |  <img src="image.jpg" alt="Avatar" style="width:100%">
37 |  <div class="overlay">
38 |  <div class="text">Hello World</div>
39 |  </div>
40 | </div>
41 | </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/Chapter22/JS CSS Accordion:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .accordion {
 6 |  background-color: #eee;
 7 |  color: #444;
 8 |  cursor: pointer;
 9 |  padding: 18px;
10 |  width: 100%;
11 |  text-align: left;
12 |  border: none;
13 |  outline: none;
14 |  transition: background-color 0.6s ease;
15 |  margin-top: 5px;
16 |  }
17 |  .active, .accordion:hover {
18 |  background-color: #ccc;
19 |  }
20 |  .panel {
21 |  padding: 0 18px;
22 |  background-color: white;
23 |  max-height: 0;
24 |  overflow: hidden;
25 |  transition: max-height 0.2s ease-out;
26 |  }
27 |  </style>
28 | </head>
29 | <body>
30 | <button class="accordion">Section 1</button>
31 | <div class="panel">
32 |  <p>Lorem ipsum...</p>
33 | </div>
34 | <button class="accordion">Section 2</button>
35 | <div class="panel">
36 |  <p>Dolor sit amet...</p>
37 | </div>
38 | <script>
39 | var acc = document.querySelectorAll(".accordion");
40 | for (var i = 0; i < acc.length; i++) {
41 |  acc[i].addEventListener("click", function() {
42 |  this.classList.toggle("active");
43 |  var panel = this.nextElementSibling;
44 |  if (panel.style.maxHeight) {
45 |  panel.style.maxHeight = null;
46 |  } else {
47 |  panel.style.maxHeight = panel.scrollHeight + "px";
48 |  } 
49 |  });
50 | }
51 | </script>
52 | </body>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/Chapter22/Parallax Scrolling Effect:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .parallax {
 6 |  /* The image used */
 7 |  background-image: url("parallax-image.jpg");
 8 |  /* Set a specific height */
 9 |  height: 500px;
10 |  /* Create the parallax scrolling effect */
11 |  background-attachment: fixed;
12 |  background-position: center;
13 |  background-repeat: no-repeat;
14 |  background-size: cover;
15 |  }
16 |  .content {
17 |  height: 500px;
18 |  background-color: rgba(255, 255, 255, 0.8);
19 |  display: flex;
20 |  justify-content: center;
21 |  align-items: center;
22 |  font-size: 24px;
23 |  }
24 |  </style>
25 | </head>
26 | <body>
27 | <div class="parallax"></div>
28 | <div class="content">Scroll Up and Down to see the effect!</div>
29 | <div class="parallax"></div>
30 | </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/Chapter22/Scroll-triggered Animation:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .box {
 6 |    width: 100px;
 7 |    height: 100px;
 8 |    background: red;
 9 |    opacity: 0; /* Start as invisible */
10 |    transition: opacity 2s; /* Smooth transition for the opacity */
11 |  }
12 |  .visible {
13 |    opacity: 1; /* Fully visible when the class is added */
14 |  }
15 |  </style>
16 | </head>
17 | <body>
18 | <div style="height: 500px;">Scroll down</div>
19 | <div class="box" id="animatedBox">Animated Box</div>
20 | <div style="height: 1500px;">Scroll more</div>
21 | <script>
22 | window.addEventListener('scroll', function() {
23 |  var element = document.getElementById('animatedBox');
24 |  var position = element.getBoundingClientRect();
25 | 
26 |  // Checking if the element is within the viewport
27 |  if (position.top < window.innerHeight && position.bottom >= 0) {
28 |    element.classList.add('visible');
29 |  } else {
30 |    element.classList.remove('visible'); // Reset the visibility when out of view
31 |  }
32 | });
33 | </script>
34 | </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/Chapter3/CSS Grid with Overlapping Items:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .grid-container {
 6 |  display: grid;
 7 |  grid-template-columns: repeat(3, 1fr);
 8 |  grid-auto-rows: 100px;
 9 |  }
10 |  .grid-item {
11 |  background-color: #8ca0ff;
12 |  opacity: 0.7;
13 |  }
14 |  .item1 {
15 |  grid-column: 1 / 3;
16 |  grid-row: 1;
17 |  }
18 |  .item2 {
19 |  grid-column: 2 / 4;
20 |  grid-row: 1 / 3;
21 |  }
22 |  .item3 {
23 |  grid-column: 1;
24 |  grid-row: 2 / 4;
25 |  }
26 |  </style>
27 | </head>
28 | <body>
29 | <div class="grid-container">
30 |  <div class="grid-item item1">Item 1</div>
31 |  <div class="grid-item item2">Item 2</div>
32 |  <div class="grid-item item3">Item 3</div>
33 | </div>
34 | </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/Chapter3/CSS Variables for Themes:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  :root {
 6 |  --primary-color: #007bff;
 7 |  --secondary-color: #6c757d;
 8 |  }
 9 |  body.dark-mode {
10 |  --primary-color: #343a40;
11 |  --secondary-color: #007bff;
12 |  }
13 |  .container {
14 |  color: var(--primary-color);
15 |  background-color: var(--secondary-color);
16 |  padding: 20px;
17 |  margin: 20px 0;
18 |  }
19 |  </style>
20 | </head>
21 | <body class="dark-mode">
22 | <div class="container">
23 |  This container adopts the theme's primary and secondary colors.
24 | </div>
25 | </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/Chapter3/Creative List Bullets with Pseudo-Elements:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  ul {
 6 |  list-style-type: none;
 7 |  padding-left: 0;
 8 |  }
 9 |  li::before {
10 |  content: '→';
11 |  color: #007BFF;
12 |  display: inline-block;
13 |  width: 20px;
14 |  margin-left: -20px;
15 |  }
16 |  </style>
17 | </head>
18 | <body>
19 | <ul>
20 |  <li>Item 1</li>
21 |  <li>Item 2</li>
22 |  <li>Item 3</li>
23 | </ul>
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Chapter3/Custom Animated Loading Spinner:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .spinner {
 6 |  border: 4px solid rgba(0, 0, 0, 0.1);
 7 |  border-radius: 50%;
 8 |  border-top: 4px solid blue;
 9 |  width: 50px;
10 |  height: 50px;
11 |  animation: spin 2s linear infinite;
12 |  }
13 |  @key
14 | frames spin {
15 | 0% { transform: rotate(0deg); }
16 | 100% { transform: rotate(360deg); }
17 | }
18 | </style>
19 | </head>
20 | <body>
21 | <div class="spinner"></div>
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/Chapter3/Custom Cursors:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .custom-cursor {
 6 |  cursor: url('your-cursor-image.cur'), auto;
 7 |  }
 8 |  </style>
 9 | </head>
10 | <body>
11 | <div class="custom-cursor" style="margin: 50px; padding: 50px; border: 1px solid #000;">
12 |  Hover over me to see the custom cursor!
13 | </div>
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/Chapter3/Flexbox for Navigation Bar:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .nav {
 6 |  display: flex;
 7 |  justify-content: space-between;
 8 | list-style-type: none;
 9 | padding: 0;
10 | }
11 | .nav li {
12 |  padding: 10px;
13 |  background-color: #f2f2f2;
14 |  margin: 5px;
15 |  }
16 |  .nav li a {
17 |  text-decoration: none;
18 |  color: #333;
19 |  }
20 | </style>
21 | </head>
22 | <body>
23 | <ul class="nav">
24 |     <li><a href="#">Home</a></li>
25 |     <li><a href="#">About</a></li>
26 |     <li><a href="#">Services</a></li>
27 |     <li><a href="#">Contact</a></li>
28 | </ul>
29 | </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/Chapter3/Gradient Background Animation:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes gradient {
 6 |  0% {background-position: 0% 50%;}
 7 |  50% {background-position: 100% 50%;}
 8 |  100% {background-position: 0% 50%;}
 9 |  }
10 |  body {
11 |  height: 100vh;
12 |  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
13 |  background-size: 400% 400%;
14 |  animation: gradient 15s ease infinite;
15 |  }
16 |  </style>
17 | </head>
18 | <body>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter3/Parallax Scrolling Effect:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .parallax {
 6 |  background-image: url('your-image-url.jpg');
 7 |  min-height: 500px; 
 8 |  background-attachment: fixed;
 9 |  background-position: center;
10 |  background-repeat: no-repeat;
11 |  background-size: cover;
12 |  }
13 |  .content {
14 |  height: 500px;
15 |  background-color: rgba(255, 255, 255, 0.6);
16 |  display: flex;
17 |  justify-content: center;
18 |  align-items: center;
19 |  font-size: 24px;
20 |  }
21 |  </style>
22 | </head>
23 | <body>
24 | <div class="parallax"></div>
25 | <div class="content">Scroll up and down to see the parallax effect!</div>
26 | <div class="parallax"></div>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/Chapter3/Responsive Typography:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  body {
 6 |  font-family: Arial, sans-serif;
 7 |  }
 8 |  h1 {
 9 |  font-size: 2.5em; /* Default size */
10 |  }
11 |  @media (max-width: 768px) {
12 |  h1 {
13 |  font-size: 2em; /* Smaller screens */
14 |  }
15 |  }
16 |  @media (max-width: 480px) {
17 |  h1 {
18 |  font-size: 1.5em; /* Smallest screens */
19 |  }
20 |  }
21 |  </style>
22 | </head>
23 | <body>
24 | <h1>Responsive Typography Example</h1>
25 | </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/Chapter3/Variable Fonts:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @font-face {
 6 |  font-family: 'VariableFont';
 7 |  src: url('VariableFont.woff2') format('woff2-variations');
 8 |  font-weight: 100 900;
 9 |  }
10 |  body {
11 |  font-family: 'VariableFont', sans-serif;
12 |  }
13 |  .light {
14 |  font-weight: 100;
15 |  }
16 |  .bold {
17 |  font-weight: 800;
18 |  }
19 |  </style>
20 | </head>
21 | <body>
22 | <p class="light">This is a light text using variable font.</p>
23 | <p class="bold">This is a bold text using the same variable font.</p>
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Chapter4/Building a Responsive Navbar:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <meta name="viewport" content="width=device-width, initial-scale=1">
 5 |  <style>
 6 |  .navbar {
 7 |  display: flex;
 8 |  justify-content: space-between;
 9 |  align-items: center;
10 |  background-color: #333;
11 |  color: #fff;
12 |  padding: 10px;
13 |  }
14 |  .navbar a {
15 |  color: white;
16 |  text-decoration: none;
17 |  padding: 10px;
18 |  }
19 |  @media screen and (max-width: 600px) {
20 |  .navbar a {
21 |  display: block;
22 |  text-align: center;
23 |  }
24 |  }
25 |  </style>
26 | </head>
27 | <body>
28 | <div class="navbar">
29 |  <a href="#">Home</a>
30 |  <a href="#">About</a>
31 |  <a href="#">Services</a>
32 |  <a href="#">Contact</a>
33 | </div>
34 | </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/Chapter4/CSS Gradient Text Effect:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .gradient-text {
 6 |  font-size: 2rem;
 7 |  background: -webkit-linear-gradient(#e66465, #9198e5);
 8 |  -webkit-background-clip: text;
 9 |  -webkit-text-fill-color: transparent;
10 |  }
11 |  </style>
12 | </head>
13 | <body>
14 | <h1 class="gradient-text">Gradient Text Effect</h1>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/Chapter4/CSS Perspective Hover Effect:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .container {
 6 |  perspective: 1000px;
 7 |  }
 8 |  .card {
 9 |  width: 200px;
10 |  height: 300px;
11 |  background-color: #eee;
12 |  margin: 20px;
13 |  transition: transform 0.5s;
14 |  transform-style: preserve-3d;
15 |  }
16 |  .container:hover .card {
17 |  transform: rotateY(180deg);
18 |  }
19 |  </style>
20 | </head>
21 | <body>
22 | <div class="container">
23 |  <div class="card">Hover over the container to see the effect!</div>
24 | </div>
25 | </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/Chapter4/Creating a CSS Tooltip:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .tooltip {
 6 |  position: relative;
 7 |  display: inline-block;
 8 |  }
 9 |  .tooltip::before {
10 |  content: attr(data-tip);
11 |  position: absolute;
12 |  bottom: 100%;
13 |  left: 50%;
14 |  transform: translateX(-50%);
15 |  white-space: nowrap;
16 |  background-color: black;
17 |  color: white;
18 |  padding: 5px;
19 |  border-radius: 4px;
20 |  display: none;
21 |  }
22 |  .tooltip:hover::before {
23 |  display: block;
24 |  }
25 |  </style>
26 | </head>
27 | <body>
28 | <div class="tooltip" data-tip="This is a tooltip!">Hover over me</div>
29 | </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/Chapter4/Flexbox Photo Gallery:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .gallery {
 6 |  display: flex;
 7 |  flex-wrap: wrap;
 8 |  padding: 0;
 9 |  margin: -5px;
10 |  }
11 |  .photo {
12 |  flex: 1 0 210px;
13 |  margin: 5px;
14 |  background-color: #ddd;
15 |  color: #fff;
16 |  text-align: center;
17 |  line-height: 150px;
18 |  }
19 |  </style>
20 | </head>
21 | <body>
22 | <div class="gallery">
23 |  <div class="photo">Photo 1</div>
24 |  <div class="photo">Photo 2</div>
25 |  <div class="photo">Photo 3</div>
26 |  <!-- Add more photos as needed -->
27 | </div>
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/Chapter4/Fullscreen Background Video:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  body, html {
 6 |    margin: 0;
 7 |    padding: 0;
 8 |    height: 100%;
 9 |  }
10 |  .video-background {
11 |    position: fixed;
12 |    right: 0;
13 |    bottom: 0;
14 |    min-width: 100%; 
15 |    min-height: 100%;
16 |    width: auto; 
17 |    height: auto;
18 |    z-index: -1; /* Ensure this is behind content but above the page background */
19 |    background-size: cover;
20 |  }
21 |  .content {
22 |    position: relative;
23 |    z-index: 1; /* Ensure content is above the video */
24 |    color: white;
25 |    padding: 20px;
26 |  }
27 |  </style>
28 | </head>
29 | <body>
30 | <video autoplay muted loop class="video-background">
31 |  <source src="/myvideo.mp4" type="video/mp4">
32 |  Your browser does not support the video tag.
33 | </video>
34 | <div class="content">Content on top of the video</div>
35 | </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/Chapter4/Hover Effect with Box Shadow and Transform:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .card {
 6 |  margin: 20px;
 7 |  padding: 40px;
 8 |  text-align: center;
 9 |  transition: transform 0.3s, box-shadow 0.3s;
10 |  will-change: transform, box-shadow;
11 |  }
12 |  .card:hover {
13 |  transform: translateY(-10px);
14 |  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
15 |  }
16 |  </style>
17 | </head>
18 | <body>
19 | <div class="card">Hover over me!</div>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Chapter4/Implement a Fullscreen Background Video:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  body, html {
 6 |    margin: 0;
 7 |    padding: 0;
 8 |    height: 100%;
 9 |  }
10 |  .video-background {
11 |    position: fixed;
12 |    right: 0;
13 |    bottom: 0;
14 |    min-width: 100%; 
15 |    min-height: 100%;
16 |    width: auto; 
17 |    height: auto;
18 |    z-index: -1;
19 |    background-size: cover;
20 |  }
21 |  .content {
22 |    position: relative;
23 |    z-index: 1;
24 |    color: white;
25 |    padding: 20px;
26 |    /* Add your styles here */
27 |  }
28 |  </style>
29 | </head>
30 | <body>
31 | <video autoplay muted loop class="video-background">
32 |  <source src="/path-to-your-video.mp4" type="video/mp4">
33 |  Your browser does not support the video tag.
34 | </video>
35 | <div class="content">
36 |  <!-- Add your overlay content here -->
37 |  Content on top of the video
38 | </div>
39 | </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/Chapter4/Responsive Grid with CSS Variables and Media Queries:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE html>
 3 | <html>
 4 | <head>
 5 |  <style>
 6 |  :root {
 7 |  --columns: 4;
 8 |  }
 9 |  @media (max-width: 800px) {
10 |  :root {
11 |  --columns: 2;
12 |  }
13 |  }
14 |  @media (max-width: 400px) {
15 |  :root {
16 |  --columns: 1;
17 |  }
18 |  }
19 |  .grid-container {
20 |  display: grid;
21 |  grid-template-columns: repeat(var(--columns), 1fr);
22 |  gap: 10px;
23 |  }
24 |  .grid-item {
25 |  background-color: #f2f2f2;
26 |  padding: 20px;
27 |  text-align: center;
28 |  }
29 |  </style>
30 | </head>
31 | <body>
32 | <div class="grid-container">
33 |  <div class="grid-item">1</div>
34 |  <div class="grid-item">2</div>
35 |  <div class="grid-item">3</div>
36 |  <div class="grid-item">4</div>
37 |  <!-- Add more items as needed -->
38 | </div>
39 | </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/Chapter4/Styling Forms with CSS:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  form {
 6 |  background-color: #f2f2f2;
 7 |  padding: 20px;
 8 |  border-radius: 5px;
 9 |  width: 300px;
10 |  }
11 |  input[type="text"], input[type="email"], input[type="submit"] {
12 |  width: 100%;
13 |  padding: 10px;
14 |  margin: 10px 0;
15 |  border: 1px solid #ddd;
16 |  border-radius: 5px;
17 |  }
18 |  input[type="submit"] {
19 |  background-color: #4CAF50;
20 |  color: white;
21 |  cursor: pointer;
22 |  }
23 |  input[type="submit"]:hover {
24 |  background-color: #45a049;
25 |  }
26 |  </style>
27 | </head>
28 | <body>
29 | <form>
30 |  <input type="text" placeholder="Your Name">
31 |  <input type="email" placeholder="Your Email">
32 |  <input type="submit" value="Subscribe">
33 | </form>
34 | </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/Chapter5/CSS Gradient Background Animation:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes gradientAnimation {
 6 |  0% {background-position: 0% 50%;}
 7 |  50% {background-position: 100% 50%;}
 8 |  100% {background-position: 0% 50%;}
 9 |  }
10 |  body {
11 |  height: 100vh;
12 |  background: linear-gradient(270deg, #6a11cb, #2575fc);
13 |  background-size: 200% 200%;
14 |  animation: gradientAnimation 15s ease infinite;
15 |  }
16 |  </style>
17 | </head>
18 | <body>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter5/CSS Hover Image Gallery:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .gallery {
 6 |  display: flex;
 7 |  flex-wrap: wrap;
 8 |  }
 9 |  .img-wrap {
10 |  position: relative;
11 |  width: 200px;
12 |  height: 200px;
13 |  margin: 10px;
14 |  overflow: hidden;
15 |  }
16 |  .img-wrap img {
17 |  width: 100%;
18 |  height: 100%;
19 |  transition: transform 0.5s ease;
20 |  }
21 |  .img-wrap:hover img {
22 |  transform: scale(1.1);
23 |  }
24 |  </style>
25 | </head>
26 | <body>
27 | <div class="gallery">
28 |  <div class="img-wrap">
29 |  <img src="image1.jpg" alt="Image 1">
30 |  </div>
31 |  <div class="img-wrap">
32 |  <img src="image2.jpg" alt="Image 2">
33 |  </div>
34 |  <!-- More images -->
35 | </div>
36 | </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/Chapter5/CSS Keyframe Animation:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes slidein {
 6 |  from {
 7 |  transform: translateX(0%);
 8 |  }
 9 |  to {
10 |  transform: translateX(100%);
11 |  }
12 |  }
13 |  .animated-element {
14 |  width: 100px;
15 |  height: 100px;
16 |  background-color: red;
17 |  animation: slidein 3s infinite alternate;
18 |  }
19 |  </style>
20 | </head>
21 | <body>
22 | <div class="animated-element"></div>
23 | </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/Chapter5/CSS Sticky Footer:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  body, html {
 6 |  margin: 0;
 7 |  padding: 0;
 8 |  height: 100%;
 9 |  }
10 |  .content {
11 |  min-height: 100%;
12 |  padding-bottom: 50px; /* Equal to footer height */
13 |  }
14 |  .footer {
15 |  position: relative;
16 |  margin-top: -50px; /* Equal to footer height */
17 |  height: 50px;
18 |  background-color: #333;
19 |  color: #fff;
20 |  text-align: center;
21 |  line-height: 50px;
22 |  }
23 |  </style>
24 | </head>
25 | <body>
26 | <div class="content">
27 |  <!-- Content goes here -->
28 | </div>
29 | <div class="footer">
30 |  Sticky Footer
31 | </div>
32 | </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/Chapter5/Creating a CSS-only Accordion:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .accordion input {
 6 |  display: none;
 7 |  }
 8 |  .accordion label {
 9 |  display: block;
10 |  background-color: #eee;
11 |  padding: 10px;
12 |  border: 1px solid #ddd;
13 |  margin-top: -1px;
14 |  cursor: pointer;
15 |  }
16 |  .accordion .content {
17 |  display: none;
18 |  overflow: hidden;
19 |  background-color: #f9f9f9;
20 |  border: 1px solid #ddd;
21 |  }
22 |  .accordion input:checked + label + .content {
23 |  display: block;
24 |  }
25 |  </style>
26 | </head>
27 | <body>
28 | <div class="accordion">
29 |  <input type="checkbox" id="acc1" name="accordion">
30 |  <label for="acc1">Section 1</label>
31 |  <div class="content">
32 |  <p>This is the content of section 1.</p>
33 |  </div>
34 |  <input type="checkbox" id="acc2" name="accordion">
35 |  <label for="acc2">Section 2</label>
36 |  <div class="content">
37 |  <p>This is the content of section 2.</p>
38 |  </div>
39 | </div>
40 | </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/Chapter5/Custom Checkbox Styles:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .checkbox-custom {
 6 |  display: none;
 7 |  }
 8 |  .checkbox-custom + label {
 9 |  position: relative;
10 |  padding-left: 25px;
11 |  cursor: pointer;
12 |  display: inline-block;
13 |  }
14 |  .checkbox-custom + label:before {
15 |  content: '';
16 |  position: absolute;
17 |  left: 0;
18 |  top: 0;
19 |  width: 15px;
20 |  height: 15px;
21 |  border: 2px solid #555;
22 |  border-radius: 3px;
23 |  background: white;
24 |  }
25 |  .checkbox-custom:checked + label:before {
26 |  background: #555;
27 |  }
28 |  .checkbox-custom:checked + label:after {
29 |  content: '';
30 |  position: absolute;
31 |  left: 4px;
32 |  top: 8px;
33 |  width: 5px;
34 |  height: 10px;
35 |  border: solid white;
36 |  border-width: 0 3px 3px 0;
37 |  transform: rotate(45deg);
38 |  }
39 |  </style>
40 | </head>
41 | <body>
42 | <input type="checkbox" id="check1" class="checkbox-custom">
43 | <label for="check1">Custom Checkbox</label>
44 | </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/Chapter5/Flip Card Effect using CSS:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .card {
 6 |  perspective: 1000px;
 7 |  }
 8 |  .card-inner {
 9 |  width: 200px;
10 |  height: 300px;
11 |  transition: transform 0.6s;
12 |  transform-style: preserve-3d;
13 |  cursor: pointer;
14 |  }
15 |  .card:hover .card-inner {
16 |  transform: rotateY(180deg);
17 |  }
18 |  .card-front, .card-back {
19 |  position: absolute;
20 |  width: 100%;
21 |  height: 100%;
22 |  backface-visibility: hidden;
23 |  display: flex;
24 |  align-items: center;
25 |  justify-content: center;
26 |  font-size: 24px;
27 |  color: white;
28 |  border-radius: 10px;
29 |  }
30 |  .card-front {
31 |  background: #ff7e67;
32 |  }
33 |  .card-back {
34 |  background: #67a9ff;
35 |  transform: rotateY(180deg);
36 |  }
37 |  </style>
38 | </head>
39 | <body>
40 | <div class="card">
41 |  <div class="card-inner">
42 |  <div class="card-front">Front</div>
43 |  <div class="card-back">Back</div>
44 |  </div>
45 | </div>
46 | </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/Chapter5/Hover Over Image Effects:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .image-wrapper {
 6 |  position: relative;
 7 |  width: 200px;
 8 |  }
 9 |  .info {
10 |  position: absolute;
11 |  bottom: 0;
12 |  background: rgba(0, 0, 0, 0.5);
13 |  color: #fff;
14 |  width: 100%;
15 |  text-align: center;
16 |  padding: 10px;
17 |  opacity: 0;
18 |  transition: opacity 0.5s;
19 |  }
20 |  .image-wrapper:hover .info {
21 |  opacity: 1;
22 |  }
23 |  </style>
24 | </head>
25 | <body>
26 | <div class="image-wrapper">
27 |  <img src="Images/image1.png" alt="Description" width="200">
28 |  <div class="info">Additional Info</div>
29 | </div>
30 | </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/Chapter5/Pure CSS Modal Popup:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .modal {
 6 |  display: none;
 7 |  position: fixed;
 8 |  z-index: 1;
 9 |  left: 0;
10 |  top: 0;
11 |  width: 100%;
12 |  height: 100%;
13 |  overflow: auto;
14 |  background-color: rgba(0,0,0,0.4);
15 |  padding-top: 100px;
16 |  }
17 |  .modal-content {
18 |  background-color: #fefefe;
19 |  margin: auto;
20 |  padding: 20px;
21 |  border: 1px solid #888;
22 |  width: 80%;
23 |  }
24 |  .modal:target {
25 |  display: block;
26 |  }
27 |  </style>
28 | </head>
29 | <body>
30 | <a href="#myModal">Open Modal</a>
31 | <div id="myModal" class="modal">
32 |  <div class="modal-content">
33 |  <p>This is a modal popup!</p>
34 |  </div>
35 | </div>
36 | </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/Chapter5/Responsive Tiles Layout:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .tile-container {
 6 |  display: grid;
 7 |  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 8 |  gap: 10px;
 9 |  padding: 10px;
10 |  }
11 |  .tile {
12 |  background-color: #ccc;
13 |  padding: 20px;
14 |  text-align: center;
15 |  }
16 |  </style>
17 | </head>
18 | <body>
19 | <div class="tile-container">
20 |  <div class="tile">Tile 1</div>
21 |  <div class="tile">Tile 2</div>
22 |  <div class="tile">Tile 3</div>
23 |  <!-- Add more tiles as needed -->
24 | </div>
25 | </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/Chapter6/Animated Loading Spinner:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes spin {
 6 |  0% { transform: rotate(0deg); }
 7 |  100% { transform: rotate(360deg); }
 8 |  }
 9 |  .spinner {
10 |  border: 4px solid rgba(255, 255, 255, 0.3);
11 |  border-top: 4px solid #555;
12 |  border-radius: 50%;
13 |  width: 50px;
14 |  height: 50px;
15 |  animation: spin 2s linear infinite;
16 |  margin: 0 auto;
17 |  }
18 |  </style>
19 | </head>
20 | <body>
21 | <div class="spinner"></div>
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/Chapter6/CSS Grid Area Layout:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .grid-container {
 6 |  display: grid;
 7 |  grid-template-columns: repeat(3, 1fr);
 8 |  grid-template-rows: auto;
 9 |  grid-gap: 20px;
10 |  grid-template-areas: 
11 |  "header header header"
12 |  "sidebar content content"
13 |  "footer footer footer";
14 |  }
15 |  .header { grid-area: header; background-color: #8ca0ff; }
16 |  .sidebar { grid-area: sidebar; background-color: #ffa08c; }
17 |  .content { grid-area: content; background-color: #8cffa0; }
18 |  .footer { grid-area: footer; background-color: #ffff8c; }
19 |  </style>
20 | </head>
21 | <body>
22 | <div class="grid-container">
23 |  <div class="header">Header</div>
24 |  <div class="sidebar">Sidebar</div>
25 |  <div class="content">Content</div>
26 |  <div class="footer">Footer</div>
27 | </div>
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/Chapter6/CSS Star Ratings:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .star-rating {
 6 |  direction: rtl;
 7 |  font-size: 30px;
 8 |  unicode-bidi: bidi-override;
 9 |  display: inline-block;
10 |  }
11 |  .star-rating input {
12 |  display: none;
13 |  }
14 |  .star-rating label {
15 |  color: #ccc;
16 |  cursor: pointer;
17 |  }
18 |  .star-rating label:hover,
19 |  .star-rating label:hover ~ label,
20 |  .star-rating input:checked ~ label {
21 |  color: gold;
22 |  }
23 |  </style>
24 | </head>
25 | <body>
26 | <div class="star-rating">
27 |  <input type="radio" id="star5" name="rating" value="5"><label for="star5">★</label>
28 |  <input type="radio" id="star4" name="rating" value="4"><label for="star4">★</label>
29 |  <input type="radio" id="star3" name="rating" value="3"><label for="star3">★</label>
30 |  <input type="radio" id="star2" name="rating" value="2"><label for="star2">★</label>
31 |  <input type="radio" id="star1" name="rating" value="1"><label for="star1">★</label>
32 | </div>
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/Chapter6/CSS-only Tabs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .tab-content {
 6 |  display: none;
 7 |  }
 8 |  .tab-content:target {
 9 |  display: block;
10 |  }
11 |  .tabs a {
12 |  padding: 10px;
13 |  text-decoration: none;
14 |  color: #000;
15 |  background: #eee;
16 |  margin-right: 5px;
17 |  }
18 |  </style>
19 | </head>
20 | <body>
21 | <div class="tabs">
22 |  <a href="#tab1">Tab 1</a>
23 |  <a href="#tab2">Tab 2</a>
24 | </div>
25 | <div id="tab1" class="tab-content">
26 |  Content for Tab 1
27 | </div>
28 | <div id="tab2" class="tab-content">
29 |  Content for Tab 2
30 | </div>
31 | </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/Chapter6/Creating a Masonry Layout with CSS Columns:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .masonry {
 6 |  column-count: 4;
 7 |  column-gap: 1em;
 8 |  }
 9 |  .masonry-item {
10 |  background-color: #eee;
11 |  margin-bottom: 1em;
12 |  break-inside: avoid;
13 |  }
14 |  @media (max-width: 800px) {
15 |  .masonry {
16 |  column-count: 2;
17 |  }
18 |  }
19 |  @media (max-width: 400px) {
20 |  .masonry {
21 |  column-count: 1;
22 |  }
23 |  }
24 |  </style>
25 | </head>
26 | <body>
27 | <div class="masonry">
28 |  <div class="masonry-item">Item 1</div>
29 |  <div class="masonry-item">Item 2</div>
30 |  <div class="masonry-item">Item 3</div>
31 |  <!-- More items -->
32 | </div>
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/Chapter6/Custom Animated Checkbox:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .checkbox-wrapper {
 6 |  position: relative;
 7 |  display: inline-block;
 8 |  width: 50px;
 9 |  height: 25px;
10 |  }
11 |  .checkbox {
12 |  opacity: 0;
13 |  width: 0;
14 |  height: 0;
15 |  }
16 |  .slider {
17 |  position: absolute;
18 |  cursor: pointer;
19 |  top: 0;
20 |  left: 0;
21 |  right: 0;
22 |  bottom: 0;
23 |  background-color: #ccc;
24 |  transition: .4s;
25 |  border-radius: 34px;
26 |  }
27 |  .slider:before {
28 |  position: absolute;
29 |  content: "";
30 |  height: 20px;
31 |  width: 20px;
32 |  left: 4px;
33 |  bottom: 2.5px;
34 |  background-color: white;
35 |  transition: .4s;
36 |  border-radius: 50%;
37 |  }
38 |  .checkbox:checked + .slider {
39 |  background-color: #2196F3;
40 |  }
41 |  .checkbox:checked + .slider:before {
42 |  transform: translateX(26px);
43 |  }
44 |  </style>
45 | </head>
46 | <body>
47 | <label class="checkbox-wrapper">
48 |  <input type="checkbox" class="checkbox">
49 |  <span class="slider"></span>
50 | </label>
51 | </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/Chapter6/Hover to Reveal Content:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .hover-reveal {
 6 |  position: relative;
 7 |  width: 200px;
 8 |  height: 200px;
 9 |  background: #333;
10 |  color: #fff;
11 |  overflow: hidden;
12 |  }
13 |  .hover-reveal-content {
14 |  position: absolute;
15 |  bottom: 0;
16 |  background: rgba(0, 0, 0, 0.7);
17 |  width: 100%;
18 |  transform: translateY(100%);
19 |  transition: transform 0.5s ease;
20 |  padding: 10px;
21 |  }
22 |  .hover-reveal:hover .hover-reveal-content {
23 |  transform: translateY(0);
24 |  }
25 |  </style>
26 | </head>
27 | <body>
28 | <div class="hover-reveal">
29 |  Hover over me
30 |  <div class="hover-reveal-content">Revealed content goes here</div>
31 | </div>
32 | </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/Chapter6/Infinite Scrolling Background:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes scrollBackground {
 6 |  from { background-position: 0 0; }
 7 |  to { background-position: 0 100%; }
 8 |  }
 9 |  body {
10 |  height: 100vh;
11 |  background-image: url('background-pattern.png');
12 |  background-repeat: repeat-y;
13 |  animation: scrollBackground 15s linear infinite;
14 |  }
15 |  </style>
16 | </head>
17 | <body>
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter6/Pure CSS Dropdown Navigation Menu:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .nav {
 6 |  list-style-type: none;
 7 |  margin: 0;
 8 |  padding: 0;
 9 |  overflow: hidden;
10 |  background-color: #333;
11 |  }
12 |  .nav li {
13 |  float: left;
14 |  }
15 |  .nav li a {
16 |  display: block;
17 |  color: white;
18 |  text-align: center;
19 |  padding: 14px 16px;
20 |  text-decoration: none;
21 |  }
22 |  .dropdown-content {
23 |  display: none;
24 |  position: absolute;
25 |  background-color: #f9f9f9;
26 |  min-width: 160px;
27 |  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
28 |  z-index: 1;
29 |  }
30 |  .dropdown-content a {
31 |  color: black;
32 |  padding: 12px 16px;
33 |  text-decoration: none;
34 |  display: block;
35 |  text-align: left;
36 |  }
37 |  .nav li:hover .dropdown-content {
38 |  display: block;
39 |  }
40 |  </style>
41 | </head>
42 | <body>
43 | <ul class="nav">
44 |  <li><a href="#home">Home</a></li>
45 |  <li><a href="#news">News</a></li>
46 |  <li>
47 |  <a href="#contact">Dropdown</a>
48 |  <div class="dropdown-content">
49 |  <a href="#">Link 1</a>
50 |  <a href="#">Link 2</a>
51 |  <a href="#">Link 3</a>
52 |  </div>
53 |  </li>
54 | </ul>
55 | </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/Chapter6/Transforming Navigation Bar on Scroll:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .navbar {
 6 |  position: fixed;
 7 |  width: 100%;
 8 |  background-color: #333;
 9 |  color: #fff;
10 |  padding: 10px;
11 |  transition: all 0.3s;
12 |  }
13 |  .navbar.scrolled {
14 |  background-color: #000;
15 |  padding: 5px;
16 |  font-size: 90%;
17 |  }
18 |  </style>
19 | </head>
20 | <body>
21 | <div class="navbar scrolled">
22 |  This is the navbar content.
23 | </div>
24 | <div style="margin-top: 60px; height: 2000px;">
25 |  Scroll down the page to see the effect on the navbar.
26 | </div>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/Chapter7/Animated Background Color Switcher:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .color-switcher {
 6 |  padding: 20px;
 7 |  text-align: center;
 8 |  background-color: #3498db;
 9 |  transition: background-color 0.5s ease;
10 |  cursor: pointer;
11 |  }
12 |  .color-switcher:hover {
13 |  background-color: #2ecc71;
14 |  }
15 |  </style>
16 | </head>
17 | <body>
18 | <div class="color-switcher">Hover over me!</div>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter7/CSS Scroll Snap:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .scroll-container {
 6 |  display: flex;
 7 |  overflow-x: auto;
 8 |  scroll-snap-type: x mandatory;
 9 |  -webkit-overflow-scrolling: touch;
10 |  }
11 |  .scroll-item {
12 |  scroll-snap-align: start;
13 |  flex: none;
14 |  width: 100vw;
15 |  height: 100vh;
16 |  display: flex;
17 |  justify-content: center;
18 |  align-items: center;
19 |  font-size: 2em;
20 |  }
21 |  </style>
22 | </head>
23 | <body>
24 | <div class="scroll-container">
25 |  <div class="scroll-item" style="background: lightcoral;">Item 1</div>
26 |  <div class="scroll-item" style="background: lightblue;">Item 2</div>
27 |  <div class="scroll-item" style="background: lightgreen;">Item 3</div>
28 |  <!-- More scroll-items -->
29 | </div>
30 | </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/Chapter7/CSS-only Carousel:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .carousel {
 6 |  display: flex;
 7 |  overflow-x: auto;
 8 |  scroll-snap-type: x mandatory;
 9 |  }
10 |  .carousel-item {
11 |  scroll-snap-align: start;
12 |  flex: none;
13 |  width: 100vw;
14 |  position: relative;
15 |  }
16 |  .carousel-item img {
17 |  width: 100%;
18 |  height: auto;
19 |  }
20 |  /* Navigation buttons omitted for brevity */
21 |  </style>
22 | </head>
23 | <body>
24 | <div class="carousel">
25 |  <div class="carousel-item">
26 |  <img src="https://via.placeholder.com/800x400?text=Slide+1" alt="Slide 1">
27 |  </div>
28 |  <div class="carousel-item">
29 |  <img src="https://via.placeholder.com/800x400?text=Slide+2" alt="Slide 2">
30 |  </div>
31 |  <!-- Add more slides as needed -->
32 | </div>
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/Chapter7/CSS-only Slideshow:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <style>
 5 |         .slideshow-container {
 6 |             max-width: 600px;
 7 |             position: relative;
 8 |             margin: auto;
 9 |             overflow: hidden;
10 |         }
11 |         .slide {
12 |             display: none;
13 |         }
14 |         input[type="radio"] {
15 |             display: none;
16 |         }
17 |         #slide1:checked ~ .slideshow-container #slide1-content,
18 |         #slide2:checked ~ .slideshow-container #slide2-content {
19 |             display: block;
20 |         }
21 |         .dot-container {
22 |             text-align: center;
23 |             padding: 20px;
24 |             background: #ddd;
25 |         }
26 |         .dot {
27 |             cursor: pointer;
28 |             height: 15px;
29 |             width: 15px;
30 |             margin: 0 2px;
31 |             background-color: #bbb;
32 |             border-radius: 50%;
33 |             display: inline-block;
34 |             transition: background-color 0.6s ease;
35 |         }
36 |         .dot:hover, .dot:focus {
37 |             background-color: #717171;
38 |         }
39 |         /* No CSS for .prev, .next because they are not functional without JavaScript */
40 |     </style>
41 | </head>
42 | <body>
43 | <input id="slide1" type="radio" name="slides" checked="checked">
44 | <input id="slide2" type="radio" name="slides">
45 | <div class="slideshow-container">
46 |     <div class="slide" id="slide1-content">
47 |         <img src="https://via.placeholder.com/600x400" alt="Slide 1">
48 |     </div>
49 |     <div class="slide" id="slide2-content">
50 |         <img src="https://via.placeholder.com/600x401" alt="Slide 2">
51 |     </div>
52 |     <!-- Add more slides as needed -->
53 | </div>
54 | <div class="dot-container">
55 |     <label for="slide1" class="dot"></label>
56 |     <label for="slide2" class="dot"></label>
57 |     <!-- Add more dots as needed -->
58 | </div>
59 | </body>
60 | </html>
61 | 


--------------------------------------------------------------------------------
/Chapter7/Creating a Typewriter Effect:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes typewriter {
 6 |  from { width: 0; }
 7 |  to { width: 100%; }
 8 |  }
 9 |  .typewriter {
10 |  border-right: 3px solid black;
11 |  white-space: nowrap;
12 |  overflow: hidden;
13 |  width: 0;
14 |  animation: typewriter 5s steps(40, end) forwards;
15 |  }
16 |  .container {
17 |  max-width: 50%;
18 |  margin: 0 auto;
19 |  font-family: monospace;
20 |  font-size: 20px;
21 |  }
22 |  </style>
23 | </head>
24 | <body>
25 | <div class="container">
26 |  <div class="typewriter">This is a typewriter effect using CSS.</div>
27 | </div>
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/Chapter7/Dynamic Shadow on Hover:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .dynamic-shadow {
 6 |  transition: box-shadow 0.3s ease;
 7 |  display: inline-block;
 8 |  padding: 20px;
 9 |  margin: 20px;
10 |  background-color: #fff;
11 |  border-radius: 8px;
12 |  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
13 |  }
14 |  .dynamic-shadow:hover {
15 |  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
16 |  }
17 |  </style>
18 | </head>
19 | <body>
20 | <div class="dynamic-shadow">Hover over me!</div>
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/Chapter7/Flip Card on Hover:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .card {
 6 |  perspective: 1000px;
 7 |  width: 200px;
 8 |  height: 300px;
 9 |  position: relative;
10 |  margin: 50px;
11 |  }
12 |  .card-inner {
13 |  transition: transform 0.6s;
14 |  transform-style: preserve-3d;
15 |  position: absolute;
16 |  width: 100%;
17 |  height: 100%;
18 |  }
19 |  .card:hover .card-inner {
20 |  transform: rotateY(180deg);
21 |  }
22 |  .card-face {
23 |  position: absolute;
24 |  width: 100%;
25 |  height: 100%;
26 |  backface-visibility: hidden;
27 |  }
28 |  .card-front,
29 |  .card-back {
30 |  display: flex;
31 |  align-items: center;
32 |  justify-content: center;
33 |  font-size: 24px;
34 |  }
35 |  .card-front {
36 |  background: lightblue;
37 |  }
38 |  .card-back {
39 |  background: lightcoral;
40 |  transform: rotateY(180deg);
41 |  }
42 |  </style>
43 | </head>
44 | <body>
45 | <div class="card">
46 |  <div class="card-inner">
47 |  <div class="card-face card-front">Front</div>
48 |  <div class="card-face card-back">Back</div>
49 |  </div>
50 | </div>
51 | </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/Chapter7/Night Mode Toggle Button:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  :root {
 6 |  --background-color: #fff;
 7 |  --text-color: #000;
 8 |  }
 9 |  body[night-mode="true"] {
10 |  --background-color: #333;
11 |  --text-color: #fff;
12 |  }
13 |  body {
14 |  background-color: var(--background-color);
15 |  color: var(--text-color);
16 |  transition: background-color 0.5s, color 0.5s;
17 |  }
18 |  .mode-toggle {
19 |  position: fixed;
20 |  top: 20px;
21 |  right: 20px;
22 |  cursor: pointer;
23 |  }
24 |  </style>
25 | </head>
26 | <body>
27 | <div class="mode-toggle">Toggle Night Mode</div>
28 | <script>
29 |  document.querySelector('.mode-toggle').addEventListener('click', function() {
30 |  const isNightMode = document.body.getAttribute('night-mode') === 'true';
31 |  document.body.setAttribute('night-mode', !isNightMode);
32 |  });
33 | </script>
34 | </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/Chapter7/Pure CSS Collapsible Sections:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .accordion input {
 6 |  display: none;
 7 |  }
 8 |  .accordion label {
 9 |  display: block;
10 |  background-color: #eee;
11 |  cursor: pointer;
12 |  padding: 10px;
13 |  border: 1px solid #ddd;
14 |  }
15 |  .accordion .content {
16 |  max-height: 0;
17 |  overflow: hidden;
18 |  transition: max-height 0.3s ease-out;
19 |  background-color: #f9f9f9;
20 |  }
21 |  .accordion input:checked + label + .content {
22 |  max-height: 100px; /* Adjust as necessary */
23 |  }
24 |  </style>
25 | </head>
26 | <body>
27 | <div class="accordion">
28 |  <input type="checkbox" id="section1" name="accordion">
29 |  <label for="section1">Section 1</label>
30 |  <div class="content">
31 |  <p>This is the collapsible content for section 1. Expand or collapse me!</p>
32 |  </div>
33 | </div>
34 | </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/Chapter7/Responsive Cards with Flexbox:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .card-container {
 6 |  display: flex;
 7 |  flex-wrap: wrap;
 8 |  gap: 20px;
 9 |  padding: 20px;
10 |  justify-content: center;
11 |  }
12 |  .card {
13 |  flex: 1 1 200px;
14 |  border: 1px solid #ccc;
15 |  border-radius: 10px;
16 |  padding: 20px;
17 |  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
18 |  }
19 |  .card img {
20 |  max-width: 100%;
21 |  height: auto;
22 |  border-radius: 10px 10px 0 0;
23 |  }
24 |  .card-content {
25 |  padding: 10px;
26 |  }
27 |  </style>
28 | </head>
29 | <body>
30 | <div class="card-container">
31 |  <div class="card">
32 |  <img src="https://via.placeholder.com/150" alt="Placeholder">
33 |  <div class="card-content">Card 1</div>
34 |  </div>
35 |  <div class="card">
36 |  <img src="https://via.placeholder.com/150" alt="Placeholder">
37 |  <div class="card-content">Card 2</div>
38 |  </div>
39 |  <!-- Add more cards as needed -->
40 | </div>
41 | </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/Chapter8/Animated Gradient Background:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes gradientBackground {
 6 |  0% { background-position: 0% 50%; }
 7 |  50% { background-position: 100% 50%; }
 8 |  100% { background-position: 0% 50%; }
 9 |  }
10 |  body {
11 |  height: 100vh;
12 |  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
13 |  background-size: 400% 400%;
14 |  animation: gradientBackground 15s ease infinite;
15 |  }
16 |  </style>
17 | </head>
18 | <body>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter8/CSS 3D Cube:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .scene {
 6 |  width: 200px;
 7 |  height: 200px;
 8 |  perspective: 600px;
 9 |  margin: 100px auto;
10 |  }
11 |  .cube {
12 |  width: 100%;
13 |  height: 100%;
14 |  position: relative;
15 |  transform-style: preserve-3d;
16 |  animation: rotateCube 10s infinite linear;
17 |  }
18 |  .cube:hover {
19 |  animation-play-state: paused;
20 |  }
21 |  .face {
22 |  position: absolute;
23 |  width: 200px;
24 |  height: 200px;
25 |  background: rgba(255, 255, 255, 0.8);
26 |  border: 1px solid #ccc;
27 |  }
28 |  .front { transform: translateZ(100px); }
29 |  .back { transform: rotateY(180deg) translateZ(100px); }
30 |  .right { transform: rotateY(90deg) translateZ(100px); }
31 |  .left { transform: rotateY(-90deg) translateZ(100px); }
32 |  .top { transform: rotateX(90deg) translateZ(100px); }
33 |  .bottom { transform: rotateX(-90deg) translateZ(100px); }
34 |  @keyframes rotateCube {
35 |  from { transform: rotateX(0deg) rotateY(0deg); }
36 |  to { transform: rotateX(360deg) rotateY(360deg); }
37 |  }
38 |  </style>
39 | </head>
40 | <body>
41 | <div class="scene">
42 |  <div class="cube">
43 |  <div class="face front"></div>
44 |  <div class="face back"></div>
45 |  <div class="face right"></div>
46 |  <div class="face left"></div>
47 |  <div class="face top"></div>
48 |  <div class="face bottom"></div>
49 |  </div>
50 | </div>
51 | </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/Chapter8/CSS Variables Theme Switcher:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  :root {
 6 |  --primary-color: #3498db;
 7 |  --secondary-color: #2ecc71;
 8 |  }
 9 |  body {
10 |  background-color: var(--primary-color);
11 |  color: var(--secondary-color);
12 |  transition: background-color 0.3s, color 0.3s;
13 |  }
14 |  .theme-switcher {
15 |  cursor: pointer;
16 |  padding: 10px;
17 |  background-color: #fff;
18 |  border: none;
19 |  position: fixed;
20 |  bottom: 20px;
21 |  right: 20px;
22 |  }
23 |  </style>
24 | </head>
25 | <body>
26 | <button class="theme-switcher" onclick="switchTheme()">Switch Theme</button>
27 | <script>
28 |  function switchTheme() {
29 |  const root = document.documentElement;
30 |  root.style.setProperty('--primary-color', '#2ecc71');
31 |  root.style.setProperty('--secondary-color', '#3498db');
32 |  }
33 | </script>
34 | </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/Chapter8/Diagonal Section Divider:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <style>
 5 |         body {
 6 |             margin: 0;
 7 |             padding: 0;
 8 |             font-family: Arial, sans-serif;
 9 |         }
10 |         .section {
11 |             position: relative;
12 |             padding: 50px;
13 |             background: #3498db; /* Blue background */
14 |             overflow: hidden; /* Ensures no overflow from the pseudo-elements */
15 |         }
16 |         .section + .section {
17 |             background: #2ecc71; /* Green background for the next section */
18 |         }
19 |         /* Create a pseudo-element for the first section that overlaps into the next section */
20 |         .section::after {
21 |             content: '';
22 |             position: absolute;
23 |             left: 0;
24 |             right: 0;
25 |             bottom: 0; /* Position at the bottom */
26 |             height: 50px; /* Height of the diagonal effect */
27 |             background: #2ecc71; /* This should be the background color of the NEXT section */
28 |             transform: skewY(-3deg); /* Creates the diagonal skew */
29 |             transform-origin: 100%; /* Aligns the skew correctly */
30 |         }
31 |     </style>
32 | </head>
33 | <body>
34 | <div class="section">Section 1</div>
35 | <div class="section">Section 2</div>
36 | <!-- Additional sections can follow the same pattern -->
37 | </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/Chapter8/Expanding Search Bar:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .search-bar {
 6 |  width: 50px;
 7 |  height: 30px;
 8 |  border: 2px solid #ddd;
 9 |  padding: 5px;
10 |  transition: width 0.4s ease-out;
11 |  overflow: hidden;
12 |  cursor: pointer;
13 |  }
14 |  .search-bar:focus-within {
15 |  width: 200px;
16 |  cursor: text;
17 |  }
18 |  .search-bar input[type="text"] {
19 |  border: none;
20 |  outline: none;
21 |  width: 100%;
22 |  }
23 |  </style>
24 | </head>
25 | <body>
26 | <div class="search-bar" onclick="this.querySelector('input[type=\'text\']').focus();">
27 |  <input type="text" placeholder="Search...">
28 | </div>
29 | </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/Chapter8/Floating Action Button with Tooltip:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .fab {
 6 |  position: fixed;
 7 |  bottom: 20px;
 8 |  right: 20px;
 9 |  width: 56px;
10 |  height: 56px;
11 |  border-radius: 50%;
12 |  background-color: #007bff;
13 |  color: #fff;
14 |  text-align: center;
15 |  line-height: 56px;
16 |  font-size: 24px;
17 |  cursor: pointer;
18 |  }
19 |  .tooltip {
20 |  visibility: hidden;
21 |  width: 120px;
22 |  background-color: black;
23 |  color: #fff;
24 |  text-align: center;
25 |  border-radius: 6px;
26 |  padding: 5px 0;
27 |  position: absolute;
28 |  z-index: 1;
29 |  bottom: 100%;
30 |  left: 50%;
31 |  margin-left: -60px;
32 |  opacity: 0;
33 |  transition: opacity 0.3s, visibility 0.3s;
34 |  }
35 |  .fab:hover .tooltip {
36 |  visibility: visible;
37 |  opacity: 1;
38 |  }
39 |  </style>
40 | </head>
41 | <body>
42 | <div class="fab">+
43 |  <div class="tooltip">Add New Item</div>
44 | </div>
45 | </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/Chapter8/Hover-over Tooltips:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .tooltip {
 6 |  position: relative;
 7 |  display: inline-block;
 8 |  }
 9 |  .tooltip .tooltiptext {
10 |  visibility: hidden;
11 |  width: 120px;
12 |  background-color: black;
13 |  color: #fff;
14 |  text-align: center;
15 |  border-radius: 6px;
16 |  padding: 5px 0;
17 |  /* Position the tooltip */
18 |  position: absolute;
19 |  z-index: 1;
20 |  bottom: 100%;
21 |  left: 50%;
22 |  margin-left: -60px;
23 |  opacity: 0;
24 |  transition: opacity 0.3s;
25 |  }
26 |  .tooltip:hover .tooltiptext {
27 |  visibility: visible;
28 |  opacity: 1;
29 |  }
30 |  </style>
31 | </head>
32 | <body>
33 | <div class="tooltip">Hover over me
34 |  <span class="tooltiptext">Tooltip text</span>
35 | </div>
36 | </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/Chapter8/Pulse Animation Effect:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes pulse {
 6 |  0% { transform: scale(1); }
 7 |  50% { transform: scale(1.2); }
 8 |  100% { transform: scale(1); }
 9 |  }
10 |  .pulse {
11 |  display: inline-block;
12 |  padding: 20px;
13 |  background-color: #e74c3c;
14 |  color: #fff;
15 |  border-radius: 50%;
16 |  animation: pulse 2s infinite;
17 |  }
18 |  </style>
19 | </head>
20 | <body>
21 | <div class="pulse">!</div>
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/Chapter8/Responsive CSS Timeline:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .timeline {
 6 |  position: relative;
 7 |  padding: 20px 0;
 8 |  margin-left: 20px;
 9 |  }
10 |  .timeline::before {
11 |  content: '';
12 |  position: absolute;
13 |  left: 0;
14 |  top: 0;
15 |  bottom: 0;
16 |  width: 4px;
17 |  background: #ddd;
18 |  }
19 |  .event {
20 |  position: relative;
21 |  margin-bottom: 20px;
22 |  padding-left: 25px;
23 |  }
24 |  .event::before {
25 |  content: '';
26 |  position: absolute;
27 |  left: -8px;
28 |  top: 5px;
29 |  height: 16px;
30 |  width: 16px;
31 |  border-radius: 50%;
32 |  background: #fff;
33 |  border: 4px solid #3498db;
34 |  }
35 |  .event-content {
36 |  padding: 10px;
37 |  background: #f9f9f9;
38 |  border-radius: 4px;
39 |  }
40 |  @media screen and (max-width: 600px) {
41 |  .timeline {
42 |  margin-left: 10px;
43 |  }
44 |  .event {
45 |  padding-left: 20px;
46 |  }
47 |  .event::before {
48 |  left: -6px;
49 |  }
50 |  }
51 |  </style>
52 | </head>
53 | <body>
54 | <div class="timeline">
55 |  <div class="event">
56 |  <div class="event-content">Event 1</div>
57 |  </div>
58 |  <div class="event">
59 |  <div class="event-content">Event 2</div>
60 |  </div>
61 |  <!-- Add more events here -->
62 | </div>
63 | </body>
64 | </html>
65 | 


--------------------------------------------------------------------------------
/Chapter8/Rotating Words with CSS Animations:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes rotateWord {
 6 |  0% { opacity: 0; transform: translateY(-100%); }
 7 |  25% { opacity: 1; }
 8 |  75% { opacity: 1; }
 9 |  100% { opacity: 0; transform: translateY(100%); }
10 |  }
11 |  .rotating-words {
12 |  display: inline-block;
13 |  overflow: hidden;
14 |  }
15 |  .word {
16 |  display: inline-block;
17 |  animation: rotateWord 8s linear infinite 0s;
18 |  }
19 |  .word:nth-child(2) { animation-delay: 2s; }
20 |  .word:nth-child(3) { animation-delay: 4s; }
21 |  .word:nth-child(4) { animation-delay: 6s; }
22 |  </style>
23 | </head>
24 | <body>
25 | <div>
26 |  This is
27 |  <div class="rotating-words">
28 |  <span class="word">amazing!</span>
29 |  <span class="word">incredible!</span>
30 |  <span class="word">extraordinary!</span>
31 |  <span class="word">unbelievable!</span>
32 |  </div>
33 | </div>
34 | </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/Chapter9/Background Clip Text:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .clipped-background-text {
 6 |  font-size: 60px;
 7 |  background: linear-gradient(90deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
 8 |  -webkit-background-clip: text;
 9 |  color: transparent;
10 |  font-weight: bold;
11 |  text-align: center;
12 |  }
13 |  </style>
14 | </head>
15 | <body>
16 | <div class="clipped-background-text">Creative Text</div>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/Chapter9/CSS Hover Flip Card:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .flip-card {
 6 |  perspective: 1000px;
 7 |  width: 200px;
 8 |  height: 300px;
 9 |  position: relative;
10 |  margin: 20px;
11 |  }
12 |  .flip-card-inner {
13 |  position: absolute;
14 |  width: 100%;
15 |  height: 100%;
16 |  transition: transform 0.6s;
17 |  transform-style: preserve-3d;
18 |  }
19 |  .flip-card:hover .flip-card-inner {
20 |  transform: rotateY(180deg);
21 |  }
22 |  .flip-card-front, .flip-card-back {
23 |  position: absolute;
24 |  width: 100%;
25 |  height: 100%;
26 |  backface-visibility: hidden;
27 |  display: flex;
28 |  align-items: center;
29 |  justify-content: center;
30 |  font-size: 24px;
31 |  }
32 |  .flip-card-front {
33 |  background-color: #bbb;
34 |  }
35 |  .flip-card-back {
36 |  background-color: #2980b9;
37 |  color: white;
38 |  transform: rotateY(180deg);
39 |  }
40 |  </style>
41 | </head>
42 | <body>
43 | <div class="flip-card">
44 |  <div class="flip-card-inner">
45 |  <div class="flip-card-front">Front</div>
46 |  <div class="flip-card-back">Back</div>
47 |  </div>
48 | </div>
49 | </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/Chapter9/CSS Wave Animation:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .wave {
 6 |  display: inline-block;
 7 |  width: 5px;
 8 |  height: 20px;
 9 |  background-color: blue;
10 |  margin-right: 2px;
11 |  animation: waveAnimation 1s infinite ease-in-out;
12 |  }
13 |  @keyframes waveAnimation {
14 |  0%, 40%, 100% { transform: scaleY(0.4); }
15 |  20% { transform: scaleY(1); }
16 |  }
17 |  .container {
18 |  display: flex;
19 |  }
20 |  </style>
21 | </head>
22 | <body>
23 | <div class="container">
24 |  <div class="wave" style="animation-delay: 0s;"></div>
25 |  <div class="wave" style="animation-delay: 0.1s;"></div>
26 |  <div class="wave" style="animation-delay: 0.2s;"></div>
27 |  <!-- Add more waves as needed -->
28 | </div>
29 | </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/Chapter9/Glowing Text Effect:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .glowing-text {
 6 |  font-size: 32px;
 7 |  color: #fff;
 8 |  text-align: center;
 9 |  text-shadow: 0 0 10px #00E5FF, 0 0 20px #00E5FF, 0 0 30px #00E5FF, 0 0 40px #00E5FF;
10 |  font-family: Arial, sans-serif;
11 |  }
12 |  </style>
13 | </head>
14 | <body>
15 | <h1 class="glowing-text">Glowing Text</h1>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/Chapter9/Gradient Text Color:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .gradient-text {
 6 |  font-size: 36px;
 7 |  background: -webkit-linear-gradient(45deg, #ff6b6b, #5f27cd);
 8 |  -webkit-background-clip: text;
 9 |  -webkit-text-fill-color: transparent;
10 |  }
11 |  </style>
12 | </head>
13 | <body>
14 | <h1 class="gradient-text">Gradient Text</h1>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/Chapter9/Infinite Scrolling Text Animation:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .scrolling-text {
 6 |  white-space: nowrap;
 7 |  overflow: hidden;
 8 |  box-sizing: border-box;
 9 |  background: #333;
10 |  color: #fff;
11 |  padding: 10px;
12 |  }
13 |  .text {
14 |  display: inline-block;
15 |  padding-left: 100%;
16 |  animation: scroll 10s linear infinite;
17 |  }
18 |  @keyframes scroll {
19 |  from { transform: translateX(0); }
20 |  to { transform: translateX(-100%); }
21 |  }
22 |  </style>
23 | </head>
24 | <body>
25 | <div class="scrolling-text">
26 |  <span class="text">This is an infinitely scrolling text animation. Great for announcements or news. </span>
27 | </div>
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/Chapter9/Neumorphic Button Design:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .neu-button {
 6 |  background-color: #e0e0e0;
 7 |  border: none;
 8 |  padding: 10px 30px;
 9 |  font-size: 16px;
10 |  border-radius: 30px;
11 |  box-shadow: 8px 8px 15px #a3a3a3, -8px -8px 15px #ffffff;
12 |  cursor: pointer;
13 |  outline: none;
14 |  }
15 |  .neu-button:active {
16 |  box-shadow: inset 8px 8px 15px #a3a3a3, inset -8px -8px 15px #ffffff;
17 |  }
18 |  </style>
19 | </head>
20 | <body>
21 | <button class="neu-button">Click Me</button>
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/Chapter9/Pure CSS Accordion with Details Summary:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  details {
 6 |  border: 1px solid #aaa;
 7 |  border-radius: 4px;
 8 |  padding: 10px;
 9 |  margin-bottom: 10px;
10 |  background-color: #f9f9f9;
11 |  }
12 |  summary {
13 |  font-weight: bold;
14 |  margin: -10px -10px 10px;
15 |  padding: 10px;
16 |  background-color: #008CBA;
17 |  color: white;
18 |  cursor: pointer;
19 |  }
20 |  summary::-webkit-details-marker {
21 |  display: none;
22 |  }
23 |  </style>
24 | </head>
25 | <body>
26 | <details>
27 |  <summary>Question 1</summary>
28 |  <p>This is the answer to question 1.</p>
29 | </details>
30 | <details>
31 |  <summary>Question 2</summary>
32 |  <p>This is the answer to question 2.</p>
33 | </details>
34 | <!-- More questions -->
35 | </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/Chapter9/Responsive CSS Grid with Spanning Items:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .grid {
 6 |  display: grid;
 7 |  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
 8 |  gap: 10px;
 9 |  }
10 |  .grid-item {
11 |  background-color: #008CBA;
12 |  padding: 20px;
13 |  color: white;
14 |  text-align: center;
15 |  }
16 |  .span-2 {
17 |  grid-column: span 2;
18 |  }
19 |  @media (max-width: 600px) {
20 |  .span-2 {
21 |  grid-column: span 1;
22 |  }
23 |  }
24 |  </style>
25 | </head>
26 | <body>
27 | <div class="grid">
28 |  <div class="grid-item">Item 1</div>
29 |  <div class="grid-item span-2">Item 2</div>
30 |  <div class="grid-item">Item 3</div>
31 |  <!-- More items -->
32 | </div>
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/Chapter9/Responsive Sidebar with Flexbox:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .container {
 6 |  display: flex;
 7 |  flex-wrap: wrap;
 8 |  }
 9 |  .main-content, .sidebar {
10 |  padding: 20px;
11 |  }
12 |  .main-content {
13 |  flex: 1;
14 |  order: 2;
15 |  }
16 |  .sidebar {
17 |  flex-basis: 200px;
18 |  order: 1;
19 |  background-color: #f4f4f4;
20 |  }
21 |  @media (max-width: 600px) {
22 |  .sidebar {
23 |  flex-basis: 100%;
24 |  order: 2;
25 |  }
26 |  .main-content {
27 |  order: 1;
28 |  }
29 |  }
30 |  </style>
31 | </head>
32 | <body>
33 | <div class="container">
34 |  <div class="main-content">Main Content</div>
35 |  <div class="sidebar">Sidebar</div>
36 | </div>
37 | </body>
38 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Mastering CSS: Coding with Style - source code for exercises
2 | https://www.amazon.com/dp/B0D2DQ2Y3N or https://www.amazon.ca/dp/B0D2DQ2Y3N
3 | 


--------------------------------------------------------------------------------
/chapter10/CSS Clip-path Hover Effects:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .clip-hover {
 6 |  width: 200px;
 7 |  height: 200px;
 8 |  background-color: #3498db;
 9 |  transition: clip-path 0.5s ease-in-out;
10 |  clip-path: circle(50% at 50% 50%);
11 |  }
12 |  .clip-hover:hover {
13 |  clip-path: circle(75%);
14 |  }
15 |  </style>
16 | </head>
17 | <body>
18 | <div class="clip-hover"></div>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/chapter10/CSS Columns for Text Flow:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .multi-column-text {
 6 |  column-count: 3;
 7 |  column-gap: 20px;
 8 |  padding: 20px;
 9 |  border: 1px solid #ccc;
10 |  column-rule: 1px solid #ddd; /* Adds a rule between columns */
11 |  }
12 |  </style>
13 | </head>
14 | <body>
15 | <div class="multi-column-text">
16 |  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
17 |  <!-- Repeat or add more content as needed -->
18 | </div>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/chapter10/Fade-out Text with CSS Gradient:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .fade-out-text {
 6 |  position: relative;
 7 |  width: 250px;
 8 |  height: 100px;
 9 |  overflow: hidden;
10 |  line-height: 25px;
11 |  }
12 |  .fade-out-text::after {
13 |  content: '';
14 |  position: absolute;
15 |  bottom: 0;
16 |  right: 0;
17 |  width: 100%;
18 |  height: 50px;
19 |  background: linear-gradient(to bottom, transparent, white 75%);
20 |  }
21 |  </style>
22 | </head>
23 | <body>
24 | <div class="fade-out-text">
25 |  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et sapien pulvinar, pulvinar urna vel, aliquet nisl. In hac habitasse platea dictumst.
26 | </div>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/chapter10/Fixed Background Scrolling Effect:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .fixed-background {
 6 |  background-image: url('background.jpg');
 7 |  background-attachment: fixed;
 8 |  background-position: center;
 9 |  background-repeat: no-repeat;
10 |  background-size: cover;
11 |  height: 500px;
12 |  position: relative;
13 |  z-index: -1;
14 |  }
15 |  .content {
16 |  height: 1500px; /* Added height to demonstrate scrolling */
17 |  }
18 |  </style>
19 | </head>
20 | <body>
21 | <div class="content">Scroll to see the fixed background effect.</div>
22 | <div class="fixed-background"></div>
23 | <div class="content">More content that scrolls over the background.</div>
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/chapter10/Floating Clouds Background:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes floatClouds {
 6 |  from { background-position: 0 0; }
 7 |  to { background-position: 1000px 0; }
 8 |  }
 9 |  .clouds-background {
10 |  height: 300px;
11 |  background-image: url('/Images/image1.png'); /* Use a repeating cloud pattern */
12 |  background-repeat: repeat-x;
13 |  animation: floatClouds 40s linear infinite;
14 |  }
15 |  </style>
16 | </head>
17 | <body>
18 | <div class="clouds-background"></div>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/chapter10/Hover Scale Animation on Images:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .image-container {
 6 |  overflow: hidden; /* Ensures the scale effect stays within bounds */
 7 |  }
 8 |  img {
 9 |  width: 100%;
10 |  transition: transform 0.3s ease;
11 |  }
12 |  img:hover {
13 |  transform: scale(1.1); /* Slightly enlarges the image */
14 |  }
15 |  </style>
16 | </head>
17 | <body>
18 | <div class="image-container">
19 |  <img src="example-image.jpg" alt="Example Image">
20 | </div>
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/chapter10/Neumorphic Switch Toggle:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <style>
 5 |         .switch {
 6 |             position: relative;
 7 |             display: inline-block;
 8 |             width: 60px;
 9 |             height: 34px;
10 |             background-color: #e0e0e0;
11 |             border-radius: 34px;
12 |             box-shadow: inset -4px -4px 8px #ffffff, inset 4px 4px 8px #cbcbcb;
13 |             transition: background-color 0.2s;
14 |             cursor: pointer;
15 |         }
16 |         /* Updated: Reintroducing .slider for visual clarity */
17 |         .slider {
18 |             position: absolute;
19 |             width: 26px;
20 |             height: 26px;
21 |             left: 4px;
22 |             bottom: 4px;
23 |             background-color: white;
24 |             border-radius: 50%;
25 |             box-shadow: -4px -4px 8px #ffffff, 4px 4px 8px #cbcbcb;
26 |             transition: transform 0.2s;
27 |         }
28 |         .switch input {
29 |             opacity: 0;
30 |             position: absolute;
31 |             z-index: 2;
32 |             width: 100%;
33 |             height: 100%;
34 |             cursor: pointer;
35 |         }
36 |         /* Fix: Correctly target the .slider span after the input is checked */
37 |         .switch input:checked + .slider {
38 |             transform: translateX(26px);
39 |             box-shadow: -2px -2px 4px #ffffff, 2px 2px 4px #cbcbcb;
40 |         }
41 |         /* Update: To change the background color of the switch when active */
42 |         .switch input:checked ~ .slider {
43 |             background-color: #4CAF50; /* This styles the slider, but if you want to style the background of the switch itself, you'd need to target .switch */
44 |         }
45 |     </style>
46 | </head>
47 | <body>
48 | <label class="switch">
49 |     <input type="checkbox">
50 |     <span class="slider"></span> <!-- Reintroduced the slider span for visual enhancement -->
51 | </label>
52 | </body>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/chapter10/Parallax Scrolling Effect:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .parallax {
 6 |  height: 500px;
 7 |  background-image: url('your-image-url.jpg');
 8 |  background-attachment: fixed;
 9 |  background-position: center;
10 |  background-repeat: no-repeat;
11 |  background-size: cover;
12 |  }
13 |  .content {
14 |  height: 500px;
15 |  background-color: rgba(255, 255, 255, 0.6);
16 |  display: flex;
17 |  align-items: center;
18 |  justify-content: center;
19 |  font-size: 24px;
20 |  }
21 |  </style>
22 | </head>
23 | <body>
24 | <div class="parallax"></div>
25 | <div class="content">Scroll up and down to see the effect!</div>
26 | <div class="parallax"></div>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/chapter10/Rainbow Text Animation:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  @keyframes rainbowText {
 6 |  0% { color: red; }
 7 |  14% { color: orange; }
 8 |  28% { color: yellow; }
 9 |  42% { color: green; }
10 |  57% { color: blue; }
11 |  71% { color: indigo; }
12 |  85% { color: violet; }
13 |  100% { color: red; }
14 |  }
15 |  .rainbow-text {
16 |  animation: rainbowText 8s infinite;
17 |  font-size: 40px;
18 |  font-weight: bold;
19 |  text-align: center;
20 |  }
21 |  </style>
22 | </head>
23 | <body>
24 | <div class="rainbow-text">Rainbow Text</div>
25 | </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/chapter10/Ripple Effect Button:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |  <style>
 5 |  .ripple-button {
 6 |  position: relative;
 7 |  overflow: hidden;
 8 |  background-color: #3498db;
 9 |  color: white;
10 |  padding: 10px 20px;
11 |  border: none;
12 |  border-radius: 5px;
13 |  cursor: pointer;
14 |  outline: none;
15 |  }
16 |  .ripple-button::after {
17 |  content: '';
18 |  position: absolute;
19 |  width: 100%;
20 |  height: 100%;
21 |  top: 50%;
22 |  left: 50%;
23 |  transform: translate(-50%, -50%) scale(0);
24 |  background: rgba(255, 255, 255, 0.5);
25 |  border-radius: 50%;
26 |  transition: transform 0.6s ease;
27 |  pointer-events: none;
28 |  }
29 |  .ripple-button:active::after {
30 |  transform: translate(-50%, -50%) scale(4);
31 |  }
32 |  </style>
33 | </head>
34 | <body>
35 | <button class="ripple-button">Click Me</button>
36 | </body>
37 | </html>
38 | 


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