split creator - Web design#11

.vs/ProjectSettings.json

@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}

.vs/VSWorkspaceState.json

@@ -0,0 +1,9 @@
+{
+  "ExpandedNodes": [
+    "",
+    "\\modules",
+    "\\modules\\split"
+  ],
+  "SelectedNode": "\\modules\\split\\split_11_by_danqi.html",
+  "PreviewInSolutionExplorer": false
+}

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>