diff --git a/.vs/ProjectSettings.json b/.vs/ProjectSettings.json
new file mode 100644
index 00000000..f8b48885
--- /dev/null
+++ b/.vs/ProjectSettings.json
@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}
\ No newline at end of file
diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json
new file mode 100644
index 00000000..d47d6d9e
--- /dev/null
+++ b/.vs/VSWorkspaceState.json
@@ -0,0 +1,9 @@
+{
+  "ExpandedNodes": [
+    "",
+    "\\modules",
+    "\\modules\\split"
+  ],
+  "SelectedNode": "\\modules\\split\\split_11_by_danqi.html",
+  "PreviewInSolutionExplorer": false
+}
\ No newline at end of file
diff --git a/.vs/WebCraftifyAI/FileContentIndex/1ad8fd89-6c2a-4243-a40e-c783a5b63199.vsidx b/.vs/WebCraftifyAI/FileContentIndex/1ad8fd89-6c2a-4243-a40e-c783a5b63199.vsidx
new file mode 100644
index 00000000..cd467f10
Binary files /dev/null and b/.vs/WebCraftifyAI/FileContentIndex/1ad8fd89-6c2a-4243-a40e-c783a5b63199.vsidx differ
diff --git a/.vs/WebCraftifyAI/FileContentIndex/449c8492-7fdf-4888-a919-eaf906fd62a9.vsidx b/.vs/WebCraftifyAI/FileContentIndex/449c8492-7fdf-4888-a919-eaf906fd62a9.vsidx
new file mode 100644
index 00000000..6f3e88c0
Binary files /dev/null and b/.vs/WebCraftifyAI/FileContentIndex/449c8492-7fdf-4888-a919-eaf906fd62a9.vsidx differ
diff --git a/.vs/WebCraftifyAI/FileContentIndex/62d4613a-15c5-4467-b4a5-d93f062ad4f1.vsidx b/.vs/WebCraftifyAI/FileContentIndex/62d4613a-15c5-4467-b4a5-d93f062ad4f1.vsidx
new file mode 100644
index 00000000..27547467
Binary files /dev/null and b/.vs/WebCraftifyAI/FileContentIndex/62d4613a-15c5-4467-b4a5-d93f062ad4f1.vsidx differ
diff --git a/.vs/WebCraftifyAI/FileContentIndex/b2d9bc45-27d3-4a4e-a814-b300556581dc.vsidx b/.vs/WebCraftifyAI/FileContentIndex/b2d9bc45-27d3-4a4e-a814-b300556581dc.vsidx
new file mode 100644
index 00000000..c31d0cef
Binary files /dev/null and b/.vs/WebCraftifyAI/FileContentIndex/b2d9bc45-27d3-4a4e-a814-b300556581dc.vsidx differ
diff --git a/.vs/WebCraftifyAI/FileContentIndex/f806280c-b43c-4f6e-8108-aa904e4f1550.vsidx b/.vs/WebCraftifyAI/FileContentIndex/f806280c-b43c-4f6e-8108-aa904e4f1550.vsidx
new file mode 100644
index 00000000..3cd451b8
Binary files /dev/null and b/.vs/WebCraftifyAI/FileContentIndex/f806280c-b43c-4f6e-8108-aa904e4f1550.vsidx differ
diff --git a/.vs/WebCraftifyAI/v17/.wsuo b/.vs/WebCraftifyAI/v17/.wsuo
new file mode 100644
index 00000000..d836624a
Binary files /dev/null and b/.vs/WebCraftifyAI/v17/.wsuo differ
diff --git a/.vs/WebCraftifyAI/v17/workspaceFileList.bin b/.vs/WebCraftifyAI/v17/workspaceFileList.bin
new file mode 100644
index 00000000..343feb49
Binary files /dev/null and b/.vs/WebCraftifyAI/v17/workspaceFileList.bin differ
diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite
new file mode 100644
index 00000000..d77a2c63
Binary files /dev/null and b/.vs/slnx.sqlite differ
diff --git a/modules/split/images_and_icons/work.jpg b/modules/split/images_and_icons/work.jpg
new file mode 100644
index 00000000..0d613252
Binary files /dev/null and b/modules/split/images_and_icons/work.jpg differ
diff --git a/modules/split/split_11_by_danqi.html b/modules/split/split_11_by_danqi.html
new file mode 100644
index 00000000..2d3000c9
--- /dev/null
+++ b/modules/split/split_11_by_danqi.html
@@ -0,0 +1,88 @@
+
+<div class="container">
+    <div class="inner-container">
+        <div class="text-section">
+            <h1>Works for you, even when you aren't working</h1>
+            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+            <button>Learn more</button>
+        </div>
+        <div class="image-section">
+            <img src="images_and_icons/work.jpg" alt="Image description">
+        </div>
+    </div>
+</div>
+
+<style>
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  position: relative;
+}
+
+.inner-container {
+  position: relative;
+  width: 500px; 
+  height: 300px;
+  border: 1px solid #fff;
+}
+
+.image-section {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.image-section img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.text-section {
+  position: absolute;
+  top: 0; 
+  bottom: 0; 
+  right: 0;
+  width: 45%; 
+  background: none;
+  display: flex;
+  flex-direction: column; 
+  align-items: flex-start;
+  z-index: 2;
+}
+
+
+.text-section h1 {
+  font-size: 22px;
+  font-family: system-ui;
+  padding-right: 20px;
+  padding-top: 20px;
+  margin-bottom: 0px;
+}
+
+.text-section p {
+  font-size: 14px;
+  font-family: system-ui;
+  padding-right: 10px;
+  margin-bottom: 25px;
+}
+
+button {
+  padding: 10px 20px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #45a049;
+}
+</style>