lightblue n white theme!! 🐟

Tags: blue, lightblue, white, cute, simple, 2000's

Description:

another blue theme i created! i tried to make it look like it's some sort of old website whatever look, but i failed lol.. but atleast i created something. please comment when using and if you're using this as base please credit me. (just copy paste into ur abt me)
Update 25/04/23: centered pfp and made the general-about slightly taller! :)

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by tilapia (https://layouts.spacehey.com/layout?id=26359) -->

<style>
    body{
        background-image: linear-gradient(white, gray);
    }
    .container{
        box-shadow: 0px 1px 10px black;
        width: 970px;
    }
    nav .top{
        background-image: linear-gradient(#d0d2d6, white, #9fb4cb);
    }
    nav .top .left .logo{
        display: none;
    }
    nav .top{
        height: 80px;
        border: ridge white 3px;
        margin-bottom: 10px;
    }
    nav .top .center form{
        text-align: left;
    }
    [id='q']{
        border-radius: 5px;
        border: solid lightgray;
    }
    nav .links{
        text-align: center;
        background-image: linear-gradient(lightgray, white, #9fb4cb);
        border: ridge white 2px;
        box-shadow: 0px 5px 10px gray;
        margin-bottom: 10px;
    }
    main .right{
        width: 30%;
        border-radius: 5px;
    }
    main .left{
        background-image: linear-gradient(#ebebeb, white, #ebebeb, lightgray);
    }
    .general-about .profile-pic img{
        margin-left: 180px;
        margin-top: 15px;
        box-shadow: 0px 1px 10px black;
        border: ridge white 3px;
        border-radius: 5px;
    }
    main .right{
        box-shadow: 0px 1px 10px;
    }
    
     .general-about{
        
    background: linear-gradient(to left, #7896b6, lightgray, #ebebeb);
    background-color: transparent;
    border-radius: 5px;
    border: ridge white 3px;
    text-align: center;
    height: 200px;
        
    }
    
    .profile h1{
        font-size: 55px;
        color: white;
        text-shadow: 0px 5px 5px #4d6c8e;
        border: ridge 3px white;
        border-radius: 5px;
        background: linear-gradient(white, #9fb4cb);
        text-align: center;
        height: 90px;
    }
    
    main .right{
        background: linear-gradient(to bottom, white, lightgray, #9fb4cb, #4d6c8e);
    }
    FORM > BUTTON{
        border: ridge white 3px;
        border-radius: 5px;
    }
    .profile .blurbs .heading{
        background: linear-gradient(to right, #b8c8d9, lightgray, #2d4054);
        border: ridge 3px white;
        border-radius: 5px;
         box-shadow: 2px 5px 5px gray;
    }
    .profile .blurbs .heading h4{
        color: white;
        text-shadow: 0px 2px 2px #33485e;
    }
    .profile .blurbs .inner{
        background: linear-gradient(to bottom right, #babecd, white, #5c74ac);
        border: ridge 3px;
        border-radius: 5px;
        margin-top: 10px;
        text-align: center;
    }
    DIV.blog-preview{
        text-align: center;
        border: ridge 3px white;
        background-image: linear-gradient(#ebebeb, white, #ebebeb, lightgray);
        border-radius: 5px;
         box-shadow: 2px 5px 5px gray;
        
    }
    .profile .blurbs .section h4{
        text-align: center;
        text-shadow: 0px 2px 2px #33485e;
        color: white;
        
    }
    .profile .mood{
        border: ridge 3px white;
        border-radius: 5px;
        margin-top: 5px;
        margin-bottom: 5px;
        text-align: center;
    }
    .profile .friends .heading{
         background: linear-gradient(to left, #b8c8d9, lightgray, #2d4054);
         border-radius: 5px;
         border: ridge 3px;
         text-align: center;
         box-shadow: 2px 5px 5px gray;
    }
    .profile .friends .heading h4{
        color: white;
        box-shadow: ;
        text-shadow: 0px 2px 2px #33485e;
    }
    .profile .friends .inner{
        text-align: center;
        background-image: linear-gradient(#c1c7ce, white, #ebebeb, lightgray);
        border: ridge 3px white;
        border-radius: 5px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    .profile .friends .person p{
        display: none;
    }
    .profile .friends .person img:not(.icon){
        border: ridge 3px white;
        border-radius: 5px;
         box-shadow: 2px 5px 5px gray;
    }
    
    .profile .contact{
        border: ridge 3px white;
        border-radius: 5px;
        box-shadow: 2px 5px 5px gray;
        background-image: ;
        background-size: 500px;
        background-position: center;
        background-image: linear-gradient(#ebebeb, white, #ebebeb, lightgray);
        text-align: center;
        
    }
    
    .profile .contact .heading{
        background: linear-gradient(to left, #b8c8d9, lightgray, #2d4054);
        border-radius: 2px;        
    }
    .icon{
        display: none;
    }
    a{
        color: #707e8e;
    }
    .profile .url-info{
        border: ridge 3px white;
        border-radius: 5px;
        background-image: linear-gradient(#ebebeb, white, #ebebeb, lightgray);
        text-align: center;
    }
    DIV.url-info > P:nth-child(1) > B{
        color: #707e8e;
    }
    .profile .table-section .heading{
        background: linear-gradient(to left, #b8c8d9, lightgray, #2d4054);
        text-align: center;
    }
    .profile .table-section{
        border: ridge 3px white;
        border-radius: 5px;
        box-shadow: 2px 5px 5px gray;
        text-shadow:2px 2px 5px gray;
    }
    .details-table td{
        background-color: white;
        border-radius: 5px;
        box-shadow: 2px 2px 5px gray;
        
    }
       :root {
    --light-orange: ;
       --even-lighter-blue: white;
       }
       table.comments-table{
           border: outset white ;
           border-radius: 10px;
           box-shadow: 2px 2px 5px gray;
       }
       .comments-table td *{
           border-radius: 5px;
           border: none;
       }
       .count{
           color: #5874a7;
       }
       
       .details-table td *{
           color: #8b9ab3 ;
       }
       footer{
           border: ridge 3px white;
           border-radius: 5px;
           background: linear-gradient(to bottom, #b8c8d9, lightgray, #2d4054);
       }
</style>

<style>
    .comments-table td{
        background-image: linear-gradient(#ebebeb, white, #ebebeb, lightgray);
    }
    
    
</style>

<style>
    .profile{
        
    direction: rtl;
    
    }
    .blurbs{
    
    direction: ltr;
        
    }
    .blog-preview{
        
    direction: ltr;
        
    }
    .friends{
    
    direction: ltr;
        
    }
    .general-info{
        
    direction: ltr;
        
    }
    .contact{
        
    direction: ltr;
    
    }
    .url-info{
        
    direction: ltr;
        
    }
    .details-table{
        
    direction: ltr;
        
    }
    .profile .table-section .heading{
    
    direction: ltr;
        
    }
    .details p{

    direction: ltr;

   }
   .mood{

       direction: ltr;

   }
</style>

<style>
    img {
  filter: sepia(100%) hue-rotate(190deg) saturate(100%);
 }

</style>

<style>
             ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    }

    ::-webkit-scrollbar-thumb {
    background: white;
    border: outset 5px;
    }

    ::-webkit-scrollbar-track {
    background-image: linear-gradient(white, gray);
    border: outset 5px;
    }
</style>

<style>* {cursor: url(https://cur.cursors-4u.net/mechanics/mec-4/mec313.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2009/09/10/apollo-class.html" target="_blank" title="Apollo Class"><img src="https://cur.cursors-4u.net/cursor.png" alt="Apollo Class" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>
table.comments-table{

display: block;
height: 250px!important;
overflow-y: scroll;

}
</style>

<style>
  DIV.blog-preview:before {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 180px;
  width: 350px;
  background-image: url(https://i.pinimg.com/564x/c7/2d/89/c72d89243173a9974b5f89c5c9f85fe2.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  align-content: center;
  border-radius: 10px;
  border: ridge white 3px;
  margin-left: 17px;
  margin-top: 10px;
  filter: sepia(100%) hue-rotate(190deg) saturate(100%);
    
    
    
</style>

<style>
  .profile .mood:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 180px;
  width: 500px;
  background-image: url(https://i.pinimg.com/564x/8d/a8/04/8da8041abbadf9cee7c7d0f9a865d784.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  align-content: center;
  border-radius: 10px;
  border: ridge white 3px;
  margin-left: 13px;
  margin-top: 10px;
  margin-bottom: 10px;
  filter: sepia(100%) hue-rotate(190deg) saturate(100%);
  
</style>

<style>

   a:hover {
     color: black; 
   } 

   }
   
   nav .links {

}
nav .links a:hover {
color: black;
}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
body{font-family: 'Righteous', cursive;;
font-size: 16px;}

.profile .blurbs .section p{
    color: #4b5972;
}
</style>

<style>
    img:hover{
          transform: scale(1.1); 
          transition: transform .2s; 
        
    }
    
</style>



<style>
/*YOU CAN REMOVE THIS FOR A MORE.. NOSTALGIC LOOK.*/
body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 20, 20, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, white, white, black);
z-index: 2;
background-size: 100% 2px, 3px 100%;
opacity: 10%;
pointer-events: none;
}
</style>

<style>

.online{content:url("https://i6.glitter-graphics.org/pub/601/601836qklq5zhm8s.gif");
     filter: sepia(100%) hue-rotate(190deg) saturate(100%);}
}

</style>


<style>

.profile .profile-info {
	background-image: url(https://i.pinimg.com/564x/27/6d/d0/276dd0db727f5c5f8388e0c752df2e12.jpg);
	border: ridge;
        border-color: white;
        border-width: 3px;
	border-radius: 5px;
	text-align: center;
	box-shadow: 0px 3px 5px gray;
	filter: sepia(100%) hue-rotate(190deg) saturate(100%);
}
</style>

<style>
.links .special a:link, .links .special a:visited  {
  color: white;
}

.links .special a:hover {
  color: white;
}
</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 1610 comments ( View all | Add Comment )

𝕢𝕪𝕔𝕒𝕟𝕧𝕣	1722033282 Using Report Comment
jae	1722024589 using Report Comment
natasam （；´д｀）ゞ	1722022685 using ヾ(＠⌒ー⌒＠)ノ Report Comment
MakkoCake	1721974436 gonna use this, thank you! Report Comment
Aeris	1721954458 usingg :) Report Comment
Sugu	1721952011 Using!! ▪︎□▪︎ Report Comment
SYKMO	1721951351 using :) Report Comment
S.t4r3	1721948972 using! Report Comment
yumi	1721936648 using :3 Report Comment
antalie	1721934592 using! Report Comment
Sonic	1721926805 using ^^ Report Comment
☣︎ 𝔰𝔶𝔫𝔱𝔥 ☣︎	1721857122 using!! tweaked the code a little Report Comment
M1SH4.X3	1721855827 Using Report Comment
vae	1721851289 Def gonna use Report Comment
Kinn (覚えて)	1721847424 Using!! Report Comment
larin	1721839435 using !! Report Comment
larin	1721839435 using !! Report Comment
Kari.jpg	1721831821 using !! Report Comment
Kari.jpg	1721831821 using !! Report Comment
Kari.jpg	1721831820 using !! Report Comment