diff --git a/my code/07-split landing-page/index.html b/my code/07-split landing-page/index.html
new file mode 100644
index 0000000..ea3f732
--- /dev/null
+++ b/my code/07-split landing-page/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+ 07 split landing page
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/brad traversy/split-landing-page/ps.jpg b/my code/07-split landing-page/ps.jpg
similarity index 100%
rename from brad traversy/split-landing-page/ps.jpg
rename to my code/07-split landing-page/ps.jpg
diff --git a/my code/07-split landing-page/script.js b/my code/07-split landing-page/script.js
new file mode 100644
index 0000000..dbf2074
--- /dev/null
+++ b/my code/07-split landing-page/script.js
@@ -0,0 +1,21 @@
+const body = document.getElementsByTagName("body")[0];
+
+const gridItem = document.querySelectorAll(".grid-item");
+
+gridItem.forEach((item) => {
+ item.addEventListener("mouseover", handler);
+ item.addEventListener("mouseout", removeHandler);
+});
+
+function handler(e) {
+ if (e.target.id === "ps-container") {
+ body.classList.add("ps-body");
+ } else if (e.target.id === "xbox-container") {
+ body.classList.add("xbox-body");
+ }
+}
+
+function removeHandler(e) {
+ body.classList.remove("ps-body");
+ body.classList.remove("xbox-body");
+}
diff --git a/my code/07-split landing-page/style.css b/my code/07-split landing-page/style.css
new file mode 100644
index 0000000..287193c
--- /dev/null
+++ b/my code/07-split landing-page/style.css
@@ -0,0 +1,76 @@
+* {
+ margin: 0;
+ padding: 0;
+ font-family: sans-serif;
+ transition: all 0.4s linear;
+}
+
+body {
+ display: grid;
+ grid-template-columns: 50% 50%;
+ height: 100vh;
+ transition: all 0.4s ease-in;
+}
+
+.ps-body {
+ grid-template-columns: 70% 30%;
+ transition: all 0.4s linear;
+}
+
+.xbox-body {
+ grid-template-columns: 30% 70%;
+}
+
+.grid-item {
+ overflow: hidden;
+}
+
+#ps-wrapper {
+ background: url("./ps.jpg") center / cover;
+}
+
+#xbox-wrapper {
+ background: url("./xbox.jpg") center / cover;
+}
+
+.container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ color: #fff;
+}
+
+#ps-container {
+ background: rgba(6, 61, 134, 0.6);
+}
+
+#xbox-container {
+ background: rgba(60, 60, 60, 0.6);
+}
+
+.heading {
+ font-size: 50px;
+ font-weight: 700;
+}
+
+.btn {
+ padding: 20px 80px;
+ margin: 50px;
+ text-transform: uppercase;
+ border: 3px solid #fff;
+ display: block;
+ font-weight: 600;
+}
+
+#ps-btn:hover {
+ background-color: rgb(53, 34, 221);
+ border-color: rgb(53, 34, 221);
+}
+
+#xbox-btn:hover {
+ background-color: rgb(16, 102, 16);
+ border-color: rgb(16, 102, 16);
+}
diff --git a/brad traversy/split-landing-page/xbox.jpg b/my code/07-split landing-page/xbox.jpg
similarity index 100%
rename from brad traversy/split-landing-page/xbox.jpg
rename to my code/07-split landing-page/xbox.jpg