← Back to Layouts
joi3jeoj3

Name: FriendRewind
Author: FriendRewind
Author: gmin
Category: :D
Created: August 3, 2026
mflrmflrmf
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Lexend:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
:root{
--logo-blue: ;
--darker-blue: ;
--lighter-blue: ;
--even-lighter-blue:  ;
--lightest-blue: ;
--dark-orange: ;
--light-orange: ;
--even-lighter-orange: ;
--green: ;
}
.container{
  width: 900px !important;
  font-family: Lexend;
}
body{
  background: url('https://i.pinimg.com/originals/8f/4f/88/8f4f885f43629fcc44c145894f66cf8a.gif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center left;
  background-attachment: fixed;
}
.count{
  color: #D16354;
}
a{
  color: #5E947B;
}
a:hover{
  color: #8AC0A7;
  text-decoration: none;
}
main{
  background: rgb(235, 240, 229, 0.7);
  backdrop-filter: blur(10px);
  padding-top: 20px;
}
nav .top{
  background: transparent;
  backdrop-filter: blur(5px);
  padding: 10px;
  border-style: solid;
  border-width: 1px;
  border-radius: 10px;
  border-color: #EBF0E5;
  margin-top: 5px;
}
nav .top .center{
  font-size: 15px;
}
#q{
  font-family: Lexend;
  background: #EBF0E5;
  border-style: inset;
  border-width: 1px;
  border-radius: 5px;
  border-color: #EBF0E5;
  padding: 3px;
}
nav .center button{
  font-family: Lexend;
  background: #D16354;
  border-style: outset;
  border-width: 2px;
  border-radius: 5px;
  border-color: #D16354;
  padding: 3px;
  color: white;
}
nav .center button:active{
  border-style: inset;
}
nav .top .right a{
  background: #8AC0A7;
  border-style: outset;
  border-width: 2px;
  border-radius: 5px;
  border-color: #8AC0A7;
  padding: 3px;
}
nav .top .right a:hover{
  text-decoration: none;
}
nav .top .right a:active{
  border-style: inset;
}
nav .top .logout-form button{
  font-family: Lexend;
  background: #F9F6C6 !important;
  border-style: outset;
  border-width: 2px;
  border-radius: 5px;
  border-color: #F9F6C6;
  padding: 3px !important;
}
nav .top .logout-form button:hover{
  text-decoration: none;
}
nav .top .logout-form button:active{
  border-style: inset;
}
nav .links{
  text-align: center;
  background: transparent;
  backdrop-filter: blur(5px);
  padding: 10px;
  border-style: solid;
  border-width: 1px;
  border-radius: 10px;
  border-color: #EBF0E5;
  margin-top: 5px;
  margin-bottom: 5px;
}
nav .links a{
  color: #fff;
  font-size: 13px;
  text-shadow: none;
  padding: 5px;
}
nav .links a:hover{
  text-decoration: none;
  color: #8AC0A7;
}
nav .links li:after{
  display: none;
}
.profile-pic img{
  border-style: solid;
  border-width: 3px;
  border-radius: 10px;
  border-color: #5E947B;
  padding: 3px;
}
.profile h1{
  text-align: center;
  color: #5E947B;
}
.general-about{
  font-size: 15px;
  color: #D16354;
  padding: 10px;
  background: #EBF0E5;
  border-radius: 5px;
  height: 180px;
}
.mood{
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 5px;
}
.mood:after{
  width: 100%;
  height: 80px;
  display: block;
  content: "";
  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2F1.bp.blogspot.com%2F-d9DRRYKxnP4%2FXjDW5tPg9AI%2FAAAAAAABq-g%2FHbRZoDOXQAsleAOu3skZmHb3FR_kg5HlwCLcBGAsYHQ%2Fs1600%2FGrocery%252Bcoupons%252B7.jpg&f=1&nofb=1&ipt=17d2b1818ec94c16e213105139858c1450d45d3e6cf424dc210ee2bd4b7eabc8&ipo=images');
  background-position: top center;
  background-size: 330px 240px;
}
.contact .heading{
  color: #D16354 !important;
}
.contact{
  background: #F9F6C6;
  border-style: solid !important;
  border-width: 2px !important;
  border-radius: 5px !important;
  border-color: #EBF0E5 !important;
  padding: 5px;
}
.contact a{
  background: white;
  border-radius: 3px;
  padding: 3px;
}
.contact img.icon{
  display: none;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a::before{
/* add to friends */
  content: " ";
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url('https://64.media.tumblr.com/6ba0476806e5f007b0dd4e7a96011171/5d83c435eced5c57-b5/s250x400/444ba85f2a05a5c35fcfc0062e5e051d313f6c47.pnj');
  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: 30px;
  height: 30px;
  background-image: url('https://64.media.tumblr.com/02138a99f639d93f0bdc8f7e87637d36/5ce7172d77b1d903-ab/s250x400/92d8e3338ad10b5d1ee5d086e0bebc332483c92b.pnj');
  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: 30px;
  height: 30px;
  background-image: url('https://64.media.tumblr.com/23fa5c19fb3e8cf2eba5e4173789ed35/5da93ab2c44d8c56-96/s250x400/e949242ca3503e8fc3b9c193700a26d04c454942.pnj');
  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: 30px;
  height: 30px;
  background-image: url('https://i.pinimg.com/originals/e1/34/6f/e1346f9a91becbe123341a9d948d29c8.gif');
  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: 30px;
  height: 30px;
  background-image: url('https://64.media.tumblr.com/3acec5ca5b9b0448f39015d930507698/49cd75f7079abe9f-90/s250x400/908967ceef71f1eaee37f0ef68b78cee3df8bc15.pnj');
  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: 30px;
  height: 30px;
  background-image: url('https://64.media.tumblr.com/8f0e0012275257ab12a776a46ca1a2cc/e5a00ca45f9c052a-e1/s250x400/459b7d75a01a6ed8902191a7765c374ee39e09b5.pnj');
  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: 30px;
  height: 30px;
  background-image: url('https://64.media.tumblr.com/49256d550e1c28a3af848e0d16e7d96e/5ce7172d77b1d903-bf/s250x400/01fddd205f3b2d24e88a43a9172a9fffb01b553c.pnj');
  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: 30px;
  height: 30px;
  background-image: url('https://64.media.tumblr.com/6e345687b559ea57dde83ec4174796c2/0a0615d0c71308d3-43/s250x400/e83a13295b13470c4c1da5d952426ca68e769da1.pnj');
  background-size: 100% 100%;
}
.profile .url-info{
  text-align: center;
  border-style: solid !important;
  border-width: 2px !important;
  border-radius: 5px !important;
  border-color: #EBF0E5 !important;
  padding: 5px;
}
.profile .url-info p:last-child:after{
  width: 100%;
  height: 200px;
  display: block;
  content: "";
  background-image: url('https://i.imgur.com/3JSZIju.png');
  background-position: center center;
  background-size: 336px 200px;
  margin-top: 10px;
}
.profile .table-section .heading{
  color: #D16352;
}
.profile .table-section{
  background: #F9F6C6;
  border-style: solid !important;
  border-width: 2px !important;
  border-radius: 5px !important;
  border-color: #EBF0E5 !important;
  padding: 5px;
}
.profile .table-section p{
  color: #5E947B;
}
.profile .table-section td{
  background: white;
  border-radius: 3px;
  padding: 5px;
}
.col.w-40:after{
  content: "";
  display: block;
  background-image: url('https://64.media.tumblr.com/7fc117de9f2c355bd631cf5052d3863a/a5b979b47296914f-fa/s250x400/8cf2f571f01d2cd4faeaaba8f381ae603a4fa256.pnj');
  width: auto;
  height: 300px;
  background-position: top center;
  background-size: 80%;
  background-repeat: no-repeat;
  margin-top: 20px;
}
.profile-info{
  border-style: solid !important;
  border-width: 2px !important;
  border-radius: 5px !important;
  border-color: #EBF0E5 !important;
  padding: 10px;
  color: white;
}
.blog-preview h4{
  color: #D16354;
}
.blog-preview{
  background: #F9F6C6;
  border-style: solid !important;
  border-width: 2px !important;
  border-radius: 5px !important;
  border-color: #EBF0E5 !important;
  padding: 10px;
}
.blog-preview p{
  padding-top: 5px;
}
.profile .blurbs .heading{
  color: #D16354;
}
.profile .blurbs .inner h4{
  color: #5E947B;
  padding-bottom: 5px;
}
.profile .blurbs{
  background: #EBF0E5;
  border-radius: 5px;
  padding: 5px;
}
.profile .friends .heading{
  color: #5E947B;
}
.profile .friends{
  border-style: solid !important;
  border-width: 2px !important;
  border-radius: 5px !important;
  border-color: #EBF0E5 !important;
  padding: 5px;
  margin-bottom: 10px;
}
.profile .friends .person p{
  color: #F9F6C6;
}
.profile .friends .person img{
   -webkit-mask-image: url(https://64.media.tumblr.com/3f2879e2716b6bb17916269874ef14b9/a5b979b47296914f-8d/s250x400/ebc38d3cabc0fb583708aab7ab49fa8d07d59e8b.pnj);
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
#comments{
  background: #EBF0E5;
}
#comments .count{
  color: #5E947B;
}
#comments .heading{
  color: #D16354;
}
.comments-table{
  background: #F9F6C6;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  border-color: white;
}
.comments-table td{
  border-style: solid;
  border-width: 3px;
  border-color: #EBF0E5;
  padding: 5px;
}
.comments-table td img{
  border-radius: 5px;
}
.comments-table td button{
  background: #8AC0A7 !important;
  border-color: #8AC0A7 !important;
  color: white;
  font-family: Lexend;
}
.comments-table td button:active{
  border-style: inset !important;
  border-color: #8AC0A7 !important;
}
#comments button{
  background: #D16354;
  border-style: outset;
  border-width: 2px;
  border-radius: 5px;
  border-color: #D16354;
  padding: 3px;
  color: white;
  font-family: Lexend;
}
#comments button:active{
  border-style: inset;
}
table.comments-table{
  display: block;
  height: 300px!important;
  overflow-y: scroll;
}
.col.right:after{
  width: 100%;
  height: 100px;
  display: block;
  content: "";
  background-image: url('https://64.media.tumblr.com/3f2879e2716b6bb17916269874ef14b9/a5b979b47296914f-8d/s250x400/ebc38d3cabc0fb583708aab7ab49fa8d07d59e8b.pnj');
  background-position: center center;
  background-size: 103px 103px ;
}
footer{
  background: url('https://i.imgur.com/momzjjQ.png');
  background-size: 200px;
  background-position: center center;
  backdrop-filter: blur(5px);
  padding: 15px;
  border-style: solid;
  border-width: 3px;
  border-color: #EBF0E5;
  border-radius: 5px;
}
footer a:hover{
  text-decoration: none;
}
</style></style>