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

eve	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
SOL/KAR	1698001060 VERONICA IS T3H C4P741N Report Comment
xXZ0mbeh_GurllXx	1688649054 Uzing!! Report Comment
melee kill 0-0	1684434399 VERONICA IS T3H C4P741N Report Comment
Izzy	1679428835 VERONICA IS T3H C4P741N Report Comment
Maxi	1676589435 VERONICA IS T3H C4P741N Report Comment
coolkidcody	1675372579 VERONICA IS T3H C4P741N Report Comment
✩ sam ✩	1667486150 VERONICA IS T3H C4P741N Report Comment
vin51z	1661999018 VERONICA IS T3H C4P741N Report Comment
purty pony	1659638813 VERONICA IS T3H C4P741N Report Comment
purty pony	1659638556 VERONICA IS T3H C4P741N Report Comment
mallard	1654710076 VERONICA IS T3H C4P741N Report Comment
Kai <3	1653836045 VERONICA IS T3H C4P741N Report Comment
Waffle	1653170110 VERONICA IS T3H C4P741N Report Comment
necopunk	1649984810 VERONICA IS T3H C4P741N Report Comment
jai ʚ(╹ᴗ╹)ɞ 🫧	1649866347 VERONICA IS T3H C4P741N Report Comment