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

Pizza .ᐟ	1746273080 VERONICA IS T3H C4P741N Report Comment
blake	1741819405 VERONICA IS T3H C4P741N XD Report Comment
EmilyEclipxe	1740717929 VERONICA IS T3H C4P741N Report Comment
salvation	1738896904 VERONICA IS T3H C4P741N Report Comment
Liya!!!	1738111960 VERONICA IS T3H C4P741N Report Comment
Deadly Nightshade	1737685104 VERONICA IS T3H C4P741N Report Comment
✮Bibiana	1737684608 VERONICA IS T3H C4P741N Report Comment
nelly ✮	1736226615 VERONICA IS T3H C4P741N Report Comment
eva	1735862474 VERONICA IS T3H C4P741N Report Comment
zueduvet	1729220894 VERONICA IS T3H C4P741N Report Comment
viktorliverson	1728991847 VERONICA IS T3H C4P741N Report Comment
renestar	1727060667 VERONICA IS TH3 C4PT41N Report Comment
jamsome	1726536254 VERONICA IS T3H C4P741N :3 Report Comment
jamsome	1726536253 VERONICA IS T3H C4P741N :3 Report Comment
numbnuts	1719021944 VERONICA IS T3H C4P741N!!!!!! :PPP Report Comment
lilly🧟‍♀️	1716265378 VERONICA IS T3H C4P741N Report Comment
kittie krunk	1712767276 VERONICA IS T3H C4P741N!!! Report Comment
rio_monik	1711848827 VERONICA IS T3H C4P741N Report Comment
✩°｡⋆⸜ · . ˚ · *୨୧	1711175630 VERONICA IS T3H C4P741N XP Report Comment
xoxovettalina	1706901506 sup robot Report Comment