From 89c089c274785f5062fdffe04771aa2fb266691f Mon Sep 17 00:00:00 2001
From: Ashutosh Singh <130897584+codeaashu@users.noreply.github.com>
Date: Sun, 28 Jan 2024 16:24:58 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 24 +++++++++
script.js | 21 ++++++++
style.css | 145 +++++++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 190 insertions(+)
create mode 100644 index.html
create mode 100644 script.js
create mode 100644 style.css
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..bfd329d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+ CODE AASHU | Split Landing Page
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..84f8606
--- /dev/null
+++ b/script.js
@@ -0,0 +1,21 @@
+/* ===( CODE AASHU )=== */
+const left = document.querySelector(".left");
+const right = document.querySelector(".right");
+const container = document.querySelector(".container");
+
+left.addEventListener("mouseenter", () => {
+ container.classList.add("hover-left");
+});
+
+left.addEventListener("mouseleave", () => {
+ container.classList.remove("hover-left");
+});
+
+right.addEventListener("mouseenter", () => {
+ container.classList.add("hover-right");
+});
+
+right.addEventListener("mouseleave", () => {
+ container.classList.remove("hover-right");
+});
+
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..15b112c
--- /dev/null
+++ b/style.css
@@ -0,0 +1,145 @@
+/* ===( CODE AASHU )=== */
+:root {
+ --container-bg-color: #333;
+ --left-bg-color: rgba(223, 39, 39, 0.7);
+ --left-button-hover-color: rgba(161, 11, 11, 0.3);
+ --right-bg-color: rgba(43, 43, 43, 0.8);
+ --right-button-hover-color: rgba(92, 92, 92, 0.3);
+ --hover-width: 75%;
+ --other-width: 25%;
+ --speed: 1000ms;
+ }
+
+ html, body {
+ padding:0;
+ margin:0;
+ font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+ width: 100%;
+ height: 100%;
+ overflow-x: hidden;
+ }
+
+ h1 {
+ font-size: 4rem;
+ color: #fff;
+ position: absolute;
+ left: 50%;
+ top: 20%;
+ transform: translateX(-50%);
+ white-space: nowrap;
+ }
+
+ .button {
+ display: block;
+ position: absolute;
+ left: 50%;
+ top: 40%;
+ height: 2.5rem;
+ padding-top: 1.3rem;
+ width: 15rem;
+ text-align: center;
+ color: #fff;
+ border: #fff solid 0.2rem;
+ font-size: 1rem;
+ font-weight: bold;
+ text-transform: uppercase;
+ text-decoration: none;
+ transform: translateX(-50%);
+ }
+
+ .split.left .button:hover {
+ background-color: var(--left-button-hover-color);
+ border-color: var(--left-button-hover-color);
+ }
+
+ .split.right .button:hover {
+ background-color: var(--right-button-hover-color);
+ border-color: var(--right-button-hover-color);
+ }
+
+ .container {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ background: var(--container-bg-color);
+ }
+
+ .split {
+ position: absolute;
+ width: 50%;
+ height: 100%;
+ overflow: hidden;
+ }
+
+ .split.left {
+ left:0;
+ background: url('https://image.ibb.co/m56Czw/designer.jpg') center center no-repeat;
+ background-size: cover;
+ }
+
+ .split.left:before {
+ position:absolute;
+ content: "";
+ width: 100%;
+ height: 100%;
+ background: var(--left-bg-color);
+ }
+
+ .split.right {
+ right:0;
+ background: url('https://image.ibb.co/m3ZbRb/programmer.png') center center no-repeat;
+ background-size: cover;
+ }
+
+ .split.right:before {
+ position:absolute;
+ content: "";
+ width: 100%;
+ height: 100%;
+ background: var(--right-bg-color);
+ }
+
+ .split.left, .split.right, .split.right:before, .split.left:before {
+ transition: var(--speed) all ease-in-out;
+ }
+
+ .hover-left .left {
+ width: var(--hover-width);
+ }
+
+ .hover-left .right {
+ width: var(--other-width);
+ }
+
+ .hover-left .right:before {
+ z-index: 2;
+ }
+
+
+ .hover-right .right {
+ width: var(--hover-width);
+ }
+
+ .hover-right .left {
+ width: var(--other-width);
+ }
+
+ .hover-right .left:before {
+ z-index: 2;
+ }
+
+ @media(max-width: 800px) {
+ h1 {
+ font-size: 2rem;
+ }
+
+ .button {
+ width: 12rem;
+ }
+ }
+
+ @media(max-height: 700px) {
+ .button {
+ top: 70%;
+ }
+ }
\ No newline at end of file