Old-School Computer With Bezel

Tags: computer, css, monochrome, cool, pacdude, cory

Description:

If you use this theme, please leave a comment and/or friend me! I love to meet like-minded friends :D

Dear Strong Bad: How do you type with boxing gloves on your hands? This old-school looking ASCII-inspired theme hearkens back to old DOS computers. With a simulated CRT blur, monochrome color scheme and graphics, and a Terminal font, let everyone know you're definitely plugged into the Matrix. This version of the theme has an overlaid bezel which looks best on desktop but functions on mobile as well.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Cory (https://layouts.spacehey.com/layout?id=133) -->

<style>
/* Old School Computer by Cory Anotado - PacdudeGames.com */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@keyframes flicker {
  0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.83891;
  }
  30% {
    opacity: 0.65583;
  }
  35% {
    opacity: 0.67807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.84693;
  }
  50% {
    opacity: 0.96019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.71988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.71428;
  }
  85% {
    opacity: 0.70419;
  }
  90% {
    opacity: 0.7003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}
@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  10% {
    text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  15% {
    text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  30% {
    text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  35% {
    text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  40% {
    text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  45% {
    text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  50% {
    text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  60% {
    text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  65% {
    text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  70% {
    text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  75% {
    text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  85% {
    text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  95% {
    text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  100% {
    text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
}
body::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
body::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}
html::before{
	content: " ";
	width:100vw;
	height:100vh;
	display:block;
	position:fixed;
	top:0;
	left: 0;
	bottom: 0;
	right: 0;
	background-image:url(https://s3.amazonaws.com//depot.pacdudegames.com/spacehey/jonBE7c.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	z-index:100000;
	pointer-events:none;
}
body{
    animation: textShadow 1.6s infinite;
    font-size:24px;
    filter: grayscale(100%) sepia(100%) hue-rotate(75deg);
	background-color:#222222;
}
.container{
	margin-top:50px!important;
	margin-bottom:50px!important;
}
a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active{
	color:#FFFFFF;
	background-color:#CCCCCC!important;
	text-decoration:none!important;
}
nav .top, nav .links, main, footer{
	background:none;
}
.left, .right{
	  font-family: 'VT323', monospace!important;
	  color:#FFF!important;
}
nav .top, button, label, .links a, footer p{
	  font-family: 'VT323', monospace!important;
	  font-size:1rem!important;
	  color:#FFF!important;
}
.profile h1{
	  font-family: 'VT323', monospace!important;
	  color:#FFF!important;
	  font-size:2rem;
}
.links a, .left a, .right a{
	color:#FFF!important;
	background-color:#999;
}
.search-wrapper input{
	background-color: #222222;
	border: 1px solid #FFF;
	font-size: 1rem;
	font-family: 'VT323', monospace;
	color: #FFF;
}
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
	content: "";
}
.details-table td:first-child{
	color: #DDD;
	background: none;
}
.details-table td, .comments-table td:first-child, .music-table td:first-child, .comments-table td, .music-table td{
	background: none;
}
.profile .blurbs .heading, .profile .friends .heading{
	color: #FFF;
	font-size: 1.3rem;
}
button{
	background: none;
	border: none;
}
@media screen and (orientation:landscape) and (max-width:800px){
	.container{
		max-width:80%;
	}
}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 5293 comments ( View all | Add Comment )

. ♱ . ཐི 𝕸𝖔𝖚𝖗𝖓𝖎𝖓𝖌 ཋྀ . ♱ .	1791799833 I wanna use but i wanna change the background, does anybody know how to do that? Report Comment
⋆˚꩜ .𝓰𝓵𝓮𝓴𝓼𝓲𝓴 ✶ .ᐟ	1791388979 using Report Comment
clown	1791337128 imma use this Report Comment
stargore	1791152604 using! Report Comment
Xav The Vamp	1791013107 Using! Report Comment
Maxxxine!	1790790069 using!!:P Report Comment
Jeremy!!	1790724854 Using!! Report Comment
Z3R0	1790594309 Using! Report Comment
Evan	1790473113 Using! Report Comment
Benji	1790261018 Uzinggg !! Report Comment
bachi	1790142219 PEAK ALERT!! using <3 ^w0 Report Comment
Soapzee	1790097177 using !! Report Comment
Toby's Garbage Truck	1790043940 USINGGG Report Comment
w0lf_hal3y	1790014113 USING THANKYOUUU Report Comment
fluidvessel	1790008622 Using! Thank youu Report Comment
Gyuzxiu	1789985946 using! Report Comment
Tod	1789807792 using :3 Report Comment
𝔇𝔢𝔩𝔦𝔯𝔦𝔲𝔪	1789785842 THIS IS FIRE!! TYSM Report Comment
yibyob	1789383655 THIS IS AWESOME!! ty for sharing :33 Report Comment
KABUKIYUKI SMILEEXDEE	1789262163 I'll use this! Thank you for making it and sharing it it looks so awesome. Report Comment