Dark and light blue layout

Tags: blue

Description:

Dark and light blue layout with floating profile animation and custom online icon. Made with bits and pieces of code, so change it up 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=33132) -->

<style>.online { visibility: hidden; } .online img { content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/8debd67d-e4d9-453b-aed3-998549f50bbd/dbulkw2-e3705b92-da3e-43e9-ae47-726a268f6fa1.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzhkZWJkNjdkLWU0ZDktNDUzYi1hZWQzLTk5ODU0OWY1MGJiZFwvZGJ1bGt3Mi1lMzcwNWI5Mi1kYTNlLTQzZTktYWU0Ny03MjZhMjY4ZjZmYTEuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.u-HK0XpnqToj4jN_xxRtWmGRsSJ9eDEWIz6nzLMgVfg"); animation-name: none; visibility: visible; height: 120px; width: 123px; }</style>

<style>
/*the username glow and shadow*/
h1
{
	color: /*the username glow and shadow*/
h1
{         color: #FFCCFF; 
	//text-shadow: 1px 1px #181161;
	
};
	text-shadow: 2px 2px 3px #181161, 0 0 25px #181161, 0 0 5px white;
}
h1, h2, h3, h4,h5,a, p, nav label, .section
{


</style>

<style>
.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> 

<style>
body {
font-family: Allegro, serif typeface;
}



/* contact icons */
.contact .inner a img {
font-size: 0;
}

.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/e7dc6b41-f709-43ed-947e-3dae499e274d/d9bn1q3-ba45d913-b4c1-44b7-b09a-4cc168e651f0.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2U3ZGM2YjQxLWY3MDktNDNlZC05NDdlLTNkYWU0OTllMjc0ZFwvZDlibjFxMy1iYTQ1ZDkxMy1iNGMxLTQ0YjctYjA5YS00Y2MxNjhlNjUxZjAuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.e2fwJOFW5jXMBa7Aa6BjUvt-nN8useVPMdPx_gPS_OA")
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/e7dc6b41-f709-43ed-947e-3dae499e274d/d9bn1q3-ba45d913-b4c1-44b7-b09a-4cc168e651f0.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2U3ZGM2YjQxLWY3MDktNDNlZC05NDdlLTNkYWU0OTllMjc0ZFwvZDlibjFxMy1iYTQ1ZDkxMy1iNGMxLTQ0YjctYjA5YS00Y2MxNjhlNjUxZjAuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.e2fwJOFW5jXMBa7Aa6BjUvt-nN8useVPMdPx_gPS_OA")
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/e7dc6b41-f709-43ed-947e-3dae499e274d/d9bn1q3-ba45d913-b4c1-44b7-b09a-4cc168e651f0.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2U3ZGM2YjQxLWY3MDktNDNlZC05NDdlLTNkYWU0OTllMjc0ZFwvZDlibjFxMy1iYTQ1ZDkxMy1iNGMxLTQ0YjctYjA5YS00Y2MxNjhlNjUxZjAuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.e2fwJOFW5jXMBa7Aa6BjUvt-nN8useVPMdPx_gPS_OA")
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/e7dc6b41-f709-43ed-947e-3dae499e274d/d9bn1q3-ba45d913-b4c1-44b7-b09a-4cc168e651f0.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2U3ZGM2YjQxLWY3MDktNDNlZC05NDdlLTNkYWU0OTllMjc0ZFwvZDlibjFxMy1iYTQ1ZDkxMy1iNGMxLTQ0YjctYjA5YS00Y2MxNjhlNjUxZjAuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.e2fwJOFW5jXMBa7Aa6BjUvt-nN8useVPMdPx_gPS_OA")
}

.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/e7dc6b41-f709-43ed-947e-3dae499e274d/d9bn1q3-ba45d913-b4c1-44b7-b09a-4cc168e651f0.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2U3ZGM2YjQxLWY3MDktNDNlZC05NDdlLTNkYWU0OTllMjc0ZFwvZDlibjFxMy1iYTQ1ZDkxMy1iNGMxLTQ0YjctYjA5YS00Y2MxNjhlNjUxZjAuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.e2fwJOFW5jXMBa7Aa6BjUvt-nN8useVPMdPx_gPS_OA")
}
.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/e7dc6b41-f709-43ed-947e-3dae499e274d/d9bn1q3-ba45d913-b4c1-44b7-b09a-4cc168e651f0.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2U3ZGM2YjQxLWY3MDktNDNlZC05NDdlLTNkYWU0OTllMjc0ZFwvZDlibjFxMy1iYTQ1ZDkxMy1iNGMxLTQ0YjctYjA5YS00Y2MxNjhlNjUxZjAuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.e2fwJOFW5jXMBa7Aa6BjUvt-nN8useVPMdPx_gPS_OA")
}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/e7dc6b41-f709-43ed-947e-3dae499e274d/d9bn1q3-ba45d913-b4c1-44b7-b09a-4cc168e651f0.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2U3ZGM2YjQxLWY3MDktNDNlZC05NDdlLTNkYWU0OTllMjc0ZFwvZDlibjFxMy1iYTQ1ZDkxMy1iNGMxLTQ0YjctYjA5YS00Y2MxNjhlNjUxZjAuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.e2fwJOFW5jXMBa7Aa6BjUvt-nN8useVPMdPx_gPS_OA")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/e7dc6b41-f709-43ed-947e-3dae499e274d/d9bn1q3-ba45d913-b4c1-44b7-b09a-4cc168e651f0.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2U3ZGM2YjQxLWY3MDktNDNlZC05NDdlLTNkYWU0OTllMjc0ZFwvZDlibjFxMy1iYTQ1ZDkxMy1iNGMxLTQ0YjctYjA5YS00Y2MxNjhlNjUxZjAuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.e2fwJOFW5jXMBa7Aa6BjUvt-nN8useVPMdPx_gPS_OA")
}

