diff --git a/index.html b/index.html index 2624618..e0fa75f 100644 --- a/index.html +++ b/index.html @@ -21,11 +21,19 @@
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/style.css b/style.css index d2c57cc..133c77b 100644 --- a/style.css +++ b/style.css @@ -29,7 +29,7 @@ body { width: 550px; top: 0px; left: -80px; - background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.24)); + background: linear-gradient(145deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.24)); } .border { @@ -58,23 +58,46 @@ body { position: absolute; display: block; height: 220px; - width: 320px; + width: 280px; top: 40px; - left: 115px; - border-radius: 20px; + left: 135px; + border-radius: 50% / 10%; background: linear-gradient(#202020, #262626); } +.screen-cutout:before { + content: ''; + position: absolute; + top: 9%; + bottom: 9%; + right: -5%; + left: -5%; + background: inherit; + border-radius: 5% / 50%; +} .screen { position: absolute; display: block; height: 210px; - width: 310px; + width: 270px; top: 5px; left: 5px; - border-radius: 18px; - background: radial-gradient(#808080, #666666); - box-shadow: 0 0 20px 10px #2B3030 inset; + border-radius: 50% / 10%; + background: radial-gradient(#808080, #666666, #2B3030); + background-size: 105% 100%; + background-position: center; +} +.screen:before { + content: ''; + position: absolute; + top: 9%; + bottom: 9%; + right: -5%; + left: -5%; + background: inherit; + background-size: 100% 120%; + background-position: center; + border-radius: 5% / 50%; } .monitor-stand { @@ -91,6 +114,7 @@ body { /* Chassis */ .chassis-top { + z-index: 2; position: relative; display: block; margin: 0 auto; @@ -99,16 +123,7 @@ body { 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)); + box-shadow: 0px 0px 3px; } .chassis-top-labels { @@ -119,6 +134,60 @@ body { border-right: 20px solid transparent; height: 0; top: 15px; - left: 40px; + left: 10px; width: 640px; } + + +.chassis-top-gradient { + position: absolute; + display: block; + height: 100px; + width: 760px; + top: -15px; + left: -60px; + background: linear-gradient(165deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.24)); +} + +.chassis-keyboard { + z-index: 2; + position: relative; + display: block; + margin: 0 auto; + border-bottom: 110px solid beige; + border-left: 60px solid transparent; + border-right: 60px solid transparent; + height: 0; + width: 760px; +} + +.chassis-keyboard-gradient { + position: absolute; + display: block; + height: 110px; + width: 880px; + top: 0px; + left: -60px; + background: linear-gradient(145deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.15)); +} + +.chassis-base { + position: relative; + display: block; + margin: 0 auto; + border-bottom: 35px solid beige; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + height: 0; + width: 880px; +} + +.chassis-base-gradient { + position: absolute; + display: block; + height: 35px; + width: 894px; + top: 0px; + left: -7px; + background: linear-gradient(177deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.30)); +}