Brown Nana Layout

Tags: brown, nana, soft, light academia, light, simple, light brown
Description:

please comment if using, credits are optional but appreciated <3
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by moakuyo (#1 ranpo kinnie) ‧₊ ᵎᵎ 🍒 .˚✮ (https://layouts.spacehey.com/layout?id=103309) -->

<style>
main {
    height: 460px;
    overflow-y: scroll;
    border: 5px double #776d63;
    background: #f5f0ea;
}
main .left {
    border-right: solid #aa9783 1px;
    padding: 40px;
    background: #aa9783;
border: 2px solid #776d63;
}
</style>
<style>
table.comments-table{
display: block;
height: 400px!important;
overflow-y: scroll;
}


</style>
<style>
/* Scrollbar styles */
::-webkit-scrollbar {
    width: 0px;
height: 0px;
}
</style>

<style>
@import url(https://fonts.googleapis.com/css2?family=Indie+Flower&family=Nanum+Brush+Script&family=Seaweed+Script&display=swap);
body{font-family:"Indie Flower",cursive}</style>






<style>

p, ol li, ul:not(nav .links):not(footer .links) li {
    font-size: max(1em, 15px);
font-weight: 600;
}
.count {
    color: #776d63;
}

:root {
    --light-gray: #f2f0f0;
    --gray: #e3e3e3;
    --dark-gray: #919191;
    --darker-gray: #545454;
    --logo-blue: #1D4ED8;
    --darker-blue: #000;
    --lighter-blue: #60A5FA;
    --even-lighter-blue: #BFDBFE;
    --lightest-blue: #DBEAFE;
    --red: #FF0000;
    --dark-orange: #ED0707;
    --light-orange: #f9c56c;
    --even-lighter-orange: #fcdbb8;
    --strange-yellow: #dbae2e;
    --green: #34D399;
    --light-green: #E6F8DD;
    --medium-green: #A0C99C;
    --dark-green: #059669;
    accent-color: #1D4ED8;
    accent-color: var(--logo-blue);



body{
    background-color: #f5f0ea;
    background-size: 50%;
background-position: center;
    background-attachment: fixed;
    color: #fff ;

  }
    .section {color: black!important;}
       h4, nav label, {display: none;}
       }
.profile .blurbs .section h4 {
    margin: 0;
    color: #000000;
    font-size: large;
}
           
    .section {color: black!important;}
        p {color: black!important;}
        
    .blurbs{
        margin-top: -10px!important;
        text-align: center;
    }
   .profile .blurbs .heading, .profile .friends .heading {
    background: #aa9783;
    color: black;
    padding: 2px 7px;
    border: 2px solid #776d63;
}

    
    .search-wrapper input[type=text] {
        font-family: times;
        background-color: white!important;
        border: 1px solid black!important;
        border-radius: 0px !important;
        font-size: 9px;
        color: black!important;
        
    }
    

    button{
        border-radius: 0px !important;
        margin-top: 2px;
        border: 1px solid!important;
        text-transform: lowercase;
        font-family: times;
        font-size: 8px!important;
        background-color: white !important;
        color: black!important}
       
    }
.blog-preview {
        margin-top: 0px;
        margin-bottom: 15px;
        text-align: center;
        color: #000000;
        border: none;
    }
    
    .blog-preview p {
        font-size: 15px;
    }
    .blog-preview p {
        text-align: center;
        background-color:;
        padding: 0px;
    }
    
 
 
    nav {
        color: black;
        background-repeat: repeat-x;
        margin-bottom: 0px;
        margin-top: 0px;
        text-align: center;
        overflow: hidden;
        border: none;
        border-color: none!important;

    }
    
nav .top {
    display: flex !important;
    opacity: 1 !important;
    background: #aa9783;
    border: 2px solid;
    border-color: #776d63;
}

    nav .links {
        background: url("");
        background-color: transparent;
        background-position: bottom!important;
        background-repeat: repeat-x!important;
        height: 40px;
        font-size: 11px;
        border:none;
        border-bottom: 1px black solid;

    }
    
    nav .links a{
        color: black!important;
        font-size: px;
        line-height: -200px!important;
    }
   nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
content: " ୨୧";
font-size: 13px;
font-weight: bold;
color: #000;

} 



    .contact {
        font-size: 12px;
        font-family: times;
        border: solid 0px #fa90ac!important;
        background-image: url("https://64.media.tumblr.com/4a0273d84b24c94c0ce03bba5a7af363/50ee50266e3b33c6-13/s250x400/cc01367263f2a6f3eb457dce6e06a40a1eeb054d.gifv")!important;
        background-repeat: no-repeat;
        background-size: 0px;
        
    }
    .contact .inner {
    margin-top: -2px;
    line-height: 10px;
    border: 2px solid;
    border-color: #776d63;
}

    .contact .inner {
        line-height: 10px;
    }
    
    .contact .inner a {
    font-weight: 600;
    font-family: 'Indie Flower';
    font-size: larger;
    }
    .contact .inner a img {
        font-size: 0;
    }
    .contact .inner a img:before {
        font-size: 1em;
        display: block
    }



