Vocaloid (Hatsune Miku)

Tags: miku, vocaloid, teal, blue, cyan, hatsune miku, hatsune, 2000s, anime, music

Description:

A Miku-themed profile layout I made for fun. Please do not remove the watermark if you use it and please do not steal this and claim it as your own. Please comment before using.

Preview:

click on the image for a larger preview

Code:

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

<style>
:root {
    --teal: #005852;
    --bright-teal: #00ffee;
}

body {
    font-family: arial, sans-serif;
    font-size: 11pt;
    background: url(https://external-media.spacehey.net/media/sM3JlpJWcVYk6IjR50I-ql5luIuG_OhLvuEAQngnZ9M0=/https://taiketsu.neocities.org/storage/hatsunemikumix.jpg) center top no-repeat #000;
    margin-top: 15px;
}
.profile-info {
    border: 4px var(--teal) double;
    padding: 0px;
}
p {
    color: var(--bright-teal);
}
h1 {
    color: var(--bright-teal);
    padding: 0px;
}
a {
    color: var(--bright-teal);    
}
main {
    background: none;
    padding: 0px;
    width: 956px;
    left: -73px;
    position: relative;

}
.mood b {
    text-transform: lowercase;
}
h4 {
    color: var(--bright-teal) !important;  
    text-transform: lowercase;
}
h3 {
    color: var(--bright-teal);  
    text-transform: lowercase;
}
h2 {
    color: var(--bright-teal);  
    text-transform: lowercase;
}
nav .top {
    background: none;    
    width: 956px;
    left: -73px;
    position: relative;
}
nav .links {
    background: none;
}
nav .links a {
    text-shadow: none;
    color: var(--bright-teal); 
}
nav .links a:hover {
    color: var(--bright-teal); 
}
nav .links li:after {
    display: none;
}
nav .links a {
    border: 1px var(--teal) solid;
    background: linear-gradient(var(--teal), transparent);
    padding: 2px 14px;
}
nav .links a:hover {
    border: 1px var(--bright-teal) solid;
    background: linear-gradient(var(--bright-teal), transparent);
    text-shadow: 0px 0px 1px var(--teal) !important;
    text-decoration: none;
}
nav .links {
    text-transform: lowercase;
    display: flex;
    justify-content: center;
    gap: 3px;
    padding: 0px;
}
nav .links .icon {
    display: none;
}
.profile .contact .heading {
    background: linear-gradient(var(--teal), transparent);
    color: var(--bright-teal);
}
.profile .contact {
    border: 1px var(--teal) solid;
    text-transform: lowercase;
}
.profile .contact a {
    font-size: 9pt;
}
.profile .url-info {
    border: 1px var(--teal) solid;
}
.profile .table-section {
    text-transform: lowercase;
    border: 1px var(--teal) solid;
}
.profile .table-section .heading {
    background: linear-gradient(var(--teal), transparent);
    color: var(--bright-teal);
}
.details-table td {
    background: linear-gradient(var(--teal), transparent) !important;  
    border: 1px var(--teal) solid;
}
.profile .blurbs .heading {
    background: linear-gradient(var(--teal), transparent);
    border: 1px var(--teal) solid;
}
.profile .friends .heading {
    background: linear-gradient(var(--teal), transparent); 
    border: 1px var(--teal) solid;
}
.inner > p b {
    text-transform: lowercase;
}
.comments-table a p {
    text-transform: lowercase;    
}
.report a {
    text-transform: lowercase;
}
small {
    text-transform: lowercase;
}
.comments-table {
    background: none;
    border: 0px;
}
.comments-table td {
    background: linear-gradient(var(--teal), transparent 20%) !important; 
}
.comment-replies {
    border: 0px;
}
.profile .friends .person p {
    text-transform: lowercase;
    color: var(--bright-teal);
}
label {
    text-transform: lowercase;
    color: var(--bright-teal);
}
.top .right {
    text-transform: lowercase;
    color: var(--bright-teal);    
}
.logout-btn {
    text-transform: lowercase;
    color: var(--bright-teal);      
}
button {
    border: 1px var(--teal) solid;
    background: linear-gradient(var(--teal), transparent);
    color: var(--bright-teal);
    padding: 2px 10px;    
}
button:hover {
    border: 1px var(--bright-teal) solid;
    background: linear-gradient(var(--bright-teal), transparent);
    text-shadow: 0px 0px 1px var(--teal) !important;
    text-decoration: none;
    cursor: pointer;
}
nav .top .center .search-wrapper input {
    background: linear-gradient(var(--teal), transparent);
    color: var(--bright-teal);    
    border: 1px var(--teal) solid;
    padding: 2px;
}
footer {
    background: none;
    text-transform: lowercase;
}
</style>
<div class="watermark">
<a href="https://spacehey.com/orihime"><img src="https://taiketsu.neocities.org/storage/mikuwatermark.png"/></a>
</div>

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

JR5 <3	1700672304 using :3 Report Comment
Rawrzzies	1700471328 Using :3 Report Comment
PataAssada	1700328371 using!! Report Comment
Hil	1699686728 Using :D! Report Comment
multifandomsofi	1699318700 using! Report Comment
zar !! xD	1698555787 using ^^ Report Comment
Peyton!! ;3	1696801458 using!! thx! :3 Report Comment
Steve !	1694011342 USING Report Comment
Steve !	1694011336 USING Report Comment
mar ^,,^	1693940313 using!! so cute :3 Report Comment
chaseッ☆	1693770758 using Report Comment
kyle	1693004902 using Report Comment
Remoko	1691590886 trying it out! Report Comment
patzels other account	1691513826 uzing! Report Comment
leah	1689234714 using! Report Comment
yukii	1689117602 using Report Comment
*ੈ✩‧₊˚ mar	1688967857 using!! Report Comment
Spokk_yu	1688857849 Usandooo gracias Report Comment
nindroid99_ kun	1688234047 gonna use this :] Report Comment