From 3833a99ebddc8bdf017841064ebede24857c08e0 Mon Sep 17 00:00:00 2001
From: Jerry Cyan <jerrylovesapple@icloud.com>
Date: Sun, 25 Aug 2024 16:22:58 -0400
Subject: [PATCH] Updated Aug 25 2024

---
 .DS_Store                    | Bin 10244 -> 10244 bytes
 experiments/Jul_24_2024.html | 149 +++++++---
 experiments/lab.html         | 516 +++++++++++------------------------
 static/.DS_Store             | Bin 10244 -> 12292 bytes
 4 files changed, 268 insertions(+), 397 deletions(-)
diff --git a/.DS_Store b/.DS_Store
index 9bc014286e9ac8077f7c6f2c8483829ec2117022..14588ed2a20f4e4ea78fda490543ea47ab2cf8b0 100644
GIT binary patch
delta 54
zcmZn(XbG6$&nU4mU^hRb#AF_Ujhmkfm~wF#Sy<{Q7#mtn))bQ7Y%hI+WnzQYW_E>N
KESt4OnVA977!WW3

delta 83
zcmV-Z0IdInP=rvBPXQURP`eKS8IueUu^R;dLjX<yK>$qvMM-RLV`6M?VgLXD5C8xI
p)w8Y;L<$HqF*qzBGC44l{}CIL$P*;9IUA$|vj-sh1hdx^0|Tt37d-#~

diff --git a/experiments/Jul_24_2024.html b/experiments/Jul_24_2024.html
index dec007c0..ad74025d 100644
--- a/experiments/Jul_24_2024.html
+++ b/experiments/Jul_24_2024.html
@@ -4,66 +4,141 @@
 <head>
     <title>Marquee Effect</title>
     <style>
