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

Eliiwz	1746920226 usando ! Report Comment
chiitherawflour0	1746552667 using ! Report Comment
Gilmix ☘	1742623076 using :P Report Comment
drea (>ᴗ•) !	1740951965 using ! Report Comment
Jeauto!	1738957845 using Report Comment
Elk	1736218204 using!! Report Comment
Ｄｏｒｉ　(ドリ)	1731005805 using! Report Comment
Linden	1730775677 Using Report Comment
Суддя (The Judge)	1730696925 using Report Comment
slvmberxxyz	1726230090 using Report Comment
KYOO !!	1723811757 usando!! Report Comment
Eringo ❀	1723065284 using Report Comment
Yuito	1722879828 using Report Comment
Cherry	1721721973 Using Report Comment
Lomandocom	1719183863 usinggg Report Comment
Strawberry	1718403852 using Report Comment
gl00my b34r!	1713403283 USINGGGG !!! Report Comment
sonico🍙	1711414044 using:3 Report Comment
niccoritheme	1710694339 using!!! Report Comment
Ana	1709685691 using!! Report Comment