Frutiger XP

Tags: frutiger aero, frutiger, windows xp, retro, blue, clouds, grass, water, tech, future

Description:

Frutiger Aero Layout. Inspired in the layouts created by: Cory, tilapia and Valentine.

Preview:

click on the image for a larger preview

Code:

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

<style>
		html:before {
			background-image: url(https://media3.giphy.com/media/3ohhwoER829Q2hWwx2/giphy.gif?cid=6c09b952e9ldw8bbnxnrlf2wr8q4mjvezqm6jmjk0swzgvf8&rid=giphy.gif&ct=s);
			content: "";
			height: 300%;
			left: -50%;
			opacity:.2;
			position: fixed;
			top: -110%;
			width: 300%;
			pointer-events:none;
		}
		:root {
			--blue-gradient: linear-gradient(to bottom, #245edb 0%, #3f8cf3 9%, #245edb 18%, #245edb 92%, #333 100%) center/cover no-repeat;
		}
		body {
			background-image: url('https://s3.amazonaws.com//depot.pacdudegames.com/spacehey/bliss.jpg');
			background-size: cover;
			background-position: center;
			background-attachment: fixed;
		}
		@keyframes yourAnimation { 0.0% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
		nav, footer {
			margin: 1em;
			position: relative;
			box-shadow: 5px 8px 10px #0006;
		}
		footer{
			margin-bottom:3rem;
			border:2px solid #1D43D1;
		}
		nav .top, nav .links {
			border-left: 2px solid #1D43D1;
			border-right: 2px solid #1D43D1;
		}
		nav .info{
			border-left: 2px solid #1D43D1;
			border-right: 2px solid #1D43D1;
		}
		nav .links {
			border-bottom: 2px solid #1D43D1;
		}
		nav:before {
			content: "SpaceHey Header";
			display: block;
			padding: 1em;
			background: linear-gradient(to bottom, #245edb 0%, #3f8cf3 9%, #245edb 18%, #245edb 92%, #333 100%) center/cover no-repeat;
			font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
			font-size: 1em;
			text-shadow: 2px 2px 0px #000;
			border-radius: 10px 10px 0 0;
		}
		nav:after {
			content: "X";
			display: inline-block;
			padding: .4em .6em;
			width: fit-content;
			border-radius: 5px;
			background: linear-gradient(180deg, rgba(233,145,126,1) 0%, rgba(223,89,65,1) 29%, rgba(156,32,15,1) 100%);
			border: 1px solid #FFF;
			position: absolute;
			top: 0;
			right: 0;
			margin-top: .5em;
			margin-right: .5em;
			pointer-events: none;
		}
		main {
			background: none;
			position: relative;
			font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
		}
		main:before {
			height: 150px;
			display: block;
			content: "";
			background-image: url('https://assets.st-note.com/img/1673782458631-cgPcSaG3vf.png');
			background-position: center top;
			background-size: cover;
			border: ridge white 10px;
			border-radius: 10px;
			margin-bottom: 20px;
			margin-top: 10px;
		}
		.profile h1 {
			border: 2px solid #1B44B8;
			border-radius: 5px 5px 0 0;
			padding: .5em;
			color: #FFF;
			text-shadow: 2px 2px 0 #000;
			background: var(--blue-gradient);
			margin-bottom: 0;
		}
		.profile .left {
			display: flex;
			flex-direction: column;
			width: 100%;
		}
		.profile .general-about {
			background: #FFF;
			border-left: 2px solid #1B44B8;
			border-right: 2px solid #1B44B8;
			border-bottom: 2px solid #1B44B8;
			padding: 1em;
			box-shadow: 5px 8px 10px #0006;
		}
		.general-about .profile-pic {
			margin: 0 1em 0 0;
		}
		.profile .left .mood {
			margin-top: 1em;
			background: #FFF;
			border-radius: 11px 11px 0 0;
			box-shadow: 5px 8px 10px #0006;
			border-left: 2px solid #1B44B8;
			border-right: 2px solid #1B44B8;
			border-bottom: 2px solid #1B44B8;
		}
		.profile .left .mood p {
			margin-left: 1em;
			margin-top: 1em;
		}
		.profile .left .mood:before {
			-moz-background-clip: padding;
			-webkit-background-clip: padding-box;
			background-clip: padding-box;
			content: "Mood";
			display: block;
			padding: .5em;
			border: 2px solid #1B44B8;
			background: var(--blue-gradient);
			font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
			font-size: 1em;
			text-shadow: 2px 2px 0px #000;
			border-radius: 10px 10px 0 0;
			color: #FFF;
		}
		.online{
			width: 90px;
			height: 70px;
			content: url("https://www.flava.co.nz/media/1772223/giphy.gif") !important;
		}
		.url-info{
			background-image: url('https://64.media.tumblr.com/2b3ace485aa1454cd9044eefb9d50263/137ab7260b84ff85-99/s1280x1920/b510ff88bb8b977dc0a14546a5741eb66587f269.gifv');
			background-position: center top;
			background-size: cover;
		}
		nav:after {
			content: "X";
			display: inline-block;
			padding: .4em .6em;
			width: fit-content;
			border-radius: 5px;
			background: linear-gradient(180deg, rgba(233,145,126,1) 0%, rgba(223,89,65,1) 29%, rgba(156,32,15,1) 100%);
			border: 1px solid #FFF;
			position: absolute;
			top: 0;
			right: 0;
			margin-top: .5em;
			margin-right: .5em;
		}
		.left .contact {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			margin: 0;
			padding: 0;
			z-index: 10;
		}
		.left .contact {
			border: 0;
			background: linear-gradient(180deg, #0997ff, #0053ee 8%, #0050ee 40%, #06f 88%, #06f 93%, #005bff 95%, #003dd7 96%, #003dd7);
		}
		.profile .contact .heading {
			background: radial-gradient(circle, #5eac56 0%, #3c873c 100%) center/cover no-repeat;
			display: flex;
			border-radius: 0 40px 50px 0;
			align-items: center;
			-webkit-filter: drop-shadow(0px 0px 7px #000);
			box-shadow: -2px -2px 10px rgba(0,0,0,.25) inset, 2px 2px 10px rgba(0,0,0,0.5) inset;
			margin-right: .5em;
		}
		.profile .contact .heading h4 {
			font-size: 0;
		}
		.profile .contact .heading h4:after {
			content: " Start";
			font-size: 1.4rem;
			font-family: sans-serif;
			font-weight: bold;
			font-style: italic;
			text-shadow: 2px 2px 5px #0007;
			padding-right: 1.2rem;
			white-space: nowrap;
		}
		.profile .contact .inner {
			overflow-y: scroll;
		}
		.profile .contact .inner, .profile .contact .inner .f-row, .profile .contact .inner .f-row .f-col {
			display: flex;
			margin: 0;
			align-items: center;
		}
		.profile .f-col a {
			white-space: nowrap;
			border: 1px solid #003c74;
			background: linear-gradient(180deg,#366EF3,#2D69F4 86%,#1A3EB4);
			border-radius: 3px;
			padding: .5em;
			margin-left: .3em;
			font-weight: normal;
			color: #FFF;
		}
		.profile .f-col a:hover {
			background: linear-gradient(180deg,#1C35B4,#2450D7 86%,#1A3EB4);
			text-decoration: none;
		}
		.profile .url-info, .profile .profile-info {
			background-color: #E7E5CF;
			border: 0;
			box-shadow: 2px 2px 0px #FFFFFF inset, -2px -2px 0px #5D5C51 inset, 5px 8px 10px #0006;
			padding: 10px;
		}
		.profile .url-info p {
			text-align: center;
		}
		.left .table-section {
			border-radius: 10px 10px 0 0;
			border: 2px solid #1B44B8;
			box-shadow: 5px 8px 10px #0006;
		}
		.left .table-section .details-table tr {
			display: flex;
			flex-direction: column;
		}
		.left .table-section .heading {
			-moz-background-clip: padding;
			-webkit-background-clip: padding-box;
			background-clip: padding-box;
			padding: 1em;
			background: var(--blue-gradient);
			font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
			font-size: 1em;
			text-shadow: 2px 2px 0px #000;
			border-radius: 10px 10px 0 0;
			color: #FFF;
		}
		.left .table-section .inner, .left .table-section .details-table td, .left .table-section .details-table td:first-child {
			width: 100%;
			background: #E7E4CF;
		}
		.left .table-section .details-table td:first-child p {
			padding: .3em .3em 1em .3em;
			border-bottom: 2px ridge #E7E4CF;
		}
		.left .table-section .details-table td p {
			padding: .3em;
			line-height: initial;
		}
		.profile .left .table-section:last-child .details-table tbody {
			display: flex;
			flex-direction:column;
		}
		.profile .left .table-section:last-child .details-table tbody tr {
			display: flex;
			flex-direction: column;
			flex: 1;
			line-height: 0;
		}
		.profile .left .table-section:last-child .details-table tbody tr td {
			width: 100%!important;
			text-align: left;
			background: none;
		}
		.profile .left .table-section:last-child .details-table tbody tr td p a {
			font-size: 0;
			transition: all .3s
		}
		.profile .left .table-section:last-child .details-table tbody tr td p img {
			font-size: 64px;
			height: auto;
			margin: 0;
		}
		.profile .right .blog-preview {
			margin-top: 1em;
			background: #FFF;
			border-radius: 11px 11px 0 0;
			box-shadow: 5px 8px 10px #0006;
			border-left: 3px solid #1B44B8;
			border-right: 2px solid #1B44B8;
			border-bottom: 2px solid #1B44B8;
		}
		.profile .right .blog-preview p, .profile .right .blog-preview h4 {
			font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace;
			margin-left: 1em;
			margin-top: 1em;
		}
		.profile .right .blog-preview:before {
			-moz-background-clip: padding;
			-webkit-background-clip: padding-box;
			background-clip: padding-box;
			content: "Notepad";
			display: block;
			padding: .5em;
			border: 2px solid #1B44B8;
			background: var(--blue-gradient);
			font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
			font-size: 1em;
			text-shadow: 2px 2px 0px #000;
			border-radius: 10px 10px 0 0;
			color: #FFF;
		}
		.profile .right .blurbs, .profile .right .friends{
			margin-top: 1em;
			background: #FFF;
			border-radius: 11px 11px 0 0;
			box-shadow: 5px 8px 10px #0006;
			border-left: 3px solid #1B44B8;
			border-right: 2px solid #1B44B8;
			border-bottom: 2px solid #1B44B8;
		}   
		.profile .right .blurbs .heading, .profile .right .friends .heading{
			-moz-background-attachment-clip: padding;
			-webkit-background-clip: padding-box;
			background-clip: padding-box;
			display: block;
			padding: .7em;
			border: 2px solid #1B44B8;
			background: var(--blue-gradient);
			font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
			font-size: 1em;
			text-shadow: 2px 2px 0px #000;
			border-radius: 10px 10px 0 0;
			color: #FFF;
		}
		.profile .right .blurbs .heading h4:before{
			content: "";
		}
		.profile .right .comments-table{
			height:300px;
			overflow-y:scroll;
			display:block;
			background-color:#E7E4CF;
		}
		.profile .blurbs .inner:after {
			content: "";
			white-space: pre-wrap;
			display: block;
			height: 180px;
			background-image: 
			url(https://pbs.twimg.com/media/GFNsGpKbYAAQSUx.jpg);
			background-repeat: no-repeat;
			background-size: 100%;
			align-content: center ;
			border: ridge white 10px;
			border-radius: 10px;
			margin-bottom: 20px;
			margin-top: 10px;
		}
		.comments-table td{
			background:#FFFFFF;
		}
		.profile .right .comments-table td:first-child{
			background:#F8F6F0;
			border-right:1px solid #BEBBAA;
			border-bottom:1px solid #BEBBAA;
		}
		.comment-replies{
			border: 0;
			border-left: 5px solid #ffbd2e;
		}
	</style>

	<style>*
		{cursor: url(https://cur.cursors-4u.net/nature/nat-6/nat584.cur), auto !important;}
	</style>

	<style>
		:root {
			--cd-image: url('https://fluorescent-lights.neocities.org/Digital-CD-Disk-Vector-Transparent-PNG.png');
		}
		.profile-pic {
			position: relative;
			width: 183px;
			filter: drop-shadow(0 0 0.25rem gray);
		}
		.profile-pic:after {
			content: "";
			background: url('https://fluorescent-lights.neocities.org/f0rzNHe.png'), linear-gradient(150deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2), 40%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.6));
			background-size: contain, cover;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		.profile-pic:before {
			content: "";
			background: var(--cd-image);
			position: absolute;
			top: 5px;
			left: -20px;
			width: 150px;
			height: 150px;
			background-repeat: no-repeat;
			z-index: -1;
			animation-name: spin;
			animation-duration: 5000ms;
			animation-iteration-count: infinite;
			animation-timing-function: linear; 
			transition: left ease 0.5s;
		}
		.profile-pic:hover:before {
			left: -75px;
		}
		@keyframes spin {
			from {
				transform:rotate(0deg);
			}
			to {
				transform:rotate(360deg);
			}
		}
		.profile-pic .pfp-fallback {
			float: right;
			width: 163px;
			height: 160px;
			border: none;
		}
		.general-about .profile-pic img {
			max-width: inherit;
		}
	</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 182 comments ( View all | Add Comment )

byte-bite._	1751736981 usinggg Report Comment
ax0lotl	1750854680 usingg Report Comment
Editas	1750766567 Usingg its so nice thxx Report Comment
juno	1750744513 consuming using Report Comment
zZz	1750628876 Usando Report Comment
Toshido Kurasaki	1750614780 Currently using Report Comment
[GEN]	1750544583 This layout is so neat! Thank you! Report Comment
SunnyD	1750535904 I'll be consuming this Report Comment
Glade!	1750523739 Using! Thank you! Report Comment
Kline	1750281421 Using :3 Report Comment
midnight<3	1750216416 Using :D Report Comment
VHS Wiz ｡𖦹	1750199076 Using :3 uwu Report Comment
milavya	1750179085 usinggg Report Comment
glizzy	1750111713 using Report Comment
glizzy	1750111703 using Report Comment
Litpon	1749572681 using ^^ Report Comment
GabiExists	1749568105 Using. Report Comment
「☆フェリックス☆」	1749337327 use Report Comment
Cricell♡	1749133650 Using Report Comment
Muffin	1748994653 Using! Report Comment