☆ pink sunset ☆

Tags: pink, purple, dusk, sunset, nature, clouds, soft, cute, simple

Description:

a dusty pink sunset theme! custom favicons and snowflakes included, but feel free to change them as you like! for all lovers of soft pink and earthy aesthetics <3

Preview:

click on the image for a larger preview

Code:

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

<!-- layout by laury! ☆ https://spacehey.com/atelopxobia -->

<style>
  .general-about .profile-pic img {
    border-radius: 10px;
    border: 2px solid #6b2b41;
    box-shadow: calc((400px + (25px * 2)) * 0.01)
      calc((400px + (25px * 2)) * 0.01) #6b2b41;
  }

  body {
    background-image: url("https://images.unsplash.com/photo-1517210122415-b0c70b2a09bf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAulBMVEUAAACQJE+NI02MI02OI06OI06NI02NI02MI02KIkyPI06MIk2NI02PI06NI02OI06NI02MIk2MIk2OI06IIkuNI02NI02MI02MIk2UJVGOI06OI06KIkyOI07qrcXpqcPmmrmWJVLfgqeSJFDbb5rUVYjnn7zqrMW/L2npqMKjKFnaapfpp8HZaJXnor64LWWqKl3opcDklbWkKFrMM3Dcd5/noLzkk7POO3a4LmXghqrSTIKcJ1b///8ny32oAAAAHXRSTlMADneV/pCMgXppX0g7HoeWSbL5fCS0eGVLGuqTKhsmRH8AAAABYktHRD3QbVFZAAAACXBIWXMAAADIAAAAyABj+uetAAAAB3RJTUUH5wIbFB43TZ6TGAAAAAFvck5UAc+id5oAAACISURBVDjL7dFHDgJBDERRD9AMOWeomiHnnMP9z8UJ7F4j8ddPJVmWIBGIGZC0QYpw9gKJtAcQoQcQGQ8gsh4QIWcDxsO8DTgaF2zACYo24LRkgBhAWV2YkfNFRb9iuVpzs61qoLbb1w88ns4NBbiLk+b1dn+0tIm2SOf5en+61kvDXn8g/36+L5CvESee78XwAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIzLTAyLTI3VDIwOjMwOjU1KzAwOjAwCsEmngAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMy0wMi0yN1QyMDozMDo1NSswMDowMHucniIAAAAASUVORK5CYII=),
      auto;
  }

  .blog-preview {
    align-items: center;
    background-color: #fffaf3;
    box-shadow: calc((400px + (25px * 2)) * 0.01)
      calc((400px + (25px * 2)) * 0.01) #f6e3e3;
    border: none;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    margin: 10px 0 10px 0;
    padding: 0.5em;
  }

  .blurbs {
    background-color: #fffaf3;
    box-shadow: calc((400px + (25px * 2)) * 0.01)
      calc((400px + (25px * 2)) * 0.01) #f6e3e3;
    border: none;
    border-radius: 10px;
    margin: 10px 0 10px 0;
    padding: 0.5em;
  }

  .comments-table td {
    background-color: #e2a7bb;
    border-radius: 10px;
  }

  .comments-table td img {
    background-color: #e2a7bb;
    border: 1px solid #e2a7bb;
    border-radius: 10px;
  }

  .comments-table td:first-child {
    background-color: #6b2b41;
  }

  .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/1080109543171833856/tumblr_8b72a71d7cbc687b9cba20ca2930dd69_17880809_75.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/1080109542798528593/tumblr_5aed40443e4385be93f2ad6148757198_6cfe3f74_75.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/1080109543553503352/tumblr_75a6a3785e64031e70eb60f01ba6d95e_120c9605_75.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/1080109542085492787/tumblr_2d4e47cdf11f6d9ec6606524722f0806_d4ca9703_75.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/1080109540923674714/tumblr_e918ddf7ef7c014c8af588a80a6c8e1e_93f0cf14_75.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/1080109540546199612/tumblr_c1a9478616945fcc69ebdb29db24f049_1268ca8e_75.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/1080109542488162424/tumblr_4fbb79995c0412f0b9dccbe97d31ba49_f99bb602_75.gif");
  }
  .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
    /* report */
    content: url("https://cdn.discordapp.com/attachments/836229177082118207/1080109543910015057/tumblr_528a2a0f29a5864da2110272a5b6f78d_9a2b5c10_75.gif");
  }

  .online {
    visibility: hidden;
  }
  .online img {
    content: url("https://cdn.discordapp.com/attachments/836229177082118207/1079925030667964458/745450f7k2jp3ggh.gif");
    animation-name: none;
    visibility: visible;
  }

  .profile .blurbs .heading {
    background: #fffaf3;
    border-radius: 10px;
    color: #6b2b41;
  }

  .profile .blurbs .section h4 {
    background: #6b2b41;
    border-radius: 10px;
    color: #fffaf3;
    padding: 0.5em;
  }

  .profile .blurbs .section p {
    color: #6b2b41;
  }

  .profile .friends {
    background-color: #fffaf3;
    box-shadow: calc((400px + (25px * 2)) * 0.01)
      calc((400px + (25px * 2)) * 0.01) #f6e3e3;
    border: none;
    border-radius: 10px;
    padding: 0.5em;
    margin: 10px 0 10px 0;
  }

  .profile .friends .heading {
    background-color: #6b2b41;
    border: none;
    border-radius: 10px;
    color: #fffaf3;
    padding: 0.5em;
  }

  .profile .friends .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .profile .friends .person img:not(.icon) {
    border-radius: 10px;
  }

  .profile .friends .person p {
    color: #7ca7cb;
  }

  .profile .contact {
    background-color: #fffaf3;
    box-shadow: calc((400px + (25px * 2)) * 0.01)
      calc((400px + (25px * 2)) * 0.01) #f6e3e3;
    border: none;
    border-radius: 10px;
    padding: 0.5em;
  }

  .profile .contact .heading {
    background: #fffaf3;
    border: none;
    border-radius: 10px;
    color: #6b2b41;
    padding: 0.5em;
  }

  .profile .table-section {
    background-color: #fffaf3;
    box-shadow: calc((400px + (25px * 2)) * 0.01)
      calc((400px + (25px * 2)) * 0.01) #f6e3e3;
    border: none;
    border-radius: 10px;
    padding: 0.5em;
  }

  .profile .table-section .heading {
    background: #fffaf3;
    border: none;
    border-radius: 10px;
    color: #6b2b41;
    padding: 0.5em;
  }

  .profile .url-info {
    align-items: center;
    background-image: url("https://cdn.discordapp.com/attachments/836229177082118207/1079927270094942288/2964452pwpm0gbg42.jpg");
    border: 2px solid #fffaf3;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 0.5em;
  }

  DIV.url-info > P:nth-child(1) > B {
    color: #6b2b41;
  }

  .profile .mood {
    background-color: #fffaf3;
    box-shadow: calc((400px + (25px * 2)) * 0.01)
      calc((400px + (25px * 2)) * 0.01) #f6e3e3;
    border: none;
    border-radius: 10px;
    margin: 10px 0 10px 0;
    padding: 0.5em;
  }

  .profile-info {
    border: 2px solid #fffaf3;
    border-radius: 10px;
    padding: 0.5em;
  }

  .details-table td {
    background: #e2a7bb;
    border-radius: 5px;
  }

  .details-table td:first-child {
    background: #6b2b41;
  }

  .details-table td:first-child p {
    font-style: bold;
    color: #fffaf3;
  }

  .comment-replies {
    border: 5px solid white;

    border-radius: 10px;
    margin: 10px;
    padding: 0 5px;
  }

  a {
    color: #7ca7cb;
    text-decoration: underline;
    font-size: 10px;
  }

  aside {
    width: 30%;
    float: right;
  }

  button {
    border: none;
    border-radius: 10px;
    background-color: #6b2b41;
    color: #fffaf3;
    padding: 0.5em;
  }

  MAIN {
    background: rgba(226, 167, 187, 0.7);
    border-radius: 10px;
    padding: 1em;
    color: #6b2b41;
  }

  nav {
    margin-bottom: 10px;
  }

  nav .top {
    background-color: #6b2b41;
    border-radius: 10px 10px 0 0;
  }

  nav .top .right {
    color: #e2a7bb;
  }

  nav .links {
    background-color: #fffaf3;
    border-radius: 0 0 10px 10px;
    align-content: center;
  }

  nav .links a {
    color: #7ca7cb;
  }

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

  footer {
    background: rgba(226, 167, 187, 0.7);
    border-radius: 10px;
    color: #6b2b41 !important;
    text-decoration: underline !important;
  }
