my layout

Tags: layout, my layout
Description:

jst incase i wanna switch back
Code:

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

<!-- (c) Layout created by ☆らうら☆ (https://layouts.spacehey.com/layout?id=39807) -->

<style>
  /* === CONST === */
  :root {
    --headers: #0c1e94;
    --boxShadow: #6a7df7;
    --blurb_header: Dark;
    --text: #463ba8;
    --names: Darkblue;
    --links: Darkblue;
    --bgColor_pink: #efcfef;
    --lightBlue: #f0d1f1;
    --font-family: "MS Gothic";
    --borderBoxShadow: #4e23cd48;

    --topic1: "interests";
    --topic2: "music";
    --topic3: "movies";
    --topic4: "trinkets";
    --topic5: "manga";
    --topic6: "videogames";
  }

  /* headings*/
  h1,
  h5 {
    color: var(--headers) !important;
  }

  /* color of links */
  a {
    color: var(--links) !important;
  }

  /* color of text */
  p,
  h2,
  .count {
    color: #1d184a;
  }

  /* color of names, and friends counter */
  .friends a p {
    color: var(--names);
  }

  /* color of search */
  nav label {
    color: var(--links);
  }

  /* aboutme & want2meet headings */
  .section h4 {
    color: var(--headers);
  }

  /* where the last login and status appears */
  .details p:last-child {
    color: var(--text);
  }

  body {
    background: linear-gradient(
        0deg,
        rgba(0, 0,0, 0),
        rgba(0, 0, 0, 0)
      ),
      url("https://files.catbox.moe/5f3pq8.gif");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    font-family: var(--font-family);
    font-size: 17px;
    
  }

  /* === GENERAL === */

  .container {
    width: 70%;
  }

  .profile .contact .heading,
  .profile .table-section .heading,
  .profile .friends .heading,
  .profile .blurbs .heading,
  .blog-preview h4 {
    padding: 10px;
    padding-left: 12px;
    background-color: #8db3f0;
    box-shadow: inset 0px 0px 0px 4px var(--boxShadow),
      inset 0px 0px 0px 6px var(--headers);
    border-bottom: 2px solid var(--headers);
    color: var(--headers);
    font-weight: 400;
    background-image: url("");
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 12px;
    font-weight: 400;
    letter-spacing: 0.045em;
  }

  button:not(.logout-btn) {
    background: var(--lightblue);
    box-shadow: inset 2px 2px #8db3f0, 2px 2px #fdfdfd;
    color: var(--headers);
    font-size: 15px;
    font-weight: normal;
    text-shadow: var(--blue) 0px 2px 5px;
    border: 2px solid var(--lightblue);
    border-radius: 2px;
    padding: 4px;
  }

  /* === NAV === */

  nav {
    margin: 10px;
    text-align: center;
    border: 2px solid var(--headers);
    box-shadow: inset 0px 0px 0px 4px var(--boxShadow),
      inset 0px 0px 0px 6px var(--headers);
  }

  nav .top {
    background-color: #;
    box-shadow: inset 0px 0px 0px 4px var(--boxShadow),
      inset 0px 0px 0px 6px var(--headers);
  }

  nav .links {
    padding: 15px;
    background-color: white;
    box-shadow: inset 0px 0px 0px 4px var(--boxShadow),
      inset 0px 0px 0px 6px var(--headers);
  }

  nav .links a {
    font-size: 15px;
    padding: 7px;
    text-shadow: none;
  }

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

  /* === MAIN === */

  main {
    background: transparent;
    margin: 10px auto 10px auto;
  }

  .col.w-40.left h1 {
    margin-bottom: 0;
    background-image: url("https://files.catbox.moe/tultq9.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    padding: 5px 15px 15px 5px;
  }

  .profile h1 {
    padding-left: 5px;
    font-size: 22px;
  }

  .col.w-40.left .general-about p {
    margin: 0;
    font-weight: 500;
    color: var(--text);
  }

  /* === GENERAL === */

  .general-about {
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  .general-about .profile-pic {
    align-items: center;
    background: white;
    background-image: url("https://files.catbox.moe/obal0w.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 2px solid var(--headers);
    box-shadow: inset 0px 0px 0px 4px var(--boxShadow),
      inset 0px 0px 0px 6px var(--headers), 4px 4px var(--borderBoxShadow);
    display: flex;
    flex-direction: column;
    height: 230px;
    width: 100%;
    margin: 0px 0px 15px 0px;
  }

  .general-about .profile-pic img {
    height: 200px;
    margin: 60px 0px 0px 0px;
  }

  .general-about .details {
    width: 100%;
    padding: 20px;
    background-image: url("https://64.media.tumblr.com/c09d69a63205f28302ceac0da62bb346/tumblr_inline_n2598iWtSJ1qhwjx8.gif");
    height: fit-content;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 2px solid var(--headers);
    box-shadow: inset 0px 0px 0px 4px var(--boxShadow),
      inset 0px 0px 0px 6px var(--headers), 4px 4px var(--borderBoxShadow);
  }

  .general-about .details p {
    text-align: center;
    font-weight: bold !important;
  }

  /* === ONLINE === */

  .online {
    visibility: hidden;
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  .online img {
    content: url("https://64.media.tumblr.com/tumblr_ll7wpyHlj71qi6qow.gif");
    animation-name: none;
    visibility: visible;
  }

  /* === MOOD === */

  .mood {
    background-image: url("https://cdn.discordapp.com/attachments/1105620616113045525/1108330940066971759/odekake_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-color: none;
    border: 2px solid var(--headers);
    box-shadow: inset 0px 0px 0px 4px var(--boxShadow),
      inset 0px 0px 0px 6px var(--headers), 4px 4px var(--borderBoxShadow);
    margin: 10px auto;
    height: fit-content;
  }

  .mood p {
    color: var(--text);
    padding: 10px;
    text-align: center;
  }

  /* === CONTACT === */

  .contact {
    background: white;
    border: 2px solid var(--headers);
    box-shadow: inset 0px 0px 0px 4px var(--boxShadow),
      inset 0px 0px 0px 6px var(--headers), 4px 4px var(--borderBoxShadow);
  }

  .contact .inner {
    padding: 0 5px 0 5px;
  }

  .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://cdn.discordapp.com/attachments/836229177082118207/1105418079040712785/fav1.gif");
  }

  .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
    /* add to favorite */
    content: url("https://cdn.discordapp.com/attachments/836229177082118207/1105418079397220414/fav2.gif");
  }

  .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
    /* send a message */
    content: url("https://cdn.discordapp.com/attachments/836229177082118207/1105418079762128966/fav3.gif");
  }

  .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
    /* foward to friend*/
    content: url("https://cdn.discordapp.com/attachments/836229177082118207/1105418080118648913/fav4.gif");
  }

  .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
    /* instant message */
    content: url("https://cdn.discordapp.com/attachments/836229177082118207/1105418080475156600/fav5.gif");
  }

  .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
    /* block user */
    content: url("https://cdn.discordapp.com/attachments/836229177082118207/1105418080890396702/fav6.gif");
  }

  .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
    /* add 2 group  */
    content: url("https://cdn.discordapp.com/attachments/836229177082118207/1105418081234333738/fav7.gif");
  }

  .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
    /* report */
    content: url("https://cdn.discordapp.com/attachments/836229177082118207/1105418081544704101/fav8.gif");
  }

  .contact:after {
    content: "";
    white-space: pre-wrap;
    display: block;
    height: 100px;
    background-image: url("https://collection.ju.mp/assets/images/gallery18/af2b537c.gif?v=0236594d");
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
  }

  /* === URL === */

  .url-info {
    background-image: url("https://64.media.tumblr.com/7947e6fea98ec83c53f4bdc963935a45/tumblr_inline_mns3t3K5Fr1qz4rgp.gif");
    background-color: white;
    border: 2px solid var(--headers);
    box-shadow: inset 0px 0px 0px 4px var(--boxShadow),
      inset 0px 0px 0px 6px var(--headers), 4px 4px var(--borderBoxShadow);
  }

  .url-info p,
  .profile-info .inner {
    color: var(--text);
    text-align: center;
    padding: 10px;
  }

  /* === INFO === */

  .profile-info {
    border: 2px solid var(--headers);
    box-shadow: inset 0px 0px 0px 4px var(--boxShadow),
      inset 0px 0px 0px 6px var(--headers), 4px 4px var(--borderBoxShadow);
    background-image: url("https://cdn.discordapp.com/attachments/1105620616113045525/1108330940066971759/odekake_bg.png");
    background-color: white;
    background-repeat: no-repeat;
    background-size: cover;
  }

  /* === BLOG ===*/

  .blog-preview h4 {
    margin: 0;
  }

  .blog-preview {
    border: 2px solid var(--headers);
    box-shadow: inset 0px 0px 0px 4px var(--boxShadow),
      inset 0px 0px 0px 6px var(--headers), 4px 4px var(--borderBoxShadow);
    background: white;
  }

  .blog-preview p {
    padding: 15px;
    color: var(--text);
    font-weight: 500;
  }

  /* === INTERESTS === */

  .profile .table-section {
    border: 2px solid var(--headers);
    box-shadow: inset 0px 0px 0px 4px var(--boxShadow),
      inset 0px 0px 0px 6px var(--headers), 4px 4px var(--borderBoxShadow);
    background: white;
  }

  .profile .table-section .inner {
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 6px;
  }

  .details-table td {
    background: none;
    padding: 1px 2px;
  }

  .details-table {
    background: url("https://64.media.tumblr.com/407999624c15c7579d0a70e6a53340ca/tumblr_inline_n25c98JaPJ1qhwjx8.png");
  }

  .details-table td:first-child {
    background: url("");
    background-repeat: no-repeat;
    background-size: contain;
  }

  .details-table tr {
    color: var(--text);
    font-size: 15px;
  }

  .table-section:not(:last-child) .details-table tr td:first-child p {
    color: transparent !important;
    text-shadow: none !important;
    letter-spacing: -100px;
  }

  .details-table tr td:first-child p::after {
    color: var(--headers) !important;
    letter-spacing: normal !important;
    filter: brightness(95%) !important;
  }

  .table-section:not(:last-child)
    .details-table
    tr:nth-child(1)
    td:first-child
    p::after {
    content: var(--topic1);
  }

  .table-section:not(:last-child)
    .details-table
    tr:nth-child(2)
    td:first-child
    p::after {
    content: var(--topic2);
  }

  .table-section:not(:last-child)
    .details-table
    tr:nth-child(3)
    td:first-child
    p::after {
    content: var(--topic3);
  }

  .table-section:not(:last-child)
    .details-table
    tr:nth-child(4)
    td:first-child
    p::after {
    content: var(--topic4);
  }

  .table-section:not(:last-child)
    .details-table
    tr:nth-child(5)
    td:first-child
    p::after {
    content: var(--topic5);
  }

  .table-section:not(:last-child)
    .details-table
    tr:nth-child(6)
    td:first-child
    p::after {
    content: var(--topic6);
  }

  /* === BLURBS === */

  .blurbs {
    background: white;
    border: 2px solid var(--headers);
    box-shadow: inset 0px 0px 0px 4px var(--boxShadow),
      inset 0px 0px 0px 6px var(--headers), 4px 4px var(--borderBoxShadow);
    color: var(--text);

  }

  .profile .blurbs .section h4 {
    color: var(--blurb_header);
    padding: 0px;
    font-weight: 800;
  }

  .profile .blurbs .inner {
    padding: 15px;
  }

  /* === FRIENDS === */

  .friends {
    border: 2px solid var(--headers);
    box-shadow: inset 0px 0px 0px 4px var(--boxShadow),
      inset 0px 0px 0px 6px var(--headers), 4px 4px var(--borderBoxShadow);
    background: white;
    margin-bottom: 20px;
  }

  .friends .heading a.more {
    margin-right: 75px;
  }

  .friends .friends-grid .person:after {
    content: "";
    white-space: pre-wrap;
    display: block;
    height: 15px;
    background-image: url("https://files.catbox.moe/7cr25o.gif");
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
  }

  div.friends:nth-of-type(3)
    > div.inner:nth-child(2)
    > p:first-child
    > b:first-child {
    color: black;
  }

  .profile .friends .inner {
    background: white;
    height: 350px;
    overflow: auto;
  }

  .friends .inner .comments-table tr td .report a img {
    image-rendering: pixelated;
    font-size: 0;
  }

  .friends .inner .comments-table tr td .report a img:before {
    font-size: 15px;
    display: block;
  }

  .friends .inner .comments-table tr td .report a:before {
    content: url("https://cdn.discordapp.com/attachments/1105620616113045525/1133687379681607760/icon_trash_can.png");
  }

  /* === COMMENTS === */

  #comments .inner {
    height: 350px;
    overflow: auto;
    background-image: url("https://i.pinimg.com/564x/09/f4/ea/09f4ea519b9877c8fa9dd218ddf3a6e3.jpg");
  }

  #comments .inner:before {
    content: "";
    white-space: pre-wrap;
    display: block;
    height: 100px;
    background-image: url("https://media.tenor.com/S7QZDUJ94NsAAAAi/menhera-ding-dong.gif");
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
  }

  #comments {
    margin: 20px 0;
    padding-left: -4px;
  }

  .comments-table td {
    padding: 5px 0px 5px 0px;
  }

  .comments-table td:first-child {
    background: white;
    max-width: 30%;
    border: none;
  }

  .comments-table td:last-child {
    background: white;
    font-size: 15px;
    border: none;
    max-width: 75%;
  }

  .comments-table td:last-child a {
    font-size: 15px;
  }

  /* === FOOTER === */

  footer {
    border: 2px solid var(--headers);
    box-shadow: inset 0px 0px 0px 4px var(--boxShadow),
      inset 0px 0px 0px 6px var(--headers), 4px 4px var(--borderBoxShadow);
    background: white;
    margin-bottom: 20px;
  }

  footer:before {
    content: "";
    white-space: pre-wrap;
    display: block;
    height: 100px;
    background-image: url("https://media.tenor.com/QAWhOCpVrdQAAAAj/jade-harley-homestuck.gif");
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
  }

  footer p {
    color: var(--text);
  }
</style>

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

<style>

.logo {
   content: url(https://cdn.discordapp.com/attachments/872338920594079777/1107079220913508442/ezgif-5-787bfee246.png);
}

/*TO CHANGE THE SIZE: change width and height to your liking*/
  nav .top .left .logo {
    width: 260px;
    height: 77px;
}

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