therealmizuki🇻🇪🕊️'s profile picture

Published by

published
updated

Category: Web, HTML, Tech

Pink and cute profile layout! 🩷

I just wanted to save my layout but here's a preview anyways!


<style>

:root{
--bottom-banner: url("https://i.pinimg.com/originals/35/33/b6/3533b69af9d5241e0389d4c22547bfea.gif");
}

/*  CHANGE THE BANNER DOWN THERE INSIDE THE PARENTHESES (Use a image URL)  */ 


.edit-link{font-size:0;}

@media (min-width: 30em) {.col.w-40 {width: 36%;}}

.person:not(:nth-child(4), :nth-child(8))::after {
  content: "";
  width: 30px;
  height: 120px;
  background: url(https://64.media.tumblr.com/4a32708ddbbafabf5dd61110257c3d94/7370bf55a1ad29ce-52/s500x750/b68243833a44f4698dec926011a4531227c84f6e.gifv);
  background-size: cover;
  position: relative;
  display: flow-root;
  bottom: 120px;
  left: 95px;
}

.person{margin: 0 16px 0 0; height: 150px;}

nav .top{margin-top: 4px; background: linear-gradient(180deg, #ee88aa 4%, #fdfcff 108%); border: ridge 4px #ee77aa}

.logo-fallback {filter: drop-shadow(1px 1px 0px #ee88aa) drop-shadow(1px 0px 0px #ee88aa) drop-shadow(0px 1px 0px #ee88aa) drop-shadow(-1px -1px 0px #ee88aa) drop-shadow(1px -1px 0px #ee88aa) drop-shadow(-1px 1px 0px #ee88aa);} nav .top b{color: #e8559a}

nav .links{text-align: center; height: 33px; background: #0000; padding-top: 8px; padding-left: 0px;}

.blurbs .heading{
  background: linear-gradient(180deg, #ee88aa 4%, #fdfcff 108%) !important;
  border: ridge 4px #ee77aa;
  color: #aa2255 !important;
  padding: 4px;
  border-radius: 8px 8px 2px 2px;
  font-size: 120%;
}
.friends .heading{
  background: linear-gradient(180deg, #ee88aa 4%, #fdfcff 108%) !important;
  border: ridge 2px #e8559a;
  padding: 4px 14px !important;
  border-radius: 4px 4px 0px 0px !important;
  color: #aa2255 !important;
}
.friends .inner{
  background: linear-gradient(180deg, #ffbcde 4%, #fdfcff 108%);
  border: solid 2px #e8559a;
  padding: 14px;
  border-radius: 0px 0px 4px 4px;
}

.profile .friends .person p {
  color: #aa2255;
  background: linear-gradient(180deg, #ee88aa 4%, #fdfcff 108%) !important;
  border-top: ridge 2px #e8559a;
  border-right: ridge 2px #e8559a;
  border-left: ridge 2px #e8559a;
  padding: 4px 14px !important;
  border-radius: 4px 4px 0px 0px !important;
  margin-bottom: -2px;
}

.friends{margin-top: 8px;}

nav .links li{background: linear-gradient(180deg, #ee88aa 4%, #fdfcff 108%); border: solid 2px #e8559a; padding: 4px; border-radius: 4px 4px 2px 2px; box-shadow: 0px 0px 8px rgba(255, 240, 250, 0.75);}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{content: none;}

nav .links a{text-shadow: 0px 0px 3px #e8559a, 0px 0px 3px #e8559a;}

.blog-preview p:first-of-type, label{text-shadow: 0px 0px 2px #ffcfdf; font-style: italic; color: #e8559a; border: solid 1px #e8559a; background-color: #ffe7ef; padding: 2px 4px; border-radius: 4px; font-weight: bold;}

main{color: #aa2255; text-shadow: 0px 0px 2px #ffcfdf, 0px 0px 1px #ffcfdf; padding: 20px 8px 8px 8px; border: double 5px #e8559a; margin-top: 8px; background: url(https://i.pinimg.com/736x/e8/c3/9d/e8c39dc7645ba43b1041fe7e6d2207da.jpg);}

button{background: linear-gradient(0deg, #cc4488 4%, #ffaadd 108%); color: #fff; text-shadow: 1px 0px 0px #ffaadd, 1px 1px 0px #ffaadd, 0px 1px 0px #ffaadd, -1px 0px 0px #ffaadd, -1px -1px 0px #ffaadd, 0px -1px 0px #ffaadd; padding: 3px; border: solid 2px #aa2255; border-radius: 5px;}

body{background: url(https://i.pinimg.com/736x/0d/e6/e7/0de6e7f5bb141c28add9e59b1cb403c3.jpg); background-size: 33%;}

footer{background: linear-gradient(180deg, #ee88aa 4%, #fdfcff 108%); border: ridge 4px #ee77aa} .edit-info{background: linear-gradient(180deg, #ee88aa 4%, #fdfcff 108%); border: ridge 4px #ee77aa} .edit-info p, .edit-info h4{background: rgba(255, 240, 250, 0.6); padding: 4px; border-radius: 8px; border: solid 2px rgba(255, 240, 250, 0.4); text-shadow: 0px 0px 2px #ffcfdf, 0px 0px 1px #ffcfdf;}

a{color: #ff00aa;}

footer p{color: #fff; text-shadow: 0px 0px 2px #ffcfdf, 0px 0px 1px #ffcfdf;} #q{background: linear-gradient(180deg, #ffcfdf 0%, #ffe7f0 18%, #ffcfdf 36%, #fdfcff 108%); border: solid 3px #dd6699;}

footer .links li{background: linear-gradient(180deg, #ffaacc 4%, #fdfcff 108%); border: solid 2px #e8559a; padding: 2px; border-radius: 2px 2px 1px 1px; border: solid 1px #e8559a;}

nav .links .icon{content: url(https://images.emojiterra.com/google/android-12l/512px/1f353.png);} .profile-pic .pfp-fallback {border: 3px double #aa2255 !important; box-shadow: 0px 0px 20px #ee77aa;}

main::after{ width: auto; margin-bottom: 12px; margin-top: 34px; border: 4px double #f9d; height: 263px; display: block; content: ""; background-image: var(--bottom-banner); background-position: center center; background-size: cover; opacity:.75; margin-left: 16px; margin-right: 16px; box-shadow: 0px 0px 16px #ff66aa;}

footer a{text-shadow: none;}

.comments-table td{border: 3px double #aa2255; box-shadow: 0px 0px 20px #ee77aa; background-size: cover; background: url(https://i.pinimg.com/736x/9f/99/95/9f9995c8cec601eb37f683546d88b883.jpg);}

.details-table td{border: 3px double #aa2255; box-shadow: 0px 0px 20px #ee77aa; background-size: cover; background: url(https://i.pinimg.com/736x/9f/99/95/9f9995c8cec601eb37f683546d88b883.jpg);}

.details-table td:first-child, .comments-table td:first-child{border: 3px double #aa2255; box-shadow: 0px 0px 20px #ee77aa; background-size: cover;  background: url(https://i.pinimg.com/originals/f4/e6/5e/f4e65ea95b1cdd825ca4d54a4e461e9c.jpg);}

.details-table td:first-child{width: auto;}


img.pfp-fallback{border: solid 2px #dd6699;}

.container{
  width: 1050px;
}
main{
  padding: 12px;
}

nav .top .left .logo {
  width: 215px;
  height: 42px;
}

.blurbs .inner .section:last-of-type:after{
content: var(--whoidliketomeet);
font-size:0.81rem;
color: #aa2255;
text-shadow: 0px 0px 2px #ffcfdf, 0px 0px 1px #ffcfdf;
}

blurbs .inner .section:last-of-type h4{

font-size: 0px !important;

}

.blurbs .inner .section:first-of-type h4:after{
content: var(--aboutme-heading);
font-size:0.81rem;
color: #aa2255;
text-shadow: 0px 0px 2px #ffcfdf, 0px 0px 1px #ffcfdf;
}

.blurbs .inner .section:first-of-type h4{
font-size:0;
}

.details-table:first-of-type td:first-child{color: #0000; text-shadow: none;}

.friends-grid{padding:32px;}

.table-section{border: none;}
.table-section .heading, .contact .heading{background: linear-gradient(180deg, #ee88aa 4%, #fdfcff 108%) !important; border: ridge 4px #ee77aa; color: #aa2255 !important;}

.online img {
  content: url(https://images.emojiterra.com/google/android-10/512px/1f365.png);
  animation: spin 2s infinite linear;
}
.online { color: #ff0020; font-weight:bold; animation: sillyness 1s infinite linear;}

@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}

@keyframes sillyness{
  0%{transform: translateY(0px)}
  75%{transform: translateY(-15px)}
  100%{transform: translateY(0px)}
}

.contact .inner a img {
  font-size: 0;
}
.contact .inner a img:before {
  font-size: 1em;
  display: block
}
.contact .inner a:before {
  content: ""
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
  /* add to friends */
  display: inline-block;
  background: url("https://i5.glitter-graphics.org/pub/638/638145bltz6zqhdo.gif")no-repeat 0 0;
  background-size: 100%;
  width: 16px;
  height: 16px;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
  /* add to favorites */
  display: inline-block;
  background: url("https://i6.glitter-graphics.org/pub/638/638146kvkkfs33zm.gif")no-repeat 0 0;
  background-size: 100%;
  width: 16px;
  height: 16px;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
  /* send Message */
  display: inline-block;
  background: url("https://i10.glitter-graphics.org/pub/1065/1065500cl3si27n8p.gif")no-repeat 0 0;
  background-size: 100%;
  width: 16px;
  height: 16px;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
  /* forward to friend */
  display: inline-block;
  background: url("https://i5.glitter-graphics.org/pub/553/553525locp67mrqu.gif")no-repeat 0 0;
  background-size: 100%;
  width: 16px;
  height: 16px;
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
  /* instant message */
  display: inline-block;
  background: url("https://i10.glitter-graphics.org/pub/1073/1073020lz9hw5tluj.gif")no-repeat 0 0;
  background-size: 100%;
  width: 16px;
  height: 16px;
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
  /* block user */
  display: inline-block;
  background: url("https://i6.glitter-graphics.org/pub/1864/1864126gg6pk5sjxk.gif")no-repeat 0 0;
  background-size: 100%;
  width: 16px;
  height: 16px;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
  /* add to group */
  display: inline-block;
  background: url("https://i5.glitter-graphics.org/pub/1823/1823285xkz7w3dlz4.gif")no-repeat 0 0;
  background-size: 100%;
  width: 16px;
  height: 16px;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
  /* report user */
  display: inline-block;
  background: url("https://i4.glitter-graphics.org/pub/1595/1595794joznotovno.gif")no-repeat 0 0;
  background-size: 100%;
  width: 16px;
  height: 16px;
}
.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
  border: none;
}

.profile-info{
  border: solid 1.75px #000;
  background: var(--bottom-banner);
  height: 182px;
  width: 440px;
  background-size: 440px 182px;

  font-size:0!important;

}
.profile-info a{color: #0000; text-shadow: none;} .profile-info p{color: #0000; text-shadow: none;}

</style>



2 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )