Angelcore layout

Tags: angelcore, simple
Description:

Comes with: Custom contact icons, Custom icons on header, Custom logo, Custom font, Desaturate friends pfp when you hover over them, Custom pfp (Note it doesn't change your pfp only when someone visits your profile)
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by Katie (autoplay!) 🍉 (https://layouts.spacehey.com/layout?id=89970) -->

<style>
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url(https://64.media.tumblr.com/49ad59936918264826aeef9507cd0249/b4348ff110f5c4af-88/s1280x1920/c4f1fee90977fab0ae8daea4278191a57bcf085a.pnj);
display: inline-block; content:"" }
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 150px; }
</style>

<style>
  
@font-face {
    font-family: "Evangelic";
    src: url("https://db.onlinewebfonts.com/t/232089c76782d6fa58fc4f321e35be8a.eot");
    src: url("https://db.onlinewebfonts.com/t/232089c76782d6fa58fc4f321e35be8a.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/232089c76782d6fa58fc4f321e35be8a.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/232089c76782d6fa58fc4f321e35be8a.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/232089c76782d6fa58fc4f321e35be8a.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/232089c76782d6fa58fc4f321e35be8a.svg#Evangelic")format("svg");
}
  
h1, h2, h3, h4, h5, p, body, .mood p,.top, .top a, a, .friends, .table-section td, .links, .logout-btn{

font-family: 'Evangelic';
</style>

<style>
.logo {

content:url("https://files.catbox.moe/r9x64f.png");

}  

main:before {
width: 100%;
height: 300px;
display: block;
content: "";
background-image: url('https://i.pinimg.com/564x/92/4c/53/924c5391f06d96c8b92817c3ef423583.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
@media only screen and (max-width: 600px) {
main:before{
height: 600px;
}
}


body{
  background: url(https://i.pinimg.com/564x/51/2e/9b/512e9b8026c0066dfb51dbff432819b8.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
  
.heading h4{
color: white;
}

main{
  background: white;
  color: black;
}

.friends{
  color: black;
  background: transparent;
}

table.comments-table{
  color: black;
  background: transparent;
  display: block;
  border: transparent;
}
  
.comments-table td:first-child {
background: transparent;
}

.profile .blurbs{
  background: transparent;
  display: block;
}

.profile .mood{
}
  
.online {content:
url('https://cur.glitter-graphics.net/pub/3451/3451738z4yzvxxdq0.gif'); 
background-repeat: no-repeat; 
background-position: -15% 75%; z-index: 2; 
}

a:hover{
  color: #ddd2c8;
}
a{
  color: black;
}

nav .top{
  background: #ddd2c8;
}

nav .links{
  background: #ddd2c8;

}

.nav .top , nav .links{

text-align: center;

}
  
nav .links a:hover {
color: white;
}
  
nav .links li:not(:last-child)::after {

content: url("https://gifcity.carrd.co/assets/images/gallery94/0a20063a.gif?v=705d7edd");

}
  
nav .links a, nav .links li .special a{
text-shadow: none;
}
  
li .icon {
display: none;
}
  
.person p, .count {
color: #ddd2c8 !important;
}
  
.profile-info {
    border: transparent;
}
  
.profile-info {
  border: transparent;
}
  
.search-wrapper input[type=text] {
    background-color: white !important;
    border: 1px solid grey !important;
    font-family: var(--font-family) !important;
    color: black !important;
    border-radius: 0px !important;
}

footer{
  background: transparent;
  color: black;
}

:root {
--logo-blue: black;
--darker-blue: black;
--lighter-blue: #ddd2c8;
--even-lighter-blue: transparent;
--lightest-blue: transparent;
--dark-orange: black;
--light-orange: #ddd2c8;
--even-lighter-orange: transparent;
--green: #f4a5ca;
}
  
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #ddd2c8;
}

::-webkit-scrollbar-thumb:hover {
  background: #ddd2c8;
; 
}
  
/* contact icons */
.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 {
/* add to friends */
content: url("https://64.media.tumblr.com/102ac90ac571b5dac490fb2cd22245bf/7795402870bc4606-3f/s75x75_c1/02766ca97bb08f20fb2187ad41c40a4e7c297311.gifv");
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("https://64.media.tumblr.com/79f7995af1df0eea296eca4a919f3243/7795402870bc4606-9a/s75x75_c1/a265a32c9d406c89cc63816b62af9891b7c53e18.gifv");
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://64.media.tumblr.com/102ac90ac571b5dac490fb2cd22245bf/7795402870bc4606-3f/s75x75_c1/02766ca97bb08f20fb2187ad41c40a4e7c297311.gifv");
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url("https://64.media.tumblr.com/79f7995af1df0eea296eca4a919f3243/7795402870bc4606-9a/s75x75_c1/a265a32c9d406c89cc63816b62af9891b7c53e18.gifv");
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("https://64.media.tumblr.com/102ac90ac571b5dac490fb2cd22245bf/7795402870bc4606-3f/s75x75_c1/02766ca97bb08f20fb2187ad41c40a4e7c297311.gifv");
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("https://64.media.tumblr.com/79f7995af1df0eea296eca4a919f3243/7795402870bc4606-9a/s75x75_c1/a265a32c9d406c89cc63816b62af9891b7c53e18.gifv");
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url("https://64.media.tumblr.com/102ac90ac571b5dac490fb2cd22245bf/7795402870bc4606-3f/s75x75_c1/02766ca97bb08f20fb2187ad41c40a4e7c297311.gifv");
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://64.media.tumblr.com/79f7995af1df0eea296eca4a919f3243/7795402870bc4606-9a/s75x75_c1/a265a32c9d406c89cc63816b62af9891b7c53e18.gifv");
}
</style>

<style>
@keyframes desaturate{
  from{
    filter:saturate(100%);
  }
  to{
    filter:saturate(0%);
  }
}

.profile .friends .person img:not(.icon):hover, .comments-table td:first-child img:hover {
  animation: 1s desaturate;
  animation-iteration-count: infinite;
}
</style>
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

Comments disabled.