-        .marquee {
-            background-color: #ddd;
-            width: 500px;
-            margin: 0 auto;
-            overflow: hidden;
-            white-space: nowrap;
+        body {
+            background: #222;
         }
 
-        .marquee span {
-            display: inline-block;
-            font-size: 20px;
+        .tabs li {
+            /* Makes a horizontal row */
+            float: left;
+
+            /* So the psueudo elements can be
+     abs. positioned inside */
             position: relative;
-            left: 100%;
-            animation: marquee 8s linear infinite;
         }
 
-        .marquee:hover span {
-            animation-play-state: paused;
+        .tabs a {
+            /* Make them block level
+     and only as wide as they need */
+            float: left;
+            padding: 10px 40px;
+            text-decoration: none;
+
+            /* Default colors */
+            color: black;
+            background: #ddc385;
+
+            /* Only round the top corners */
+            -webkit-border-top-left-radius: 15px;
+            -webkit-border-top-right-radius: 15px;
+            -moz-border-radius-topleft: 15px;
+            -moz-border-radius-topright: 15px;
+            border-top-left-radius: 15px;
+            border-top-right-radius: 15px;
+        }
+
+        .tabs .active {
+            /* Highest, active tab is on top */
+            z-index: 3;
+        }
+
+        .tabs .active a {
+            /* Colors when tab is active */
+            background: white;
+            color: black;
+        }
+
+        .tabs li:before,
+        .tabs li:after,
+        .tabs li a:before,
+        .tabs li a:after {
+            /* All pseudo elements are 
+     abs. positioned and on bottom */
+            position: absolute;
+            bottom: 0;
         }
 
-        .marquee span:nth-child(1) {
-            animation-delay: 0s;
+        /* Only the first, last, and active
+   tabs need pseudo elements at all */
+        .tabs li:last-child:after,
+        .tabs li:last-child a:after,
+        .tabs li:first-child:before,
+        .tabs li:first-child a:before,
+        .tabs .active:after,
+        .tabs .active:before,
+        .tabs .active a:after,
+        .tabs .active a:before {
+            content: "";
         }
 
-        .marquee span:nth-child(2) {
-            animation-delay: 0.8s;
+        .tabs .active:before,
+        .tabs .active:after {
+            background: white;
+
+            /* Squares below circles */
+            z-index: 1;
         }
 
-        .marquee span:nth-child(3) {
-            animation-delay: 1.6s;
+        /* Squares */
+        .tabs li:before,
+        .tabs li:after {
+            background: #ddc385;
+            width: 10px;
+            height: 10px;
         }
 
-        .marquee span:nth-child(4) {
-            animation-delay: 2.4s;
+        .tabs li:before {
+            left: -10px;
         }
 
-        .marquee span:nth-child(5) {
-            animation-delay: 3.2s;
+        .tabs li:after {
+            right: -10px;
         }
 
-        @keyframes marquee {
-            0% {
-                left: 100%;
-            }
+        /* Circles */
+        .tabs li a:after,
+        .tabs li a:before {
+            width: 20px;
+            height: 20px;
+            /* Circles are circular */
+            -webkit-border-radius: 10px;
+            -moz-border-radius: 10px;
+            border-radius: 10px;
+            background: #222;
+
+            /* Circles over squares */
+            z-index: 2;
+        }
+
+        .tabs .active a:after,
+        .tabs .active a:before {
+            background: #ddc385;
+        }
+
+        /* First and last tabs have different
+   outside color needs */
+        .tabs li:first-child.active a:before,
+        .tabs li:last-child.active a:after {
+            background: #222;
+        }
+
+        .tabs li a:before {
+            left: -20px;
+        }
 
-            100% {
-                left: -100%;
-            }
+        .tabs li a:after {
+            right: -20px;
         }
     </style>
 </head>
 
 <body>
-    <p class="marquee">
-        <span>this is a</span>
-        <span>simple marquee</span>
-        <span>using css</span>
-        <span>only tech</span>
-        <span>with a delay</span>
-    </p>
+    <ul class="tabs group">
+        <li class="active"><a href="#one">One</a></li>
+        <li><a href="#two">Two</a></li>
+        <li><a href="#three">Three</a></li>
+        <li><a href="#three">Four</a></li>
+    </ul>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/experiments/lab.html b/experiments/lab.html
index 65d3275f..15373e20 100644
--- a/experiments/lab.html
+++ b/experiments/lab.html
@@ -4,430 +4,226 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Lab Environment</title>
-    <script src="../static/js/jquery-3.7.1.js"></script>
+    <title>Experiments</title>
     <link rel="stylesheet" href="../static/iconfont library/fontawesome-free-6.1.2-web/css/all.css">
+    <script src="../static/js/jquery-3.7.1.js"></script>
     <script>
         $(function () {
-            $("#d-button-1").hover(function () {
-                $("#d-button-alt-1").toggleClass("active");
-            });
-        });
-        $(function () {
-            $("#d-button-2").hover(function () {
-                $("#d-button-alt-2").toggleClass("active");
-            });
-        });
-        $(function () {
-            $("#d-button-3").hover(function () {
-                $("#d-button-alt-3").toggleClass("active");
-            });
-        });
-        $(function () {
-            $("#d-button-4").hover(function () {
-                $("#d-button-alt-4").toggleClass("active");
-            });
-        });
-        $(function () {
-            $("#d-button-5").hover(function () {
-                $("#d-button-alt-5").toggleClass("active");
-            });
-        });
-        $(function () {
-            $("#d-button-6").hover(function () {
-                $("#d-button-alt-6").toggleClass("active");
-            });
-        });
-        $(function () {
-            $("#d-button-7").hover(function () {
-                $("#d-button-alt-7").toggleClass("active");
-            });
-        });
-        $(function () {
-            $("#d-button-8").hover(function () {
-                $("#d-button-alt-8").toggleClass("active");
-            });
-        });
-        $(function () {
-            $("#d-button-8").click(function () {
-                $("#doors-wall").toggleClass("active");
+            $("#btc-4").click(function () {
+                $("#butter").toggleClass("active");
+                $("#cup").toggleClass("active");
             });
         });
     </script>
     <style>
-        body {
-            margin: 0;
-        }
-
-        #door {
-            padding: 10px;
+        #buttercup {
             position: fixed;
-            left: 0;
             top: 0;
+            left: 0;
             right: 0;
-        }
-
-        #doors {
-            display: flex;
-            overflow: hidden;
-        }
-
-        .doors {
-            height: 50px;
-            background-color: #f6f6f6;
-            border-radius: 10px;
-            display: flex;
-            z-index: 1;
-            overflow: hidden;
-        }
-
-        #door-1 {
-            width: 248px;
-        }
-
-        .d-button {
-            width: 35px;
-            height: 35px;
-            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-            font-weight: bold;
-            margin-top: 7.5px;
-            margin-left: 7.5px;
-            border-radius: 5px;
             display: flex;
             justify-content: center;
             align-items: center;
         }
 
-        .d-button:hover {
-            background-color: #e2e2e2;
-        }
-
-        #d-button-1 {
-            aspect-ratio: 9/5;
-            width: fit-content;
-            background-image: url(../static/img/home-button-light.webp);
-            background-size: contain;
-        }
-
-        #d-button-8-label {
-            transform: rotate(45deg);
-        }
-
-        #door-2 {
-            margin-left: 10px;
-            width: 135px;
-        }
-
-        /* #door-3 {
-            margin-left: 10px;
-            flex: 1;
-        } */
-
-        #doors-alt {
-            width: 393px;
-            height: 24px;
-            display: flex;
-            position: relative;
-            z-index: 1;
-        }
-
-        .d-button-alt {
-            width: fit-content;
+        #butter {
+            width: 100vw;
             height: 0;
-            overflow: hidden;
-            border-radius: 5px;
-            background-color: #fff;
-            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11),
-                0 2px 2px rgba(0, 0, 0, 0.11),
-                0 4px 4px rgba(0, 0, 0, 0.11),
-                0 8px 8px rgba(0, 0, 0, 0.11);
-            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-            font-size: 14px;
-            line-height: 24px;
-            padding-left: 5px;
-            padding-right: 5px;
+            background-color: rgb(35, 45, 75);
             position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 0;
+            transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
         }
 
-        #d-button-alt-1.active {
-            height: 24px;
-            left: 14.88px;
+        #butter.active {
+            height: 90vh;
         }
 
-        #d-button-alt-2.active {
-            height: 24px;
-            left: 72.74px;
+        #cup {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
         }
 
-        #d-button-alt-3.active {
-            height: 24px;
-            left: 113.595px;
+        #cup.active {
+            top: 90vh;
         }
 
