1NF3CT3D XDD

/*Your icon*/ .general-about .profile-pic img { animation: dance .20s ease infinite alternate; } /*Keyframes for your icon*/ @keyframes dance { 100% { transform:translateY(-20px); } } * {cursor: url(https://i.postimg.cc/W1qVSC4G/2024-02-05-0vg-Kleki.png ), auto;} A:hover{cursor: url(" https://i.postimg.cc/ZR4hbqxH/2024-02-05-0vg-Kleki-1.png "), auto;} /* font-family */ @font-face { font-family: "PenetrationOutGrunge-JvyM"; src: url('//dl.dropbox.com/s/3wt5r6e8l5xrc66/PenetrationOutGrunge-JvyM.ttf'); } @font-face { font-family: "RavenouslyDemoGrunge-Ea9OW"; src: url('//dl.dropbox.com/s/ydwh9wmm0k5a2bo/RavenouslyDemoGrunge-Ea9OW.ttf'); } /* this is where the colors are rooted */ :root{ --headers: #ff3884; --text: #cc6aa3; --names: #ff458c; --links: #cf0064; --hover: #fc00a0; --borders: 4px double #fc00a0; --background_image: url('https://i.pinimg.com/564x/dd/3e/f6/dd3ef6d2505a68035ad84b5b52b400db.jpg'); --font-family: "RavenouslyDemoGrunge-Ea9OW"; --curve: 0px; /* the higher the number, the rounder the border. (try putting 50 as an example) */ } /* this is where the colors for specific things are located */ h3, h4, h5{color: var(--headers) !important;} /* headings*/ a{color: var(--links) !important;} /* color of links */ a:hover{color: var(--hover) !important;} /* color of links on hover */ p, b, h2, .count {color: var(--text) !important;} /* color of text */ .friends a p{color: var(--names) !important;} /* color of names, and friends counter */ .friends a:hover p{color: var(--hover) !important;} /* color of names on hover */ nav label{color: var(--links) !important;} /* color of search */ .section h4 {display:none;} /* aboutme & want2meet headings */ .blurbs .heading {display:none;} /* hides the blurbs title. if you want it to show, replace with the code: color: var(--headers) !important; */ /* .details-table td:first-child{display:none;} this code hides the general-heroes titles */ /* this is where your background image ends up being styled */ body{ background-image: var(--background_image)!important; background-color: #000; background-size: contain; background-attachment: fixed; color: var(--text)!important; } /* this is where your name appears */ h1{ color: #ff30cf; font-family: "PenetrationOutGrunge-JvyM"; font-size:30px !important; font-weight: bold; text-align: center; background-color: rgba(0,0,0,0.5); border: var(--borders); } /* the navigation is adjusted here */ nav{ background-color: rgba(0,0,0,0.5); border: var(--borders); border-radius: var(--curve); } nav .top{ background: transparent; color:var(--links); } nav .top a, nav .links a{ color: var(--text); text-shadow:none; } nav .links{ color: var(--text); background-color: transparent; border-radius: var(--curve); text-align: center; } /* this is the line that appears between links in the header and footer. you can add an emoji or symbol instead of the default line it has */ nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{ content: " ✦"; color: var(--links); } /* this is the spacehey logo color. you can change it at https://codepen.io/sosuke/pen/Pjoqqp */ nav img.logo{ filter: brightness(0) saturate(100%) invert(8%) sepia(84%) saturate(3937%) hue-rotate(358deg) brightness(108%) contrast(117%)!important; } /* the search wrapper and button */ .search-wrapper input[type=text] { background-color: transparent !important; border: 1px solid var(--links) !important; color:var(--links) !important; border-radius: var(--curve) !important; } button{ border-radius: var(--curve) !important; border: 0px solid var(--links) !important; font-family: var(--font-family) !important; background-color: transparent !important; color:var(--links) !important; } /* the online symbol and text */ .online{ color: var(--links) !important; text-transform: lowercase; margin:auto; } .online img{ filter: brightness(0) saturate(100%) invert(8%) sepia(84%) saturate(3937%) hue-rotate(358deg) brightness(108%) contrast(117%) !important; } /* font family for the headers, navigtion links, links, body text */ h2, h3, h4, h5{ font-family: "PenetrationOutGrunge-JvyM"; font-size: 20px; font-weight: normal; } a, p, b, nav label, .section{ font-family: var(--font-family) !important; font-size: 14px; font-weight: bold; } /* the hr code. the hr is the horizontal line when you want to separate important info or add a break in your paragraphs*/ hr{ height:1px; background: var(--links); border: none; } /* this is where you adjust the borders and background */ .blurbs, .friends, .profile .table, .blog-preview, .contact{ border-radius: var(--curve) !important; border: var(--borders) !important; background-color: rgba(0,0,0,0.5)!important; } .general-about .details{ border-radius: var(--curve) !important; border: var(--borders) !important; background-color: rgba(0,0,0,0.5)!important; padding:20px; text-align: right; } .mood{ border-radius: var(--curve) !important; border: var(--borders) !important; background-color: rgba(0,0,0,0.5)!important; text-align: center; padding:5px; } .icon{border:none !important;} .comment-replies{border:2px dotted #ff007b;} /* this is the border around the replies */ .comment-reply:not(:first-child){border-top: 2px dotted var(--links);} /* line in between comment replies*/ /* your interest and comments table row background color */ td{ background-color: transparent!important; } /* the middle section of your profile background color*/ main{ background: transparent; border-radius: var(--curve) !important; border: transparent !important; outline: none !important; } /* the interest table */ .table-section{ background-color:transparent!important; border:var(--borders)!important; background-color: rgba(0,0,0,0.5)!important; } .details-table{ border-spacing:0px 10px; } .details-table td{ border-top:1px solid darkred; padding:5px; } /* the header section of the boxes */ .heading, .blog-preview h4, .section h4{ background: none !important; text-align: center; } /* this is the box that says "Edit Info" when you're logged in, and to your friends it says "Profile Name is your friend". */ .profile-info { background-color: rgba(0,0,0,0.5); border: var(--borders) !important; border-radius: var(--curve) !important; } /* adjusting images borders and adding styling if you want to */ .profile-pic img{ outline:none !important; border-radius: var(--curve) !important; padding:6px; border: none; } /* you can remove text-align:center; if you don't want your friends to be centered */ .friends-grid{ text-align: center; } .friends-grid img{ border-radius: var(--curve) !important; filter: brightness(70%); } /* margin and padding */ h2, h3, h4, h5, p{padding-left:5px !important;} /* this is important when you have rounded corners */ .profile .table-section .heading, .blog-preview .heading, .profile .friends .heading{padding: 5px!important;} /* add space to the titles */ .friends, .mood, .general-about .details{margin-bottom: 20px;} /* this adds space between sections */ /* custom contact you can change the content: "✦" to content: url('image-url-here'); */ .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: "▸" } .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before { /* add to favorites */ content: "▸" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before { /* Send Message */ content: "▸" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before { /* forward to friend */ content: "▸" } .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before { /* instant message */ content: "▸" } .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before { /* block user */ content: "▸" } .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before { /* add to group */ content: "▸" } .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before { /* report user */ content: "▸" } /* where your spacehey url goes. you can add a picture here instead. if you don't want a picture or the url just remove this code and add this: .url-info{display:none;} */ .url-info{ background-image: url('https://i.pinimg.com/736x/73/5a/9c/735a9c9883361e25dbbcbc5e5f98f738.jpg:large'); background-size: 100%; background-repeat: no-repeat; height: 193px; border: var(--borders)!important; border-radius: var(--curve); } .url-info p{ opacity: 0.0; } /* this is the comments table scroll code. you can delete this if you don't want a scroll box */ .comments-table { display: block; height: 500px!important; overflow-y: scroll; border: 0px dotted #e6007a !important; outline: none !important; border-radius: 8px; padding:5px; border-spacing: 4px; /* this changes the distance between boxes */ } /* this styles the first column */ .comments-table td:first-child{ background-image: url('https://i.pinimg.com/736x/73/5a/9c/735a9c9883361e25dbbcbc5e5f98f738.jpg'); background-size: cover; background-position: center; } .comments-table td{ background-image: url(''); background-size: cover; background-position: center; border: 2px solid #e6007a; padding:10px; border-radius: 0px; } footer{ background-color: rgba(0,0,0,0.5); border: var(--borders); border-radius: var(--curve); padding:5px; } /* Scrollbar styles */ ::-webkit-scrollbar { width: 5px; height: 10px; } ::-webkit-scrollbar-track { border-radius: var(--curve); border: 1px solid #e6007a; } ::-webkit-scrollbar-thumb { background: #e6007a; border-radius: var(--curve); } img{ filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(-89deg) contrast(150%); } .logo { content:url("https://cdn.discordapp.com/attachments/1038533310814621790/1178780444603457616/Untitled304_20231127133016.png?ex=657763d6&is=6564eed6&hm=d70a403764fee1934b4a919b4cdb9e5eb57af3d46932b13f6fc9cdb2a48b4c8d&"); } profile-info { border: 6px #ff00ae; border-radius: 8px; box-shadow: 0 0 10px #ff00ae; background: none; display: flex; align-items: center; justify-content: center; padding: 15px 5px; margin-bottom: 10px; background-position-y: 148px; } body{ background-image: url('https://img1.picmix.com/output/stamp/normal/6/7/6/9/1699676_c4285.gif'); background-repeat: repeat; background-position:undefined; background-attachment: fixed; background-size: auto; } nav .top { background: url('https://media.discordapp.net/attachments/1117619838458802216/1208399280679686175/11049375_f5e30.gif?ex=65e32487&is=65d0af87&hm=19f14cc687aeeed1fa82b954898513ba07c5bb34fa7c240375ebc72062b6eaee&='); padding: 15px 10px 14px 10px; display: flex; position: relative; border: 1px #ff00ae; box-shadow: 0 0 10px #ff00ae; border-radius: 8px; margin-top: 20px; margin-bottom: 10px; } nav .links{ background: url(https://media.discordapp.net/attachments/1117619838458802216/1208399280679686175/11049375_f5e30.gif?ex=65e32487&is=65d0af87&hm=19f14cc687aeeed1fa82b954898513ba07c5bb34fa7c240375ebc72062b6eaee&=; border: 1px solid black; box-shadow: 0 0 10px black; border-radius: 8px; margin-bottom: black; text-align: center; } nav .links a { text-decoration: none; color: white; text-shadow: 0 0 5px black; font-size: max(0.98em, 12px); background: black; border-radius: 8px; padding-bottom: 2px; padding-right: 4px; padding-left: 4px; } nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after { content: " ☆ "; color: #ff00ae; } main{ background: url(https://media.discordapp.net/attachments/1117619838458802216/1208398751778086972/a830e295bb2d91bd7e24f7a3e4d33ebb.gif?ex=65e32409&is=65d0af09&hm=0d36d9010744548efeb95d0baa3fb17edbf77155801c7243bf9016057c8e96c0&=); border: 2px Solid #11ff00; } .profile .friends .person img:not(.icon){ filter: brightness(130%) contrast(140%) grayscale(80%); border-top-left-radius: 10px; border-bottom-right-radius: 10px; animation: blink .1s infinite; box-shadow: 0px 0px 15px white; border: solid white 1px; } @keyframes blink { 0% { opacity: 90%; } .profile .friends .heading{ animation-name: floating; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; margin-left: 30px; margin-top: 5px; } @keyframes floating { 0% { transform: translate(0, 0px); } 50% { transform: translate(0, 5px); } 100% { transform: translate(0, -0px); } } .profile .blurbs .heading h4{ animation: blink .1s infinite; } @keyframes blink { 0% { opacity: 80%; }