PINK WEB!

Tags: pink, webcore, old web, windows 95, cute

Description:

a very pink webcore layout inspired by windows 95! this is technically a stepping stone towards a layout im trying to achieve but i like how it looks right now so i decided to publish it! enjoy!! <3

Preview:

click on the image for a larger preview

Code:

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

/* !! graphics used from animatedglittergraphics-n-more.tumblr.com !! */

/* === CONST === */

:root {
  --headers: aliceblue;
  --blurb_header: DarkTurquoise;
  --text: MediumVioletRed;
  --names: aliceblue;
  --links: DarkViolet;
  --background_color_pink: Pink;
  --background_image: url("hhttps://cdn.discordapp.com/attachments/836229177082118207/1105407488876085289/a030a3baf60e43735b793db5fe313344.png");
  --header_gradient: url(https://i.imgur.com/CKX2NUO.png),
    linear-gradient(to right, deeppink, pink);
  --font-family: "MS Gothic";
  --curve: 0px;
  --borders: 2px solid pink;

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

h1,
h5 {
  color: var(--headers) !important;
} /* headings*/
a {
  color: var(--links) !important;
} /* color of links */
p,
h2,
.count {
  color: var(--text);
} /* color of text */
.friends a p {
  color: var(--names);
} /* color of names, and friends counter */
nav label {
  color: var(--links);
} /* color of search */
.section h4 {
  color: var(--headers);
} /* aboutme & want2meet headings */
.details p:last-child {
  color: var(--text);
} /* where the last login and status appears */

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;
}

/* === NAV === */

nav {
  margin: 10px;
  text-align: center;
}

nav .links:before {
}

nav .top {
	background-color: deeppink;
  border-style: outset outset none outset;
  border-width: 2px;
  border-color: #fff #000 #000 #fff;
}

nav .links {
  background-image: url('https://cdn.discordapp.com/attachments/836229177082118207/1105418112607731803/tumblr_f28635dd9ee95e0d07266dab6d73871c_f28a4f81_250.gif');
  background-color: white;
  border-style: outset;
  border-width: 2px;
  border-color: #fff #000 #000 #fff;
}

nav .links a {
  font-size: 10px;
  color: #000;
  padding: 7px;
  font-weight: 500;
  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 {
  border-style: outset outset none outset;
  border-width: 2px;
  border-color: #fff #000 #000 #fff;
  background-image: var(--header_gradient);
  background-repeat: no-repeat;
  background-position: right;
  margin-bottom: 0;
  font-family: "Courier New", cursive;
}

.profile h1 {
  padding-left: 5px;
  font-family: Libre Franklin;
  font-size: 12px;
}

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

/* === GENERAL === */

.general-about {
  height: 178px;
  border-style: groove outset outset outset;
  border-width: 2px;
  border-color: #fff #000 #000 #fff;
  background: white;
  margin-top: 0;
}

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

.general-about .details {
  margin-top: 15px;
}

/* === ONLINE === */

.online {
  visibility: hidden;
}

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

/* === MOOD === */

.mood {
  border-style: outset;
  border-width: 2px;
  border-color: #fff #000 #000 #fff;
  background: white;
  margin: 10px auto;
}

.mood:before {
  display: block;
  padding-left: 5px;
  margin: 1px;
  border-bottom-style: groove;
  background-image: url(https://i.imgur.com/CKX2NUO.png),
    linear-gradient(to right, DarkTurquoise, lightcyan);
  background-repeat: no-repeat;
  background-position: right;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  content: "Mood";
}

.mood p {
  color: var(--text);
  padding: 5px 5px 0px 5px;
}

/* === CONTACT === */

.profile .contact .heading,
.profile .table-section .heading,
.home-actions .heading.contact .heading {
  border-bottom-style: groove;
  background-image: var(--header_gradient);
  background-repeat: no-repeat;
  background-position: right;
  padding: 0px 6px;
  margin: 1px;
}

.profile .contact,
.profile .url-info,
.profile .table-section,
.home-actions {
  border-style: outset;
  border-width: 2px;
  border-color: #fff #000 #000 #fff;
}

.contact {
  background: white;
}

.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");
}

/* === URL === */

.url-info {
  background-image: url('https://cdn.discordapp.com/attachments/836229177082118207/1105418112607731803/tumblr_f28635dd9ee95e0d07266dab6d73871c_f28a4f81_250.gif');
  background-color: white;
}

.url-info p {
  color: var(--text);
  text-align: center;
}

/* === INFO/BLOG === */

.profile-info {
  border-style: outset;
  border-width: 2px;
  border-color: #fff #000 #000 #fff;
  background: white;
}

.blog-preview {
  border-style: outset;
  border-width: 2px;
  border-color: #fff #000 #000 #fff;
  background: white;
}

.blog-preview h4 {
  color: var(--headers);
  border-bottom-style: groove;
  background-image: var(--header_gradient);
  background-repeat: no-repeat;
  background-position: right;
  padding-left: 5px;
  margin: 1px;
}

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

/* === INTERESTS === */

.table-section {
  background: white;
}

.details-table td {
  background: pink;  
  border-bottom-style: groove;
  padding: 1px 2px;
}

.details-table {
  background: white;
}

.details-table td:first-child {
  background: deeppink;
}

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

.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-style: outset;
  border-width: 2px;
  border-color: #fff #000 #000 #fff;
  color: var(--text);
}

.profile .blurbs .heading {
  color: var(--headers);
  border-bottom-style: groove;
  background-image: var(--header_gradient);
  background-repeat: no-repeat;
  background-position: right;
  padding: 0 0 0 5px;
}

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

.profile .blurbs .inner {
  padding: 2 0;
}

/* === FRIENDS === */

.friends {
  border-style: outset;
  border-width: 2px;
  border-color: #fff #000 #000 #fff;
  background: white;
  margin-bottom: 20px;
}

.friends .friends-grid .person:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 15px;
  background-image: url('https://cdn.discordapp.com/attachments/836229177082118207/1105602162937045065/tumblr_226ebb467ec73fa303a5489e9f9926d2_45e93011_1280.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto;
}

.profile .friends .heading {
  color: var(--headers);
  border-bottom-style: groove;
  background-image: url(https://i.imgur.com/CKX2NUO.png),
    linear-gradient(to right, DarkTurquoise, lightcyan);
  background-repeat: no-repeat;
  background-position: right;
}

.profile .friends .heading a {
  padding-right: 50px;
}

div.friends:nth-of-type(3)
  &gt; div.inner:nth-child(2)
  &gt; p:first-child
  &gt; b:first-child {
  color: #000;
}

.profile .friends .inner {
  background: white;
}

/* === COMMENTS === */

#comments .inner {
  height: 500px;
  overflow: auto;
}

#comments &gt; div.inner:nth-child(2) &gt; p:first-child &gt; b:first-child {
  color: #000;
}

