grunge layout

Tags: grunge, dark, simple, layout, rad

Description:

Update: 1.0.1. Fixed the comment section and the online icon color.

Hello, this is my first layout here. To be honest, I don't know what I'm doing. I tried to test it as much as I could, but if you find any errors or broken code/images, please let me know. Warning: My code is terribly messy, I know. Please don't bully me. I'm just doing this to learn and practice.

________________

This CSS features:

A simple layout that won't make your head hurt.
Dull, dark colors.
Readable fonts (your eyes will be grateful).
A link to the "Grunge Forever" Spotify playlist (you can add your own playlist or just delete it).
Cool vibes.

(Also works with blogs.)

________________

You will probably like it if you:

Like grunge music and/or its general aesthetic.
Like dull colors.
Like simple layouts.

________________

Additional comments: As I said, this is the first spacehey layout I've done. I tried to keep it simple. I love profiles that are easy on the eyes and navigable, so I wanted to make one like that. You can customize it as much as you want, but please don't remove the credits. You also don't need to comment if you use it, tbh.

________________

ADDITIONAL SCREENSHOTS:

How it looks when used on blogs:

Preview:

click on the image for a larger preview

Code:

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

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

<style>

    @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto+Condensed&display=swap');
        
        body {
        font-size: 1.5em;
        font-family: 'Roboto Condensed', sans-serif;
        background-attachment: fixed;
        background-image: url(https://i.postimg.cc/GpnYPxw0/tumblr-nqd2s0y-Wn-Y1rgw4iio1-1280-DOSSS.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        min-height: 100vh;
        max-width: 100%
        }

        nav {
        font-family: 'Bebas Neue';
        margin-top: 20px;
        margin-bottom: 10px;
        margin-right: 2px;
        margin-left: 2px;
        padding: 10px;
        background-image: url(https://i.postimg.cc/W4DWtvLN/brownjeans.png);
        background-size: cover;
        background-position: center;
        font-size: 90%;
        }

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

        nav .links a {
         text-shadow: none;
        }

        nav .links a:hover {
            text-decoration: none;
            color: #9c9c2a;
        }
       
       .logout-btn {
        font-family: 'Bebas Neue';
        font-size: 100%;
        }
    
        a {
           color: #540046;
        }
    
        a:hover {
            text-decoration: none;
            color: #9c9c2a;
        }
    
        nav .top {
            background: none;
        }
    
        nav .right {
            margin-bottom: 0;
        }
    
        nav .left {
            margin-top: 0;
        }
    
        nav .links {
            background: none;
        }
    
        main {
        background: none;
        }
    
        .container {
            width: 1010px;
        }
    
        main .left, main .right {
        padding: 15px;
        }
    
        .left {
            margin-top: 150px;
        }
    
        .right {
            margin-bottom: 150px;
        }
    
        .col.w-40 {
        width: 35%;
        border: #3d3532 2px solid;
        }
    
       .edit-link {
        margin-top: 0;
        }
    
       .general-about .profile-pic img {
        max-width: 230px;
        max-height: 230px;
        }

       .online {
        filter: sepia(100%) brightness(0.2) hue-rotate(260deg) contrast(80%) saturate(200%);

        }
    
       .profile .mood {
        margin-top: 85px;
        }
    
       .url-info {
        display: none;
        }
    
        /* icons from Freepik (https://www.flaticon.es/autores/freepik)
                            Rian Maulana (https://www.flaticon.es/autores/rian-maulana)
                            Sicon (https://www.flaticon.es/autores/sicon)
                            Rahul Klakotar (https://www.flaticon.es/autores/rahul-kaklotar) */

       /* special thanks to Cory (https://spacehey.com/cory) for the code to change the 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://i.postimg.cc/mgPpWYc8/add.png')
        }
    
        .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
        /* Add to Favourites */
        content: url('https://i.postimg.cc/63wQRCyt/favorito.png')
        }
    
       .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
        /* Send Message */
        content: url('https://i.postimg.cc/TYt246mn/chat.png')
        }
    
       .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
        /* Forward to Friend */
        content: url('https://i.postimg.cc/s2PjV1K8/forward.png')
        }
    
       .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
        /* Instant Message */
        content: url('https://i.postimg.cc/W1gjnhR3/message.png')
        }
    
       .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
        /* Block User*/
        content: url('https://i.postimg.cc/Sx3dyxjW/block.png')
        }
    
       .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
        /* Add to Group */
        content: url('https://i.postimg.cc/DZjKZGGC/grupo.png')
        }
    
       .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
        /* Report User */
        content: url('https://i.postimg.cc/JhT1ySVc/skull.png')
        }
    
        .details-table tr td:nth-child(1) {
            font-family: 'Bebas Neue';
            color: #2f241f;
            font-size: 23px;
            text-align: end;
            padding-right: 5px;
            padding-top: 3px;
        }
    
        .details-table tr td:nth-child(2) {
            padding-left: 5px;
            padding-top: 3px;
        }

        .details-table tr td:nth-child(1) img {
            display: none;
        }
    
        .col {
        width: 60%;
        background: #646660;
        border: #3d3532 2px solid;
        }
    
       .profile .friends .person p {
         color: #540046;
         font-family: 'Bebas Neue';
         font-weight: normal;
        }
    
       .friends-grid .person img {
        filter: sepia(100%) brightness(0.2) hue-rotate(260deg) contrast(80%) saturate(200%);
        transition: all 0.2s;
        }
    
       .friends-grid .person .pfp-fallback:hover {
        filter: none;
        transition: all 0.2s;
        }

        .count {
          color: #9c9c2a;
        }
    
        .profile .contact .heading, .profile .table-section .heading, .setting-section .heading, 
        .home-actions .heading {
        color: #949889;
        }
    
       h1, h2, h3, h4, h5 {
       font-family: 'Bebas Neue', sans-serif;
       letter-spacing: 1.5px;
    
        }
    
        :root {
            --darker-blue: #540046; 
            --lighter-blue: #3d3532;
            --logo-blue: #3d3532;
            --even-lighter-blue: #545958;
            --lightest-blue: #8a9391;
            --dark-orange: #1e2121;
            --light-orange: #454948;
            --even-lighter-orange: #68706e;
        }
    
        .row {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        }
    
        .profile h1 {
        font-size: 3em;
        margin: 0;
        overflow-wrap: anywhere;
        }
    
        .comments-table td:first-child {
        width: 100%;
        display: block;
        }

        .comments-table td:nth-child(2) {
        width: 70%;
        }

        .comments-table td:first-child a:nth-child(1) {
         display: flex;
         justify-content: center;
         position: relative;
        }

        .comments-table td:first-child a:nth-child(1) p {
          font-size: 1.7vw;
          width: 85%;
        }

        .comments-table a:nth-child(2) {
         display: flex;
        }

        .comments-table td:first-child img:not(.icon) {
        width: 200px;
        }
    
        .report img {
         content: url('https://i.postimg.cc/JhT1ySVc/skull.png')
        }
    
       .comments-table .pfp-fallback {
        filter: sepia(70%) brightness(0.6) hue-rotate(260deg) contrast(60%) saturate(100%);
        transition: all 0.2s;
        }
    
       .comments-table .pfp-fallback:hover {
        filter: none;
        transition: all 0.2s;
        }
    
       .comments-table {
        border-color: transparent;
        border-spacing: 10px;
       }
    
       tr {
        border: black 2px solid;
       }
    
       td {
        padding: 0;

       }
    
       td a {
        max-width: 200px;
       }
    
       .comments-table td a p {
        font-family: 'Bebas Neue';
        font-size: 150%;
        position: absolute;
        z-index: 4;
        color: black;
       }
    
       .comments-table td:nth-child(2) p {
        margin: 10px;
         
       }
    
       .comments-table tbody tr:nth-child(2) td:nth-child(3) button {
    
       }
    
       .comments-table td a button {
         border: none;
         background-color: #4e5452;
         font-family: 'Bebas Neue';
         margin-left: 10px;
         margin-bottom: 10px;
       }
    
       .comments-table td a button:hover {
          text-decoration: underline;
          cursor: pointer;
       }

       .comment-replies {
          border: 1px solid black;
          margin-left: 2px;
          margin-right: 2px;
          margin-bottom: 10px;
       }
    
       footer {
        background-image: url(https://i.postimg.cc/W4DWtvLN/brownjeans.png);
       }
    
       footer p {
        color: #8d9087;
       }
    
       footer a {
         color: #677255;
       }

/* css for the blogs */

      .author-details .links a:nth-child(1) img {
               /* View Blog */
        content: url('https://i.postimg.cc/1thDhHwk/blog.png')
       }

      .author-details .links a:nth-child(2) img {
               /* View Profile */
        content: url('https://i.postimg.cc/C5B6KJzw/usuario.png')
       }

      .author-details .links a:nth-child(3) img {
               /* Report Blog Entry */
        content: url('https://i.postimg.cc/JhT1ySVc/skull.png')
       }

    </style>

<!-- SPOTIFY PLAYLIST -->
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/37i9dQZF1DX11ghcIxjcjE?utm_source=generator&theme=0" width="100%" height="152" frameborder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>

<p>

<!-- YOUR "ABOUT ME" BEGINS HERE -->




<!-- please do not remove the credits below -->
</p><p style="font-size:10px; text-align:end;"><i>[ layout created by marimorena. ]</i></p>

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.