Anti Valentine Layout

Tags: red, black, simple, bela

Description:

If you have any questions, please comment below or go to my blog here.

Image Credits —

    ⇘ Body Background: https://cdn.wallpapersafari.com/6/82/Tqik3f.jpg

    ⇘ Navigation and other boxes background: https://media.giphy.com/media/Q7WZKa3OYOMBGy0u25/giphy.gi

    ⇘ Contact images: https://img.icons8.com/ios-filled/15/fa314a/middle-finger--v1.png

    ⇘ .url-info Background: https://media.giphy.com/media/Uv2BlFJmxW4HMSge7e/giphy.gif, https://media.giphy.com/media/Q7WZKa3OYOMBGy0u25/giphy.gif

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Bela 🔊⬆ (https://layouts.spacehey.com/layout?id=1536) -->

<style> 

/*=======⚠️==========
* for colors go to https://htmlcolorcodes.com/color-names
* for fonts go to https://fonts.google.com
* for cursors go to https://icons8.com , https://custom-cursor.com , https://www.cursors-4u.com
============⚠️=======*/

/* cursors */
a:hover{
    cursor: url('https://img.icons8.com/ios-filled/30/fa314a/middle-finger--v1.png'), auto;
}
* {
    cursor: url('https://img.icons8.com/fluent-systems-filled/24/fa314a/skull-candle.png'), auto;
}
</style>

<style>

/* font style */
@import url('https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap');
</style>

<style>

/* layout details */

:root{
     --headers: Darkred;
     --text: Darkred;
     --names: crimson;
     --links: maroon;
     --hover: deeppink;
     --borders: 15px groove #4A1010 !important;
     --background_image: url('https://cdn.wallpapersafari.com/6/82/Tqik3f.jpg');
     --font-family: 'Yeseva One', cursive;
     --curve: 0px;
}

.url-info p{opacity: 0.0;}
.url-info{
    background: url('https://media.giphy.com/media/Uv2BlFJmxW4HMSge7e/giphy.gif'), url('https://media.giphy.com/media/Q7WZKa3OYOMBGy0u25/giphy.gif');
    height:150px;
    width:100%;
    background-position: center bottom, center;
    background-size: 70%, contain;
    background-repeat: no-repeat, repeat;
}


.blurbs .heading{display:none !important;} /* to hide the blurbs heading */
h3, h4, h5, .url-info b{ color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
a:hover{color: var(--hover) !important;} /* color of links on hover */
p, h2{color: var(--text) !important;} /* color of text */
h1, .friends a p{color: var(--names) !important;} /* color of names, and friends counter */
h1, .friends a:hover p{color: var(--hover) !important;} /* color of names on hover */
nav label{color: var(--links) !important;} /* color of search */
.section h4 {color: var(--headers) !important;text-align:center;} /* aboutme & want2meet headings */
.section{color: var(--text) !important;} /* sometimes <p> is broken by embeds maybe. */
.comment-reply:not(:first-child){border-top: 3px solid var(--links);} /* line in bewtween comment replies*/
.count{color:var(--links);}

/* text decoration */
a:hover,
a:active,
.blog-entry .kudos-btn:hover,
.blog-entry .kudos-btn:active{
    text-decoration: underline;
    text-decoration-style: wavy;
}
.logout-btn:hover,
.logout-btn:active{
    text-decoration: underline;
    text-decoration-style: wavy;
}
nav .top a:hover{
    text-decoration: underline;
    text-decoration-style: wavy;
}
nav .links a:hover{
    text-decoration: underline;
    text-decoration-style: wavy;
}

/* font family */
a, p, nav label, .section{
    font-family: var(--font-family) !important;	
    text-shadow: 0px 0px 0px black !important;
    font-size: 12px!important;
}
h2, h3, h4, h5, DIV.mood > P:nth-child(1) > B, P:nth-child(2) > B{
    font-family: 'Yeseva One', cursive;
    text-shadow: 0px 0px 0px black !important;
    letter-spacing: .3px;
    font-size: 16px!important;
}

/* padding and margin */
.icon{border:none !important;}
.comment-replies{border:3px groove var(--links);border-radius:var(--curve);}


/* background image */
body {
    background-image: var(--background_image) !important;
    background-color: #0E0000 ;
    background-repeat: repeat;
    background-size: contain;
    background-attachment: fixed;
    background-position: center;
}

/* navigation */
/* change logo color at https://codepen.io/sosuke/pen/Pjoqqp */
nav{
    background: url('https://media.giphy.com/media/f8XI1mz0wsZ0I/giphy.gif');
    background-size: contain;
    border: var(--borders);
    border-radius: var(--curve);
    padding:5px;
}
nav .top {
    background: rgba(0,0,0,0.0);
}
nav .top a{
    color: var(--links)!important;
}
nav .links {
    background: transparent!important;
    background-size: 100%100%!important;
    text-align: center;
    font-size: 12px;
}
nav img.logo{
    filter: brightness(0) saturate(100%) invert(10%) sepia(56%) saturate(4550%) hue-rotate(353deg) brightness(111%) contrast(118%); !important;
}
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: " ‡";
    color: var(--links);
}

/* color the search bar and button */
.search-wrapper input[type=text] {
    background-color: rgba(0, 0, 0, 0.0) !important;
    border: 2px solid var(--links) !important;
    color:DarkGray !important;
    border-radius: 10px !important;
}
button{
    border-radius: 10px !important;
    border: 0px solid DarkGray!important;
    font-family: var(--font-family) !important;
    background-color:rgba(0, 0, 0, 0.0) !important;
    color:var(--links)!important;
}

/* online icon and color */
.online{color: var(--links) !important;} 
.online img {
    filter: brightness(0) saturate(100%) invert(10%) sepia(56%) saturate(4550%) 
    hue-rotate(353deg) brightness(111%) contrast(118%); !important;
}

/* profile name */
h1{
    padding-left: 20px !important;
    font-family: 'Yeseva One', cursive;
    font-size:30px !important;
    color: var(--headers)!important;
}

/* profile info */
.profile-info{
    background: url('https://media.giphy.com/media/Q7WZKa3OYOMBGy0u25/giphy.gif');
    background-size: contain;
    border: var(--borders)!important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
}
.profile-info .inner{
    font-weight: bold;
    text-align: center;
}

/* contact */
.contact {
    background: url('https://media.giphy.com/media/f8XI1mz0wsZ0I/giphy.gif');
    background-size: contain;
    border-radius: var(--curve) !important;
    padding: 5px !important;
    border: var(--borders) !important;
}
.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://img.icons8.com/ios-filled/15/fa314a/middle-finger--v1.png')
	
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add to favorites */
	content: url('https://img.icons8.com/ios-filled/15/fa314a/middle-finger--v1.png')
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: url('https://img.icons8.com/ios-filled/15/fa314a/middle-finger--v1.png');
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward to friend */
	content: url('https://img.icons8.com/ios-filled/15/fa314a/middle-finger--v1.png');
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant message */
	content: url('https://img.icons8.com/ios-filled/15/fa314a/middle-finger--v1.png');
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block user */
	content: url('https://img.icons8.com/ios-filled/15/fa314a/middle-finger--v1.png');
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add to group */
	content: url('https://img.icons8.com/ios-filled/15/fa314a/middle-finger--v1.png');
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report user */
	content: url('https://img.icons8.com/ios-filled/15/fa314a/middle-finger--v1.png');
} 


