Too // H i g h \\ to Care

Tags: tragiictayy, full, layout, black, gothic, goth, animated, gif, cute

Description:

My favorite "full" layout, yet.

I used base codes from the lovely Bela!

If you use this, please comment below, or add me on here. Thank you! :)

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&family=Space+Mono&family=Spectral+SC&display=swap');
</style>

<style>

:root{
    --headers: white;
    --text: white; 
    --names: white;
    --links: gray;
    --hover white;
    --borders: 4px solid gray;
    --background_image: url('https://wallpapercave.com/wp/wp3007454.jpg');
    --pdg_profileInfo: url(https://64.media.tumblr.com/fdeff1e6f95f6e645e6cdc9d5d3eedc1/tumblr_pnm5j6bkzC1vvus8zo4_500.png);
}
    --font-family: 'Cutive Mono', monospace;
    --curve: 8px;
}

h3, h4, h5{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, .count {color: var(--text) !important;} /* color of text */
.friends a p{color: var(--names) !important;} /* color of names, and friends counter */
.friends a:hover p{color: var(--hover) !important;} /* color of names on hover */
nav label{color: var(--text) !important;} /* color of search */
.section h4 {color: var(--headers); !important;} /* aboutme & want2meet headings */
.blurbs .heading {display:none;} /* hides the blurbs title */

b {
  color: gray;
  font-family: 'Spectral SC', serif;
  letter-spacing: -2px;
}

i {
   color: gray;
   font-family: 'Spectral SC', serif;
   letter-spacing: 2px;
}

body{
    background-image: var(--background_image)!important;
    background-color: black;
    background-size: cover;
    background-attachment: fixed;
}

.blog-preview {display:none! important;}
.details-table td:first-child{display:none! important;}
.right .section h4{display:none !important;}

.heading{
    display: none! important;
    background: black !important;
    text-align: center;
    border:none!important;
}

h1{
    color: white;
    font-family: 'Spectral SC', serif;
    font-size: 15px !important;
    font-weight: bold;
    text-align: center;
    text-transform: lowercase;
}

nav{
    background-color: black;
    border: var(--borders);
    border-radius: var(--curve);
}
nav .top{
    background: transparent;
}
nav .top a, nav .links a{
    color: var(--text);
}
nav .links{
    color: var(--text);
    background-color: transparent;
    border-radius: var(--curve);
    text-align: center;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: lowercase;
}

nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: "🖤";
    color: var(--links);
}

nav img.logo{
    filter: invert(74%) sepia(18%) saturate(2%) hue-rotate(314deg) brightness(109%) contrast(87%);!important;
}

.search-wrapper input[type=text] {
    background-color: transparent !important;
    border: 2px solid var(--text) !important;
    color:var(--text) !important;
    border-radius: var(--curve) !important;
}

button{
    border-radius: var(--curve) !important;
    border: 0px solid var(--text) !important;
    font-family: var(--font-family) !important;
    background-color: transparent !important;
    color:var(--text) !important;}


.online{
    display: none!important;
    color: var(--links) !important;
    text-transform: lowercase;
} 
.online img{
    display: none!important;
}

h2, h3, h4, h5, a, p, nav label, .section{ 
    font-family: 'Cutive Mono', monospace!important;	
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-transform: lowercase;
}

hr{
    height:1px;
    background: var(--links);
    border: solid 1px;
}

.blurbs, .friends, .profile .table, .blog-preview, .profile .table-section, .contact{
    border-radius: var(--curve) !important;
    border: var(--borders) !important;
    background-color: black!important;
}
.icon{border:none !important;}
.comment-replies{border:none;} 
.comment-reply:not(:first-child){border-top: 2px solid var(--links);} 

td{
    background-color: transparent!important;
}

main{
    background: transparent;
    border-radius: var(--curve) !important;
    border: transparent !important;
    outline: none !important;
}

.table-section{
    border:none !important;
    background-color:var(--box_color_and_seethru)!important;
    border-radius: var(--curve) !important;
}

.heading, .blog-preview h4, .section h4{
    background: none !important;
    text-align: center;
    text-transform: lowercase;
}

