Hetalia Japan/Kiku layout

Tags: hetalia, pink, layout, japan

Description:

Hi, hi!! Here's another layout!! A Japan themed one, I'll probably do the other main characters of Hetalia but I'll also do side characters or other hetalia themed stuff!!! (I'd love making something Nyotalia or Nekotalia related), anyways, feel free to use as a base or as inspo and change if wanted, credit not needed ^o^ P.S. The final product looks different than from the picture shown, I just wanted to make a showcase where you could see everything!

Preview:

Code:

<!-- (c) Layout created by GioGio (https://layouts.spacehey.com/layout?id=30611) --> <style> @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap'); p{ font-family: 'DM Serif Display', cursive; color: ; font-size: 115% </style> <style> @import url('https://fonts.googleapis.com/css2?family=Spirax&display=swap'); h1,h2,h3,h4,h5{ font-family: 'Spirax', cursive; font-size: 150% </style> <style> .logo { content:url("https://media.discordapp.net/attachments/888819682826657814/1105485002092855377/Titelloses_528_20230509152223.png?width=1007&height=257") } body:before { content: " "; height: 100vh; width: 100vw; display: block; position: fixed; top: 0; left: 0; z-index: 100; background-image: url('https://64.media.tumblr.com/3ad3ecfc1e909a33b596fa9af558d76d/3e78639a5106eab8-ef/s400x600/c89deb1de61148e6aff6868f6adab3591d9935bd.gifv'); background-size: cover; background-repeat: no-repeat; animation: yourAnimation 3s ease 0s 1 normal forwards; pointer-events: none; } @keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } :root{ --logo-blue: url(https://64.media.tumblr.com/1783e5b7a2f27cc1723b39fc24e23b79/tumblr_osaerxm7Q61ukucuyo2_100.gifv); --darker-blue: #F9A3F3; --lighter-blue: none; --even-lighter-blue: white; --lightest-blue: none; --dark-orange: black; --light-orange: #FACFF7; --even-lighter-orange: none; --green: pink; } body { background-color: none; background-image: url(https://i.imgur.com/CHj8YL5.jpeg); } main:before { background-image: url('https://64.media.tumblr.com/cbc79b075c80a886a1b9bdc371759b01/9fbf08bc09117180-c0/s400x600/8cc7247ab0a841fafb267e3b7685dd60b78d690b.gifv'); background-position: center center; background-size: cover; display: block; content: ""; width: 100%; height: 200px; } .profile-pic { border-radius: 25px; overflow: hidden; } .profile .friends .person img { border-radius: 25px; } .online{content:url("https://64.media.tumblr.com/eddc704b118101aa2058eac05e770ed3/c681c448cd72c07c-9d/s250x400/9473ddf6cac3861cd136708fb480e6cb0a033fbb.gifv"); } main { background: rgb(255, 255, 255, 0.4); border: 4px dotted rgba(241, 190, 255) } footer{ background: url(https://i.pinimg.com/236x/d8/1b/d9/d81bd96ef346aa1f0c4b71f67a2abcbb.jpg); } .contact .inner a img { font-size: 0; } .contact .inner a img:before { font-size: 1em; display: block } .contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before { content: "🗾" } .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before { content: "🗻" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before { content: "🎎" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before { content: "💴" } .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before { content: "🎑" } .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before { content: "👹" } .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before { content: "🗼" } .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before { content: "♨️" } nav::before { content: ""; background: url(https://static.wikia.nocookie.net/hetalia/images/f/fc/Japan.png/revision/latest/scale-to-width-down/150?cb=20200819001623); background-size: 170px; position: fixed; float: right; display: inline; bottom: 0; right: 5px; height: 490px; width: 175px; margin-bottom: 10px; margin-right: 5px; } .col, main, footer{ animation: float 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes float { 0% { transform: translate(0, 0px); } 50% { transform: translate(0, 8px); } 100% { transform: translate(0, -0px); } </style> <style>* {cursor: url(https://cur.cursors-4u.net/nature/nat-10/nat993.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/12/29/heart-chat-bubble.html" target="_blank" title="Heart Chat Bubble"><img src="https://cur.cursors-4u.net/cursor.png" alt="Heart Chat Bubble" style="position:absolute; top: 0px; right: 0px;"/></a>

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.