Alienware

Tags: computer, retro, green, crashtestdummy, aliens, alien, ufo, layout, games, video games

Description:

Alienware styled retro computer layout

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Crash Test Dummy (https://layouts.spacehey.com/layout?id=2804) -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron&family=Turret+Road&display=swap');
    


img {
filter: sepia(100%) hue-rotate(45deg) saturate(5);
}
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%);
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}

.logo {
filter: sepia(100%) hue-rotate(45deg) saturate(10);
}

#q, button {
color: #00ff00;
background-color:seagreen;
border: 1px solid #00ff00;
font-family: inherit;
}

a, .profile .friends .person p, .logout-btn {
color: #00ff00 !important;
text-decoration: underline !important;
}

:root {
        --logo-blue: transparent;
        --darker-blue: ;
        --lighter-blue: transparent;
	--pdg_yourBackground: url(https://i.imgur.com/PPZJu9q.png);
	--pdg_pageTexture: none;
	--pdg_nameSticker: url(https://i.imgur.com/UXRlCFo.gif);
	--pdg_blurbSticker: url(https://i.imgur.com/TBt1F1G.gif);
	--pdg_commentsSticker: url(https://i.imgur.com/FmQ7m8m.gif);
	--pdg_interestSticker: url(https://i.imgur.com/nRSJbzd.gif);
	--pdg_urlInfoBox: url(https://i.imgur.com/UeQnoeM.gif);
	--pdg_titleTexture: url(https://i.imgur.com/PJh8qRA.gif);
	--pdg_linkTexture: url(https://i.imgur.com/PJh8qRA.gif);
	--pdg_profileInfo: url(https://i.imgur.com/ziVKSDQ.gif);
}
.profile {
    font-family: 'Turret Road', cursive;
	text-shadow:  seagreen;
}
.profile .left h1 {
	
    font-family: 'Orbitron', sans-serif;
	line-height:1em;
	
}
.profile .contact .heading h4, .profile .table-section .heading h4, .profile .blurbs .heading h4, .profile .friends .heading h4, .blog-entry .comments .heading h4, .bulletin .comments .heading h4, .home-actions .heading h1, .statistics .heading h4 {
    font-family: 'Turret Road', cursive;
	line-height:1em;
	text-shadow: 0 0 7px seagreen;
	
}
body {
	background-image: var(--pdg_yourBackground);
	background-size: cover;
	background-position:center;
	background-attachment: fixed;
}

h1, h2, h3, h4,h5,a, p, nav label, .section {color: greenyellow}

h1 {
  color: greenyellow;
  text-shadow: 1px 1px 2px seagreen, 0 0 25px seagreen, 0 0 5px seagreen;
}
  .profile-pic {
        border-radius: 500px;
        overflow: hidden;
    }
main {
	background:#00000066;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border-radius:25px;
	padding:25px;
	color:#FFFFFF;
}
body:before {
	display: block;
	position: fixed;
	pointer-events: none;
	content: " ";
	height: 100vh;
	width: 100vw;
	top: 0;
	left: 0;
	right: 0;
	background-image: var(--pdg_pageTexture);
	background-size: cover;
	background-attachment: fixed;
	opacity: .35;
	z-index: 25;
}
.profile a {
	transition: all .1s!important;
}
.profile a:hover, .profile a:hover p {
	background: var(--pdg_linkTexture)!important;
	;
	color: #FFF!important;
	text-shadow: 1px 1px 0 #000!important;
	;
}
.profile .section p, .details-table td:last-child p{
	background-color:#00000066;
	padding:.5em;
}
.profile .left h1 {
	text-transform: uppercase;
	font-size: 3rem;
	color: greenyellow;
	text-shadow: 3px 3px 0 seagreen;
}
.profile .left h1:before {
	background-image: var(--pdg_nameSticker);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	height: 100px;
	width: 100px;
	content: " ";
	transform: rotate(-4deg) scale(1.7) translateX(-1em);
	position: absolute;
	z-index: -1;
}
.profile .right .blurbs {
	position: relative;
}
.profile .right .blurbs:after {
	background-image: var(--pdg_blurbSticker);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	height: 100px;
	width: 100px;
	content: " ";
	transform: rotate(-4deg) scale(2) translateY(-2rem);
	position: absolute;
	right: 0;
	z-index: -1;
}
.profile .left .table-section:nth-last-child(2):before {
	background-image: var(--pdg_interestSticker);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	height: 100px;
	width: 100px;
	content: " ";
	transform: rotate(-4deg) scale(1.7) translateX(-3em) translateY(2.5em);
	position: absolute;
	z-index: -1;
}
.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
	border: 0!important;
	width: 100%;
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading, .profile .blurbs .heading, .profile .friends .heading {
	background-image: var(--pdg_titleTexture)!important;
	background-size: cover;
	background-position: bottom;
	color: green
	-webkit-text-stroke: 1px #FFF;
}
.profile .contact .heading h4, .profile .table-section .heading h4, .profile .blurbs .heading h4, .profile .friends .heading h4, .blog-entry .comments .heading h4, .bulletin .comments .heading h4, .home-actions .heading h1, .statistics .heading h4 {
	text-transform: capitalize;
	font-size: 1.6rem;
}
.profile .url-info {
	border: 0;
	color: #FFF;
	background: var(--pdg_urlInfoBox);
	background-position: center;
	text-align: center;
	padding:8em 0;
}
.details-table td:first-child {
	background: none;
	width: fit-content!important;
	color: #FFF;
	text-shadow: 0px 2px 0 #000;
}
.details-table td:last-child {
	background: none;
	max-height: 150px;
	overflow-y: scroll;
	float: right;
}
.details-table tr {
	border-bottom: 1px solid #000;
}
.profile .blurbs .section h4 {
	color: greenyellow;
	font-size: 1.3rem;
}
.profile-info {
	background: var(--pdg_profileInfo);
	background-size: cover;
	background-position: center;
	box-shadow: -7px 8px 0 #0006;
	color: greenyellow;
	padding:6em 0;
}
.profile-info h3 a {
	color: #FFF;
}
.comments-table, .details-table {
	border: 1px solid #0000;
	border-collapse: separate;
	border-spacing: 0 .5em;
}
.comments-table tr td:last-child {
	height: 250px;
	display: block;
	overflow-y: scroll;
}
.comments-table td, .music-table td {
	background: none;
	color: #000;
}
.comments-table tr {
	border-bottom: 1px solid #000;
}
.comments-table td:first-child, .music-table td:first-child {
	background: none;
	text-align: left;
}
.profile .comments-table:after {
	background-image: var(--pdg_commentsSticker);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	height: 100px;
	width: 100px;
	content: " ";
	transform: rotate(-4deg) scale(4) translateX(-2.5rem) translateY(-1rem);
	position: absolute;
	right: 0;
	z-index: -1;
}

.contact .inner a img {
    font-size: 0;
}
.contact .inner a img:before {
    font-size: 1em;
    display: block;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	/* add to friends */
	content: "\1f47d"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add to favorites */
	content: "\1f47d"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "\1F47d"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward to friend */
	content: "\1f47d"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant message */
	content: "\1F47d"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block user */
	content: "\1f47d"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add to group */
	content: "\1F47d"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report user */
	content: "\1f47d"
}


@media only screen and (max-width: 600px) {
	.profile .left h1:before{
		transform: rotate(-4deg) scale(1.7) translateX(3.5em);
	}
	.profile .left .table-section:nth-last-child(2):before {
		transform: rotate(-4deg) scale(1.7) translateX(14em) translateY(-1.5em);
		z-index: 0;
	}	 
}

html:before {
	animation: grain 8s steps(10) infinite;
	background-image: url(https://i.imgur.com/PJh8qRA.gif);
	content: "";
	height: 300%;
	left: -50%;
	opacity: .2;
	position: fixed;
	top: -110%;
	width: 300%;
	pointer-events: none;
	z-index: 50;
}
@keyframes grain {
	0%, 100% {
		transform: translate(0, 0)
	}
	10% {
		transform: translate(-5%, -10%)
	}
	20% {
		transform: translate(-15%, 5%)
	}
	30% {
		transform: translate(7%, -25%)
	}
	40% {
		transform: translate(-5%, 25%)
	}
	50% {
		transform: translate(-15%, 10%)
	}
	60% {
		transform: translate(15%, 0%)
	}
	70% {
		transform: translate(0%, 15%)
	}
	80% {
		transform: translate(3%, 35%)
	}
	90% {
		transform: translate(-10%, 10%)
	}



</style>

<style>

.online{content:url(https://i.imgur.com/wtM20px.png);
    width: 75px;
    height: 75px;
}
</style>

<style>
footer {
        border-radius: 15px;
background:#00000066; 
</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 8 of 8 comments ( View all | Add Comment )

⊹ ࣪ ˖ . ⌗ Collin / Gonzo !	1772185031 using Report Comment
Aliensz \| _starla	1766717456 Usingg Report Comment
Taniii	1755314190 Usandooo Report Comment
Sid the sloth	1750686009 using! Report Comment
𖤐٭𝘈𝘓𝘈𝘠𝘈!٭𖤐	1738357464 USING!! Report Comment
𖤐٭𝘈𝘓𝘈𝘠𝘈!٭𖤐	1738357463 USING!! Report Comment
𖤐٭𝘈𝘓𝘈𝘠𝘈!٭𖤐	1738357448 USING!! Report Comment
♪Sofya♪	1708831070 When saving, the design is not saved correctly, the colors are not added Report Comment