</style>

<style>
.profile {

background: #151421;


 } </style>
<style>
p {
color: #6e6a9e ;

} </style>


<style>

body {
  background-color: #151421;
} </style>


<style>
body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
.logo {
filter: sepia(100%) hue-rotate(230deg) saturate(4);
</style>

<style>
body {
 margin:0;
 background-image: url("");
background-attachment: fixed;
<style></style>

<style>
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {

  background-color: #211e42;

  color: #6e6a9e;
 
  text-decoration: underline !important;
  
  
  

} </style>

<style>
.online {
    color: #6e6a9e;
}</style>  

<style>
nav .links {
    display: block;
    background-color: #151421; 
    border-bottom 1px solid line;
    color: #6e6a9e;
    text-decoration: underline !important;
}

nav .top {

background: none;
margin-top: 0;
color: #6e6a9e;
background-color: transparent;
border: 2px solid #a7a3d1 !important;
text-decoration: underline !important;

}

</style>

<style>main {
border-left: 2px dashed #a7a3d1;
border-right: 2px dashed #a7a3d1;
</style>

<style>
.profile .blurbs .heading, .profile .friends .heading {
    display: block;
    background-color: #211e42;
   border-bottom: 1px solid #a7a3d1
    color: #6e6a9e; !important;
    text-decoration: underline !important;

}

.profile .blurbs .inner h4 {
    color: #6e6a9e;
    text-decoration: underline !important;
  
}  

.profile-pic img{
border: 1px dashed #a7a3d1;
border-radius: 100%;
}

</style>
<style>
.details-table td p {
color: #6e6a9e;
}

.details-table {
margin: 0;
}

.details-table tr td:first-of-type p {
    color: #6e6a9e;
}

.details-table, td {
border: 1px solid #a7a3d1;
border-collapse: collapse;
color: #6e6a9e;
}
td {
color: #6e6a9e !important;
background: none;
background-color: black !important;
} 

table.details-table {
max-width: 98%;
}
</style>

<style>
}

.comments-table td {
    background-color: black; 
  
}

.comments-table td a {
    color: #6e6a9e;
}

.comment-replies {
    border-color: #6e6a9e;
}

<style>
.heading, .url-info {
border: 2px solid #a7a3d1 !important;
}
.inner {
border-top: none;</style>

<style>
.profile .blurbs .inner h4 {
    color: #6e6a9e;
    
}

<style>
<p style="background-color: #7400FF;">#7400FF 
</style>


<style>



    .profile .friends .person img:not(.icon){

        
border: 1px solid #a7a3d1 !important;
   

        

    }

</style>

<style>
main .left {
  border: 1px dashed #a7a3d1 !important;
}

.profile .contact {
  border: 1px dashed #a7a3d1 !important;
}

.profile .url-info {
    border: 1px dashed #a7a3d1 !important;
    
}

.profile .table-section {
    border:1px dashed #a7a3d1 !important;
}

main .right {
    border: 1px dashed #a7a3d1 !important;
}

.profile .blurbs .inner {
    border: 1px dashed #a7a3d1 !important;
color: #6e6a9e;
}

.profile .friends .inner {
    border: 1px solid #a7a3d1 !important;
color: #6e6a9e;
}

.general-about .profile-pic img { 
  
}
.general-about .details p:not(.online){
color: #6e6a9e !important;

}
.general-about .details a{
color: #6e6a9e !important;

}

.count {
    border: 1px solid #a7a3d1 !important;

}

nav .links {
    background-color: #000000;
    border: 1px solid #a7a3d1 !important;
    text decoration: underline !important;
}

footer {
color: #6e6a9e !important;
text-decoration: underline !important;
text-decoration-style: dotted !important;
background: transparent;
  }    


</style>

<style>
h1, h2,h3,h4, h5, h6, a {
color: #6e6a9e;
}</style>

<style>
.general-about .profile-pic img{
clip-path: circle(50% at 50% 50%);
}
</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 20 of 25 comments ( View all | Add Comment )

nix	1748794636 hi! i'm using this. thank you! Report Comment
mimi🖤	1747582083 using !! Report Comment
Loan	1742931743 usiing Report Comment
dayll	1739108970 Using Report Comment
fishy	1735952358 Using Report Comment
SkyeSpy ;; .	1727980265 using!/ooc Report Comment
ON REPAİR (OPEN İN 49 HOURS)	1712076803 usıng Report Comment
𝙆𝟏-𝘽0✮⋆˙	1711197556 Using Report Comment
[S] gumball	1707800805 using!! Report Comment
Kasan ｡ Kai ><	1706621517 Mayb using!1! o((>ω< ))o Report Comment
gomita	1706181831 usinggg¡¡¡ Report Comment
[S] gumball	1700516307 using !! Report Comment
marbles 🍉 (inactive)	1697737561 very cool tysm, using!! Report Comment
☆ ⋮ Victor/Roxy 💉🩸	1697291976 USING :33 Report Comment
Atlas	1696987927 Using this, thank you!! Report Comment
Cerberus	1695585675 using! Report Comment
☣︎deadnbloated☣︎	1689967754 using!! Report Comment
Victoria <3	1689527243 using :) (its very pretty!!) Report Comment
Cyb3r._.S41nt	1689133279 using !!! Report Comment
Aiden/Aida	1688364388 ♡ Using ♡ Report Comment