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

Kl300	1764471926 VERONICA IS T3H C4P741N Report Comment
habobo	1762578119 VERONICA IS T3H C4P741N c: Report Comment
xXTiCa CaNdYLaNdXx	1760736028 VERONICA IS T3H C4P741N Report Comment
nikola Parca	1760648792 VERONICA IS T3H C4P741N Report Comment
xXCherryAnarchyXx	1759970083 VERONICA IS T3H C4P741N Report Comment
Yauuiu	1759765514 VERONICA IS T3H C4P741N Report Comment
[🗽] ʘ̥ꀾʘ̥ 〆 ╬ ✺ꀘꏂ꒐꒒ꃳ☆ꐞꐇꉣꉣ ⟨ᄑ_ᄑ⟩︻デ═一 ≠ ( ´ཀ`)♬	1759663777 VERONICA IS T3H C4P741N Report Comment
manonbias	1757318726 VERONICA IS T3H C4P741N :3 Report Comment
esoteric	1756525368 VERONICA IS T3H C4P741N Report Comment
mimzi ˃ 𖥦 ˂	1755677612 VERONICA IS T3H C4P741N Report Comment
gina >_<	1754930915 VERONICA IS T3H C4P741N ^__^ Report Comment
gina >_<	1754930915 VERONICA IS T3H C4P741N ^__^ Report Comment
Xx_TrIxIe ObNoXiOuS_Xx	1752272849 VERONICA IS T3H C4P741N ^__^ Report Comment
senoj.omi	1752164141 VERONICA IS T3H C4P741N Report Comment
Orange.girrrllll...❀	1751842854 VERONICA IS T3H C4P741N Report Comment
xxSMELLYLAGOMORPHxx	1751438947 VERONICA IS T3H C4P741N!!!! Report Comment
Katelyn >.<	1751262128 VERONICA IS T3H C4P741N :D arigatooo Report Comment
Digitalpxe	1751074307 VERONICA IS T3H C4P741N :3 Report Comment
REN O__o	1749401825 VERONICA IS T3H C4P741N Report Comment
skullzxo	1748764635 VERONICA IS T3H C4P741N Report Comment