Jul 24

index.html

@@ -55,6 +55,7 @@ <h3>Daily Challenges Solution</h3>
                     <li><a href="./pages/Jul/Jul21.html">Jul 21, 2024</a></li>
                     <li><a href="./pages/Jul/Jul22.html">Jul 22, 2024</a></li>
                     <li><a href="./pages/Jul/Jul23.html">Jul 23, 2024</a></li>
+                    <li><a href="./pages/Jul/Jul24.html">Jul 24, 2024</a></li>
                 </ul>
             </details>
         </main>

pages/Jul/Jul24.html

@@ -0,0 +1,44 @@
+<div class="container">
+    <div class="wrapper">
+        <div class="top-circle"></div>
+        <div class="rect"></div>
+        <div class="bottom-circle"></div>
+    </div>
+</div>
+<style>
+    .container {
+        margin: -8px;
+        width: 400px;
+        height: 300px;
+        background-color: #edaf38;
+        overflow: hidden;
+    }
+
+    .wrapper {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .top-circle,
+    .bottom-circle {
+        width: 280px;
+        height: 40px;
+        background-color: #7f7f24;
+        border-radius: 50%;
+        transform: translateY(50%);
+    }
+
+    .rect {
+        width: 280px;
+        height: 121px;
+        background-color: #ffffcd;
+    }
+
+    .bottom-circle {
+        background-color: #ffffcd;
+        transform: translateY(-50%);
+    }
+</style>