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 arlo atomickk (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 96 comments ( View all | Add Comment )

✩°｡⋆📂Ｍ𝘢𝘪 💿✮	1733086057 Usando (⁠≧⁠▽⁠≦⁠)!! Report Comment
Ning1phoe	1732994636 did some1 know where in the code i can change the ,,now playing takeshi abo - lease" to another song name bc i want to change the song choice but this thing kinda made it look strange? using btw! Report Comment Since that is a gif it's imposable to change >.< I'm having the same issue :( by Tobias; 1733271429; Report
yaoi_luver911	1732081357 using Report Comment
yaoi_luver911	1732081357 using Report Comment
Penny	1732016787 Using Report Comment
𝘸𝘪𝘻𝘢𝘳𝘥𝘮𝘪𝘻𝘦𝘳	1731606922 Using Report Comment
lily ☆	1731522227 using mwah Report Comment
ravvvi \| br	1730941752 usanddooooooooooooooooo Report Comment
Ana lygiA	1730835470 using Report Comment
Audrey	1730365295 Using 💗 Report Comment
Insomniac ⁠˘⁠ ⁠o⁠ ⁠˘	1730047511 using with some small modifications!! Report Comment
Joansie	1729243772 Using!!! >u< Report Comment
aespadoree	1728631169 AWESOME!!! using :3 Report Comment
tyndall	1728403355 using! Report Comment
Aqua	1728090678 WOO using!! Report Comment
T.DD_M	1727586729 using!!!1 Report Comment
qklwan	1727496349 using Report Comment
lea!(ᴗ͈ˬᴗ͈)ꕤ.ﾟ	1726796221 usinggg!! Report Comment
SoniAsavi<3	1726607590 using^^ Report Comment
garfield!1	1726523207 using:3 Report Comment