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

☆AlexX☆Ven0m☆	1747627943 using!! Report Comment
astro!!	1747449254 using !!! Report Comment
Neptune!	1747131694 using!! Report Comment
toaster grof	1746460399 using! Report Comment
paru!	1746328833 USINGG Report Comment
C.L.O.V.E.R	1746304703 using! Report Comment
lea!(ᴗ͈ˬᴗ͈)ꕤ.ﾟ	1745869814 using! this is awsome Report Comment
lea!(ᴗ͈ˬᴗ͈)ꕤ.ﾟ	1745869805 using! this is awsome Report Comment
HEXDOLL	1745815197 using!! Report Comment
eliott	1745518774 usinggggggg Report Comment
˚⋆ tteokbie ✿˖°	1745512344 using!! >o< thank u sm! Report Comment
SwagTheBigDill	1745342911 Will def use this! :> Report Comment
ガビヤ	1745338247 this is so cool...using! Report Comment
bow	1745199179 usin Report Comment
bow	1745199179 usin Report Comment
niki	1745175537 using Report Comment
z0mb1ezZ	1745044878 USING THIS OMG ILY MWAHHH Report Comment
💧 ֶָ֢ 𓏵 Teardrop (RP) .ᐟ.ᐟ ˎˊ˗	1744851518 using! this is so sigma whaat Report Comment
Forestryy7	1744799421 using! Report Comment
PKXRLM	1744319022 using Report Comment