hatsune miku layout for blogs and bulletins! :D

A cute Miku-based layout that works for blogs and bulletins! :D

Paste it on your HTML section and all done! ;)

You can change the blinkie below the title to put whatever you want! Just look at the cyan text :D

Code:

<style> :root{--voca-blinkie: url(""); /* Blinkie goes inside the parenthesis | Use a image URL */} body{background: url(https://media.moddb.com/images/downloads/1/44/43869/43.jpg); background-size: cover;} main{background: rgba(0, 0, 0, 0.66); color: #fff; border: double 5px #1de; border-radius: 8px; text-shadow: 0px 0px 3px #000;} nav .links{background: #0000; margin: 12px 0px; padding: 0px; text-align: center;} nav .top{margin-top: 8px; background: rgba(0, 0, 0, 0.66); color: #fff; border: double 5px #1de; border-radius: 32px;} .logo-fallback {filter: drop-shadow(1px 1px 0px #1de) drop-shadow(1px 0px 0px #1de) drop-shadow(0px 1px 0px #1de) drop-shadow(-1px 0px 0px #1de) drop-shadow(1px -1px 0px #1de) drop-shadow(-1px 1px 0px #1de);} .logo{content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Hatsune_miku_logo_v3.png/1200px-Hatsune_miku_logo_v3.png);} .title{border-bottom: #2cd} .edit-info{background: url(https://images3.alphacoders.com/949/949257.jpg); background-size: cover; margin-top: 15px;} .container{width: 930px;} @media (min-width: 30em){.col.w-20 {width: 28%;}} .col.w-20.left::after{content: ""; display: block; background-image: url(https://piapro.net/intl/images/ch_img_miku.png); width: 201px; height: 300px; background-position: left; background-size: cover; background-repeat: no-repeat; margin-top: 32px; filter: drop-shadow(1px 1px 0px #000) drop-shadow(1px -1px 0px #000) drop-shadow(-1px 1px 0px #000) drop-shadow(-1px 0px 0px #000) drop-shadow(1px -1px 0px #000) drop-shadow(-1px 1px 0px #000) drop-shadow(-1px -1px 0px #000);} .title::after{content: ""; display: block; background-image: var(--voca-blinkie); width: 150px; height: 20px; background-position: left; background-size: cover; background-repeat: no-repeat; margin-top: 8px;} .edit-info p, .edit-info h4{background: rgba(0, 0, 0, 0.33); border: solid 1px rgba(0, 0, 0, 0.25); border-radius: 3px; padding: 4px; text-shadow: 0px 0px 3px #000, 0px 0px 1px #000, 0px 0px 1px #000;} p.links a:first-child .icon {content: url(https://i.ibb.co/rdj7M4Q/mikumiku.png);} p.links a:nth-child(2) .icon {content: url(https://i.ibb.co/5MnZbrC/sakumiku.png);} p.links a:last-child .icon {content: url(https://i.ibb.co/BB2zVxm/zatsmiku.png);} footer{background: rgba(0, 0, 0, 0.66); color: #fff; border: double 5px #1de; border-radius: 8px;} a{color: #2cd;} html:before{animation: grain 6s steps(10) infinite; background-image: url(https://i.pinimg.com/originals/a3/50/87/a3508797091683ab55e1d0534c6ba97a.gif); background-size: cover; content: ""; height: 220%; left: -50%; opacity:.11; position: fixed; top: -110%; width: 300%; pointer-events:none; } @keyframes grain 70%{ transform:translate(0%, 15%) } a:hover{color: #d06;} nav .top .right{margin-right: 6px;} button{background: linear-gradient(0deg, #0bc 4%, #2ef 108%); color: #f47; text-shadow: 1px 0px 0px #aaddff, 1px 1px 0px #aaddff, 0px 1px 0px #aaddff, -1px 0px 0px #aaddff, -1px -1px 0px #aaddff, 0px -1px 0px #aaddff; padding: 4px 2px; border: solid 2px #2255aa; border-radius: 5px; font-weight: bold;} #q{background: linear-gradient(180deg, #cfdfff 0%, #e7f0ff 18%, #cfdfff 36%, #fdfcff 108%);border: double 3px #0ab; border-radius: 3px;} label{font-style: oblique; text-shadow: 0px 0px 4px #1cd, 0px 0px 1px #0ef; margin-right: 2px;} nav .top b{color: #056;} nav .links a{text-shadow: 0px 0px 1px #1cd, 0px 0px 5px #089, 0px 0px 5px #089; background: rgba(0, 0, 0, 0.50); padding: 2px 4px; border: solid 2px rgba(0, 0, 0, 0.66); border-radius: 4px; margin-right: 4px;} nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{content: "";} .comments-table td:first-child{background: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/783f6e24-9d6b-4f22-9ffc-cfbb720f7293/d2dqhv9-81e72bef-0c1b-474d-881f-34f61000ba7d.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzc4M2Y2ZTI0LTlkNmItNGYyMi05ZmZjLWNmYmI3MjBmNzI5M1wvZDJkcWh2OS04MWU3MmJlZi0wYzFiLTQ3NGQtODgxZi0zNGY2MTAwMGJhN2QuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.dKqgBZDQCvYlwbInYlm1NJHtLgdf9x20Z-1VoHksE2E); border: ridge 2px #2cd; background-size: cover;} .comments-table td{background: url(https://media.gettyimages.com/id/1358440707/es/v%C3%ADdeo/fondo-abstracto-futurista-digital-de-las-finanzas-descentralizadas-y-el-concepto-de-blockchain.jpg?s=640x640&k=20&c=GSIQGZ3qyJdvgWU_IJGNLP324bcZGBQ5_k_cJbfAX60=); border: ridge 2px #2cd;} comments-table td:first-child p{text-shadow: 0px 0px 1px #1cd, 0px 0px 5px #089, 0px 0px 5px #089; background: rgba(0, 0, 0, 0.50); padding: 2px 4px; border: solid 2px rgba(0, 0, 0, 0.66); border-radius: 4px; margin-right: 4px;} img.pfp-fallback{border: double 4px #1cd; box-shadow: 0px 0px 4px inset #2ff, 0px 0px 4px #078; background: rgba(0, 0, 0, 0.5);} nav .links .icon{ content: url(https://external-media.spacehey.net/media/sBnVm9twdjgDuHfEpEt8_IaH5p2MIkOpqexvIcGosUTI=/https://i.ibb.co/rdj7M4Q/mikumiku.png);}</style><div style="float:  ; max-height: 90px; position: fixed; left: 5px; top: 8px;" bis_skin_checked="1"><img src="https://media.tenor.com/5E950S7t-TkAAAAi/hatsune-miku.gif" width="220" height="220"></div>