diff --git a/misc/carousel-1.html b/misc/carousel-1.html
index 570373bb..32574d6f 100644
--- a/misc/carousel-1.html
+++ b/misc/carousel-1.html
@@ -1,175 +1,168 @@
-<!DOCTYPE html>
-<html class="no-js" lang="">
-    <head>
-        <meta http-equiv="x-ua-compatible" content="IE=edge">
-        <meta charset="utf-8">
-        <title>Carousel Demo</title>
-        <meta name="description" content="Despite all that Javascript is capable of, it is frequently employed. Here are some things you can accomplish without Javascript. Using HTML and CSS, which are surprisingly impressive on their own.">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <style type="text/css">
-
-            /* CSS styles for the carousel */
-        html, body {
-            margin: 0px;
-            padding: 0px;
-            background-color: #774936;
-        }
-
-        .carousel {
-            position: relative;
-            box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
-            margin-top: 26px;
-        }
-
-        .carousel-inner {
-            position: relative;
-            overflow: hidden;
-            width: 100%;
-        }
-
-        .carousel-open:checked + .carousel-item {
-            position: static;
-            opacity: 100;
-        }
-
-        .carousel-item {
-            position: absolute;
-            opacity: 0;
-            -webkit-transition: opacity 0.6s ease-out;
-            transition: opacity 0.6s ease-out;
-        }
-
-        .carousel-item img {
-            display: block;
-            height: auto;
-            max-width: 100%;
-        }
-
-        .carousel-control {
-            background: #F4EEEA;
-            border-radius: 50%;
-            color: #fff;
-            cursor: pointer;
-            display: none;
-            font-size: 40px;
-            height: 40px;
-            line-height: 35px;
-            position: absolute;
-            top: 50%;
-            -webkit-transform: translate(0, -50%);
-            cursor: pointer;
-            -ms-transform: translate(0, -50%);
-            transform: translate(0, -50%);
-            text-align: center;
-            width: 40px;
-            z-index: 10;
-        }
-
-        .carousel-control.prev {
-            left: 2%;
-        }
-
-        .carousel-control.next {
-            right: 2%;
-        }
-
-        .carousel-control:hover {
-            background: rgba(0, 0, 0, 0.8);
-            color: #aaaaaa;
-        }
-
-        #carousel-1:checked ~ .control-1,
-        #carousel-2:checked ~ .control-2,
-        #carousel-3:checked ~ .control-3 {
-            display: block;
-        }
-
-        .carousel-indicators {
-            list-style: none;
-            margin: 0;
-            padding: 0;
-            position: absolute;
-            bottom: 2%;
-            left: 0;
-            right: 0;
-            text-align: center;
-            z-index: 10;
-        }
-
-        .carousel-indicators li {
-            display: inline-block;
-            margin: 0 5px;
-        }
-
-        .carousel-bullet {
-            color: #fff;
-            cursor: pointer;
-            display: block;
-            font-size: 55px;
-        }
-
-        .carousel-bullet:hover {
-            color: #333;
-        }
-
-        #carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
-        #carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
-        #carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
-            color: #333;
-        }
-
-        #title {
-            width: 100%;
-            position: absolute;
-            padding: 0px;
-            margin: 0px auto;
-            text-align: center;
-            font-size: 27px;
-            color: rgba(255, 255, 255, 1);
-            font-family: 'Open Sans', sans-serif;
-            z-index: 9999;
-            text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
-        }
-        </style>
-
-    </head>
-    <body>
-        <!--[if lt IE 8]>
-        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
-        <![endif]-->
-
-        <div class="carousel">
-            <div class="carousel-inner">
-                <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
-                <div class="carousel-item">
-                    <img src="http://fakeimg.pl/2000x800/F90/fff/?text=Carousel">
-                </div>
-                <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
-                <div class="carousel-item">
-                    <img src="http://fakeimg.pl/2000x800/0079D8/fff/?text=Without">
-                </div>
-                <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
-                <div class="carousel-item">
-                    <img src="http://fakeimg.pl/2000x800/DA5930/fff/?text=JavaScript">
-                </div>
-                <label for="carousel-3" class="carousel-control prev control-1">‹</label>
-                <label for="carousel-2" class="carousel-control next control-1">›</label>
-                <label for="carousel-1" class="carousel-control prev control-2">‹</label>
-                <label for="carousel-3" class="carousel-control next control-2">›</label>
-                <label for="carousel-2" class="carousel-control prev control-3">‹</label>
-                <label for="carousel-1" class="carousel-control next control-3">›</label>
-                <ol class="carousel-indicators">
-                    <li>
-                        <label for="carousel-1" class="carousel-bullet">•</label>
-                    </li>
-                    <li>
-                        <label for="carousel-2" class="carousel-bullet">•</label>
-                    </li>
-                    <li>
-                        <label for="carousel-3" class="carousel-bullet">•</label>
-                    </li>
-                </ol>
-            </div>
-        </div>
-    </body>
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Image Carousel</title>
+<style>
+  :root {
+    --control-bg: rgba(255,255,255,0.8);
+    --control-fg: #333;
+    --active-color: #ff9800;
+  }
+  body {
+    margin: 0;
+    background: #222;
+    font-family: sans-serif;
+    display: flex;
+    justify-content: center;
+    padding: 40px 0;
+  }
+
+  .carousel {
+    position: relative;
+    width: 90%;
+    max-width: 1000px;
+    overflow: hidden;
+    border-radius: 12px;
+    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
+  }
+
+  /* hide radios */
+  .carousel input {
+    display: none;
+  }
+
+  /* slides */
+  .carousel-item {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    transition: opacity .6s ease;
+  }
+  .carousel-item img {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  /* visible slide */
+  .carousel input:checked + .carousel-item {
+    position: relative;
+    opacity: 1;
+    z-index: 1;
+  }
+
+  /* controls */
+  .control {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background: var(--control-bg);
+    color: var(--control-fg);
+    font-size: 28px;
+    line-height: 44px;
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
+    display: none;
+    z-index: 2;
+  }
+  .control:hover {
+    background: var(--control-fg);
+    color: #fff;
+  }
+  .control.prev { left: 12px; }
+  .control.next { right: 12px; }
+
+  /* show only relevant controls */
+  #s1:checked ~ .control-1,
+  #s2:checked ~ .control-2,
+  #s3:checked ~ .control-3 {
+    display: block;
+  }
+
+  /* indicators */
+  .indicators {
+    position: absolute;
+    bottom: 14px;
+    left: 0;
+    right: 0;
+    text-align: center;
+    z-index: 3;
+  }
+  .indicators label {
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    margin: 0 6px;
+    border-radius: 50%;
+    background: rgba(255,255,255,0.6);
+    cursor: pointer;
+    transition: transform .3s, background .3s;
+  }
+  .indicators label:hover {
+    transform: scale(1.2);
+  }
+
+  /* active indicator */
+  #s1:checked ~ .indicators label[for="s1"],
+  #s2:checked ~ .indicators label[for="s2"],
+  #s3:checked ~ .indicators label[for="s3"] {
+    background: var(--active-color);
+    transform: scale(1.3);
+  }
+
+  .carousel-item img {
+  width: 100%;
+  height: 500px;       
+  object-fit: cover;   
+  display: block;
+}
+
+</style>
+</head>
+<body>
+  <div class="carousel">
+
+    <!-- Slide 1 -->
+    <input type="radio" id="s1" name="slider" checked>
+    <div class="carousel-item">
+      <img src="pics/1.jpg" alt="Image 1">
+    </div>
+
+    <!-- Slide 2 -->
+    <input type="radio" id="s2" name="slider">
+    <div class="carousel-item">
+      <img src="pics/2.jpg" alt="Image 2">
+    </div>
+
+    <!-- Slide 3 -->
+    <input type="radio" id="s3" name="slider">
+    <div class="carousel-item">
+      <img src="pics/3.jpg" alt="Image 3">
+    </div>
+
+    <!-- Controls -->
+    <label for="s3" class="control prev control-1">‹</label>
+    <label for="s2" class="control next control-1">›</label>
+
+    <label for="s1" class="control prev control-2">‹</label>
+    <label for="s3" class="control next control-2">›</label>
+
+    <label for="s2" class="control prev control-3">‹</label>
+    <label for="s1" class="control next control-3">›</label>
+
+    <!-- Indicators -->
+    <div class="indicators">
+      <label for="s1"></label>
+      <label for="s2"></label>
+      <label for="s3"></label>
+    </div>
+  </div>
+</body>
 </html>
diff --git a/misc/pics/1.jpg b/misc/pics/1.jpg
new file mode 100644
index 00000000..3eaa68fa
Binary files /dev/null and b/misc/pics/1.jpg differ
diff --git a/misc/pics/2.jpg b/misc/pics/2.jpg
new file mode 100644
index 00000000..80ca5501
Binary files /dev/null and b/misc/pics/2.jpg differ
diff --git a/misc/pics/3.jpg b/misc/pics/3.jpg
new file mode 100644
index 00000000..1589b5ed
Binary files /dev/null and b/misc/pics/3.jpg differ