-        #d-button-alt-4.active {
-            height: 24px;
-            left: 156.845px;
+        #btc-lights {
+            width: 100%;
+            height: 20px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            background-color: #ffffff;
         }
 
-        #d-button-alt-5.active {
-            height: 24px;
-            left: 198.86px;
+        #btcs {
+            position: relative;
         }
 
-        #d-button-alt-6.active {
-            height: 24px;
-            left: 248.84px;
+        .btc-o {
+            height: 50px;
+            background-color: rgb(35, 45, 75);
+            border-radius: 0 0 10px 10px;
         }
 
-        #d-button-alt-7.active {
-            height: 24px;
-            left: 291.75px;
+        #btc-circles {
+            display: flex;
+            justify-content: center;
+            align-items: center;
         }
 
-        #d-button-alt-8.active {
-            height: 24px;
-            left: 339.09px;
+        #btc-o-1 {
+            width: 217px;
         }
 
-        #doors-wall {
-            position: fixed;
+        .btc-o::before,
+        .btc-o::after,
+        .btc-o .btc-circles::before,
+        .btc-o .btc-circles::after {
+            content: "";
+            position: absolute;
             top: 0;
-            left: 0;
-            width: 100vw;
-            height: 0;
-            background-color: transparent;
-            overflow-x: hidden;
-            overflow-y: scroll;
-            transition: all 0.5s cubic-bezier(1, 0, 0, 1);
         }
 
-        #doors-wall.active {
-            height: 100vh;
-            background-color: #f6f6f6;
+        .btc-o::before,
+        .btc-o::after {
+            background-color: rgb(35, 45, 75);
+            width: 10px;
+            height: 10px;
+            left: -10px;
+            z-index: 1;
         }
 
