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

Twittime	1785681114 Using Report Comment
Twittime	1785681110 Using Report Comment
_AlienMe1Mei!_	1785538207 using! Report Comment
Cedar!	1785065996 using! ^_^ Report Comment
Nova	1784917195 BEST LAYOUT EVER!!!! gonna use Report Comment
Cozmo	1781998407 Using!! Report Comment
Yubsune!	1781324778 USINGG!!! Report Comment
MIMI	1780566299 SOOO BEAUTIFUL!!! im using Report Comment
dewlap404	1780432722 im using this its so awesome thank you Report Comment
MaryOnTheWeb	1779740603 using!! this is lovelyyy Report Comment
🐟🫧Lili🐬🍏	1778267336 usuing!!! Report Comment
rinis.reverie	1778234104 using! this is gorgeous thank you Report Comment
julziaczka	1777588121 ・:*˚:✧｡ Report Comment
julziaczka	1777588118 ・:*˚:✧｡ Report Comment
bungyu	1776620712 using cuz itz epic Report Comment
PhycoTurnItUp Tables	1776601016 using Report Comment
4rw3n	1776500541 use Report Comment
aplesuace	1776196875 usin Report Comment
softwareGriffon	1776090405 using! Report Comment
mrpan14	1775879180 using tysm^^ Report Comment