Sad Boi Aesthetic

Tags: goth, emo, sad boi, anime, purple, whole page, detailed, animated

Description:

This is the layout I currently use on my profile! Feel free to use it, take bits of code from it etc. just please mention me or say thanks etc!

WARNING PLEASE READ:

This code is for your whole profile, there are parts of it that are designed to be pasted into the interests sections.

I have tried to make this as blatantly obvious as possible. Scroll through the code, copy and paste the code into the associated sections on your profile and remove the comments at the start and end of the section!

If you need help with this layout, please feel free to send me a message and I will happily assist you in it!

Preview:

Layout Screenshot

Code:

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

<style>

/*Intro GIF Animation (fade out)*/
  body:before {
    content: " ";
    height: 100vh;
    width: 100vw;
    display: block;
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 100;
    background-image: url('https://thumbs.gfycat.com/ClearcutInsistentCuckoo-size_restricted.gif'); /*gif link here*/
    background-size: cover;
    background-repeat: no-repeat;
    animation: yourAnimation 4s ease 0s 1 normal forwards;
    pointer-events: none;
  }
  @keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }

/*whole body changes*/ 
  body {    
    background-image: url(https://cutewallpaper.org/21/emo-aesthetic-wallpapers/Emo-Aesthetic-Computer-Wallpapers-on-WallpaperDog.jpg);/*background for whole page*/
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Courier New', monospace;
    height: 100%;
    color: #ffffff;
    h1: #ffffff;
    h2: #ffffff;
    h3: #ffffff;
    h4: #ffffff;
    li: #ffffff;
  }

/*top search bar customisation*/
  .search-wrapper input[type=text] {
    background-color: rgba(21, 23, 26, 0.65) !important;
    border: 1px dotted var(--headers) !important;
    color:var(--names) !important;
    border-radius: 10px !important;
  }
  button{
    border-radius: 10px !important;
    border: 1px dotted var(--headers) !important;
    font-family: var(--font-family) !important;
    background-color:rgba(21, 23, 26, 0.65) !important;
    color:var(--headers) !important;
  }

/*top header customisation*/
  nav{
    background-color:var(--box_color_and_seethru); !important;
    border-radius: 0px 0px var(--curve) var(--curve); !important;
  }
  nav ul{
    background:none !important;
    font-size: 10px;
  }
  nav ul a img, .mood a img{
    display:none !important;
  }
  .top{
    background-image:url("https://cdn.discordapp.com/attachments/753067128583618600/801960785927864360/ezgif.com-crop1.gif") !important;
    background-position:center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color:rgba(0, 0, 0, 0.8); !important;
  }

/*gets rid of URL info box*/
  .url-info{
    display:none !important;
  }

/*changing color of links in mood box*/
  .mood a{
    color:#8d36ff;
  }

/*gets rid of white background behind center of page*/
  main{
    background: rgba(0, 0, 0, 0) !important;
  }

/*changing background of profile & changing general text to white*/
  .profile {
    background:rgba(21, 23, 26, 0.95);
    color: #ffffff;
  }

/*customising contact box*/
  .profile .contact .heading{
    background:#8d36ff;
    text-align: center;
  }
  .profile .contact {
    border-radius: 15px;
    border:2px solid rgba(0, 0, 0, 0);
    background-image: url(https://cdn.discordapp.com/attachments/753067128583618600/801271425494286356/unknown.png);
    background-position: right top;
    background-repeat: repeat;
    background-attachment: scroll;
    Height:180px;
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px Blue, 0 0 3px Darkblue;
  }
  .contact a{
    color: #ffffff;
  }
  .contact a:hover{
    color: #b5b5b5;
  }

/*customising interests box*/
  .profile .table-section{
    border:2px solid #8d36ff;
    border-radius: 15px;
  }
  .profile .table-section .heading{
    background:#8d36ff;
    border: 1px solid #8d36ff;
    border-radius: 15px 15px 0px 0px;
    text-align: center;
  }
  .profile .table-section .heading h4{
    color: #ffffff;
    text-shadow: 1px 1px 2px black;
  }
  .profile .table-section .details-table td{
    background: rgba(0, 0, 0, 0);
    padding-right: 10%;
  }
  .profile .table-section .details-table td:first-child{
    background: rgba(0, 0, 0, 0);
    width: 10%; /*gets rid of interest category column*/
  }
  .profile .table-section .details-table td:first-child p{
    color: rgba(0, 0, 0, 0);
    font-size: 1px; /*gets rid of interest category text*/
  }

/*customising header text for interest titles*/
  .list-heading{
    color:#8d36ff;;
    font-family: 'Courier New', monospace;
    font-size: 15px;
    text-decoration: underline;
    font-weight: bold;
    text-align:center;
  }

/*getting rid of the blurbs headings cause I dont like them*/
  .profile .blurbs .heading{
    background: rgba(0, 0, 0, 0);
    color: rgba(0, 0, 0, 0);
    text-size: 1px;
    height: 2px;
  }
  .col.right .heading h4{
    color:  rgba(0, 0, 0, 0);
    text-size: 1px;
  }
  .profile .blurbs .section h4 {
    display: none;
  }

/*changing font size and centering it for stuff on right side of page*/
  .profile .blurbs .section p {
    font-size: 15px;
    text-align: center;
  }

/*changing color of links on the right side of the page*/
  .col.right a{
    color: #8d36ff;
  }    

/*customising friend space heading*/
  .profile .friends .heading{
    background: #8d36ff;
    color: #fff;
    text-shadow: 1px 1px 2px black;
    text-align: center;
  }
  .profile .friends .heading h4{
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 2px black
  }

/*making the comments section have a scroller*/
  .comments-table{
    display: block;
    height: 380px;
    overflow-y: scroll;
    Border-radius: 15px;
    background-color: rgba(21, 23, 26, 1);
  }

/*customising comments section*/
  .comments-table td:first-child{
    background-color: rgba(21, 23, 26, 1);
  }
  .comments-table td:first-child a{
    color: #8d36ff;
  }
  .comments-table td:first-child a:hover{
    color: #ffffff;
  }
  .comments-table td{
    background-color: rgba(21, 23, 26, 1);
  }
  .comments-table td a{
    color: #8d36ff;
  }
  .comments-table td a:hover{
    color: #ffffff;
  }
  
/*creating 'top 8' section*/
 .top-eight {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, [col] auto ) ;
  grid-template-rows: repeat(2, [row] auto  );
  background-color: transparent;
  color: #444;
  margin: 0px;
  width: 100%;
  }
  .top-row{
    grid-column: col 1 / span 4;
    grid-row: row 2;
  }
  .bot-row{
    grid-column: col / span 4;
    grid-row: row 3;
  }

/*customising header for top 8*/
  .top-eight-header {
    grid-column: col 1 / span 4;
    grid-row: row 1;
    background-image: url(https://dl.glitter-graphics.com/pub/135/135916dgtf468er4.gif);
    height:100%;
    background-color: rgb(249, 197, 108);
    color: rgb(240, 84, 73);
    font-weight: bold;
    padding: 4px !important;
  }
  .top-eight-header h2 {
    padding-bottom: 0px !important;
    margin-botton: 0px;
    font-family: 'Courier New', monospace;
    color: #d6d6d6;
    text-align: center;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  }

/*customising peoples images for top 8*/
  .profile .top-eight .person img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
  }

/*creating a better layout for social links*/
  .social-logos{
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(4, [col] auto ) ;
    grid-template-rows: repeat(1, [row] auto  );
    background-color: transparent;
    color: #444;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    align-items: center;
    width: 100%;
    grid-column: col 1 / span 4
    grid-row: row 1;
    position: relative;
  }

/*customising images for social links*/
  .social-logos img{
    border-radius: 50%;
    width: 50px;
    height: 50px;
  }

/*making social images get slightly bigger when you hover over them*/
  img.logohover:hover,
  img.logohover:focus{
    width: 53px;
    height: 53px;
    position: abolute;
  }

/*customising the footer of the page*/
  footer{
    background:rgba(21, 23, 26, 0.6);
    a: #ffffff;
    color: #ffffff;
  }
</style>

<!--beginning of content for right hand side-->

<img src="https://cdn.discordapp.com/attachments/753067128583618600/801765356652986428/Skull_Divider_png.png" style="width:100%;"/>
<p> ********* </p><p> <!--main about me text-->
<br/> <!--line break for space-->

<!-- social links code -->
</p><div class="social-logos">
 
  <!--link 1-->
  <a href="#"><!--youtube link-->
    <img class="logohover" src="https://cdn.discordapp.com/attachments/753067128583618600/802111395780231188/index.png" alt="Youtube logo"/>
  </a>

  <!--link 2-->
  <a href="#" target="_blank"><!--twitter link-->
    <img class="logohover" src="https://logodownload.org/wp-content/uploads/2014/09/twitter-logo-3.png" alt="Twitter logo"/>
  </a>

  <!--link 3-->
  <a href="#" target="_blank"><!--instagram link-->
    <img class="logohover" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/240px-Instagram_logo_2016.svg.png" alt="Instagram logo"/>
  </a>

  <!--link 4-->
  <a href="#" target="_blank"> <!--discord link-->
    <img class="logohover" src="https://cdn3.iconfinder.com/data/icons/popular-services-brands-vol-2/512/discord-512.png" alt="Discord logo"/>
  </a>

</div>

<br/><!--line break for space-->
<br/><!--line break for space-->

<!--youtube video with dividers above and below-->
<img src="https://www.pinclipart.com/picdir/big/41-411360_divider-clipart-chapter-divider-black-and-white-png.png" width="100%"/>
  <iframe width="100%" height="250" src="https://www.youtube.com/embed/9QraqUZib7Y" frameborder="0" allowfullscreen=""></iframe>
<img src="https://www.pinclipart.com/picdir/big/41-411360_divider-clipart-chapter-divider-black-and-white-png.png" width="100%"/>

<br/><!--line break for space-->
<br/><!--line break for space-->

<!--top 8 code-->
<!--top 8 header-->
<div class="top-eight">
  <div class="top-eight-header">
    <h2>My Death Note</h2>
  </div>

<!--person 1-->
  <div class="person">
    <a href="#"><!--profile link-->
    <p class="top-row"> </p></a><!--name-->
    <a href="#"><!--profile link-->
      <img src="https://www.pikpng.com/pngl/m/147-1474340_heart-creepy-sad-scribble-brokenheart-emo-aesthetic-aesthetic.png" alt="profile pictur"/><!--profile picture-->
    </a>
  </div>

<!--person 2-->
  <div class="person">
    <a href="#"><!--profile link-->
    <p class="top-row">‎ </p></a><!--name-->
    <a href="#"><!--profile link-->
      <img src="https://www.pikpng.com/pngl/m/147-1474340_heart-creepy-sad-scribble-brokenheart-emo-aesthetic-aesthetic.png" alt="profile pictur"/><!--profile picture-->
    </a>
  </div>

<!--person 3-->
  <div class="person">
    <a href="#"><!--profile link-->
    <p class="top-row"> ‎</p></a><!--name-->
    <a href="#"><!--profile link-->
      <img src="https://www.pikpng.com/pngl/m/147-1474340_heart-creepy-sad-scribble-brokenheart-emo-aesthetic-aesthetic.png" alt="profile picture"/><!--profile picture-->
    </a>
  </div>

<!--person 4-->
  <div class="person">
    <a href="#"><!--profile link-->
    <p class="top-row"> ‎</p></a><!--name-->
    <a href="#"><!--profile link-->
      <img src="https://www.pikpng.com/pngl/m/147-1474340_heart-creepy-sad-scribble-brokenheart-emo-aesthetic-aesthetic.png" alt="profile picture"/><!--profile picture-->
    </a>
  </div>

<!--person 5-->
  <div class="person">
    <a href="#"><!--profile link-->
    <p class="bot-row"> ‎</p></a><!--name-->
    <a href="#"><!--profile link-->
      <img src="https://www.pikpng.com/pngl/m/147-1474340_heart-creepy-sad-scribble-brokenheart-emo-aesthetic-aesthetic.png" alt="profile picture"/><!--profile picture-->
    </a>
  </div>

<!--person 6-->
  <div class="person">
    <a href="#"><!--profile link-->
    <p class="bot-row"> ‎</p></a><!--name-->
    <a href="#"><!--profile link-->
      <img src="https://www.pikpng.com/pngl/m/147-1474340_heart-creepy-sad-scribble-brokenheart-emo-aesthetic-aesthetic.png" alt="profile picture"/><!--profile picture-->
    </a>
  </div>

<!--person 7-->
  <div class="person">
    <a href="#"><!--profile link-->
    <p class="bot-row"> ‎</p></a><!--name-->
    <a href="#"><!--profile link-->
      <img src="https://www.pikpng.com/pngl/m/147-1474340_heart-creepy-sad-scribble-brokenheart-emo-aesthetic-aesthetic.png" alt="profile picture"/><!--profile picture-->
    </a>
  </div>

<!--person 8-->
  <div class="person">
    <a href="#"><!--profile link-->
    <p class="bot-row"> ‎</p></a><!--name-->
    <a href="#"><!--profile link-->
      <img src="https://www.pikpng.com/pngl/m/147-1474340_heart-creepy-sad-scribble-brokenheart-emo-aesthetic-aesthetic.png" alt="profile picture"/><!--profile picture-->
    </a>
  </div>

</div>

<!-- custom cursor code -->
<style>* {cursor: url(https://ani.cursors-4u.net/symbols/sym-8/sym734.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2013/02/12/upside-down-cross-orange.html" target="_blank" title="Upside Down Cross - Orange"><img src="https://cur.cursors-4u.net/cursor.png" alt="Upside Down Cross - Orange" style="position:absolute; top: 0px; right: 0px;"/></a>


<!-- REMOVE ALL OF THIS TEXT UNTIL THE CODE STARTS
***************************************
Code that I put in "Music"
***************************************-->


<!--heading for music section with an image in the background-->
<div class="interest-heading" style="width:100%; height:60px; background-image: url(https://cdn.discordapp.com/attachments/753067128583618600/802246948979081226/ezgif.com-crop3.gif); vertical-align: middle; text-align: center; position: relative;">
  <h1 style="color:#fff; font-family: 'Courier New', monospace; top: 50%; left: 50%; position:absolute; transform: translate(-50%, -50%); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">MUSIC</h1>
</div>

<img src="https://cdn.discordapp.com/attachments/753067128583618600/801266370188017664/unknown.png" style="width:100%; border-radius: 15px, 15px, 0px, 0px;"/> <!--custom image for playlist 1-->
<iframe src="https://open.spotify.com/embed/playlist/7M1naXEXSel6dRnLJ8hxdk" width="300" height="200" frameborder="0"></iframe> <!--playlist 1 embed-->
<img src="https://cdn.discordapp.com/attachments/753067128583618600/801267699862208532/unknown.png" style="width:100%; border-radius: 15px, 15px, 0px, 0px;"/> <!--custom image for playlist 2-->
<iframe src="https://open.spotify.com/embed/playlist/4jl7EiHxJeIKjBzsPVicK8" width="300" height="200" frameborder="0"></iframe> <!--playlist 2 embed-->

<!--heading for concerts section with an image background-->
<div class="interest-heading" style="width:100%; height:60px; background-image: url(https://cdn.discordapp.com/attachments/753067128583618600/802379263848349726/ezgif.com-crop6.gif); vertical-align: middle; text-align: center; position: relative;">
  <h1 style="color:#fff; font-family: 'Courier New', monospace; top: 50%; left: 50%; position:absolute; transform: translate(-50%, -50%); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">CONCERTS</h1>
</div>

<div class="scroll-box" style="height:200px;border:1px;overflow:auto;"> <!--setting up scroll box with a list inside it-->
  <h1 class="list-heading">Been To</h1> <!--list title-->
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>
<h1 class="list-heading">Want To Go To</h1> <!--list title-->
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>
</div>

<!-- REMOVE ALL OF THIS TEXT UNTIL THE CODE STARTS
***************************************
Code that I put in "Movies"
***************************************-->

<!--heading for games section with an image in the background-->
<div class="interest-heading" style="width:100%; height:60px; background-image: url(https://cdn.discordapp.com/attachments/753067128583618600/802246269924933632/ezgif.com-crop2.gif); vertical-align: middle; text-align: center; position: relative;">
  <h1 style="color:#fff; font-family: 'Courier New', monospace; top: 50%; left: 50%; position:absolute; transform: translate(-50%, -50%); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">GAMES</h1>
</div>

<div class="scroll-box" style="height:200px;border:1px;overflow:auto;"> <!--setting up scroll box with a list inside it-->
  <h1 class="list-heading">PC</h1> <!--list title-->
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>
  <h1 class="list-heading">Nintendo Switch</h1> <!--list title-->
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>
  <h1 class="list-heading">Xbox</h1> <!--list title-->
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>
  <h1 class="list-heading">Other</h1> <!--list title-->
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>
</div>


<!-- REMOVE ALL OF THIS TEXT UNTIL THE CODE STARTS
***************************************
Code that I put in "Television"
***************************************-->


<!--heading for tv & movies section with an image in the background-->
<div class="interest-heading" style="width:100%; height:60px; background-image: url(https://cdn.discordapp.com/attachments/753067128583618600/801967693834092594/ezgif.com-resize.gif); vertical-align: middle; text-align: center; position: relative;">
  <h1 style="color:#fff; font-family: 'Courier New', monospace; top: 50%; left: 50%; position:absolute; transform: translate(-50%, -50%); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">TV &amp; MOVIES</h1> 
</div>

<div class="scroll-box" style="height:200px;border:1px;overflow:auto;"> <!--setting up scroll box with a list inside it-->
  <h1 class="list-heading">TV</h1> <!--list title-->
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>
  <h1 class="list-heading">Movies</h1> <!--list title-->
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>
</div>


<!-- REMOVE ALL OF THIS TEXT UNTIL THE CODE STARTS
***************************************
Code that I put in "Books"
***************************************-->


<!--heading for books section with an image in the background-->
<div class="interest-heading" style="width:100%; height:60px; background-image: url(https://cdn.discordapp.com/attachments/753067128583618600/802377431600201728/ezgif.com-crop4.gif); vertical-align: middle; text-align: center; position: relative;">
  <h1 style="color:#fff; font-family: 'Courier New', monospace; top: 50%; left: 50%; position:absolute; transform: translate(-50%, -50%); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">BOOKS</h1>
</div>

<div class="scroll-box" style="height:200px;border:1px;overflow:auto;"> <!--setting up scroll box with a list inside it-->
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>
</div>


<!-- REMOVE ALL OF THIS TEXT UNTIL THE CODE STARTS
***************************************
Code that I put in "Heroes"
***************************************-->


<!--heading for other interests section with an image in the background-->
<div class="interest-heading" style="width:100%; height:60px; background-image: url(https://cdn.discordapp.com/attachments/753067128583618600/802378570080976936/ezgif.com-crop5.gif); vertical-align: middle; text-align: center; position: relative;">
  <h1 style="color:#fff; font-family: 'Courier New', monospace; top: 50%; left: 50%; position:absolute; transform: translate(-50%, -50%); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">OTHER INTERESTS</h1>
</div>

<div class="scroll-box" style="height:200px;border:1px;overflow:auto;"> <!--setting up scroll box with a list inside it-->
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>
</div>
--&gt;

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

>Azrael< xD	1622594342 Se ve increíble no se como se añada al perfil pero pronto lo averiguare soy nuevo en la pagina gracias por el código amigo Report Comment
Ghost	1621816320 I love this layout,but it wont let me change the youtube video.Everytime i do it just deletes it. Can you help me with this? Im new to coding. Report Comment Sorry for the late reply! So to change the video, find the video you want on youtube, click on the share button, and click on "embed" Then paste the code that it gives you in place of this line; So delete that line of code and paste in the code you get from youtube! (I would advise changing the width and height properties just to keep it even, but that should fix the issue! by CammysNotOkay; 1622316005; Report
Royce	1621732159 how exactly do i add it Report Comment Copy and paste the code into the "about me" section of your profile. There are other parts of the code which are meant to be pasted into different sections of your profile. If you scroll through the code, I tried to make it as obvious as possible about which parts go where! by CammysNotOkay; 1621794807; Report Thanks it looks great! by Royce; 1621795686; Report
Blackjack	1621410819 I love this! Thank you very much! Report Comment
Invader_TonyVanity	1620753866 how did you get it to be see through?i mean you can see your back round through your profile thingy how did you do that? Report Comment Sorry for late reply, but that would be these lines of code; main{ background: rgba(0, 0, 0, 0) !important; } This line gets rid of the white background behind your profile .profile { background:rgba(21, 23, 26, 0.95); } This line makes the background of your profile grey and semi see-through! If you want it a different colour, just google RGB colour picker, find the colour you want and change the values in the brackets. The final number is how see through it is, so I have it set at 95% transparency by CammysNotOkay; 1620941450; Report
AudreyCakes <3	1619570357 thank you so much this code is amazing xoxo Report Comment
Alishia	1617571828 Love it!! Report Comment
Katharsi	1617310820 thank you Report Comment
SamanthaMariex	1617152867 Thank youu Report Comment
𝓚𝓪𝔂𝓵𝓲𝓮	1617028091 Thank you :33 Report Comment
haru	1616715944 love it! thank you Report Comment
r3yn	1616697328 I love this, thank you! Report Comment
Vio<3	1616458241 I love this layout! It was really easy to use, and I literally have no idea what I'm doing lol Report Comment Glad you like it and managed to figure it out! by CammysNotOkay; 1616547518; Report
Brandon	1615749327 i love the look of this layout! Im brand new to this code stuff and im a little lost if you could nudge me in the right direction so i can customize my account it would greatly be appreciated! Report Comment sorry I didnt see this earlier, if you still need a hand, sned me a message and Ill help you out! by CammysNotOkay; 1615826348; Report
Jay ♠	1615187716 Thank you so much, I love this layout!! I cant figure out the social links yet though. Report Comment Hey, if youre still needing a hand, send me a message and ill help you out! by CammysNotOkay; 1615216122; Report
lex	1615185054 thank you this is so pretty Report Comment
Mak	1614975073 i love this !! Report Comment
Aspect	1614722644 neat Report Comment
aaliyah <3	1614703809 its awesome thank you ! Report Comment
Quid	1614623844 Thank you for this! I used it and I think it really cool. Report Comment Im glad you like it! Just as a reminder though there are some bits that are designed to be pasted into your interests boxes, and some bits need changed / removed to fit your profile e/g/ the youtube video on the page and the spotify playlists etc. If you need a hand with anything give me a message by CammysNotOkay; 1614623996; Report

Layout published by CammysNotOkay

Sad Boi Aesthetic

Description:

Preview:

Code:

Comments

Se ve increíble