diff --git a/index.html b/index.html index 8592519..b2ee6e6 100644 --- a/index.html +++ b/index.html @@ -2,66 +2,7 @@ - + @@ -77,5 +18,5 @@ body { - + diff --git a/style.css b/style.css new file mode 100644 index 0000000..17160fc --- /dev/null +++ b/style.css @@ -0,0 +1,67 @@ +body { + background: black; +} + +* { + margin: 0; + padding: 0; +} + +/* Monitor */ + +.bezel { + position: relative; + display: block; + margin: 25px auto; + border-bottom: 300px solid beige; + border-left: 80px solid transparent; + border-right: 80px solid transparent; + height: 0; + width: 390px; +} + +.border { + position: absolute; + display: block; + top: 10px; + left: -70px; + border-bottom: 280px solid #3d3d3d; + border-left: 75px solid transparent; + border-right: 75px solid transparent; + height: 0; + width: 380px; +} + +.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)); +} + +.screen-cutout { + position: absolute; + display: block; + height: 220px; + width: 320px; + top: 40px; + left: 115px; + border-radius: 20px; + background: linear-gradient(#202020, #262626); +} + +.screen { + position: absolute; + display: block; + height: 210px; + width: 310px; + top: 5px; + left: 5px; + border-radius: 20px; + background: radial-gradient(#808080, #666666); + box-shadow: 0 0 20px 10px #2B3030 inset; +} +