-        #doors-wall-head {
-            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-            font-size: 25px;
-            font-weight: bold;
-            margin-left: 30px;
-            margin-top: 70px;
+        .btc-o::after {
+            left: unset;
+            right: -10px;
         }
 
-        #doors-wall-grid {
-            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-            margin-left: 30px;
-            margin-right: 30px;
-            margin-top: 15px;
-            display: grid;
-            grid-template-columns: 1fr 2fr 3fr;
+        .btc-o .btc-circles::before,
+        .btc-o .btc-circles::after {
+            background-color: #ffffff;
+            width: 20px;
+            height: 20px;
+            border-radius: 10px;
+            z-index: 2;
+            left: -20px;
+            top: 0px;
         }
 
-        .d-wall-sec>ul {
-            list-style: none;
-            margin-left: 0;
-            padding-left: 0;
+        .btc-o .btc-circles::after {
+            left: unset;
+            right: -20px;
         }
 
-        .d-wall-sec>ul>a>li {
-            margin-bottom: 5px;
+        .btc {
+            width: 40px;
+            height: 40px;
+            position: absolute;
+            bottom: 5px;
+            left: 5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 5px;
+            color: white;
         }
 
-        .d-wall-sec-text {
-            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-            font-size: 18px;
+        #btc-1 {
+            width: 72px;
+            background-image: url(../static/img/home-button-dark.svg);
+            background-size: cover;
         }
 
-        #d-wall-sec-3>ul {
-            display: grid;
-            grid-template-columns: 2fr 2fr;
+        #btc-2 {
+            margin-left: 77px;
         }
 
-        @media (max-width: 768px) {
-            #door-3 {
-                display: none !important;
-            }
+        #btc-3 {
+            margin-left: 122px;
         }
 
-        @media (max-width: 768px) {
-
-            #door-2 {
-                width: 92.5px !important;
-            }
-
-            #d-button-6 {
-                display: none;
-            }
-
-            #doors-alt {
-                display: none;
-            }
-
-            #door-3 {
-                display: none !important;
-            }
-
-            #doors-wall-grid {
-                grid-template-columns: 1fr 1fr;
-            }
+        #btc-4 {
+            margin-left: 167px;
+        }
 
-            #d-wall-sec-3>ul {
-                display: block;
-            }
+        .btc:hover {
+            background-color: hsl(225, 36%, 62%);
         }
     </style>
 </head>
 
 <body>
-    <header id="door">
-        <div id="doors">
-            <div class="doors" id="door-1">
-                <a href="./aluminum_studio.html">
-                    <div class="d-button" id="d-button-1"></div>
-                </a>
-                <a href="./clock.html">
-                    <div class="d-button" id="d-button-2">
-                        <i class="fas fa-clock"></i>
-                    </div>
-                </a>
-                <a href="./aluminum_studio.html">
-                    <div class="d-button" id="d-button-3">
-                        <i class="fas fa-info"></i>
-                    </div>
-                </a>
-                <a href="./apple.html">
-                    <div class="d-button" id="d-button-4">
-                        <i class="fa-brands fa-apple"></i>
-                    </div>
-                </a>
-                <a href="./music.html">
-                    <div class="d-button" id="d-button-5">
-                        <i class="fas fa-music"></i>
-                    </div>
-                </a>
-            </div>
-            <div class="doors" id="door-2">
-                <a href="./contact.html">
-                    <div class="d-button" id="d-button-6">
-                        <i class="fa-solid fa-message"></i>
-                    </div>
-                </a>
-                <a href="#">
-                    <div class="d-button" id="d-button-7">
-                        <i class="fa-solid fa-chevron-up"></i>
-                    </div>
-                </a>
-                <div class="d-button" id="d-button-8">
-                    <span id="d-button-8-label">
-                        <i class="fa-solid fa-circle-chevron-right"></i>
-                    </span>
-                </div>
-            </div>
-        </div>
-        <div id="doors-alt">
-            <div class="d-button-alt" id="d-button-alt-1">Home</div>
-            <div class="d-button-alt" id="d-button-alt-2">Clock</div>
-            <div class="d-button-alt" id="d-button-alt-3">About</div>
-            <div class="d-button-alt" id="d-button-alt-4">Apple</div>
-            <div class="d-button-alt" id="d-button-alt-5">Music</div>
-            <div class="d-button-alt" id="d-button-alt-6">Contacts</div>
-            <div class="d-button-alt" id="d-button-alt-7">Go to top</div>
-            <div class="d-button-alt" id="d-button-alt-8">Expand</div>
+    <div id="buttercup">
+        <div id="butter">
+
         </div>