.profile-info {
    background-color: black;
    background-image: url(https://64.media.tumblr.com/fdeff1e6f95f6e645e6cdc9d5d3eedc1/tumblr_pnm5j6bkzC1vvus8zo4_500.png);
    background-size: cover!important;
    background-position: center;
    border: var(--borders) !important;
    border-radius: var(--curve) !important;
    padding: 5px!important;
    height: 200px!important;
    font-family: 'Cutive Mono', monospace!important;
}

.profile-pic img{
    outline:none !important;
    border-radius: var(--curve) !important;
    padding:5px;
    background-color: black;
    border: var(--borders);
    filter: grayscale(100%);
}

.friends-grid{
    text-transform: lowercase;
    text-align: center;
    height: 200px!important;
    overflow-y: scroll;
}
.friends-grid img{
    border-radius: var(--curve) !important;
    filter: grayscale(100%);
}

h2, h3, h4, h5, p{padding-left:5px !important;} 
.profile .table-section .heading, .blog-preview .heading, .profile .friends .heading{padding: 5px!important;}
.friends{margin-bottom: 20px;}

.profile .contact a{font-size: 10px;}

.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: "🖤"
	
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add to favorites */
	content: "🖤"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "🖤"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward to friend */
	content: "🖤"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant message */
	content: "🖤"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block user */
	content: "🖤"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add to group */
	content: "🖤"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report user */
	content: "🖤"
} 

.url-info{
    background: url('https://thumbs.gfycat.com/BlackandwhiteEnchantingJoey-small.gif');
    background-position: center;
    background-size: cover;
    border: var(--borders)!important;
    border-radius: var(--curve);
    height: 200px;
}
.url-info p{
    opacity: 0.0;
}


.comments-table {
    text-transform: lowercase;
    display: block;
    height: 200px!important;
    overflow-y: scroll;
    border: 0px solid black !important;
    outline: none !important;
    border-radius: 8px;
    padding:5px;
    border-spacing: 4px;
    text-align: center;
}

.comments-table td:first-child{

    background-image: url('');
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
}

.comments-table td{
    background-image: url('');
    background-size: cover;
    background-position: center;
    border: 5px solid black;
    padding:10px;
    border-radius: 8px;
}

footer{
    background: transparent;
}
</style>

<style>


body {
    margin-bottom: fixed;
}

.myBox {
    width: 200px;
    height: 200px;
    overflow: scroll;
}

::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}
::-webkit-scrollbar-track {
    border-radius: var(--curve);
    border: 1px solid black;
}
::-webkit-scrollbar-thumb {
    background: white; 
    border-radius: var(--curve);
}
::-webkit-scrollbar-thumb:hover {
    background: white;  
}
</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 17 of 17 comments ( View all | Add Comment )

Emma_m00n	1735747470 using Report Comment
roblovesnickk	1729267515 using Report Comment
Meow >_>	1723928122 using Report Comment
Ridley!!!	1718756155 using!!! Report Comment
milo/rover	1704215603 using!! Report Comment
drag	1680100385 very nice! sits so much better taking the whole page. and works well with my labels of code sections lol Report Comment
rose	1677594685 using Report Comment
Leena	1676526006 Using >3 love it BTW Report Comment
Ocean	1646418995 thanks! i love it. Report Comment
Luci's Panda Bear	1645228493 🖤 Report Comment
Elle Diablo	1644009934 thank you Report Comment
K!	1641114049 Wow, I love the cohesive monochrome design with the spooky vibe. 🌟 Report Comment
Mystical.Ghost	1638499824 I love this, I'm definitely going to use this! Report Comment
Mary GoughRound	1637175929 fuckin love it xx Report Comment
Kory Nugent	1631711594 Its a great layout! Report Comment
Brute	1619774988 thank you Report Comment You're welcome, :) by TRaGiiCTaYY; 1619777820; Report
-Ak!ra-	1619705927 love the layout!! : ) Report Comment Thank you! :) by TRaGiiCTaYY; 1619714866; Report