soft green frutiger aero layout (with butterflies!)

Tags: frutiger aero, green, butterflies, windows, winamp, old internet, cursor, music

Description:

Inspired by a winamp skin i found on pinterest; includes: custom cursor, music autoplay, marquee friends section, custom url section, loading screen, butterlies! Free for everyone to use just let me know in the comments :)

Preview:

click on the image for a larger preview

Code:

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

<style>
   @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital@1&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:wght@500&display=swap');
   @import url('https://cory.anota.do/spacehey/pdg_neon.css');

/*HEADINGS FONT*/
   h1, h2, h3, h4, .profile .blurbs .section h4{font-family: 'Roboto Condensed', sans-serif;
   font-size: 150%;
   color: white !important;
   text-shadow: 2px 2px 3px white, 0 0 25px white, 0 0 5px black}

/*BODY FONT*/
   body{font-family: 'Roboto', sans-serif;
   color: #506d51 !important;
   font-size: 100%;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px white, 0 0 5px #FFFFFF}

/*TEXT SETTINGS*/
main p, html{
   font-weight: 700; 
   line-height: 1.5;
   color: #506d51 !important;
   text-align: left}

/*TILTED NAMEPLATE*/
:root{ --neon-text-color: #00ff80; }
.profile .left h1{font-family: 'Alegreya Sans SC', sans-serif;
   font-size: 150%;
   transform: rotate(-10deg)}

main{background: none}

.container {
   border-radius: 15px 15px 0 0;
   overflow: hidden;
   margin-top: 20px;
   padding: 30px}

/*HEADER*/
.top{
   background-image: url(https://i.ibb.co/NY4NJ4b/ezgif-5-cb97d69e57.png), linear-gradient(to left, #d7ecd9, #fbffee, #bddaac) !important;
   background-repeat: no-repeat !important;
   background-position: right !important;
   margin-top: 20px;
   border-top-right-radius: 10px;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
   border-top-left-radius: 10px;
   border-top: groove #dfdfe1 5px;
   box-shadow: inset 0 0 7px 5px #8c8c96;
   margin-bottom: 2px}

/*FOOTER*/
footer{
   height: 200px;
   background: linear-gradient(#95a8a2, #c9e1e1, #95a8a2, #ccdfc3, #82978e) !important;
   border: outset #feffe6 7px;
   border-radius: 10px;
   box-shadow: inset 0 0 7px 5px #8c8c96}

footer .links{
   background: none !important;
   box-shadow: none !important}

/*NAV BAR*/
.links{ 
   height: 145px;
   text-align: center;
   background-image: url(https://i.ibb.co/FsGx1QQ/ezgif-5-2b7cfaa1b0.png), linear-gradient(#d3e4b8, #a6c782, #d3e4b8) !important;
   background-repeat: no-repeat;
   background-position: left;
   margin-bottom: 0;
   border-radius: 5px;
   border-bottom: #dfdfe1 groove 5px !important;
   border-top: #dfdfe1 groove 5px !important;
   box-shadow: inset 0 0 7px 5px #848c7d;
   padding: 25px !important}

/*SPACES BETWEEN LINKS*/
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{
   content: "✩";
   color: white}

.links:after{
   content: url(https://i.ibb.co/z7YSHCD/ezgif-4-bda3dc78d4.gif)}

/*BANNER*/
main:before {
   width: 740px;
   height: 30px;
   border-radius: 5px;
   display: block;
   text-align: center;
   content: url(https://i.ibb.co/6gtf1YD/ezgif-5-742053fad3.png);
   background: linear-gradient(to left, #d7ecd9, #fbffee, #bddaac) !important;
   background-position: center center;
   background-size: cover;
   margin-top: 0;
   box-shadow: inset 0 0 7px 5px #8c8c96;
   margin-bottom: 5px;
   border-left: #dfdfe1 groove 4px;
   border-right: #dfdfe1 groove 4px;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}

/*HEADINGS BACKGROUND*/
.profile .blurbs .heading, .profile .friends .heading, .profile .table-section .heading, .profile .contact .heading, links{
   background: url(https://i.ibb.co/NY4NJ4b/ezgif-5-cb97d69e57.png), linear-gradient(#a6c87e, #f0fde3, #a6c87e);
   background-repeat: no-repeat !important;
   background-position: right;
   border-radius: 5px;
   box-shadow: inset 0 0 7px 5px #7a9272;
   margin-top: 5px;
   border-bottom: groove #dfdfe1 4px}

/*PROFILE BACKGROUND*/
.profile{ background: linear-gradient(#a6c782, #e7f3e9, #86b682);
   border-top: #dfdfe1 groove 7px;
   border-bottom: #dfdfe1 groove 7px;
   border-radius: 10px;
   box-shadow: inset 0 0 7px 5px #8c8c96}

/*VERY BACKGROUND*/
body{ background: url(https://i.ibb.co/30Sz4kT/ezgif-4-6ca3d1a1f6.jpg);
   background-size: cover}

/*SCROLL BARS*/
::-webkit-scrollbar {
    width: 13px}
::-webkit-scrollbar-track {
    border-top: 3px ridge white;
    border-left: 3px ridge white;
    border-bottom: 3px ridge gray
    border-right: 3px ridge gray;
    background: white radial-gradient(circle at 0px 0px, gray 1px, transparent 0);
    background-size: 2px 2px}
::-webkit-scrollbar-thumb {
    background: silver;
    border-top: 3px ridge white;
    border-left: 3px ridge white;
    border-bottom: 3px ridge gray;
    border-right: 3px ridge gray;}

/*PROFILE BOXES*/
.profile .contact, .profile .url-info, .profile .table-section, .home-actions, .blog-preview, .blurbs, .friends, .profile-info, .details {
   border-style: outset;
   border-width: 2px;
   border-color: #feffe6 #a6c87e #a6c87e #feffe6;
   padding: 0px 6px;
   border-radius: 5px;
   box-shadow: inset 0 0 7px 5px #8c8c96;
   background: linear-gradient(to left, #d7ecd9, #fbffee, #bddaac)}

.details{
height: 190px;}

/*LINK COLOURS*/
a, .links, .links a, .logout-btn{
   color: #5a7141 !important;
   text-shadow: 0px 0px 5px 3px #5a7141 !important;
   border: none !important}

/*PROFILE PIC*/
.profile-pic img{border-radius: 30px !important;
   box-shadow: 0 0 7px 5px #86b682}
.profile-pic{
   border-radius: 10px !important;
   position: relative;
   filter: drop-shadow(0 0 0.25rem gray);
}
.profile-pic:after {
content: "";
background: url('https://i.ibb.co/Vm2fYv3/ezgif-5-7f325ec84d-removebg-preview-1.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%;
padding: 5px
}

/*ONLINE NOW*/
.online{content: url(https://i.ibb.co/Rvy53B8/ezgif-1-adcafc7073.gif)}

/*INTERESTS GRID*/
:root{
   --even-lighter-blue:  linear-gradient(40deg, #a6c87e, #c9e1e1, #a6c87e);
   --lightest-blue: linear-gradient(40deg, #72967b, #c9e1e1, #72967b);

/*FRIENDS-GRID*/
   --light-orange: linear-gradient(40deg, #a6c87e, #c9e1e1, #a6c87e);
   --even-lighter-orange: linear-gradient(40deg, #d7ecd9, #c9e1e1, #bddaac)}

/*INTERESTS SECTION*/
.details-table{border-radius: 5px;
   border: groove #feffe6 2px !important;
   box-shadow: inset 0 0 5px 3px #8c8c96;
   background-color: #ebf2eb}
.table-section td{border: groove #feffe6 2px !important}

/*FRIENDS SECTION*/
.friends .comments-table{border-radius: 5px;
   border: groove #dfdfe1 4px !important;
   box-shadow: inset 0 0 7px 5px #8c8c96;
   background: linear-gradient(to left, #d7ecd9, #fbffee, #bddaac)}
.friends-grid::before {
   width: 1000px;
   height: 80px;
   object-fit: cover;
   margin-bottom: 10px!important}
.friends {
   border: none;
    overflow: hidden}
.friends-grid {
  position: relative;
  animation: myfirst 15s linear infinite;
  animation-fill-mode: forwards;
}
 
@keyframes myfirst {
0% {left:-1550px;}
100% {left:500px;} 
}

.friends-grid {
	display: flex;
	flex-wrap: nowrap;
}
.friends-grid img{border-radius: 4px;
   border: groove #dfdfe1 4px !important;
   box-shadow: inset 0 0 5px 3px #8c8c96}

/*URL SECTION*/
.profile .url-info{
   font-size: 0px;
   height: 250px !important;
   background-image: url(https://i.ibb.co/T06gdxc/fc65038a79c3b61a6d6888658810d784.jpg);
   background-size: cover}

/*COMMENTS SECTION*/
.comments-table td{ 
  border: groove #feffe6 2px !important}
.comments-table td:first-child img:not(.icon){ border-radius: 4px;
   border: groove #dfdfe1 4px !important;
   box-shadow: inset 0 0 5px 3px #8c8c96}

/*COMMENTS SCROLL BOX*/
table.comments-table{
   display: block;
   height: 300px!important;
   overflow-y: scroll;}

/*PROFILE LINKS ICONS*/
  .icon, .award img {
        content: url(https://i.ibb.co/1XFpGZJ/computer-explorer-0.png);
        display: inline-block;
        height: 2.0em;
        width: 2.0em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0)}

/*CONTACT ICONS*/
.contact .inner a img {
font-size: 0}

.contact .inner a img:before {
font-size: 1em;
display: block}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* ADD TO FRIENDS */
content: url(https://i.ibb.co/JcNBG1X/cd-audio-cd-1.png)}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* ADD TO FAVOURITE */
content: url(https://i.ibb.co/JcNBG1X/cd-audio-cd-1.png)}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/*SEND A MESSAGE */
content: url(https://i.ibb.co/JcNBG1X/cd-audio-cd-1.png)}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/*FORWARD TO FRIEND*/
content: url(https://i.ibb.co/JcNBG1X/cd-audio-cd-1.png)}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/*INSTANT MESSAGE*/
content: url(https://i.ibb.co/JcNBG1X/cd-audio-cd-1.png)}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/*BLOCK USER*/
content: url(https://i.ibb.co/JcNBG1X/cd-audio-cd-1.png)}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/*ADD 2 GROUP*/
content: url(https://i.ibb.co/JcNBG1X/cd-audio-cd-1.png)}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/*REPORT*/
content: url(https://i.ibb.co/JcNBG1X/cd-audio-cd-1.png)}

/*LOADING SCREEN*/
body:before{
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url(https://i.ibb.co/k8s0f5Z/9e8da091b33035a6ca33f15a3f824493.jpg);
	background-size: cover;
        background-position:center;
	animation: yourAnimation 1.5s ease 0s 1 normal forwards;
	pointer-events: none}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

/*CURSOR*/
body { cursor: url(http://www.rw-designer.com/cursor-view/158602.png), auto !important}

/*SEARCH BAR*/
 .search-wrapper input[type=text] {
    background: linear-gradient(to left, #d7ecd9, #fbffee, #bddaac) !important;
    border: 1px solid #feffe6 !important;
    border-radius: 3px !important;
    border: groove #dfdfe1 5px;
   box-shadow: inset 0 0 2px 1px #8c8c96;}

/*BUTTONS*/
 button{
    background: linear-gradient(to left, #d7ecd9, #fbffee, #bddaac) !important;
    border: 1px solid #feffe6 !important;
    border-radius: 3px !important;
    border: groove #dfdfe1 5px;
   box-shadow: inset 0 0 2px 1px #8c8c96;}

.logout-btn{ border: none !important;
box-shadow: none !important}

html{filter: saturate(1)}

#div{transform: rotate(30deg)}

</style>

<div style="float: ; max-height: 800px; position: absolute; LEFT: 250px; top: 1px; z-index: 200;"><img src="https://i.ibb.co/25xdRbt/ezgif-5-7eb134712e.png"/></div>

<div style="float: ; max-height: 800px; position: absolute; right: 350px; top: 380px; z-index: 200;"><img src="https://i.ibb.co/RjDpsCT/ezgif-5-655d34f41c.png"/></div>

<div style="float: ; max-height: 800px; position: absolute; left: 150px; top: 1500px; z-index: 200;"><img src="https://i.ibb.co/q7cCJKX/ezgif-5-d1ecb6d66a.png"/></div>

<div style="float: ; max-height: 800px; position: absolute; right: 200px; top: 1000px; z-index: 200;"><img src="https://i.ibb.co/hWvZf15/ezgif-3-6d43a22ee5.png" id="div"/></div>

<iframe width="0" height="0" src="https://www.youtube.com/embed/b12dBv7EDjU?autoplay=1&loop=1&controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">

</iframe>

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

strwbrymai	1761691339 usinngngngng Report Comment
Bradical !!	1760993118 USING!!! ^^ Report Comment
mononoki	1760416523 using Report Comment
★sillyjupiterz★	1759275818 USINGTNTRKEK!1!11!! Report Comment
chillcubeguy	1759191633 using! :D Report Comment
har★vey	1759012045 Usinngg!! This is so cool ^_^ Report Comment
WhimsyWoof	1758895402 Using :) Report Comment
Zee★	1758773504 can you change what the music player at the top says? and if you can how do you do it?? Report Comment
Innate	1758676771 using THXXXXXXX¡¡¡¡¡ Report Comment
itzjulie	1758612700 using!! Report Comment
Izarstars	1757627435 using :3 Report Comment
Ahmdose	1757450129 PROBABLY USING!!!!!!! Report Comment
MorgueCel	1757200074 using Report Comment
lio	1757042969 using Report Comment
𝙩𝙖𝙮𝙡𝙤𝙧	1756780604 I'm using :D Report Comment
kori	1756604228 using Report Comment
Мizqy	1756498397 using Report Comment
ASTRA_3747 🏳‍🌈🏳️‍⚧️🇵🇱	1756491861 Using!!! :) Report Comment
Iris	1756244946 using Report Comment
WawaIdk78	1756232048 using Report Comment