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

Mr. Shark	1767122699 Using!!! >u< Report Comment
nyanmachine	1766690261 using!!!! Report Comment
WHEELER	1766316288 using!! Report Comment
ina	1765548424 Usinggg, thank you for your incredible work! Report Comment
MonaBug	1765384440 using!! Report Comment
cola	1765257459 using!! Report Comment
Hanziel	1765055186 Using! Report Comment
ALEX	1764659121 Usingg!!! Thank you so much :D Report Comment
Kikiene	1763675347 Using Report Comment
wilbutt	1762751514 using !!! Report Comment
kai_sasaki	1762154933 using Report Comment
razznikoz	1761760455 using!! (this saved me i have no idea how to code lol) Report Comment
strwbrymai	1761691339 usinngngngng Report Comment
Bradical☆!!	1760993118 USING!!! ^^ Report Comment
mononoki	1760416523 using Report Comment
Fennekinfan~★	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