K-On Layout!!

Tags: anime, simple, red, white, guitar, kon, k-on, gif, cute

Description:

I made a layout for one of my favorite animes! Feel free to add/change anything. Please credit me and comment if you're using. Have fun! Let me know if there are any issues or you need help. *fixed the gif at the bottom*

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Montserrat:wght@600&display=swap');
p, .profile .blurbs .section h4{
font-family: 'Montserrat', sans-serif;
color: black!important;
text-shadow:none;
}
body{
background: url(https://oveldashome.files.wordpress.com/2020/02/k-on-s2-ep17-4.png?w=1024) no-repeat;
background-size: cover;
}
.top{
background: url(https://i.pinimg.com/originals/32/24/fe/3224fe5e7cd4e8f2bcec206d43d99695.gif) no-repeat!important;
fixed;
background-position: 25% 30%!important;
background-size: cover!important;
height: 175px;
}
.links, .blurbs .heading, .friends .heading, .contact .heading, .table-section .heading{
background: #850808!important;
color: white!important;
}
.links{
border-radius: 0px 0px 15px 15px ;
border:none;
margin-bottom: 10px!important;
}
h1{
color: #850808!important;
font-family: 'Abril Fatface', cursive;
letter-spacing: 1px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black!important;
font-size: 50px!important;
margin-left: 15px!important;
}
button{
background: #850808!important;
border-style: outset;
border-color: #4d0303;
}
.links a, button, a, .blurbs .heading, .friends .heading, .contact .heading, .table-section .heading{
color: white;
font-family: 'Abril Fatface', cursive;
letter-spacing: 1px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black!important;
}
.links a{
font-size: 11.55px!important;
}
a:hover, .links a:hover{
  color: #fabf3e!important;
}
input#q{
border-style: outset;
border-color: #4d0303;
}
label{
text-shadow: -1px 0 #850808, 0 1px #850808, 1px 0 #850808, 0 -1px #850808;
}
.blurbs:before {
border-radius: 15px 15px 0px 0px!important;
background-color: transparent;
width: 100%;
height: 100px;
display: block;
content: "";
background-image: url('https://i.pinimg.com/originals/b0/1d/5e/b01d5e8ecac55293723540b82c05cde9.gif');
background-position: center center;
background-size: cover;
}
@media only screen and (max-width: 600px) {
main:before{
height: 200px;
}
}

main:after{
border-radius: 15px!important;
background-color: transparent;
width: 35%;
height: 100px;
display: block;
content: "";
background-image: url('https://i.pinimg.com/originals/d8/d1/89/d8d1897197263b7a33f5824e52813dd2.gif');
background-position: center center;
background-size: cover;
margin-top: 10px;
margin-bottom: 20px;
margin-left: 23px;
border-radius: 15px 15px 0px 0px solid white!important;
}
@media only screen and (max-width: 600px) {
main:before{
height: 200px;
}
}
.general-about img {
        -webkit-mask-image: url(https://i.postimg.cc/8CB1CTyG/heart.png);
        -webkit-mask-size: 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
    }
img.pfp-fallback {
        -webkit-mask-image: url(https://i.postimg.cc/8CB1CTyG/heart.png);
        -webkit-mask-size: 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
    }
span.count, .url-info b, .mood p{
color: #fabf3e!important;
font-family: 'Abril Fatface', cursive;
letter-spacing: 1px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black!important;
}
.table-section td{
background: white!important;
color: black!important;
}
main{
background: rgba(255, 255, 255, .45);
border: none;
border-radius: 15px;
}
.blurbs, .friends, .table-section, .contact, .profile-info{
background: white!important;
border-radius: 0px 0px 15px 15px;
border: none!important;
margin-bottom: 15px;
}
.blurbs, .profile-info{
border-radius: 15px!important;
}
.url-info{
background: white!important;
border-radius: 15px;
border: none!important;
margin-bottom: 5px;
}
.comments-table td{
background: white!important;
}
footer{
background: white!important;
border-radius: 15px;
border: none!important;
}

p.padding {
padding-bottom: 0cm;
}
</style>

<style>* {cursor: url(https://cur.cursors-4u.net/mechanics/mec-1/mec98.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2005/10/01/mec98.html" target="_blank" title="Guitar"><img src="https://cur.cursors-4u.net/cursor.png" alt="Guitar" 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.

Comments

Displaying 20 of 33 comments ( View all | Add Comment )

gl00my b34r!	1713403283 USINGGGG !!! Report Comment
sonico🍙	1711414044 using:3 Report Comment
niccoritheme	1710694339 using!!! Report Comment
Ana	1709685691 using!! Report Comment
superpacninja	1705506070 Using Report Comment
taxidermyboy	1704041880 using!! Report Comment
Len🥐	1703670755 Using!!!:D Report Comment
Azusa Nakano	1702069798 Using! cutest layout :) Report Comment
yuri	1701488629 usingg Report Comment
ChiefNiwa	1700061687 Using :)! Report Comment
cat :3	1697569076 using :3 Report Comment
zombii	1696042564 using !! ^_^ Report Comment
sophia	1692800664 using !! Report Comment
Lyka !	1692517285 Using!, Report Comment
Miro(h)	1690280972 Ahhh so kutee def usin 🫶🏽🫶🏽 Report Comment
megan ₊‧°𐐪♡𐑂°‧₊	1689649581 so cute!! using Report Comment
Liliy 💙	1688326607 using!🩷 Report Comment
cupid	1688289166 using 🫶🏿 Report Comment