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 nika ‧₊ ᵎᵎ  .˚✮  (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 20 of 20 comments ( View all | Add Comment )

𝘀𝘁𝗮𝗿𝗹𝗶𝗴𝗵𝘁.ೃ࿔*:･	1785197973 Usando Report Comment
Kr4t.57	1769320866 Usando <3 Report Comment
blake ☮︎	1762987676 Cute layout ^^ Report Comment
christy	1758668285 using Report Comment
ziggy!!	1753696052 usinggg!! Report Comment
pearlevrn	1750356185 Using! Report Comment
nauta	1748659194 usandoo Report Comment
maria	1741111312 using Report Comment
rae	1740980694 using!!! Report Comment
Sammi <33	1739041980 probably using at some pointtt <33 Report Comment
.sxrtvavcs	1738232787 using Report Comment
☆ georgia ☆	1737252936 so cute!! Report Comment
linnie!	1735105970 USANDO!!! Report Comment
Charli	1730570493 Using Report Comment
angel ౨♱ৎ	1723798389 Using ^^ Report Comment
nauta	1723787353 usando!! Report Comment
kikita	1719015094 using ;3 Report Comment
Maracuyeah!	1717295415 using ! Report Comment
linnie!	1715732370 Usando!!! Report Comment
Neo!Metanowa	1715278055 using Report Comment