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 5172 comments ( View all | Add Comment )

CagedRat	1775919868 using <3 Report Comment
kissedghoul	1775872447 using!! Report Comment
Finney🎸🎧	1775648969 Using! Report Comment
Finney🎸🎧	1775648967 Using! Report Comment
2eman	1775578903 using Report Comment
🧼📺[ BUDDY ] 📺🧼	1775451312 this is souper cool but the monochromatic is a little upsetting haha i wish i knew how to use just the border Report Comment i mean i got rid of the dark color and the border so i just have the effect by sugarpawzz; 1775471807; Report
⋆⭒˚.⋆𝔧𝔲𝔰𝔱𝔞𝔤𝔥𝔬𝔰𝔱⋆⭒˚.⋆	1775318489 using tyy!!! Report Comment
Jax	1775295701 using Report Comment
River	1775243030 i love it! imma use this Report Comment
Daniel_thecoolest	1775169084 Using Report Comment
icety	1775161667 used! tyy so cute^^ Report Comment
࣪ ִֶָ☾.Lou / Sol ୭ ˚. ᵎᵎ	1775114072 using Report Comment
A Music Geek	1775054810 Using! Report Comment
V1rtual Magg0th	1774971592 Using, thnx! Report Comment
Jupiter_0	1774964574 Using ;PP Report Comment
forever dead saegusa kī oshikatsu ♡	1774923788 totally using!!! Report Comment
St☆r	1774911462 using! Report Comment
Jaime ^-^	1774890534 Using!! Report Comment
ımskinny	1774819664 Im using Report Comment
𝓛𝓾𝓬𝓲𝓵𝓵𝓮	1774676905 im using 🥹💗 Report Comment