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 48 comments ( View all | Add 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 (minimalism hater); 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 (minimalism hater); 1758573153; Report
tomoko	1744342278 using :o) Report Comment
raincandie5	1742455471 using Report Comment
b13rdg-blog	1741122856 Using!! Report Comment
boêmio (minimalism hater)	1735967553 using :p Report Comment
Lee ꉂ(ˊᗜˋ*)♡	1726923836 Using!!!! ꉂ(ˊᗜˋ*)♡ Report Comment
dani ⋆˙⟡	1724872924 using ! Report Comment
‧₊˚ ⋅ 💉 𓂃 Rainy .ᐟ.ᐟ ٩(^ᗜ^ )و ´-	1723373502 Using!! Report Comment
➪Ph0bos / Pluto ◡	1723246539 ADORBZ!!!!!!!!!!!1 using Report Comment
Romiii ᯓ⭐	1718990424 using !!! Report Comment
sunday!! (autoplay!!)	1718768512 using!! Report Comment
Flippy/Fliqpy	1716915575 using! i love webcore/internetcore so mucchchchc Report 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
bbxnedoo	1697988888 Will use !! Report Comment