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

Hunter	1731396198 using Report Comment
Damien☆ ★ ✮ ★ ☆	1725632053 using Report Comment
Xaden	1725169358 i used clippy :3 Report Comment
rocky	1724000569 using Report Comment
Saturn Princess	1721412322 using Report Comment