Rainbow layout

Tags: rainbow
Description:

Rainbow layout with profile color gradient and floating profile animation! Made with bits and pieces of code, change it however you’d like just comment if used!
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by Sip O' Poison (https://layouts.spacehey.com/layout?id=32009) -->

<style>
.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://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/900fabe0-fe54-47e0-b23f-12fadced0d21/dd76tof-377155d1-9b80-48b7-8842-9f25fb3a7dc7.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzkwMGZhYmUwLWZlNTQtNDdlMC1iMjNmLTEyZmFkY2VkMGQyMVwvZGQ3NnRvZi0zNzcxNTVkMS05YjgwLTQ4YjctODg0Mi05ZjI1ZmIzYTdkYzcucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.D5FIg4q-2CAVnHG92YdCls9WyvG-Py2N8ITX9NwReak')
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content:url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/900fabe0-fe54-47e0-b23f-12fadced0d21/dd76tof-377155d1-9b80-48b7-8842-9f25fb3a7dc7.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzkwMGZhYmUwLWZlNTQtNDdlMC1iMjNmLTEyZmFkY2VkMGQyMVwvZGQ3NnRvZi0zNzcxNTVkMS05YjgwLTQ4YjctODg0Mi05ZjI1ZmIzYTdkYzcucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.D5FIg4q-2CAVnHG92YdCls9WyvG-Py2N8ITX9NwReak')
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content:url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/900fabe0-fe54-47e0-b23f-12fadced0d21/ddm4ave-5da0c7ab-6bd6-41f0-a44f-15638b666fbf.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzkwMGZhYmUwLWZlNTQtNDdlMC1iMjNmLTEyZmFkY2VkMGQyMVwvZGRtNGF2ZS01ZGEwYzdhYi02YmQ2LTQxZjAtYTQ0Zi0xNTYzOGI2NjZmYmYucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.zwU1-O4fJt2PjuSZzRcnbqv63SUh9GDtEzWAmZkH7q0')
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content:url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/900fabe0-fe54-47e0-b23f-12fadced0d21/ddm4ave-5da0c7ab-6bd6-41f0-a44f-15638b666fbf.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzkwMGZhYmUwLWZlNTQtNDdlMC1iMjNmLTEyZmFkY2VkMGQyMVwvZGRtNGF2ZS01ZGEwYzdhYi02YmQ2LTQxZjAtYTQ0Zi0xNTYzOGI2NjZmYmYucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.zwU1-O4fJt2PjuSZzRcnbqv63SUh9GDtEzWAmZkH7q0')
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content:url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/900fabe0-fe54-47e0-b23f-12fadced0d21/ddm4av3-c7b9d8e5-7955-4776-b3da-5602a1f87f93.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzkwMGZhYmUwLWZlNTQtNDdlMC1iMjNmLTEyZmFkY2VkMGQyMVwvZGRtNGF2My1jN2I5ZDhlNS03OTU1LTQ3NzYtYjNkYS01NjAyYTFmODdmOTMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.vCUckWaWLxRGY-eYVT0TDTB9ZekLqWRIqT1X8b3mgIA')
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content:url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/900fabe0-fe54-47e0-b23f-12fadced0d21/ddm4av3-c7b9d8e5-7955-4776-b3da-5602a1f87f93.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzkwMGZhYmUwLWZlNTQtNDdlMC1iMjNmLTEyZmFkY2VkMGQyMVwvZGRtNGF2My1jN2I5ZDhlNS03OTU1LTQ3NzYtYjNkYS01NjAyYTFmODdmOTMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.vCUckWaWLxRGY-eYVT0TDTB9ZekLqWRIqT1X8b3mgIA')
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content:url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/900fabe0-fe54-47e0-b23f-12fadced0d21/ddm4auw-3566c8c9-d7cc-4bee-9c6f-d8e1aaf2cb57.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzkwMGZhYmUwLWZlNTQtNDdlMC1iMjNmLTEyZmFkY2VkMGQyMVwvZGRtNGF1dy0zNTY2YzhjOS1kN2NjLTRiZWUtOWM2Zi1kOGUxYWFmMmNiNTcucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.RkttJnQbJcyfHE-To0ii5ZOwr1mUvQT1kVxx-AGG64E');
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content:url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/900fabe0-fe54-47e0-b23f-12fadced0d21/ddm4auw-3566c8c9-d7cc-4bee-9c6f-d8e1aaf2cb57.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzkwMGZhYmUwLWZlNTQtNDdlMC1iMjNmLTEyZmFkY2VkMGQyMVwvZGRtNGF1dy0zNTY2YzhjOS1kN2NjLTRiZWUtOWM2Zi1kOGUxYWFmMmNiNTcucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.RkttJnQbJcyfHE-To0ii5ZOwr1mUvQT1kVxx-AGG64E');
}
</style>

<style>

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@500&display=swap');

