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 GameShot (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 9 of 9 comments ( View all | Add Comment )
Cupid	1714086398 Using! Report Comment
Jett!	1713837623 using!! Report Comment
Sam X3	1712951873 usingg!! Report Comment
Sam X3	1712951765 usingg!! Report Comment
sassvenger	1712871338 Thank you so much for making this! I'm using it too and I love it! Report Comment
christi!!	1712485869 USINGGG Report Comment
Wasley77	1712382095 using Report Comment
XyziiSP 🌠	1711707640 using :3 Report Comment
breadboi127	1711678686 thank you! Report Comment