Windows XP

Tags: retro, 2000's

Description:

This layout will bring you back to the old days with a Windows XP look.

Personalization

You can personalize a few aspects of the layout, such as:

Background image
Clippy's message

To do so, replace, the message to be displayed from Clippy in:

Your message here

And replace the background image in:


body {
background-image: url('https://i.postimg.cc/5y0LSGjV/wxp-wallpaper.jpg');
}

Note: Images are hosted on a free hosting for the moment. In case this layout starts to be used by a lot of people, I will create a GitHub repo and host them there.

Preview:

click on the image for a larger preview

Code:

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

<style>
body {
	background-image: url('https://i.postimg.cc/5y0LSGjV/wxp-wallpaper.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

nav .links {
	background: linear-gradient(rgb(31, 47, 134) 0px, rgb(49, 101, 196) 3%, rgb(54, 130, 229) 6%, rgb(68, 144, 230) 10%, rgb(56, 131, 229) 12%, rgb(43, 113, 224) 15%, rgb(38, 99, 218) 18%, rgb(35, 91, 214) 20%, rgb(34, 88, 213) 23%, rgb(33, 87, 214) 38%, rgb(36, 93, 219) 54%, rgb(37, 98, 223) 86%, rgb(36, 95, 220) 89%, rgb(33, 88, 212) 92%, rgb(29, 78, 192) 95%, rgb(25, 65, 165) 98%);
	padding: 8px;
}

nav .links li {
	background-color: rgb(60, 129, 243);
	box-shadow: rgba(0, 0, 0, 0.3) -1px 0px inset, rgba(255, 255, 255, 0.2) 1px 1px 1px inset;
	border-radius: 2px;
	padding: 4px 5px;
	margin-top: 5px;
}

nav .links li:hover {
	background-color: rgb(83, 163, 255);
	box-shadow: rgba(0, 0, 0, 0.3) -1px 0px inset, rgba(255, 255, 255, 0.2) 1px 1px 1px inset;
}

nav .links li:hover a {
	color: #fff;
	text-shadow: none;
}

nav .links li:after {
	display: none;
}

.edit-link {
	color: #000000;
}

.profile-info h3 a,
.profile-info h3,
.profile .blurbs .heading,
.profile .friends .heading,
.friends .heading a.more {
	color: #fff;
}

.profile .contact,
.profile .table-section {
	border: 0
}

.profile-info {
	border: 0;
	margin: 0;
	padding: 0;
}

.profile .blurbs .section h4,
.details-table td:first-child {
	color: #000000
}

.profile-info,
.profile .contact .heading,
.profile .blurbs .heading,
.profile .friends .heading {
	position: relative;
	z-index: 1;
}

.profile-info .inner,
.profile .contact .heading,
.profile .blurbs .heading,
.profile .friends .heading,
.profile .table-section .heading {
	width: 100%;
	font-family: Trebuchet MS;
	background: linear-gradient(180deg, #0997ff, #0053ee 8%, #0050ee 40%, #06f 88%, #06f 93%, #005bff 95%, #003dd7 96%, #003dd7);
	padding: 3px 5px 3px 3px;
	border-top: 1px solid #0831d9;
	border-left: 1px solid #0831d9;
	border-right: 1px solid #001ea0;
	border-top-left-radius: 8px;
	border-top-right-radius: 7px;
	font-size: 13px;
	text-shadow: 1px 1px #0f1089;
	padding: 4px 8px;
}

.profile-info .inner h3 {
	margin: 0;
}

.blog-preview,
.contact .inner,
.profile .blurbs .inner,
.profile .friends .inner,
.table-section .inner,
.profile .url-info {
	background-color: #ece9d8;
	padding: 8px 11px;
	box-shadow: inset -1px -1px #00138c, inset 1px 1px #0831d9, inset -2px -2px #001ea0, inset 2px 2px #166aee, inset -3px -3px #003bda, inset 3px 3px #0855dd;
	position: relative;
	z-index: 0;
	top: -3px;
}

.profile .url-info {
	top: unset;
	border: 0;
}

.blog-preview h4 {
	margin-top: 0;
}

.details-table td,
.details-table td:first-child,
.comments-table td:first-child,
.comments-table td {
	box-shadow: inset 1px 1px #fcfcfe, inset -1px -1px #fcfcfe, 1px 2px 2px 0 rgba(208, 206, 191, .75);
	background: linear-gradient(180deg, #fcfcfe, #f4f3ee);
	border: 1px solid #919b9c;
}

button {
	cursor: pointer border: 1px solid #003c74;
	background: linear-gradient(180deg, #fff, #ecebe5 86%, #d8d0c4);
	box-shadow: none;
	border-radius: 3px;
}

button:hover,
button:focus {
	box-shadow: inset -1px 1px #fff0cf, inset 1px 2px #fdd889, inset -2px 2px #fbc761, inset 2px -2px #e5a01a;
}

.clippy {
	position: fixed;
	bottom: 150px;
	right: 400px;
	z-index: 100;
	width: 100px;
	height: 100px;
}

.clippy-content {
	position: relative;
}

.clippy-content img {
	width: 100% height: auto;
	position: relative;
	z-index: 1;
}

.clippy-message {
	position: absolute;
	top: -50%;
	right: 0;
	background-color: #fcfacf;
	border-radius: 8px;
	border: 1px solid #000000;
	padding: 8px;
	z-index: 0;
	font-size: 11px;
}

.clippy-message:after {
	content: '';
	bottom: -10px;
	right: 7px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 7px 0 7px;
	border-color: #fcfacf transparent transparent transparent;
	transform: rotate(0deg);
	position: absolute;
	filter: drop-shadow(0px 1px 0px rgb(0, 0, 0));
}

</style>

<div class="clippy">
<div class="clippy-content">
<img src="https://i.postimg.cc/hvL6sjGk/Clippy.png" alt=""/>
<span class="clippy-message">Your message here</span>
</div>
</div>

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

sirmlg0	1752841116 how do i move the clippy? its in the middle right of the screen rn and going behind the text boxes Report Comment
syko	1751802074 using Report Comment
Angel	1747392878 it isn't working for me Report Comment
matt	1746874716 using Report Comment
retsuko	1738768124 using the clippy :3 Report Comment
Seddums	1736623626 totally using this c: Report Comment
Hunter	1731396198 using Report Comment
Damien☆ ★ ✮ ★ ☆	1725632053 using Report Comment
Xaden	1725169358 i used clippy :3 Report Comment
rockypwner2008	1724000569 using Report Comment
Saturn Princess	1721412322 using Report Comment