PINK WEB 2.0 !!

Tags: pink, webcore, needy streamer overload, old web, cute, decome, 2000s

Description:

an upgrade of my previous pink web layout, inspired by and using graphics from Needy Streamer Overload!

Preview:

click on the image for a larger preview

Code:

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

<style>
  /* === CONST === */
  :root {
    --headers: #4d23cd;
    --boxShadow: #90f3e1;
    --blurb_header: DarkTurquoise;
    --text: MediumVioletRed;
    --names: DarkViolet;
    --links: DarkViolet;
    --bgColor_pink: #efcfef;
    --lightPink: #f0d1f1;
    --font-family: "MS Gothic";
    --borderBoxShadow: #4e23cd48;

    --topic1: "general";
    --topic2: "music";
    --topic3: "movies";
    --topic4: "tv";
    --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: var(--text);
  }

  /* 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(255, 0, 150, 0.3),
        rgba(245, 40, 145, 0.4)
      ),
      url("https://cdn.discordapp.com/attachments/836229177082118207/1105479697971806378/bg.gif");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    font-family: var(--font-family);
    font-size: 17px;
    cursor: url(https://cur.cursors-4u.net/smilies/smi-3/smi268.ani),
      url(https://cur.cursors-4u.net/smilies/smi-3/smi268.gif), auto !important;
  }

  /* === GENERAL === */

  .container {
    width: 60%;
  }

  .profile .contact .heading,
  .profile .table-section .heading,
  .profile .friends .heading,
  .profile .blurbs .heading,
  .blog-preview h4 {
    padding: 10px;
    padding-left: 12px;
    background-color: var(--bgColor_pink);
    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("https://media.discordapp.net/attachments/1105620616113045525/1106511709008560158/image.png");
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 12px;
    font-weight: 400;
    letter-spacing: 0.045em;
  }

  button:not(.logout-btn) {
    background: var(--lightPink);
    box-shadow: inset 2px 2px #815cda, 2px 2px #fdfdfd;
    color: var(--headers);
    font-size: 15px;
    font-weight: normal;
    text-shadow: var(--lightPink) 0px 2px 5px;
    border: 2px solid var(--lightPink);
    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: var(--bgColor_pink);
    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: deeppink;
  }

  /* === MAIN === */

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

  .col.w-40.left h1 {
    margin-bottom: 0;
    background-image: url("https://media.discordapp.net/attachments/1105620616113045525/1108331673155809330/netachip_001.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://media.discordapp.net/attachments/1105620616113045525/1108330939735605319/bg_stream.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://cdn.discordapp.com/attachments/1105620616113045525/1108331673759780934/result_bg_tile.png");
    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://cdn.discordapp.com/attachments/1105620616113045525/1124337724682412082/icon_desktop_yapoo.png");
    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://cdn.discordapp.com/attachments/1105620616113045525/1108285078657826926/tumblr-f33c1c0cb4d8a7a326b821d16d89e246-65c98021-250.gif");
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
  }

  /* === URL === */

  .url-info {
    background-image: url("https://cdn.discordapp.com/attachments/1105620616113045525/1108330940066971759/odekake_bg.png");
    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://cdn.discordapp.com/attachments/1105620616113045525/1124337723935826041/JINEBG.png");
  }

  .details-table td:first-child {
    background: url("https://cdn.discordapp.com/attachments/1105620616113045525/1108331673155809330/netachip_001.png");
    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://cdn.discordapp.com/attachments/1105620616113045525/1108285077722497054/tumblr-942c13a721302cff61906d3eaebf2c23-98abd7ff-250-gif.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://cdn.discordapp.com/attachments/1105620616113045525/1108331672316940358/internet_base.png");
  }

  #comments .inner:before {
    content: "";
    white-space: pre-wrap;
    display: block;
    height: 100px;
    background-image: url("https://cdn.discordapp.com/attachments/836229177082118207/1105418078327672902/mail.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://cdn.discordapp.com/attachments/836229177082118207/1105418078646444052/bai.gif");
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
  }

  footer p {
    color: var(--text);
  }
</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 20 of 65 comments ( View all | Add Comment )

Venus:3	1721359912 USING Report Comment
gelly	1719507227 How do you use the images? Nothing is showing up. Am I doing something wrong? Report Comment nvm, the images presented in the code are no longer existing. :') by gelly; 1719519114; Report
orange juice	1718493252 usando^^ Report Comment
BIBI ☆	1716865095 HII so the background and online are not working for some reason :((( Report Comment
Plushhhiiixz	1715297843 USING Report Comment
seth ⟡	1711614774 USING !!! Report Comment
SUSHI!!	1710886686 SOOO CUTEE!!! defz using!!! Report Comment
Lila	1707719732 usingg! Report Comment
zeriix	1707644010 using :D Report Comment
୨ৎvince˙⋆.˚ ᡣ𐭩	1707324629 this sososo cuteee, using :3 Report Comment
MIMA X3	1706650571 USANDOO Report Comment
lauren ౨ৎ	1705451177 usingggg Report Comment
❜ Fuyu (Atsushi) 🍰♡🍮	1704435516 using!! Report Comment
wren	1701230869 using :3 Report Comment
Hana 🐬.ೃ࿔	1700889583 using! Report Comment
Azrielfiend	1700408428 using! thank you so much! Report Comment
toby / sunny 🍀	1699676066 using ^_^ Report Comment
valen	1699465054 using:3 Report Comment
Yukki	1699291293 Using! Report Comment
tehadorable	1699201221 omg this looks so pretty im definitely using!!! Report Comment