-        <div id="doors-wall">
-            <div id="doors-wall-head">网站地图</div>
-            <div id="doors-wall-grid">
-                <div class="d-wall-sec" id="d-wall-sec-1">
-                    <a href="./apple.html">
-                        <span class="d-wall-sec-text">苹果</span>
-                    </a>
-                    <ul>
-                        <a href="./subpages/dubdub.html">
-                            <li>WWDC</li>
-                        </a>
-                        <a href="./subpages/iphone.html">
-                            <li>iPhone</li>
-                        </a>
-                        <a href="./subpages/iphone.html">
-                            <li>iPad</li>
-                        </a>
-                        <a href="./subpages/mac.html">
-                            <li>Mac</li>
-                        </a>
-                    </ul>
-                </div>
-                <div class="d-wall-sec" id="d-wall-sec-2">
-                    <a href="./music.html">
-                        <span class="d-wall-sec-text">音乐</span>
-                    </a>
-                    <ul>
-                        <a href="./subpages/1989tv.html">
-                            <li>1989 (Taylor's Version)</li>
-                        </a>
-                        <a href="./subpages/lover.html">
-                            <li>Lover</li>
-                        </a>
-                        <a href="./subpages/midnights.html">
-                            <li>Midnights</li>
-                        </a>
-                        <a href="./subpages/ttpd.html">
-                            <li>The Tortured Poets Department</li>
-                        </a>
-                        <a href="./subpages/taylorswift.html">
-                            <li>Taylor Swift</li>
-                        </a>
-                    </ul>
-                </div>
-                <div class="d-wall-sec" id="d-wall-sec-3">
-                    <span class="d-wall-sec-text">其他</span>
-                    <ul>
-                        <a href="./aluminum_studio.html">
-                            <li>关于</li>
-                        </a>
-                        <a href="./christmas.html">
-                            <li>圣诞</li>
-                        </a>
-                        <a href="./classical_ch_sh.html">
-                            <li>部编版高中语文古文</li>
-                        </a>
-                        <a href="./classical_ch.html">
-                            <li>部编版初中语文古文</li>
-                        </a>
-                        <a href="./clock.html">
-                            <li>时钟</li>
-                        </a>
-                        <a href="./contact.html">
-                            <li>联系</li>
-                        </a>
-                        <a href="./develop.html">
-                            <li>开发与实验室</li>
-                        </a>
-                        <a href="./flashback.html">
-                            <li>采光间</li>
-                        </a>
-                        <a href="./friends.html">
-                            <li>老友记</li>
-                        </a>
-                        <a href="./homemade_giftcard.html">
-                            <li>手写祝福</li>
-                        </a>
-                        <a href="./music.html">
-                            <li>音乐</li>
-                        </a>
-                        <a href="./noticeboard.html">
-                            <li>笔记板</li>
-                        </a>
-                        <a href="./search.html">
-                            <li>搜索</li>
-                        </a>
-                        <a href="./survey.html">
-                            <li>调查问卷</li>
-                        </a>
-                    </ul>
+        <div id="cup">
+            <div id="btc-lights"></div>
+            <div id="btcs">
+                <div class="btc-o" id="btc-o-1">
+                    <div class="btc-circles">
+                        <div class="btc" id="btc-1"></div>
+                        <div class="btc" id="btc-2">
+                            <i class="fas fa-info"></i>
+                        </div>
+                        <div class="btc" id="btc-3">
+                            <i class="fa-regular fa-clock"></i>
+                        </div>
+                        <div class="btc" id="btc-4">
+                            <i class="fa-regular fa-square-plus"></i>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
-    </header>
+    </div>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ipsam sequi quibusdam, laboriosam quidem excepturi
+        aut tempore, similique, eos quam nulla nobis placeat. Exercitationem quo fugit sapiente ex consequatur culpa?
+    </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ipsam sequi quibusdam, laboriosam quidem excepturi
+        aut tempore, similique, eos quam nulla nobis placeat. Exercitationem quo fugit sapiente ex consequatur culpa?
+    </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ipsam sequi quibusdam, laboriosam quidem excepturi
+        aut tempore, similique, eos quam nulla nobis placeat. Exercitationem quo fugit sapiente ex consequatur culpa?
+    </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ipsam sequi quibusdam, laboriosam quidem excepturi
+        aut tempore, similique, eos quam nulla nobis placeat. Exercitationem quo fugit sapiente ex consequatur culpa?
+    </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ipsam sequi quibusdam, laboriosam quidem excepturi
+        aut tempore, similique, eos quam nulla nobis placeat. Exercitationem quo fugit sapiente ex consequatur culpa?
+    </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ipsam sequi quibusdam, laboriosam quidem excepturi
+        aut tempore, similique, eos quam nulla nobis placeat. Exercitationem quo fugit sapiente ex consequatur culpa?
+    </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ipsam sequi quibusdam, laboriosam quidem excepturi
+        aut tempore, similique, eos quam nulla nobis placeat. Exercitationem quo fugit sapiente ex consequatur culpa?
+    </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ipsam sequi quibusdam, laboriosam quidem excepturi
+        aut tempore, similique, eos quam nulla nobis placeat. Exercitationem quo fugit sapiente ex consequatur culpa?
+    </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ipsam sequi quibusdam, laboriosam quidem excepturi
+        aut tempore, similique, eos quam nulla nobis placeat. Exercitationem quo fugit sapiente ex consequatur culpa?
+    </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ipsam sequi quibusdam, laboriosam quidem excepturi
+        aut tempore, similique, eos quam nulla nobis placeat. Exercitationem quo fugit sapiente ex consequatur culpa?
+    </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ipsam sequi quibusdam, laboriosam quidem excepturi
+        aut tempore, similique, eos quam nulla nobis placeat. Exercitationem quo fugit sapiente ex consequatur culpa?
+    </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ipsam sequi quibusdam, laboriosam quidem excepturi
+        aut tempore, similique, eos quam nulla nobis placeat. Exercitationem quo fugit sapiente ex consequatur culpa?
+    </p>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/static/.DS_Store b/static/.DS_Store
index f50ee9c82d471bf0226df4a348fb0baa0cf49683..5d24811a0793b01f306a03902e64fb4047fc0a03 100644
GIT binary patch
literal 12292
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

delta 401
zcmZokXbF&DU|?W$DortDU{C-uIe-{M3-C-V6q~3gIoUvmMI6Xy5C&pKpg03VzGqH;
za#Buy(&j?xSu7hHxS2VD5+K0A4HOb**{sg<gqcxzGmnBF+hzflKBmb$0<n_=1=n&I
z8(Qcn7+D%jmXWrf>?&lXBP1m)6E7f~l$e~IUX)*&m*SkClV9YNQ<@qtz+aq^U+$Tl
zpBGS+T9%nwK6#PQuKI{fpg?eDRcds4QD#bTL1J=dUb?dV2Z#eWl^rx7ECB{(2!nw^
z*})6K<Pd=gL1{+Lki7i7RAq+%h=8(#H&lj$L7TymA($bCp^%}0VLHQNhV={w8O|}t
zKW6yK$jr#gD8{J7sLiOuXv%2L=)ma7=*1Y#7{i!2nOQ_<bBxpzW<h3%NebLR+7%R@
ln*}+(Gf(E%@to|>!@<D>32KeW2|6=3Gpa^10t0FlBLF$aP^AC>

