From 5826aff1c58a67e13f7b610e8b1fb3b5ec54f6e3 Mon Sep 17 00:00:00 2001
From: Harishankar  Ravindran <harishankarravindran@Haris-Macbook-Pro.local>
Date: Mon, 22 Apr 2024 00:25:26 -0400
Subject: [PATCH] Added new feature: descriptive explanation of what was
 changed or added

---
 .vscode/launch.json                         |  14 +++
 modules/shapes/shapes,#430_Harishankar.html | 117 ++++++++++++++++++++
 2 files changed, 131 insertions(+)
 create mode 100644 .vscode/launch.json
 create mode 100644 modules/shapes/shapes,#430_Harishankar.html

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 00000000..dd275af1
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,14 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Open shapes,#430_Harishankar.html",
+            "file": "/Users/harishankarravindran/Comp science stuff/github projects/WebCraftifyAI/modules/shapes/shapes,#430_Harishankar.html"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/modules/shapes/shapes,#430_Harishankar.html b/modules/shapes/shapes,#430_Harishankar.html
new file mode 100644
index 00000000..7ad1eabe
--- /dev/null
+++ b/modules/shapes/shapes,#430_Harishankar.html
@@ -0,0 +1,117 @@
+<div class="container">
+    <div class="inner-container">
+        <div class="blue"></div>
+        <div class="light-blue"></div>
+        <!-- <div class="circle-image">
+            <img src="./images_and_icons/explorer.jpg" class="random-image">
+        </div> -->
+        <div class="text-container">
+            <h2 class="title">Discover Personalized Outdoor Excursions Tailored for You</h2>
+            <p class="text">
+                Plan your unique journey
+            </p>
+            <span class="book-now-btn">RESERVE TODAY</span>
+        </div>
+    </div>
+</div>
+
+<style>
+    .container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        flex-direction: column;
+        position: relative;
+        flex-wrap: wrap;
+    }
+
+    .inner-container {
+        position: relative;
+        width: 480px;
+        height: 350px;
+        background-color: #eceff1;
+    }
+
+    .blue {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 50%;
+        background-color: #5c6bc0;
+    }
+
+    .light-blue {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 45%;
+        background-color: #42a5f5;
+    }
+
+    .circle-image {
+        position: absolute;
+        width: 255px;
+        height: 255px;
+        border-radius: 50%;
+        overflow: hidden;
+        top: 50%;
+        right: 40%;
+        transform: translate(72%,-65%);
+        display: flex;
+        z-index: 1;
+    }
+
+    .circle-image img {
+        width: 100%;
+        height: auto;
+    }
+
+    .text-container {
+        position: absolute;
+        border-radius: 30px;
+        width: 50%;
+        height:45%;
+        right: 53%;
+        top: 65%;
+        transform: translate(20%, -40%);
+        background-color: #ffffff;
+        padding: 0.5em;
+        z-index: 2;
+    }
+
+    .text-container h2 {
+        color: #000000;
+        margin-left: 20px;
+        font-size: 1.15em;
+        font-family: Arial;
+        font-weight: lighter;
+        margin-top: 15px;
+    }
+
+    .text-container p {
+        color: #000000;
+        margin-left: 20px;
+        font-size: 0.5em;
+        font-family: Arial;
+        font-weight: lighter;
+    }
+
+    .book-now-btn {
+        text-decoration: none;
+        background-color: #42a5f5;
+        color: white;
+        padding: 5px 20px;
+        border-radius: 20px;
+        display: inline-block;
+        font-family: Arial;
+        font-weight: lighter;
+        transform: scale(1.25,1.25);
+        margin-left: 27px;
+        font-size: 0.5em;
+        margin-top: 5px;
+        margin-bottom: 10px;
+    }
+</style>