/* images */
main{
    font-family:var(--font-family)!important;
    color: var(--text)!important;
    background: transparent;
    background-size: 100%;
    background-position: center;
}
.profile-pic img{
    outline:none !important;
    border: var(--borders)!important;
    filter:drop-shadow(0px 0px 0px black)!important;
    background: url('https://media.giphy.com/media/Q7WZKa3OYOMBGy0u25/giphy.gif');
    background-size: contain;
    padding: 5px;
    border-radius: var(--curve);
}

.profile .friends .person img{
    border: none!important;
    border-radius: var(--curve);
}
.friends-grid{
    text-align: center;
}
.friends .heading a.more{
    padding-right: 16px;
}

/* interest table background color. replace transparent with any color to see the change */
td {
    background-color: transparent!important;
}
hr{
    border: 2px solid darkred;
    border-radius: 50px;
    background: darkred;
}
/* boxes */
.heading, .url-info, .blurbs, .friends, .table, .table-section, footer{
    border-radius: var(--curve) !important;
    border: var(--borders) !important;
}
.friends, .blurbs{
    background: url('https://media.giphy.com/media/Q7WZKa3OYOMBGy0u25/giphy.gif');
    background-size: contain;
}
.mood, .blog-preview{
    text-align: center;
    border-radius: var(--curve) !important;
    border: var(--borders) !important;
}
.mood{
    background: url('https://i.imgur.com/3DN4KKU.png'), url('https://media.giphy.com/media/Q7WZKa3OYOMBGy0u25/giphy.gif');
    background-size: 15%50%, contain;
    background-repeat: no-repeat, repeat;
    background-position: bottom left, center;
}
div.blog-preview {
    background: url('https://media.giphy.com/media/2tiR931YfL1WU/giphy.gif'), url('https://media.giphy.com/media/1Wc8vl4oozxiU/giphy.gif');
    background-size: 20%40%, cover;
    background-position: left top, center bottom;
    padding-top:50px;
    background-repeat: repeat, no-repeat;
    background-repeat-y: no-repeat;
    padding-bottom: 15px;
}
.table-section{
    border:var(--borders) !important;
    background: url('https://media.giphy.com/media/Q7WZKa3OYOMBGy0u25/giphy.gif');
    background-size: contain;
    border-radius: var(--curve) !important;
}
.heading{
    background:transparent!important;
    text-align: center;
    border:none!important;
}
.comments-table{
    border:none;
}
.comments-table td {
    background: transparent!important;
    color:transparent!important;
    border-radius: var(--curve);
}
.comments-table td:first-child{
    background: transparent!important
}
.comments-table td:first-child img {
    border: none!important;
    border-radius: var(--curve);
/* you can clip images at https://bennettfeely.com/clippy and add the code here */
}

