From 43bfb423fe319f0ff5f8653ee3ad6f2ec852d34c Mon Sep 17 00:00:00 2001
From: Akari Amano <37510266+amarudemonn@users.noreply.github.com>
Date: Thu, 29 Apr 2021 14:52:56 +0300
Subject: [PATCH] Using gradients as overlays instead of absolute positioning

This saves your time and lines of code easily creating an overlay using linear-gradient instead of using positioning
---
 split-landing-page/style.css | 20 ++------------------
 1 file changed, 2 insertions(+), 18 deletions(-)

diff --git a/split-landing-page/style.css b/split-landing-page/style.css
index 0888b68..a39b6fd 100644
--- a/split-landing-page/style.css
+++ b/split-landing-page/style.css
@@ -75,34 +75,18 @@ h1 {
 
 .split.left {
   left: 0;
-  background: url('ps.jpg');
+  background: linear-gradient(to bottom, var(--left-bg-color), var(--left-bg-color)), url('ps.jpg');
   background-repeat: no-repeat;
   background-size: cover;
 }
 
-.split.left::before {
-  content: '';
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: var(--left-bg-color);
-}
-
 .split.right {
   right: 0;
-  background: url('xbox.jpg');
+  background: linear-gradient(to bottom, var(--right-bg-color), var(--right-bg-color)), url('xbox.jpg');
   background-repeat: no-repeat;
   background-size: cover;
 }
 
-.split.right::before {
-  content: '';
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: var(--right-bg-color);
-}
-
 .split.right,
 .split.left,
 .split.right::before,