From e8c2396fb59617498ad7c720997dad221d2fee93 Mon Sep 17 00:00:00 2001 From: couldntfindabetterusername Date: Tue, 22 Feb 2022 10:49:47 +0530 Subject: [PATCH] day 7 completed --- my code/07-split landing-page/index.html | 30 +++++++ .../07-split landing-page}/ps.jpg | Bin my code/07-split landing-page/script.js | 21 +++++ my code/07-split landing-page/style.css | 76 ++++++++++++++++++ .../07-split landing-page}/xbox.jpg | Bin 5 files changed, 127 insertions(+) create mode 100644 my code/07-split landing-page/index.html rename {brad traversy/split-landing-page => my code/07-split landing-page}/ps.jpg (100%) create mode 100644 my code/07-split landing-page/script.js create mode 100644 my code/07-split landing-page/style.css rename {brad traversy/split-landing-page => my code/07-split landing-page}/xbox.jpg (100%) 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 + + + + + +
+
+ PlayStation 5 + buy now +
+
+
+
+ XBox Series X + buy now +
+
+ + + + + \ 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