.comments-table td {
  background-color: pink;
  border-style: none groove groove none;
  border-width: 3px;
}

.comments-table td img {
  background-color: deeppink;
  border-style: dashed;
  border-width: 2px;
  border-color: white;
}

.comments-table td:first-child {
  background-color: deeppink;
}

.comments-table td * {
  color: #000;
}

/* === FOOTER === */

footer {
  border-style: outset;
  border-width: 2px;
  border-color: #fff #000 #000 #fff;
  background: white;
  margin-bottom: 20px;
}

footer p {
  color: var(--text);
}

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 34 comments ( View all | Add Comment )

baitbiz	1713924290 using :3 Report Comment
spottydogs	1709036067 How do I remove the pink tint on the background image? Report Comment
Lacey!!!	1704320449 will use!!! Report Comment
❥momo	1702906478 using Report Comment
★ ; . Asta 🫧	1697988888 Will use !! Report Comment
KAngel ( ꒰ა ♡ ໒꒱ )	1694337349 Using! Report Comment
Isaaa	1690606177 Using! :) Report Comment
Venus	1690146491 using:3 Report Comment
Reficul	1690081511 Using Report Comment
chuumeow (yuki)	1689842886 Using <33 Report Comment
tj	1689403129 defo using !! Report Comment
angelina	1688829157 so effing cute! gonna use <3 Report Comment
José Michael Nelly	1688766106 TYSFM!!! >_< using ♡ Report Comment
Fafa	1688430549 super cute! gonna try <3 Report Comment
JACK/JAMES!!!	1687067583 using Report Comment
AST3R	1687037581 ADORBZ!! DEF USIN!! Report Comment
heartkwai	1686697594 SO CUTE!!! using <3 Report Comment
marsunny303	1686665972 OMGG I LOVE THIS ONE SM USINGGG XO <33 Report Comment
syd	1686640899 ARE USING Report Comment
toby	1685926721 so super cute i love it Report Comment