Report Blog Entry
i made an older anime inspired layout,, i tried to take some of the aesthetics that i see on anime forums and stuff, (and added a lot of k-on because i love k-on) and this is what i came up with!! everything is customizable, and i made it to be a base so you can add whatever else you want (blinkies, stamps, etc.) to make it yours!
please comment if you use it i would be so happy :3
layout includes:
autoplay song (carmelldansen)
custom banner
custom footer
custom friends list
custom colors
custom spacehey logo
a little guy under your url
&& custom interact icons!!!
i tried to make it easy to see where each thing is in case you want to change things or use this as a base :)
i'm sad i can't do this the old fashioned way, so the code is just going to be the entire post :(
my code is really ugly and messy too,, i try to have a cohesive layout but it always gets messed up lol
aaanyways, enjoy!!
code starts here!!
<style>
/* basic coloring stuff */
body {
background-image: url('https://i.pinimg.com/1200x/64/b2/08/64b2089ed6163a1aca3cb194f7abd33e.jpg') !important;
background-repeat: REPEAT !important;
main:before {
background-image: url('https://i.pinimg.com/originals/e3/42/22/e3422263b06f2c67f27e442fd27ce4a1.gif');
background-position: center center;
background-size: cover;
display: block;
content: "";
width: 100%;
height: 200px;
}
nav .top, nav .links {
background-color:rgb(255, 169, 212);
}
.profile .contact .heading, .profile .table-section .heading, .profile .friends .heading, .profile .blurbs .heading {
background-color: rgb(255, 169, 212);
}
.table-section .inner td:first-child, .comments-table td:first-child {
background-color: rgb(255, 169, 212);
color: white;
}
.table-section .inner td, .comments-table td {
border-style: solid;
border-width: 1px;
border-color: rgb(255, 169, 212);
background-color: rgb(255, 205, 230);
}
.profile .contact, .profile .table-section, .profile .url-info {
border: 1px solid ;
border-color: rgb(250, 216, 255);
}
.profile .url-info {
background-color: white;
}
.count, .profile .blurbs .section h4, a, .profile .friends .person p {
color: rgb(224, 191, 255) ;
}
a:hover {
text-transform: underline;
color: rgb(200, 140, 255);
}
.profile .contact .inner, .url-info, .blog-preview, .blurbs .inner, .friends .inner, #comments, .table-section .inner, .profile .general-about .details, .profile .mood {
background-color: white;
}
footer {
background-image: url('https://i.pinimg.com/originals/a9/47/8f/a9478ffe745cddfedf4567d4f7257421.gif');
background-position: center center;
background-size: cover;
display: block;
content: "";
width: 100%;
height: 200px;
}
h4 {
color: white;
}
}
</style>
<style>
/* loading screen */
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-image: url('https://i.pinimg.com/originals/ff/02/be/ff02beacd85053f1bab18efac1db055c.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 1s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
</style>
<style>
/* online indicator */
.online {
content: url('https://i3.glitter-graphics.org/pub/115/115393wnio1b4fjb.gif');
size 50
}
</style>
<style>
/* contact icons */
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner a:before {
content: ""
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
display: inline-block;
background: url("https://file.garden/Ze88s1ucmRDZDhMX/pixels/608.gif")no-repeat 0 0;
background-size: 100%;
width: 16px;
height: 16px;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
display: inline-block;
background: url("https://file.garden/Ze88s1ucmRDZDhMX/pixels/608.gif")no-repeat 0 0;
background-size: 100%;
width: 16px;
height: 16px;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
display: inline-block;
background: url("https://file.garden/Ze88s1ucmRDZDhMX/pixels/608.gif")no-repeat 0 0;
background-size: 100%;
width: 16px;
height: 16px;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
display: inline-block;
background: url("https://file.garden/Ze88s1ucmRDZDhMX/pixels/608.gif")no-repeat 0 0;
background-size: 100%;
width: 16px;
height: 16px;
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
display: inline-block;
background: url("https://file.garden/Ze88s1ucmRDZDhMX/pixels/608.gif")no-repeat 0 0;
background-size: 100%;
width: 16px;
height: 16px;
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
display: inline-block;
background: url("https://file.garden/Ze88s1ucmRDZDhMX/pixels/608.gif")no-repeat 0 0;
background-size: 100%;
width: 16px;
height: 16px;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
display: inline-block;
background: url("https://file.garden/Ze88s1ucmRDZDhMX/pixels/608.gif")no-repeat 0 0;
background-size: 100%;
width: 16px;
height: 16px;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
display: inline-block;
background: url("https://file.garden/Ze88s1ucmRDZDhMX/pixels/608.gif")no-repeat 0 0;
background-size: 100%;
width: 16px;
height: 16px;
}
</style>
<style>
/*little guy under url*/
.profile .url-info
p:last-child:after
{content: "";
display: block;
background-image: url('https://i5.glitter-graphics.org/pub/1016/1016355tbqlv8b8w8.gif'); width: auto;
height: 150px;
background-position: top center;
background-size: 50%;
background-repeat: no-repeat;
}
.profile .url-info
p {text-align: center;
}
</style>
<style>
/* 4chan logo */
.logo {
content: url(https://upload.wikimedia.org/wikipedia/commons/2/2f/4chan_logo.svg);
}
</style>
<style>
/* friends list */
div.friends-grid {
text-align: center;
}
.profile .friends .person p{
display: none;
}
.profile .friends .person:nth-child(1)::before{
content:"Yui";
}
.profile .friends .person:first-child img:not(.icon){
content:url(https://i.pinimg.com/736x/b6/a0/88/b6a08829cd65efc4230523ef95ff4ce4.jpg);
}
.profile .friends .person:nth-child(2)::before{
content:"Mio";
}
.profile .friends .person:nth-child(2) img:not(.icon){
content:url(https://i.pinimg.com/736x/7d/95/ed/7d95ed8a48206cfe5920a65f15c4e1f3.jpg);
}
.profile .friends .person:nth-child(3)::before{
content:"Ritsu";
}
.profile .friends .person:nth-child(3) img:not(.icon){
content:url(https://i.pinimg.com/736x/12/bd/5b/12bd5b17c5c597bc776d6ee8af8ce4c7.jpg);
}
.profile .friends .person:nth-child(4)::before{
content:"Mugi";
}
.profile .friends .person:nth-child(4) img:not(.icon){
content:url(https://i.pinimg.com/736x/57/2b/a9/572ba905757388135e951fb979bfc869.jpg);
}
.profile .friends .person:nth-child(5)::before{
content:"Konata";
}
.profile .friends .person:nth-child(5) img:not(.icon){
content:url(https://i.pinimg.com/736x/c1/31/e9/c131e94542623e27d6ca7c64bf4ecc60.jpg);
}
.profile .friends .person:nth-child(6)::before{
content:"Tomoko";
}
.profile .friends .person:nth-child(6) img:not(.icon){
content:url(https://i.pinimg.com/736x/51/35/31/51353142452e9f4c9313e4e7d1e7d16f.jpg);
}
.profile .friends .person:nth-child(7)::before{
content:"Dokuro-Chan";
}
.profile .friends .person:nth-child(7) img:not(.icon){
content:url(https://i.pinimg.com/736x/3d/7b/f9/3d7bf9533863ed53de2c621da48a4faa.jpg);
}
.profile .friends .person:nth-child(8)::before{
content:"Saya";
}
.profile .friends .person:nth-child(8) img:not(.icon){
content:url(https://i.pinimg.com/736x/47/e2/28/47e2287b5caa44d2bec3f2c89e2cb26a.jpg);
}
</style>
<iframe width="0" height="0" src="https://www.youtube.com/embed/A67ZkAd1wmI?controls=0//?&; amp; ;autoplay=1&; loop=1&; controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>
Comments
Displaying 1 of 1 comments ( View all | Add Comment )
cuppycake431
I'M GONNA USE DIS
What do the kudos do?
by cuppycake431; ; Report
yayy!!! also the kudos are sorta like likes :))
by grenade girl; ; Report