From 4c1b56c9d8e8f9cb5b5546c7974754510bccce69 Mon Sep 17 00:00:00 2001 From: gamerdonkey Date: Sat, 6 Feb 2021 07:02:04 +0000 Subject: [PATCH] Making some improvements and adding the start of the chassis. --- index.html | 22 +++++++++++++----- style.css | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 78 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index b2ee6e6..2624618 100644 --- a/index.html +++ b/index.html @@ -7,14 +7,24 @@
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/style.css b/style.css index 17160fc..d2c57cc 100644 --- a/style.css +++ b/style.css @@ -10,21 +10,33 @@ body { /* Monitor */ .bezel { + z-index: 2; position: relative; display: block; - margin: 25px auto; + margin: 25px auto 0 auto; border-bottom: 300px solid beige; border-left: 80px solid transparent; border-right: 80px solid transparent; height: 0; width: 390px; + box-shadow: 0px 10px 30px; +} + +.bezel-gradient { + position: absolute; + display: block; + height: 300px; + width: 550px; + top: 0px; + left: -80px; + background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.24)); } .border { position: absolute; display: block; top: 10px; - left: -70px; + left: 10px; border-bottom: 280px solid #3d3d3d; border-left: 75px solid transparent; border-right: 75px solid transparent; @@ -32,14 +44,14 @@ body { width: 380px; } -.gradient { +.border-gradient { position: absolute; display: block; height: 300px; width: 550px; top: -10px; left: -85px; - background: radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0)); + background: radial-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.0)); } .screen-cutout { @@ -60,8 +72,53 @@ body { width: 310px; top: 5px; left: 5px; - border-radius: 20px; + border-radius: 18px; background: radial-gradient(#808080, #666666); box-shadow: 0 0 20px 10px #2B3030 inset; } +.monitor-stand { + z-index: 1; + position: relative; + display: block; + margin: 0px auto; + height: 20px; + width: 380px; + background: #b8b8a5; + /* background: #7a7a6e; */ +} + +/* Chassis */ + +.chassis-top { + position: relative; + display: block; + margin: 0 auto; + border-bottom: 100px solid beige; + border-left: 30px solid transparent; + border-right: 30px solid transparent; + height: 0; + width: 700px; +} + +.chassis-top-gradient { + position: absolute; + display: block; + height: 100px; + width: 760px; + top: 0px; + left: -30px; + background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.24)); +} + +.chassis-top-labels { + position: absolute; + display: block; + border-bottom: 70px solid #2b2b2b; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + height: 0; + top: 15px; + left: 40px; + width: 640px; +}