</style>

<div class="snowflakes">
  <div class="snowflake">☆</div>

  <div class="snowflake">*</div>

  <div class="snowflake">ﾟ</div>

  <div class="snowflake">✧</div>

  <div class="snowflake">♡</div>

  <div class="snowflake">⋆</div>

  <div class="snowflake">⭒</div>

  <div class="snowflake">✦</div>

  <div class="snowflake">⁎</div>

  <div class="snowflake">★</div>

  <div class="snowflake">✶</div>
</div>

<style>
  /*snowflakes*/
  .snowflake {
    font-size: 15px;
    font-family: Arial, sans-serif;
  }

  @-webkit-keyframes snowflakes-fall {
    0% {
      top: -10%;
    }
    100% {
      top: 100%;
    }
  }
  @-webkit-keyframes snowflakes-shake {
    0%,
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    50% {
      -webkit-transform: translateX(80px);
      transform: translateX(80px);
    }
  }
  @keyframes snowflakes-fall {
    0% {
      top: -10%;
    }
    100% {
      top: 100%;
    }
  }
  @keyframes snowflakes-shake {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(80px);
    }
  }
  .snowflake {
    position: fixed;
    top: -10%;
    z-index: 9999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    -webkit-animation-name: snowflakes-fall, snowflakes-shake;
    -webkit-animation-duration: 10s, 3s;
    -webkit-animation-timing-function: linear, ease-in-out;
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-play-state: running, running;
    animation-name: snowflakes-fall, snowflakes-shake;
    animation-duration: 10s, 3s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-play-state: running, running;
  }
  .snowflake:nth-of-type(0) {
    left: 1%;
    -webkit-animation-delay: 0s, 0s;
    animation-delay: 0s, 0s;
  }
  .snowflake:nth-of-type(1) {
    left: 10%;
    -webkit-animation-delay: 1s, 1s;
    animation-delay: 1s, 1s;
  }
  .snowflake:nth-of-type(2) {
    left: 20%;
    -webkit-animation-delay: 6s, 0.5s;
    animation-delay: 6s, 0.5s;
  }
  .snowflake:nth-of-type(3) {
    left: 30%;
    -webkit-animation-delay: 4s, 2s;
    animation-delay: 4s, 2s;
  }
  .snowflake:nth-of-type(4) {
    left: 40%;
    -webkit-animation-delay: 2s, 2s;
    animation-delay: 2s, 2s;
  }
  .snowflake:nth-of-type(5) {
    left: 50%;
    -webkit-animation-delay: 8s, 3s;
    animation-delay: 8s, 3s;
  }
  .snowflake:nth-of-type(6) {
    left: 60%;
    -webkit-animation-delay: 6s, 2s;
    animation-delay: 6s, 2s;
  }
  .snowflake:nth-of-type(7) {
    left: 70%;
    -webkit-animation-delay: 2.5s, 1s;
    animation-delay: 2.5s, 1s;
  }
  .snowflake:nth-of-type(8) {
    left: 80%;
    -webkit-animation-delay: 1s, 0s;
    animation-delay: 1s, 0s;
  }
  .snowflake:nth-of-type(9) {
    left: 90%;
    -webkit-animation-delay: 3s, 1.5s;
    animation-delay: 3s, 1.5s;
  }
  .snowflake:nth-of-type(10) {
    left: 25%;
    -webkit-animation-delay: 2s, 0s;
    animation-delay: 2s, 0s;
  }
  .snowflake:nth-of-type(11) {
    left: 65%;
    -webkit-animation-delay: 4s, 2.5s;
    animation-delay: 4s, 2.5s;
  }

  :root {
    --topic1: "general";
    --topic2: "music";
    --topic3: "movies";
    --topic4: "tv";
    --topic5: "manga";
    --topic6: "videogames";
  }

  .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(--links) !important;
    letter-spacing: normal !important;
    text-shadow: 2px 2px #fffaf3 !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);
  }
</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 14 of 14 comments ( View all | Add Comment )

ヾ(•̀ ヮ <)و	4 weeks ago using !! Report Comment
Aisha	4 weeks ago using thiss tyyy <3 Report Comment
Lush	2 months ago using!! Report Comment
𝜗𝜚⋆₊˚ aali ˚₊⋆𝜗𝜚	3 months ago using! Report Comment
galaxy star	1 year ago using! I know i'd adjust it to liking but amazing job!! <3 Report Comment
zahra ˗ˏˋ ★ˎˊ˗	1 year ago using (?) Report Comment
lovvebug	1 year ago using (?) Report Comment
Miloh	1 year ago Using Report Comment
ceegee	1 year ago Using! Report Comment
happy lil cloud	2 years ago using <3 Report Comment
Cross Sans	2 years ago Using, This is so adorable!! Report Comment
ayasdigitald1ary	2 years ago using it!!!! its SO cuuute :D Report Comment
dylickz ./ sanford	2 years ago this is soo cute! Report Comment thank you so much! <3 by ☆ LAURA ☆; 2 years ago; Report using!! this is so pretty ty! by bxbyfr; 2 years ago; Report This is too adorable, love it by Jennifer; 2 years ago; Report Using :-) by Bonnie; 2 years ago; Report