simple white theme!

Tags: simple, white, 2000s, gray, layouts, futuristic

Description:

haven't created some white layout i think.. so there ya go, Visit here for live preview! Comment when using, credit when using as base and DON'T republish and edited version of this.

Preview:

click on the image for a larger preview

Code:

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

<style>
    body{
        background-image: url('https://i.pinimg.com/564x/85/4b/71/854b713384ab5e754518151480463cd2.jpg');
        background-size: 300px;
    }
    nav .top .left .logo{
        content: url(https://cdn.discordapp.com/attachments/1064462871947378729/1083289469937008640/Untitled31_20230309152500.png);
    }
    
    .container{
        width:1000px
    }
    main .right{
        width: 35%;
    }
       .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;

   }
   
   nav .links{
       text-align: center;
   }
    nav .top .center form{
        text-align: right;
        margin-top: 5px;
    }
    nav .top .right{
        text-align: left;
        margin-left: 13px;
        margin-top: 10px;
    }
    
    nav .links{
        background: linear-gradient(gray -90%, transparent);
        border: ridge white 2px;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        margin-bottom: 10px;
        box-shadow: 0px 5px 10px black;
    }
    nav .links a{
        color: white;
        text-shadow: 0px 0px 5px black;
    }
    
    nav .top{
        background: linear-gradient(white -2%, transparent, #dcded5 130%);
        backdrop-filter: blur(2px);
        border: ridge white 2px;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        color: black;
        height: 60px;
    }
    [id='q']{
        border-radius: 30px;
        background: linear-gradient(white -2%, transparent, #dcded5 130%);
        border: solid white 2px;
        box-shadow: 0px 0px 5px gray;
        
    }
    FORM > BUTTON{
        background: linear-gradient(to bottom, white -2%, transparent, #dcded5 130%);
        border: solid white 2px;
        border-radius: 30px;
        box-shadow: 0px 0px 5px gray;
    }
    FORM > BUTTON:hover{
        background: linear-gradient(to top, white -2%, transparent, #dcded5 130%);
        border: inset white 2px;
        border-radius: 30px;
        box-shadow: 0px 0px 5px gray;
}
main{
    background-color: transparent;
    backdrop-filter: blur(2px);
    border-radius: 30px;
}
    main .left{
        background:linear-gradient(#f2eff1,#f2eff1,#f2eff1,transparent );
    border-top-right-radius: 30px;
    }
    main .right{
        border: solid #f2eff1 30px;
        border-top-left-radius:30px;
        border-bottom-left-radius: 30px;
        background: linear-gradient(white, transparent, #dcded5);
        
    }
    .profile .blurbs .heading{
        background: linear-gradient(white , transparent);
        border: ridge white 2px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        color: black;width: 190px;
        box-shadow: 0px 5px 10px gray;
    }
    .profile .blurbs .inner{
        background: linear-gradient(white , transparent);
        border: ridge white 2px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border-top-right-radius: 20px;
        color: white;
        text-shadow: 0px 0px 5px black;
        box-shadow: 0px 5px 13px black;
    }
    .profile .blurbs .section h4{
        color: white;
    }
    .profile .friends .heading{
        background: linear-gradient(white , transparent);
        border: ridge white 2px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        color: black;width: 290px;
    }
    .profile .friends .inner{
        background-image: linear-gradient(white , transparent),url('https://cdn.discordapp.com/attachments/1064462871947378729/1083259912576053318/Untitled37_20230309132753.png');
        background-position: bottom;
        background-repeat-y: no-repeat;
        background-size: 200px;
        border: ridge white 2px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border-top-right-radius: 20px;
        color: white;
        text-shadow: 0px 0px 5px black;
        box-shadow: 0px 5px 13px black;
        text-align: center;
        margin-bottom: 10px;
    }
    .profile{
        border: ridge white 3px;
        border-radius: 30px;
        box-shadow: 0px 5px 10px;
    }
DIV.blog-preview{
    border: ridge white 2px;
    text-align: center;
    border-radius: 20px;
    box-shadow: 0px 5px 13px black;
}
.profile .friends .person p{
    display: none;
}
.profile .friends .person img:not(.icon){
    filter: sepia(100%) saturate(20%);
    border-radius: 20px;
    border: ridge white 1px;
    box-shadow: 0px 5px 10px gray;
}
.general-about .profile-pic img{
    height: 150px;
    border-radius:80px;
    border: ridge white;
    filter: sepia(100%) saturate(20%);
}
.general-about{
    background-image: linear-gradient(to left, #f2eff1,transparent ), url('https://i.pinimg.com/564x/85/4b/71/854b713384ab5e754518151480463cd2.jpg');
    height: 150px;
    border-radius:20px;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
    background-size: 600px;
}
    .profile h1{
        font-size: 40px;
        text-align: center;
    }
    
    .profile .contact .heading{
        background: linear-gradient(white , transparent);
        border: ridge white 2px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        color: black;
    }
    .profile .contact{
        border-bottom: ridge white 2px;
        border-left: ridge white 2px;
        border-right: ridge white 2px;
        border-top: none;
        border-radius: 20px;
        text-align: center;
        background-image: linear-gradient(white -2%, transparent, #dcded5 180%), url('https://i.pinimg.com/564x/85/4b/71/854b713384ab5e754518151480463cd2.jpg');
        background-size: 300px;
        box-shadow: 0px 5px 10px gray;
    }
    
    .profile .url-info{
        background: linear-gradient(white -2%, transparent, #dcded5 180%);
        border-radius: 20px;
        border: ridge white 3px;
        box-shadow: 0px 5px 10px gray;
    }
    .profile .table-section .heading{
        background: linear-gradient(white , transparent);
        border: ridge white 2px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        color: black;
        width: 280px;
        margin-right: 225px;
        box-shadow: 0px 5px 10px gray;
    }
    .profile .table-section{
        border: none;
    }
    .table-section .inner .details-table tbody tr td{
        border-radius: 20px;
        border: ridge white 2px;
        box-shadow: 0px 5px 15px gray;
        background: linear-gradient(white -10%, transparent, transparent);
    }
    .details-table td *{
        color: gray;
        text-align: center;
    }
    .comments-table td{
        background: transparent;
        border: none;
    }
    table.comments-table{
        border: none;
    }
      .contact .inner a img {
    font-size: 0;
}
.comments-table td *{
    border-radius: 90px;
    filter: sepia(100%) saturate(20%);
}
.contact .inner a img:before {
    font-size: 1em;
    display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	content: "•"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	content: "•"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	content: "•"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	content: "•"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	content: "•"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	content: "•"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	content: "•"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	content: "•"
}

.details-table td{
    color: black;
}

</style>

 <style>
    @import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Bellota+Text:wght@300&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Bellota+Text&display=swap');
    
    .profile h1{
        font-family: 'Poiret One', cursive;
        font-size: 50px;
    }
    
p{
  font-family: 'Poiret One', cursive;
  font-size: 13px;
  color: black;
}
h1,h2,h3,h4,h5{
  font-family: 'Bellota Text', cursive;
  color: black;
}
a{
    font-family: 'Poiret One', cursive;}
}
  .profile .blurbs .inner{
      text-align: center;
  }
  
  nav .links a:hover{
      color: white;
      text-shadow: 0px 5px 10px gray;
  }
  .comments-table td *{
      background:transparent;
      border: none;
  }
  nav .links a{
      color: black;
      text-shadow: 0px 0px 10px white;
      font-family: 'Bellota Text', cursive;
      
  }
  div.friends:nth-of-type(3) > div.inner:nth-child(2) > p:first-child > b:first-child{
      color: black;
  }
  .count{
      color: black;
  }
  a{
      color: black;
  }
  a:hover{
      color: gray;
  }
  footer{
    background-color: transparent;
}
:root {
      --light-orange: transparent;}
      
      .comments-table td *{
          border: none;
      }
      .icon{
          content: url(https://cdn.discordapp.com/attachments/1064462871947378729/1083283258407657544/image-removebg-preview.png);
      }
      
    
    nav .links a {
  display: inline-block;
  position: relative;
}

nav .links a::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: white;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

nav .links a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

nav .links a{
    text-decoration: none;
    text-shadow: 0px 0px 10px black;
}

.links .special a:link, .links .special a:visited  {
  color: black;
}

.links .special a:hover {
  color: white;
}
.profile .blurbs:after{
width: ;
height: 160px;
display: block;
content: "";
background-image: url('https://64.media.tumblr.com/992449b901ba1e90d81df29891f4163e/f5c3a779017ad6e3-a5/s400x600/5c057b32bc47c1cce247934c14b305a353f5a521.gifv');
background-position: center;
background-size: 650px;
margin-bottom: -80px;
margin-top: -60px;
filter: brightness(150%);
background-repeat: no-repeat;
}
@media only screen and (max-width: 600px) {
main:before{
height: 200px;
}
}


.profile .profile-info{
background: linear-gradient(white , transparent);
        border: ridge white 2px;
        border-radius: 20px;
        color: white;
        text-shadow: 0px 0px 5px black;
        box-shadow: 0px 5px 13px black;
        height: 20px;
}

.online{

display: none;

}
  </style>
  
  <style>* {cursor: url(https://cur.cursors-4u.net/symbols/sym-6/sym597.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/01/26/transparent-white-star.html" target="_blank" title="Transparent White Star"><img src="https://cur.cursors-4u.net/cursor.png" alt="Transparent White Star" style="position:absolute; top: 0px; right: 0px;"/></a>
  
  <style>
        .container{
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 10px); }
    100%   { transform: translate(0, -0px); }   
}

 main{
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 10px); }
    100%   { transform: translate(0, -0px); }   
}


 html:after {
  background-image: url(https://www.nationalparkrescue.org/wp-content/uploads/2020/06/tv-lines-png-transparent.png);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  position: fixed;
  top: -110%;
  background-size: 500px;
  width: 300%;
  filter: brightness (200px);
  pointer-events:none;
}

table.comments-table{
display: block;
height: 200px!important;
overflow-y: scroll;
}

           ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    }

    ::-webkit-scrollbar-thumb {
    background: gray;
    border: outset gray;
        
        
    }

    ::-webkit-scrollbar-track {
    background: lightgray;
    border: inset lightgray;
        
    }
    
    img:hover{
          transform: scale(1.1); 
          transition: transform .2s; 
        
    }
  </style>
  
what!!!

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

Nono⋆ ݁.⁺｡˚	1713002396 using this! would it be okay to combine this w/ the lightblue n white layout tho Report Comment
vanti	1712747816 using! Report Comment
#🎧 𝑨𝑳𝑺 ✮⋆˙	1711862054 using!! Report Comment
r ∃ n	1711493871 using <3 Report Comment
Millshee	1708098270 Using!!! Report Comment
FlowerSpace	1704357113 USING!!!!!!!!111111 thank yuo Report Comment
dash	1702024871 SORRY I FORGOT TO COMMENT BUT USINGGG Report Comment
aeysha	1696681373 usingg !! Report Comment
Rapid	1695877942 usingh Report Comment
rickey	1695155097 using ! Report Comment
Yen	1694470801 might use Report Comment
Yen	1694470800 might use Report Comment
❝ (Sarah H.) ❞	1693153220 uuussingggggg Report Comment
C♡LI	1690330908 using!! Report Comment
aquahyein	1688565615 using!! Report Comment
cleo !!	1686572019 using, i love this!! Report Comment
anni ⋆·˚ ༘ *	1684000074 using it! Its so pretty!! Report Comment
sama	1682273992 using ♡ Report Comment
moimoiacid	1680894938 USED THIS AS A BASE!!! this is totes gorg Report Comment Please credit me by tilapia; 1680896102; Report
kudari	1679043147 im going insane (im going to use this) Report Comment