Yellowcard Inspo (ATL) - Scrolling Layout

Tags: tragiictayy, compact, layout, layouts, emo, music, black, gray, simple

Description:

This is a compact layout that has fixed navigation and footer, with scrolling profile.

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=18972) -->

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


<style>

:root{
  --headers: #1a1a1a;
  --links: #7a7a7a;
  --text: #ffffff;
  --names: #ffffff;
}

nav{background-color: #000000; !important;border: solid 4px #ffffff!important;border-bottom: transparent!important;}
nav ul{background: #000000!important; color: #c59f78;font-size: 5px;text-align: center;}
nav img.logo{filter: invert(0%) sepia(2%) saturate(3443%) hue-rotate(322deg) brightness(100%) contrast(80%);!important;}
nav ul a img, .mood a img{display:none !important;}
.top{background: #000000!important;background-color:rgba(0, 0, 0, 0.8); !important;}

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

.search-wrapper input[type=text] {background-color: #000000;) !important;border: none!important;color:#c59f78!important;border-radius: none!important;}
button{border-radius: none!important;border: none!important;background-color:#000000!important;color:#59f78!important;}

h1 {display: none!important;}
.w-40 >  p {display: none;}
.details {display: none!important;}
.mood {display: none!important}
.online {display: none;}
.right .section h4{display:none !important;}
.profile-info {display: none;}
.url-info{display:none !important;}
.profile .table-section .heading, .home-actions .heading{display: none!important;}
.profile .friends .heading{display:none!important;}
.table-section:last-child{display:none!important;}
.blog-preview{display:none !important;}
.friends-grid{display:none !important;} 
.comments-table{display:none !important;} 

b {
  color: #7a7a7a;
  letter-spacing: -1px;
  font-family: 'Cutive Mono', monospace;
}

i {
  color: #7a7a7a;
  letter-spacing: 1px;
  font-family: 'Cutive Mono', monospace;
}

a:link {
  color: #7a7a7a;
  font-family: 'Cutive Mono', monospace;
}

a:hover {
   color: #ffffff;
   text-transform: uppercase;
}

a:visited {
   color: #7a7a7a;
   font-family: 'Cutive Mono', monospace;
}

body {
  background-color: #1a1a1a;
  background-size: contain!important;
  background-attachment: fixed!important;
}

.profile {
   display: flex;
   overflow-y: scroll;
   height: 200px;
   background-color: transparent;
   font-family: 'Cutive Mono', monospace;
   text-align: center;
   text-transform: lowercase;
}

.hr {
   border: solid 4px #ffffff;
}

.profile-pic img{
    margin-top: 1px;
}

.profile .contact .f-row {
    margin: 0px;
    font-size: 10px!important;
}

.contact .inner a img {
        font-size: 0;
}

.contact .inner a img:before {
        font-size: 1em;
        display: block;
}

.f-col {
    vertical-align: top;
    text-align: left! important;
    margin-bottom: 5px;
    display: block;
}

.table-section .details-table tr {
	display: flex;
        text-align: left! important;
}

.table-section:nth-last-child(2) .details-table tr:nth-child(1) td:first-child p { font-size:0; }
.table-section:nth-last-child(2) .details-table tr:nth-child(1) td:first-child p:before { content:"Music"; font-size:.7rem; }

.table-section:nth-last-child(2) .details-table tr:nth-child(2) td:first-child p { font-size:0; }
.table-section:nth-last-child(2) .details-table tr:nth-child(2) td:first-child p:before { content:"Quotes"; font-size:.7rem; }

.table-section:nth-last-child(2) .details-table tr:nth-child(3){display:none! important;}
.table-section:nth-last-child(2) .details-table tr:nth-child(4){display:none! important;}
.table-section:nth-last-child(2) .details-table tr:nth-child(5){display:none! important;}
.table-section:nth-last-child(2) .details-table tr:nth-child(6){display:none! important;}


.friends th, tr, .friends td, th, .icon, #comments, .comments-table, .friends, .profile-info, .table, .table-section, .contact, .url-info, .mood, .blurbs, .blog-preview, .details, .profile-pic img
{
    border: none!important;
}

.profile .contact .heading {
   display: none!important;
}

.blurbs {
   color: #ffffff!important;
}

.profile .blurbs .heading {
  background-color: #1a1a1a;
  color: #000000;
  font-family: 'Staatliches', cursive;
  text-shadow: 2px 2px 8px #7a7a7a;
  text-align: center;
  font-size: 9px!important;
  text-transform: uppercase!important;
  border: solid 1px #ffffff;
}

.profile .table-section .details-table td {
  background-color: transparent;
  color: #ffffff;
}

main:before { 
width: 100%;
height: 250px;
display: block;
content: "";
background-image: url("https://thumbs.gfycat.com/HealthyFickleGiraffe-max-1mb.gif");
background-position: center;
background-size: full;
background-repeat: no-repeat;
}

main {
   background: url("");
   background-size: 200px;
   background-color: #000000;
   border: solid 4px #ffffff;
   border-top: transparent;
}

.container {
   padding: 160px;
}

footer {
    background: #000000;
    color: #ffffff!important;
    margin-top: -20px;
    border: solid 4px #ffffff;
    border-top: transparent;
}

</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 4 of 4 comments ( View all | Add Comment )

jackoffjill	1647479673 yo how do i like change the gif lmao Report Comment
jackoffjill	1647479444 using rn Report Comment
Ariel V	1643516982 i thought for a second this layout was about the band Yellowcard, still cool though. Report Comment I'm sorry! It was supposed to have inspo out from it, and I must have forgotten to put that. by TRaGiiCTaYY; 1643517355; Report no worries! always loved Yellowcard so i was excited for a second lol, that layout you have on your profile is awesome too! with the falling rain and stuff, keep being awesome! by Ariel V; 1643517555; Report It's actually going to be posted in a few days, :) Also, I can specifically do a Yellowcard layout, if you'd like? Any certain layout type? by TRaGiiCTaYY; 1643517696; Report thats great!, ill look forward to it, as for the yellowcard layout, while i would love one you dont have to go though the trouble if you dont want too. i also dont know what you mean by which layout type lol but if you need some images for inspiration i think these two are pretty cool lol https://hollywoodlife.com/wp-content/uploads/2021/12/Yellowcard-Punk-Rock-Sound-Star-Struck-embed-2.jpg https://m.media-amazon.com/images/I/91zm8flsqBL._SL1425_.jpg by Ariel V; 1643518981; Report It's no problem at all, honestly! Do you like compact, or full sized? by TRaGiiCTaYY; 1643521167; Report ah okay, fullsize are nice by Ariel V; 1643524159; Report Okay. :) I'll start on it today, and as soon as it's posted, (may be two-three days depending), I'll let you know. by TRaGiiCTaYY; 1643557744; Report Thank you! You’re the best! :) by Ariel V; 1643593530; Report
-{3M1nu1t30v3rl04d}-	1643505655 amazingz! Report Comment