Pink Web Diary Layout (comes with "Pain" by Pink Pantheress as BGM)

Tags: pink, web-core, cute

Description:

--Can be used as a base for your own layout(s)

--Please credit me if you're using this layout as is

Preview:

click on the image for a larger preview

Code:

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

<iframe width="0" height="0" src="https://www.youtube.com/embed/lw_XFnk5kwU?si=IdxL-HLEHGPOckmP//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>

<style>
@import url('https://fonts.googleapis.com/css2?family=Stylish&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Gaegu&display=swap');

.container{
  width: 65%;
}

body{
  background: url("https://i.pinimg.com/236x/c9/3d/03/c93d03631d7cdce64f1296d3e3817451.jpg");
  background-size: 594px;
  background-attachment: fixed;
  background-position: 0px -210px;
}

p{
  font-family: 'Gaegu', sans-serif;
  font-size: 16px;
  font-weight: bold;
}

a{
  color:#f72d66;
}

a:hover{
  text-decoration: underline;
  color: #f50f39;
}

h1, h2, h3, h4, h5, h6{
  font-family: 'Stylish', serif;
  font-size: 18px;
  text-decoration: underline;
  color: black;
}

nav .top{
  background: #e80064;
  border: dashed white;
  border-radius: 13px;
  box-shadow: 0px 0px 20px #ff0059;
  margin-bottom: 20px;
}

nav .top a{
  font-family: 'Gaegu', sans-serif;
  font-size: 16px;
}

nav .top a:hover{
  font-weight: bold;
  text-decoration: underline;
}

.logout-btn{
  font-weight: normal;
  font-family: 'Gaegu', sans-serif;
  font-size: 16px;
}

.logout-btn:hover{
  font-weight: bold;
  text-decoration: underline;
}