/* footer */
footer{
    text-align: center;
    font-size: 60%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background: url('https://media.giphy.com/media/Q7WZKa3OYOMBGy0u25/giphy.gif');
    background-size: contain;
}
</style>

<style>
/* Scrollbar styles */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    border-radius: 50px;
    width: 1px;
    border: 2px solid darkred;
}
::-webkit-scrollbar-thumb {
    background: maroon;
    border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
    background: darkred;
}
</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

Displaying 13 of 13 comments ( View all | Add Comment )

kelsie <3	1657953755 beautiful! Report Comment
Deuca1ion_	1639512087 so pretty tysm!!!!! Report Comment
Dulcimer	1636760436 gorgeous ty!!!! Report Comment
trashbbyb	1636730992 I love this ! thank you so much. Report Comment
ProxyRipJaw	1632219942 omg yesssss Report Comment
Cal Angelos	1614736918 i love this!! so nice Report Comment
blake<33	1614729828 hey i rlly like this but id prefer if the blog space was somewhere else, different, or not there but i know nothing abt code any help?:o Report Comment ah I'm sure there is a way but it involves changing the original grid layout but I'm not good at that lol if you just want to remove it all together you can add the code .blog-preview {display:none;} by Bela 🔊⬆; 1614731356; Report ok ill try it out thank you !! by blake<33; 1614734068; Report
Brandie States	1613921817 Loving this one! Report Comment Thanks by Bela 🔊⬆; 1613931213; Report
psycho	1613703493 using this as a base. thank you! ♡ Report Comment you're welcome! by Bela 🔊⬆; 1613704353; Report
josiesomething	1613693950 I am full-on dead. This is awesome and totally reminiscent of 2005 emo days. Thanks! Report Comment thank you so much, I appreciate it! :) by Bela 🔊⬆; 1613694360; Report
XxDahliaxX	1613512609 Absolutely love it! Thank you for posting this. Giving me early emo phase of my childhood lol Report Comment you're welcome! I'm glad you're enjoying it :D by Bela 🔊⬆; 1613523412; Report
Josefina	1613437743 I love this layout! Thank you! :) Report Comment you're welcome :) by Bela 🔊⬆; 1613438176; Report
ash lynx	1613406068 seriously love all the profile you create! Report Comment Thank you! I love your layouts too 💜 by Bela 🔊⬆; 1613424158; Report