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

Ch3rry.ch3rry	1771972937 using ! Report Comment
Hanko	1769559904 using Report Comment
pinymuak	1769021935 It dosen´t work for me :( Report Comment
evil_xnijl	1768799218 using with modifs... epik. Report Comment
S0URBUGZZ	1766172115 usingg !! Report Comment
shelbii	1764556081 Using!! Report Comment
Baehanni	1763209711 Using! Tysmm Report Comment
mvsiclovrr	1759801057 idk if this is a stupid question/super hard, but can you make the squares black instead of white? Report Comment hit crtl + f, write "white" at the search bar and switch everything to "Black" instead by boêmio (hater #1 do minimalismo); 1760621728; Report
Eddy	1757601248 Using :3 Report Comment
＊•̩̩͙✩•̩̩͙˚ ꍏꂵꍟ꒒ꀤꍟ ˚•̩̩͙✩•̩̩͙˚＊	1749851680 Its not working for me :( if I could have help on what I'm potentially doing wrong, that would be cool! Anyways the layout is so cool!!11!!!1!!!111!!!1! Report Comment you need to add style tags at the start and end. the first you use <> and the second (at the very bottom) you use > by boêmio (hater #1 do minimalismo); 1758573153; Report
tomoko	1744342278 using :o) Report Comment
raincandie5	1742455471 using Report Comment
b13rdg-blog	1741122856 Using!! Report Comment
boêmio (hater #1 do minimalismo)	1735967553 using :p Report Comment
Lee ꉂ(ˊᗜˋ*)♡	1726923836 Using!!!! ꉂ(ˊᗜˋ*)♡ Report Comment
dani ⋆˙⟡	1724872924 using ! Report Comment
‧₊˚ ⋅ 💉 𓂃 Rainy .ᐟ.ᐟ ٩(^ᗜ^ )و ´-	1723373502 Using!! Report Comment
【♢ＰΛＬ】　（タヵで）	1723246539 ADORBZ!!!!!!!!!!!1 using Report Comment
Romiii ᯓ⭐	1718990424 using !!! Report Comment
sunday!! (autoplay!!)	1718768512 using!! Report Comment