body { background-image:url('https://media.tenor.com/AnYzIUOQbO0AAAAM/pride-rainbow.gif');
background-size: cover;
background-attachment: fixed;
}

main{
background: rgb(255,251,113);
background: linear-gradient(180deg, rgba(255, 0, 0) 0%, rgba(255, 179, 0) 34%, rgba(255, 225, 0) 48%, rgba(111, 255, 0) 75%, rgba(0, 255, 234) 90%);
box-shadow: 0px 0px 10px #2d006b;
}

p{
color: white;
}

nav .top{
background-color: transparent;
box-shadow: 0px 0px 10px #2d006b;
border: 2px dotted white;

}

nav .links{
background-color: transparent;
background-size: cover;
text-align: center;
box-shadow: 0px 0px 10px #2d006b;
border: 2px dotted white;

}

.profile h1{
font-family: 'Exo 2', sans-serif;
color: white;
text-shadow: 0px 0px 5px #6a00ff;
font-size: 30px;
text-align: center;
}

.profile .general-about{
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 1em;
text-align: center;
background-color: rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px #2d006b;

color: white;

border: 2px dotted white;

}

.profile-pic img{
border: 2px dashed white;
border-radius: 100%;
}

.general-about .profile-pic{
margin: 0;

}

.online { visibility: hidden; } .online img { content: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/30002611-140c-433b-b288-1a7271de6ded/d9q0vqz-85ccfe6a-9425-435d-8c30-9cdfef50b88f.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzMwMDAyNjExLTE0MGMtNDMzYi1iMjg4LTFhNzI3MWRlNmRlZFwvZDlxMHZxei04NWNjZmU2YS05NDI1LTQzNWQtOGMzMC05Y2RmZWY1MGI4OGYuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.89lCW5fL0xDt9jAEw1fE61qqcksTI_UmqPgIj9mr_rY');
 animation-name: none; visibility: visible; height: 30px; width: 295px; }

}

footer {
background-image: url() 
!important; 
background-position: bottom center !important;
}

.profile .contact .heading,
.profile .table-section .heading{
background-color: black;
text-align: center;
color: white;
text-shadow: 1px 1px 0px #6a00ff;

border: 2px dotted white;

}

.profile .contact, 
.profile .table-section,
.profile .url-info{
border: 2px dotted white;
background-color: rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px #2d006b;
margin: .5em 0;

}

.url-info{
    background: url('https://media.tenor.com/dgpsy_qfjwcAAAAd/aesthetic-anime.gif');
    background-position: center;
    height: 77px;
    background-size:cover;
}

.url-info p{
    opacity: 0.0;
}


table.details-table td {
background-color: transparent !important;
color: white !important;

border: 1.5px dotted white;

}

.profile .blurbs .heading,
.profile .friends .heading{
background-color: black;
background-size: cover;
text-align: center;
color: white;
text-shadow: 1px 1px 0px #6a00ff;

border: 1.5px dotted white;

}

.profile .blurbs,
.profile .friends{
border: none;
background-color: rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px #2d006b;
text-align: center;
color: white;

border: 2px dotted white;

}

.profile .blurbs .section h4{
color: white;
text-shadow: 1px 1px 0px #6a00ff;
padding: 1em 0;

border: 1.5px dotted white;

}

.profile .profile-info{
color: white;
text-shadow: text-shadow: 1px 1px 0px #6a00ff;
background-color: rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px #2d006b;
border: 1.5px dotted white;

}

.profile .blog-preview{
text-align: center;
border: none;
background-color: rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px #2d006b;
padding: 1em 0;
color: white;

border: 2px dotted white;

}

.profile .friends .friends-grid p{
color: white;
text-shadow: 0px 0px 3px #6a00ff;

border: 1.5px dotted white;

}

.count{
color: white;
text-shadow: 0px 0px 3px #6a00ff;
}

.profile .comments-table{
color: white;
text-align: center;
background-color: rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px #2d006b;
border: 2px dotted white;

}

.profile .comments-table .comment-replies{
background-color: rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px #2d006b;
border: 2px dotted white;
color: white;
}

.profile .comments-table td{
background-color: transparent;
color: white;
padding: .5em;

border: 2px dotted white;

}

a{
color: white;
text-shadow: 0px 0px 3px #6a00ff;
}

a:visited {
color: white;
text-shadow: 0px 0px 3px #6a00ff;
text-decoration: none;
}

a:hover {
color: #B0FDFF;
text-decoration: none;
}

a:active {
color: white;
text-decoration: none;
text-shadow: 0px 0px 3px #6a00ff;
}

nav .links a:hover{
color: #B0FDFF;
text-decoration: none;
text-shadow: 0px 0px 3px #6a00ff;

border: 2px dotted white;

}

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

@keyframes float {

0% { transform: translate(0, 0px);

}

50% {

transform: translate(0, 8px);

}

100% {

transform: translate(0, -0px);

}


</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 0 of 0 comments ( View all | Add Comment )