tokidoki themed layout + better customizable interests table

Tags: tokidoki, cute, emo, kawaii, 2000s

Description:

got bored and knocked this one off in a couple hours

interests are vars in 2nd root

comment "VERONICA IS T3H C4P741N" before using

Preview:

click on the image for a larger preview

Code:

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

<style></style>
<style>:root {
    --logo-blue: #1D4ED8;
    --darker-blue: #1E40AF;
    --lighter-blue: #60A5FA;
    --even-lighter-blue: #BFDBFE;
    --lightest-blue: #DBEAFE;
    --dark-orange: rgba(239, 68, 68, 0.9);
    --light-orange: rgba(245, 158, 11, 0.6);
    --even-lighter-orange: #fcdbb8;
    --green: #34D399;
    --dark-green: #059669;
    
    --bordertest: url(https://www.itl.cat/pngfile/big/137-1371731_tokidoki-wallpaper-wallpapers-browse-tokidoki-wallpaper-iphone.jpg)
}




main {
    border: 8px solid black;
    margin-top: 16px;
    font-family: Trebuchet MS;
    font-size: 85%;
}

main a {
    color: dodgerblue;
}

main a:hover {
color: tomato;    
}

nav .top {
    background: url(https://i.imgur.com/ENZs4HO.jpg);
    border: 4px solid black;
    border-left: 32px solid black;
    border-radius: 24px 24px 0 0;
    border-bottom: none;
}


nav .top .left .logo {
    filter: brightness(0);
}



nav .links {
color: white;
background: linear-gradient(black, dimgrey);
font-family: trebuchet ms;
text-transform: lowercase;
}

nav .links a:hover {
    color: deeppink;
}


nav .links li.active a {
    color: var(--even-lighter-blue);
}

.profile h1 {
    font-family: arial black;
    font-size: 32px;
    text-align: center;
    color: deeppink;
    background: black;
    box-shadow: 4px 4px dimgrey;
    border: none;
    border-radius: 24px 24px 24px 4px;
    padding-bottom: 4px;
}

.general-about {
    background: url(https://cdn.shopify.com/s/files/1/2429/5791/files/Flower_Power_Mobile_Wallpaper_Thumbnail_987ebdd5-7056-45e4-bbe8-d3bec9bc7769.jpg);
    color: black;
    font-family: Arial;
    font-size: 14px;
    font-weight: bolder;
    text-shadow: 1px 1px 4px white;
    box-shadow: 8px 8px black;
    border-radius: 8px 8px 8px 8px;
    padding: 32px;
}

.mood {
    margin-top: 16px;
}

.profile-pic img {
    border: 4px solid black;
    float: left;
    
}

.profile .contact, .profile .table-section, .profile .links, .profile .url-info {
    border: transparent;
}

.profile .contact .heading, .profile .table-section .heading, .profile .links .heading{
    background: black;
    margin-bottom: 4px;
    font-family: arial black;
    text-align: justify;
    border-left: 8px solid var(--lighter-blue);
}

.profile .url-info {
    background: var(--lighter-blue);
    border: 4px double white;
    border-radius: 16px;
    text-align: center;
    font-family: arial;
}

table.details-table {
    background: transparent;
    
}

.details-table td {
    background: transparent;
}

.details-table td:first-child {
    background: transparent;
    color: deeppink;
}



body { 
    background: url(https://cdn.wallpapersafari.com/75/85/gdmAke.jpg);
}

.profile .blurbs .heading, .profile .friends .heading {
    background: black;
    color: white;
    font-family: arial black;
    border-right: 8px solid deeppink;
}

.profile .friends .heading a.more {
    color: white;
}

.profile .friends .person p {
    color: black;
    text-shadow: 1px 1px 8px white;
}

.profile .blurbs .inner, .profile .friends .inner {
    background: url(https://64.media.tumblr.com/22f46c0165b5e0a1a2f9024a544a037b/tumblr_ohdyndckRg1vx777ao1_500.gif) ;
</style>
<style>.profile .blurbs .section h4 {
    color: deeppink;
    font-family: arial black;
    font-size: 18px;
    text-shadow: 0 0 8px white;
}

.count {
 color: dodgerblue;
 font-family: arial black;
 font-size: 12pt;
}</style>
<style>
.comments-table td {
    background: white;
}

.comments-table td p {
    color: deeppink;
}

.comments-table .report a {
    color: deeppink;
}

.comments-table .report a:hover {
    color: dodgerblue;
}

.comments-table td:not(:first-child) {
    border: 2px solid black;
    border-left: 16px solid deeppink;
    border-radius: 16px 16px 16px 0;
}

.comments-table td:first-child {
    background: transparent;
    border: transparent;
    text-shadow: 1px 1px 8px white;
}

.comments-table td:first-child p {
    color: black;
}

</style>

<style>
footer {
    background: black;
    color: white;
    font-family: arial;
    font-size: 16px;
    border: 8px solid white;
}   

footer a {
    color: deeppink;
}

footer a:hover{
    color: dodgerblue;
}
</style>

<style>
table.details-table:not(:first-child){
display: block;
height: 512px!important;
overflow-y: scroll;
}

table.comments-table{

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

}

</style>

<style> 
/*VERONICA IS T3H C4P741N*/

:root {
        
        

        
/*FIRE AT WILL*/
        
    --topic1: "Topic 1";
    --topic2: "Topic 2";
    --topic3: "Topic 3";
    --topic4: "Topic 4";
    --topic5: "Topic 5";
    --topic6: "Topic 6";
    --topic7: "Topic 7";
--topic8: "Topic 8";
--topic9: "Topic 9";
--topic10: "Topic 10";



}

/*HERE BE DRAGONS*/

.table-section:not(:last-child) .details-table td:first-child p {
    margin: 2px;
    overflow-wrap: break-word;
    word-break: break-word;
    content-visibility: hidden;
}

.details-table td:first-child::after {
    content-visibility: visible !important;
    background: white;
    padding: 8px;
    vertical-align: super;
    border: 2px outset gainsboro;
    border-left: 4px solid var(--lighter-blue);
    border-radius: 8px 8px 8px 0;
  

}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child::after{
  content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child::after{
  content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child::after{
  content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child::after{
  content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child::after{
  content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child::after{
  content: var(--topic6);
}
.table-section:not(:last-child) .details-table tr:nth-child(7) td:first-child::after{
  content: var(--topic7);
}
.table-section:not(:last-child) .details-table tr:nth-child(8) td:first-child::after{
  content: var(--topic8);
}
.table-section:not(:last-child) .details-table tr:nth-child(9) td:first-child::after{
  content: var(--topic9);
}
.table-section:not(:last-child) .details-table tr:nth-child(7) td:first-child::after{
  content: var(--topic10);
}
</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 88 comments ( View all | Add Comment )

Xorp	1793987743 VERONICA IS T3H C4P741N Report Comment
emster	1786179048 VERONICA IS T3H C4P741N Report Comment
𝖍𝖆𝖏𝖆𝖗𝖊𝖘𑣲𝄞	1782903643 USING Report Comment
sewphie spliff	1781245155 VERONICA IS T3H C4P741N Report Comment
sarahsloveaffair	1775784102 VERONICA IS T3H C4P741N Report Comment
kitty! ⚢	1771881497 VERONICA IS T3H C4P741N Report Comment
kataclysm	1771671077 VERONICA IS T3H C4P741N Report Comment
Lola<3	1770353102 VERONICA IS T3H C4P741N Report Comment
dusterfangrl	1769410499 VERONICA IS T3H C4P741N Report Comment
Cool_Guy232	1768343331 VERONICA IS T3H C4P741N Report Comment
lyx luxurious	1767557320 VERONICA IS T3H C4P741N Report Comment
isa in$tability ️💎	1766279445 VERONICA IS T3H C4P741N Report Comment
.•♫•♬• xᴏxᴏ •♬•♫•.	1765620137 VERONICA IS T3H C4P741N Report Comment
fentanilo	1765447567 VERONICA IS T3H C4P741N Report Comment
Kl300	1764471926 VERONICA IS T3H C4P741N Report Comment
habobo	1762578119 VERONICA IS T3H C4P741N c: Report Comment
xXTiKa KaNdYLaNdXx	1760736028 VERONICA IS T3H C4P741N Report Comment
nat Parca	1760648792 VERONICA IS T3H C4P741N Report Comment
xXCherryAnarchyXx	1759970083 VERONICA IS T3H C4P741N Report Comment
Yauuiu	1759765514 VERONICA IS T3H C4P741N Report Comment