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

SkyeSpy ;; .	1727980265 using!/ooc Report Comment
editing profile/wisu	1712076803 usıng Report Comment
𝙆𝟏-𝘽0✮⋆˙	1711197556 Using Report Comment
gumball [inactive]	1707800805 using!! Report Comment
Kasan ｡ Kai ><	1706621517 Mayb using!1! o((>ω< ))o Report Comment
gomita	1706181831 usinggg¡¡¡ Report Comment
gumball [inactive]	1700516307 using !! Report Comment
marbles 🍉 (inactive)	1697737561 very cool tysm, using!! Report Comment
🧪 \| DR. EUGNE!?	1697291976 USING :33 Report Comment
Atlas	1696987927 Using this, thank you!! Report Comment
Cerberus	1695585675 using! Report Comment
raven	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
xp.z	1687880465 usando Report Comment
Milzz	1687495206 Using Report Comment
☆ kinsey	1687225485 usingg Report Comment
Rayne // Vix AUTOPLAY [NUMBER 1 フューエル FAN]	1687002923 Thanks !! Report Comment
Chord	1686958551 ooo :0 using !! Report Comment