/* contact icons */
.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: ""
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: ""
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: ""
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: ""
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: ""
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: ""
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: ""
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: ""
}
nav .links a {
    text-decoration: none;
    text-shadow: 0 0 7px #aa978300;
    font-weight: 600;
    font-size: max(1em, 12px);
}
  .profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
    background: #978676;
    border: 2px solid #776d63;
    color: black;
    padding: 2px 7px;
    font-family: "Indie Flower", cursive;
    font-size: larger;
}
.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
    border: 0px solid #776d63;
    width: 100%;
    margin: 10px 0;
}
table.details-table {
    margin-top: -2px;
    width: 100%;
    border: 2px solid;
    border-color: #776d63;
}
        .details-table td:first-child {
    background: #aa9783;
    color: 000;
    font-weight: bold;
    width: 33%;
}

.details-table td {
    background: #aa9783;
    font-size: medium;
    vertical-align: top;
}
.profile .blurbs .heading, .profile .friends .heading {
    background: #aa9783;
color: #000;
    padding: 2px 7px;
    border: 2px solid;
    border-color: #776d63;
}
    .profile-info{
        display: none!important;
    }    
    
    .profile .url-info {
        display:none;
    }
    .profile .table-section {
        font-size: 11px;
        border: dotted 0px!important;
        border-right: none!important;
}
footer {
    text-align: center;
    font-size: 70%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background: #aa9783;
border: 2px solid;
border-color: #776d63;
}
.comments-table td:first-child, .music-table td:first-child {
    background: #aa9783;
    text-align: center;
    font-weight: bold;
    width: 38%;
}
.comments-table td, .music-table td {
    background: #f5f0ea;
    vertical-align: top;
}
table.comments-table, table.music-table, table.bulletin-table, table.forum-table, table.groups-table {
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    border: 2px solid;
    border-color: #776d63;
}


</style>

<style>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}
</style>

<style>



h1{

  animation: type 3s steps(27);

  color: black;

  font-size: 10px;

  font-family: courier;

  white-space: nowrap;

  overflow: hidden;

  }



@keyframes type{

  0%{

    width:0ch;

  }

  

  100%{

    width:27ch;

  }

}



@keyframes blink{

  0%{opacity:1;}

  50%{opacity:0;}

  100%{opacity:1;}

}



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

table, th, td {

  border: 0px solid;

     }

:root {

  --topic1: "Games";
  --topic2: "Music";
  --topic3: "Movies";
  --topic4: "Anime";
  --topic5: "Books";
  --topic6: "Manga";

 }

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
    
    
color: #000 !important;
letter-spacing:normal !important;
text-shadow: 0px 0px black !important;
filter: brightness(95%) !important;
   
   
}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: var(--topic6);
}


.profile .blurbs .section p, .profile .friends p, .blog-entry .comments p, .bulletin .comments p {
    margin: 0 0 8px 0;
    font-size: large;
}
 DIV.blog-preview:before {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 150px;
  width: 450px;
  background-image: url(https://i.postimg.cc/kXS1hT7L/nana.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  align-content: center;
  border-radius: 0px;
  border: solid black 0px;
  margin-right: 17px;
  margin-top: 10px;
}

</style>


<style>* {cursor:url(https://xyz.crd.co/assets/images/gallery18/d73cceb0.png?v=4ca63763), auto !important;}
}
</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 4 of 4 comments ( View all | Add Comment )
vivianne	1719015094 using ;3 Report Comment
Maracuyeah!	1717295415 using ! Report Comment
Sleepy!!!	1715732370 Usando!!! Report Comment
Neo!Metanowa	1715278055 using Report Comment