diff --git "a/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/audio/a.mp3" "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/audio/a.mp3"
new file mode 100644
index 0000000000000000000000000000000000000000..ebab7588526b99432974d45942b439b76a295b5d
Binary files /dev/null and "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/audio/a.mp3" differ
diff --git "a/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/audio/happynewyear.mp3" "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/audio/happynewyear.mp3"
new file mode 100644
index 0000000000000000000000000000000000000000..87d1b9217291a6bb28cd7ce37b6e7a083114150e
Binary files /dev/null and "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/audio/happynewyear.mp3" differ
diff --git "a/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/demo01.css" "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/demo01.css"
new file mode 100644
index 0000000000000000000000000000000000000000..f41072715212a807ce8f78d04b396ab4603d564d
--- /dev/null
+++ "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/demo01.css"	
@@ -0,0 +1,208 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+html,body{
+    height: 100%;
+    font-family: monospace;
+}
+.page{
+    position: absolute;
+    width: 100vw;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+#page1{
+    background-color: rgb(6, 80, 6);
+    display: block;
+    z-index: 3;
+}
+.up{
+    animation: a 5s linear 1;
+    animation-fill-mode: forwards;
+}
+@keyframes a{
+    from{
+        top: 0;
+    }
+    to{
+        top: -100%;
+    }
+}
+
+.top{
+    background: url(./image/christmas_garland_PNG37.png) no-repeat;
+    background-size: 100%;
+    position: absolute;
+    width: 100vw;
+    height: 30vh;
+}
+.music{
+    position: absolute;
+    top: 35vw;
+    right: 18vw;
+    width: 65vw;
+    height: 65vw;
+}
+.music > img:first-of-type {
+    position: absolute;
+    top: 20%;
+    right: 24.5%;
+    width: 27vw;
+    height: 27vw;
+    /* z-index: -1; */
+    animation: disk 1s linear infinite;
+}
+@keyframes disk{
+    from{
+        transform: rotate(0deg);
+    }
+    to{
+        transform: rotate(360deg);
+    }
+}
+
+.music > img:last-of-type{
+    top: 30%;
+    right: 29%;
+    position: absolute;
+    width: 7vw;
+    height: 7vw;
+}
+.music-circle{
+    background: url(./image/christmas_wreath_PNG89.png) no-repeat;
+    position: absolute;
+    width: 65vw;
+    height: 65vw;
+    background-size: 100%;
+    z-index: 1;
+}
+.round {
+    height: 100%;
+    text-align: center;
+    font-size: 10vh;
+    color: rgb(154, 3, 3);
+    font-weight: 700;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 60%;
+    width: 100vw;
+    height: 10vh;
+}
+#page2{
+    /* z-index: -2; */
+}
+.p2-bg{
+    background: url(./image/tree.jpg) no-repeat;
+    background-size: cover;
+    width: 100vw;
+    height: 100%;
+    z-index: 1;
+    background-position: center;
+    filter: blur(5px);
+}
+.letter{
+    background: url(./image/letter.png) no-repeat;
+    background-size: 100%;
+    position: absolute;
+    width: 70vw;
+    height: 70vw;
+    top: 12vh;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+}
+.open{
+    position: absolute;
+    top: 13vh;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    text-align: center;
+    font-size: 25px;
+    color: #da9740;
+}
+.tree{
+    background: url(./image/christmas_tree_PNG44.png) no-repeat;
+    background-size: 100%;
+    width: 55vw;
+    height: 48vh;
+    position: absolute;
+    top: 90vw;
+    left: 5vw;
+}
+.gift{
+    background: url(./image/gift_PNG100127.png) no-repeat;
+    background-size: 100%;
+    position: absolute;
+    width: 30vw;
+    height: 31vw;
+    top: 140vw;
+    left: 60vw;
+}
+.gift::before{
+    content: '拆开 看看';
+    color: #fbfbfbba;
+    font-weight: 700;
+    font-size: -webkit-xxx-large;
+    position: absolute;
+    top: -26vw;
+    text-align: center;
+}
+#page3{
+    display: none;
+    /* z-index: -1; */
+    transition: all 0.5s;
+}
+.p3-bg{
+    position: absolute;
+    background: url(./image/snow.jpg) no-repeat;
+    background-size: cover;
+    width: 100vw;
+    height: 100%;
+    filter: blur(4px);
+}
+.santa{
+    position: absolute;
+    background: url(./image/santa_claus2.png) no-repeat;
+    background-size: 100%;
+    width: 70vw;
+    height: 42vw;
+    left: -80vw;
+    animation: santa 6s linear infinite;
+}
+@keyframes santa{
+    0% {
+        transform: translateX(0) translateY(0);
+       }
+   100% {
+    transform: translateX(667px) translateY(0px);
+       }
+}
+.reindeer{
+    position: absolute;
+    background: url(./image/reindeer_PNG79.png) no-repeat;
+    background-size: 100%;
+    width: 75vw;
+    height: 65vw;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+}
+.happy{
+    position: absolute;
+    color: #f1f1b4;
+    font-size: 15vw;
+    width: 65vw;
+    height: 35vw;
+    left: 0;
+    right: 0;
+    top: 65vh;
+    margin: 0 auto;
+    text-align: center;
+    font-weight: 700;
+}
\ No newline at end of file
diff --git "a/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/demo01.html" "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..1bf4e5125ca3663965c433113aa463cc81a87118
--- /dev/null
+++ "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/demo01.html"	
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Merry Christmas</title>
+    <link rel="stylesheet" href="./demo01.css">
+    <script src="./demo01.js"></script>
+</head>
+
+<body>
+
+    <div class="page" id="page1">
+        <div class="top"></div>
+        <div class="music">
+            <div class="music-circle"></div>
+            <img id="music" class="play" src="./image/disk.jpg" alt="">
+            <img  src="./image/music_pointer.png" alt="">
+            <audio autoplay="true">
+                <source src="./audio/a.mp3" type="audio/mpeg">
+            </audio>
+        </div>
+        <!-- <div class="background"></div> -->
+        <div class="round">MERRY<br>CHRISTMAS</div>
+    </div>
+    <div class="page" id="page2">
+        <div class="p2-bg"></div>
+        <div class="letter">
+            <div class="open">打开<br>你的<br>礼物</div>
+        </div>
+        <div class="gift" id="gift"></div>
+        <div class="tree"></div>
+    </div>
+    <div class="page" id="page3">
+        <div class="p3-bg"></div>
+        <div class="santa"></div>
+        <div class="reindeer"></div>
+        <div class="happy">
+            Happy Everyday
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/demo01.js" "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/demo01.js"
new file mode 100644
index 0000000000000000000000000000000000000000..5c2a22ef421e8c199ce67dc641bebb9e1a5d7d77
--- /dev/null
+++ "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/demo01.js"	
@@ -0,0 +1,36 @@
+window.addEventListener('DOMContentLoaded', function () {
+    var music = document.getElementById('music');
+    var audio = document.querySelector('audio');
+    console.log(audio);
+    var page1 = document.getElementById('page1');
+    var page2 = document.getElementById('page2');
+    var page3 = document.getElementById('page3');
+
+    if (audio.paused) {
+        console.log('b');
+        music.style.animationPlayState = 'paused';
+    } else {
+        console.log('c');
+        music.style.animationPlayState = 'running';
+    }
+    page1.addEventListener('touchstart', function () {
+        if (audio.paused) {
+            audio.play();
+            console.log('a');
+            music.classList.add('play');
+            music.style.animationPlayState = 'running';
+        } else {
+            audio.pause();
+            music.style.animationPlayState = 'paused';
+        }
+    })
+    setTimeout(() => {
+        page1.classList.add('up');
+      }, 5000);
+    var gift = document.getElementById('gift');
+    console.log(gift);
+    gift.addEventListener('touchstart',function(){
+        page2.style.display = 'none';
+        page3.style.display = 'block';
+    })
+})
\ No newline at end of file
diff --git "a/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/christmas_garland_PNG37.png" "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/christmas_garland_PNG37.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c88f007642d25c853db4d4d41210ddca55714d02
Binary files /dev/null and "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/christmas_garland_PNG37.png" differ
diff --git "a/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/christmas_tree_PNG44.png" "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/christmas_tree_PNG44.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7ceb1d29caa3b463272de155874906556f2da67a
Binary files /dev/null and "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/christmas_tree_PNG44.png" differ
diff --git "a/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/christmas_wreath_PNG89.png" "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/christmas_wreath_PNG89.png"
new file mode 100644
index 0000000000000000000000000000000000000000..33142026cde04eee2731e45cc4aeb77543c75054
Binary files /dev/null and "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/christmas_wreath_PNG89.png" differ
diff --git "a/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/disk.jpg" "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/disk.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..df6ed2838ef8a74346271d6e75f3eb54f9c4c26b
Binary files /dev/null and "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/disk.jpg" differ
diff --git "a/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/gift_PNG100127.png" "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/gift_PNG100127.png"
new file mode 100644
index 0000000000000000000000000000000000000000..721a8f8b1f8ca4cd9dba41ecc1ea326fb26c3d76
Binary files /dev/null and "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/gift_PNG100127.png" differ
diff --git "a/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/letter.png" "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/letter.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c59b683281d9a1459e5880caf97e2fac6c391664
Binary files /dev/null and "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/letter.png" differ
diff --git "a/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/music_pointer.png" "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/music_pointer.png"
new file mode 100644
index 0000000000000000000000000000000000000000..3b148617f0036813e52ee2a202bc15a23429e457
Binary files /dev/null and "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/music_pointer.png" differ
diff --git "a/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/reindeer_PNG79.png" "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/reindeer_PNG79.png"
new file mode 100644
index 0000000000000000000000000000000000000000..55a600645b035dc74e00be591f48787c51f9046d
Binary files /dev/null and "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/reindeer_PNG79.png" differ
diff --git "a/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/santa_claus2.png" "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/santa_claus2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f0de4d4bc0d8b40876e299cef63214c0ce718860
Binary files /dev/null and "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/santa_claus2.png" differ
diff --git "a/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/snow.jpg" "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/snow.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..2e14230c5c1ed94834d0042a3113619869d661c9
Binary files /dev/null and "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/snow.jpg" differ
diff --git "a/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/tree.jpg" "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/tree.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..5c884c429cce6dd008aa2fbf6116310083723223
Binary files /dev/null and "b/\346\235\216\346\254\247\351\233\257/211208-Merry Christma/image/tree.jpg" differ
diff --git "a/\346\235\216\346\254\247\351\233\257/211209-css\346\225\210\346\236\234/demo01.html" "b/\346\235\216\346\254\247\351\233\257/211209-css\346\225\210\346\236\234/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..9463601be95cef75fd547c96136e7309ea1147e2
--- /dev/null
+++ "b/\346\235\216\346\254\247\351\233\257/211209-css\346\225\210\346\236\234/demo01.html"
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>bottom</title>
+</head>
+<style>
+    :root {
+        --popcolor: pink;
+        --color: #fff;
+        --triangle: 8px;
+        --distance: -12px;
+    }
+
+    .chat {
+        width: 100px;
+        background-color: var(--popcolor);
+        color: var(--color);
+        text-align: center;
+        padding: 5px 10px;
+        border-radius: 4px;
+        cursor: pointer;
+        margin: 200px auto;
+    }
+    .pop{
+        position: relative;
+    }
+    .pop::before {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 0 var(--triangle) var(--triangle) var(--triangle);
+        border-color: transparent transparent black transparent;
+        left: calc(50% - var(--triangle));
+        top: 50px;
+        transform: translateX(0%) translateY(var(--distance));
+    }
+    .pop::after{
+        color: var(--color);
+        font-size: 14px;
+        background-color: black;
+        content: attr(aria-controls);
+        position: absolute;
+        top: 185%;
+        left: 50%;
+        transform: translateX(-50%) translateY(var(--distance));
+        border-radius: 2px;
+        line-height: 1.5;
+        padding: 2px 4px;
+        white-space: wrap;
+        width: 100px;
+    }
+    .pop::before,
+    .pop::after{
+        visibility: hidden;
+    }
+    .pop:hover::before,
+    .pop:hover::after{
+        visibility: visible;
+    }
+</style>
+
+<body>
+    <div class="pop chat" aria-controls="弹出气泡弹出气泡弹出气泡弹出气泡弹出气泡弹出气泡弹出气泡">气泡提示</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\216\346\254\247\351\233\257/211209-css\346\225\210\346\236\234/demo02.html" "b/\346\235\216\346\254\247\351\233\257/211209-css\346\225\210\346\236\234/demo02.html"
new file mode 100644
index 0000000000000000000000000000000000000000..0e67b91788d418e892c15474ee2891889f3cd8e1
--- /dev/null
+++ "b/\346\235\216\346\254\247\351\233\257/211209-css\346\225\210\346\236\234/demo02.html"
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>right</title>
+</head>
+<style>
+    :root {
+        --popcolor: pink;
+        --color: #fff;
+        --triangle: 8px;
+        --distance: -12px;
+    }
+
+    .chat {
+        width: 100px;
+        background-color: var(--popcolor);
+        color: var(--color);
+        text-align: center;
+        padding: 5px 10px;
+        border-radius: 4px;
+        cursor: pointer;
+        margin: 200px auto;
+    }
+    .pop{
+        position: relative;
+    }
+    .pop::before {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: var(--triangle) var(--triangle) var(--triangle) 0;
+        border-color: transparent black transparent  transparent;
+        left: calc(50% - var(--triangle));
+        top: 20px;
+        left: 130px;
+        transform: translateX(0%) translateY(var(--distance));
+    }
+    .pop::after{
+        color: var(--color);
+        font-size: 14px;
+        background-color: black;
+        content: attr(aria-controls);
+        position: absolute;
+        top: -70%;
+        left: 160%;
+        transform: translateX(-50%) translateY(var(--distance));
+        border-radius: 2px;
+        line-height: 1.5;
+        padding: 2px 4px;
+        white-space: wrap;
+        width: 100px;
+    }
+    .pop::before,
+    .pop::after{
+        visibility: hidden;
+    }
+    .pop:hover::before,
+    .pop:hover::after{
+        visibility: visible;
+    }
+</style>
+
+<body>
+    <div class="pop chat" aria-controls="弹出气泡哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈或或弹出气泡弹出气泡弹出气泡弹出气泡弹出气泡弹出气泡">气泡提示</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\216\346\254\247\351\233\257/211209-css\346\225\210\346\236\234/rdemo03.html" "b/\346\235\216\346\254\247\351\233\257/211209-css\346\225\210\346\236\234/rdemo03.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d557929780d373cec840a2f1e2c4957224a6e11e
--- /dev/null
+++ "b/\346\235\216\346\254\247\351\233\257/211209-css\346\225\210\346\236\234/rdemo03.html"
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>left</title>
+</head>
+<style>
+    :root {
+        --popcolor: pink;
+        --color: #fff;
+        --triangle: 8px;
+        --distance: -12px;
+    }
+
+    .chat {
+        width: 100px;
+        background-color: var(--popcolor);
+        color: var(--color);
+        text-align: center;
+        padding: 5px 10px;
+        border-radius: 4px;
+        cursor: pointer;
+        margin: 200px auto;
+    }
+    .pop{
+        position: relative;
+    }
+    .pop::before {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: var(--triangle) 0 var(--triangle) var(--triangle);
+        border-color: transparent transparent transparent black;
+        left: calc(50% - var(--triangle));
+        top: 20px;
+        left: -15px;
+        transform: translateX(0%) translateY(var(--distance));
+    }
+    .pop::after{
+        color: var(--color);
+        font-size: 14px;
+        background-color: black;
+        content: attr(aria-controls);
+        position: absolute;
+        top: -70%;
+        left: -57%;
+        transform: translateX(-50%) translateY(var(--distance));
+        border-radius: 2px;
+        line-height: 1.5;
+        padding: 2px 4px;
+        white-space: wrap;
+        width: 100px;
+    }
+    .pop::before,
+    .pop::after{
+        visibility: hidden;
+    }
+    .pop:hover::before,
+    .pop:hover::after{
+        visibility: visible;
+    }
+</style>
+
+<body>
+    <div class="pop chat" aria-controls="弹出气泡哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈或或弹出气泡弹出气泡弹出气泡弹出气泡弹出气泡弹出气泡">气泡提示</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\216\346\254\247\351\233\257/211210-css\346\212\200\345\267\247/demo01.html" "b/\346\235\216\346\254\247\351\233\257/211210-css\346\212\200\345\267\247/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..01846d65905b385468a9008f99ee51f7fab5414f
--- /dev/null
+++ "b/\346\235\216\346\254\247\351\233\257/211210-css\346\212\200\345\267\247/demo01.html"
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    .box {
+        display: flex;
+        width: 100%;
+        justify-content: center;
+    }
+
+    /* 设置开关的大小和背景颜色 */
+    label {
+        width: 60px;
+        height: 30px;
+        margin-left: 40px;
+        border-radius: 20px;
+        position: relative;
+        background-color: lightgrey;
+        cursor: pointer;
+        transition: background-color 0.5s;
+    }
+
+    /* 设置控制开关的按钮 */
+    input[type='checkbox']+label::before {
+        position: absolute;
+        content: '';
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background-color: whitesmoke;
+        top: 3px;
+        left: 1px;
+        z-index: 1;
+    }
+
+    /* 设置关 */
+    input[type='checkbox']+label::after {
+        content: '关';
+        position: absolute;
+        color: white;
+        left: 40px;
+        top: 3px;
+    }
+
+    label[disabled] {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+
+    label::after,
+    label::before {
+        transition: linear 0.3s;
+    }
+
+    /* 给默认选中的开关设置新的背景色 */
+    input[type='checkbox']:checked+label {
+        background-color: lightsalmon;
+    }
+
+    input[type='checkbox']:checked+label::before {
+        left: 35px;
+    }
+
+    input[type='checkbox']:checked+label::after {
+        content: '开';
+        left: 5px;
+    }
+</style>
+
+<body>
+    <div class="box">
+        <input type="checkbox" id="switch" checked hidden>
+        <label for="switch"></label>
+        <input type="checkbox" id="switch-open" checked disabled hidden>
+        <label for="switch-open" disabled></label>
+        <input type="checkbox" id="switch-close" disabled hidden>
+        <label for="switch-close" disabled></label>
+    </div>
+</body>
+
+</html>
\ No newline at end of file