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

Ｄｏｒｉ　(ドリ)	1731005805 using! Report Comment
Linden	1730775677 Using Report Comment
yuoim ♡	1730697503 Using Report Comment
Суддя (The Judge)	1730696925 using Report Comment
mairoach	1726230090 using Report Comment
alliw ! 👾🇧🇷	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
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