.logo{
  content: url(https://cdn.discordapp.com/attachments/1111836147530874910/1134738469650976848/Untitled174_20230729004512.png);
}

button, input{
  font-family: 'Gaegu', sans-serif;
  font-size: 16px;
  font-weight: bold;
  color:#f72d66;
  background: pink;
  border: 2px groove white;
  border-radius: 5px;
  box-shadow: 0px 0px 8px pink;
}

nav .links{
  background: #e80064;
  border-radius: 5px 5px 0px 0px;
}

li.active .icon{ 
content:url("https://64.media.tumblr.com/fbb18b7604c720eef651d3563a84db12/c5fbc42270a081ec-da/s75x75_c1/17c20b56a66db0126dba55ce8d4f9b4e9c27e12b.gifv"); 
  width: 20px;
  height: 20px;
}

nav .links a:hover{
  text-decoration: underline;
  color: pink;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{
  content: " ♥ ";
  color: pink;
}

main{
  background: #fa6ea1;
  border: solid #e80064;
  border-top: none;
  border-radius: 0px 0px 7px 7px;
  height: 500px;
  overflow: auto;
}

.col.w-40.left{
  background: #f799ab;
  border: double black 5px;
  border-radius: 0px 5px 5px 0px;
  box-shadow: 5px 7px 0px #7a1b41;
 }

.profile h1{
  color:#f72d66;
  text-decoration: underline;
  background: white;
  width: 280px;
  position: relative;
  left: 45px;
  border: 2px dashed black;
  border-radius: 3px;
  text-align: center;
}

.edit-link{
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: center;
  font-size: 15px;
}

.general-about{
  background: white;
  width: 280px;
  height: 290px;
  position: relative;
  left: 45px;
  border: 6px double;
  border-radius: 5px;
}

.general-about .profile-pic img{
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 153px;
  position: relative;
  left: 5px;
  top: 10px;
}

.award img{
  content: url("https://64.media.tumblr.com/d492c2ea9df46e9569390bd68ebccb34/177c57b2f4c44578-4b/s75x75_c1/831deceb531fa30876eba256791b1ba0a045229e.gifv");
  width: 25px; 
  height: 25px;
}

.award{
  position: relative;
  bottom: 16px;
  left: 4px;
}

.award a{
  font-size: 15px;
  color:#f72d66;
}

.award a:hover{
  text-decoration: underline;
  color: #e80064;
}

.online{
  position: relative;
  bottom: 19px;
  left: 10px;
  font-size: 15px;
  color: #e80064;
}

.online img{
  content: url("https://64.media.tumblr.com/62101fceca796cb05d7cd6db70820ca0/ec2fe971b0fa2a3b-d5/s75x75_c1/6c1fbc1a51090b555ad6141f2100a52506fb3f1a.gifv");
}

.profile .mood{
  background: white;
  width: 320px;
  position: relative;
  left: 27px;
  border: dashed 2px;
  border-radius: 5px;
  margin-top: 15px;
  margin-bottom: 20px;
  padding-top: 4px;
  text-align: center;
}

.profile .contact .heading{
  background: #fc3283;
  border-bottom: 2px dashed black;
  border-radius: 5px 5px 0px 0px;
  text-align: center;
}

.profile .contact{
  background: white;
  border: 2px solid black;
  border-radius: 7px;
}

.contact img.icon{ 
display: none; 
}

.contact{background-color:  !important;}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a::before{ 
 /* add to friends */
 content: " "; 
 display: inline-block; 
 width: 20px; 
 height: 20px; 
 background-image: url("https://64.media.tumblr.com/4b6d9d10c555db7060316ecfaa7300e3/f3f25620bf23c51a-88/s75x75_c1/9a6d58ad0739481b4a719908906b57d2008f0c08.gifv"); 
 background-size: 100% 100%;
} 

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a::before{ 
 /* add to favorites */
 content: " "; 
 display: inline-block; 
 width: 20px; 
 height: 20px; 
 background-image: url("https://64.media.tumblr.com/8b1b4ee64d93398a2ef87a24d2712928/1e9ba0e90a2a12e6-17/s75x75_c1/70afc000d030dbf0e7b4fc8ddd7e9beca80d7cf3.gifv"); 
 background-size: 100% 100%;
} 

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before{ 
 /* send message */
 content: " "; 
 display: inline-block; 
 width: 20px; 
 height: 20px; 
 background-image: url(https://64.media.tumblr.com/417eb1a9ec823cfc4aee1a22f40ed7e8/a7847445d679bd37-e3/s75x75_c1/f169323dace382c195873bf40cced805f4683347.gifv); 
 background-size: 100% 100%;
} 


.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before{
 /* forward to friend */
 content: " "; 
 display: inline-block; 
 width: 20px; 
 height: 20px;  
 background-image: url("https://64.media.tumblr.com/367854123be136ab868019188f7b4202/f3f25620bf23c51a-72/s75x75_c1/97d38d5ac0860010489fe45f1eeb4d685434126f.gifv"); 
 background-size: 100% 100%;
} 

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before{
    /* instant message */
 content: " "; 
 display: inline-block; 
 width: 20px; 
 height: 20px; 
 background-image: url("https://64.media.tumblr.com/778ba82abb18adfddd009e994465305c/b123a1e13c509a50-12/s75x75_c1/6f74aa0adcd448cfbcfa031b23bf4ecbee34f4f1.gifv"); 
 background-size: 100% 100%;
} 

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
    /* block user */
 content: " "; 
 display: inline-block; 
 width: 20px; 
 height: 20px; 
 background-image: url("https://64.media.tumblr.com/ea4e8b822a4990f81880dd8db20b06d7/b123a1e13c509a50-76/s75x75_c1/6666141bb067c62d3a35b9440b35337b48b55606.gifv"); 
 background-size: 100% 100%;
} 

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before{
    /* add to group */
 content: " "; 
 display: inline-block; 
 width: 20px; 
 height: 20px; 
 background-image: url("https://64.media.tumblr.com/ecf91723498ef9e7af6cc1874fd4a498/f3f25620bf23c51a-02/s75x75_c1/3aa64b798187fce00f8b6e051566b8087df24fd8.gifv"); 
 background-size: 100% 100%;
} 

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before{
    /* report user */
 content: " "; 
 display: inline-block; 
 width: 20px; 
 height: 20px; 
 background-image: url("https://64.media.tumblr.com/09d45186e8f68231d6052c7c91edb02c/5bbb362c302f1d51-fb/s75x75_c1/e4e6c9f6c93975c2d7fc148b19671d72aa0a94cc.gifv"); 
 background-size: 100% 100%;
} 

.profile .url-info{
  font-size: 0px;
  border: 2px solid black;
  border-radius: 7px;
  height: 348px;
  background: url("https://i.pinimg.com/236x/31/da/8c/31da8cdae42fa78eef5f131c2121cb86.jpg");
  background-size: contain;
}

.profile .table-section .heading{
  background: #fc3283;
  border-bottom: 2px dashed black;
  border-radius: 5px 5px 0px 0px;
  text-align: center;
}

.profile .table-section{
  background: white;
  border: 2px solid black;
  border-radius: 7px;
}

.details-table td:first-child, .comments-table td:first-child{
  font-size: 15px;
  font-size: 15px;
  background: #fa93ad;
  border: invisible;
  border-radius: 5px;
  color:#f72d66;
}

.details-table td, .comments-table td, .music-table td{
  font-size: 15px;
  background: pink;
  border: invisible;
  border-radius: 5px;
}

.profile-info{
  background: url("https://i.pinimg.com/474x/48/e0/56/48e05646bafb5cceb4af2a6a8074048e.jpg");
  border: 3px dashed white;
  border-radius: 7px;
  box-shadow: 5px 4px 0px #7a1b30;
  position: relative;
  left: 40px;
  width: 470px;
}

.profile-info a{
  color: white;
  text-decoration: underline;
}

.profile-info a:hover{
  text-decoration: underline;
  color: #f54295;
}

.blog-preview h4{
  background: #ffb3b9;
  border-bottom: 2px dashed;
  border-radius: 5px 5px 0px 0px; 
  padding-top: 3px;
  padding-bottom: 3px;
  position: relative;
  bottom: 24px;
  text-align: center;
}

.blog-preview{
  background: white;
  border: solid black 2px;
  border-radius: 7px;
  box-shadow: 5px 7px 0px #7a1b30;
  position: relative;
  left: 40px;
  width: 470px;
}

.blog-preview p{
  padding-left: 6px;
  border-bottom: dashed 2px;
}

.profile .blurbs .heading, .profile .friends .heading{
  background: #ffb3b9;
  border-bottom: 2px dashed black;
  border-radius: 5px 5px 0px 0px; 
  text-align: center;
}

.blurbs{
  background: white;
  border: solid black 2px;
  border-radius: 7px;
  box-shadow: 5px 7px 0px #7a1b30;
  position: relative;
  left: 40px;
  width: 470px;
}

.profile .blurbs .section h4{
  color: #e80064;
}

.friends{
  background: white;
  border: solid black 2px;
  border-radius: 7px;
  box-shadow: 5px 7px 0px #7a1b30;
  margin-bottom: 20px;
  position: relative;
  left: 40px;
  width: 470px;
}

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

.profile .friends .person p{
  font-size: 14px;
  color:#f72d66;
}

.profile .friends .person p:hover{
  color: #f50f39;
}

table.comments-table{
  border-radius: 3px;
}

.comment-replies{
  border: 3px solid #f54295;
  border-radius: 4px;
}

.comments-table td:first-child img:not(.icon){
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 120px;
}

table.comments-table td .icon{
  content: url("https://64.media.tumblr.com/367854123be136ab868019188f7b4202/f3f25620bf23c51a-72/s75x75_c1/97d38d5ac0860010489fe45f1eeb4d685434126f.gifv");
  width: 25px;
  height: auto;
}

footer{
  font-size: 15px;
  color: white;
  background: transparent;
}

footer a{
  font-family: 'Gaegu', sans-serif;
  color: pink;
}

*{
  cursor: url(https://ani.cursors-4u.net/symbols/sym-8/sym761.png), auto !important;
}

::-webkit-scrollbar{
  width: 15px;
  background: pink;
}

::-webkit-scrollbar-thumb{
  border: inset #fc3283;
  background-color: #fc3283;
}

::-webkit-scrollbar-track{
  background: #ffb3b9;
  border-left: double;
}

h1{
  animation: type 3s steps(27);
  color: white;
  font-size: 10px;
  font-family: courier;
  white-space: nowrap;
  overflow: hidden;
}

@keyframes type{
  0%{
    width:0ch;
}
  100%{
    width:27ch;
}
}

@keyframes blink
  0%{opacity:1;
  50%{opacity:0;}
  100%{opacity:1;}
}

.col, main, footer, nav::before, .online, nav .links, nav .top{
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .links, nav .top{
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes float{
0% { transform: translate(0, 0px);
}  
50% {
transform: translate(0, 8px);
}
100% {
transform: translate(0, -0px);
}
</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 18 of 18 comments ( View all | Add Comment )

meg	1723775405 using! thank you :) Report Comment
✞Opal_lottie✩	1714706135 USINGG!!!! i lOVE THIS SOOO MUCHH IT FITS MY OTHER STUFF PERFECTLYYYY LOVE U✰ Report Comment
Space Angel	1710878702 Hello love, I'm trying it out on my page today, and so far, it is working great. Bless you! Report Comment
K•E•L•L•I	1710675140 Using! Report Comment
Gwen?	1709615851 using :D Report Comment
BAILS! XD	1708212429 Using! Report Comment
MissKia	1708195924 using this baeeeee tysm 💗💗💗 Report Comment yw ^^ <3 by Veronika_Vampire; 1708213965; Report
cherry	1707276187 using! thank u! Report Comment
ILoveGlory	1707007420 using! Report Comment
Naomii	1706996333 usingg Report Comment
Kyoun	1706937108 Using Report Comment
Anika ノ Starlette >ꇴ<	1706903482 jimmy urine spotted Report Comment
Wendy !! >_<	1706753800 Using ^_^ Report Comment
Nadine v.	1706661238 using!! :D Report Comment
Starsandfish	1706659952 Using! <3 Report Comment
Catreeeee	1706446028 Using thank you!!! Report Comment yw! by Veronika_Vampire; 1706481323; Report
danny	1706410444 using :33 Report Comment
°☆° シモ °☆°	1706399089 Using! :D Report Comment