Report Blog Entry
hey there! 👋
i’ve been having some fun with CSS lately, and I thought it’d be cool to share the custom code I created for my profile! Whether you're into clean designs or just curious about how things work behind the scenes, I hope this inspires you to play around with your own styles too. Let’s dive in! 🎨
here's the code
</style>
<style>
/* profile background/the image behind the profile box */
body {
background: url(https://i.gifer.com/76sw.gif);
}
</style>
<style>
/* Cor do texto inserido */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Roboto:wght@700&display=swap');
.profile .blurbs .section h4{
font-family: 'Josefin Sans', sans-serif;
text-transform: lowercase !important;
color: #2C2C2C; /* Preto suave para legibilidade */
}
</style>
<style>
/* Cores dos textos nos headers */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Roboto:wght@700&display=swap');
p{
font-family: 'Josefin Sans', sans-serif;
text-transform: lowercase !important;
color: #7F59A3; /* Lilás clarinho (cor principal) */
}
</style>
<style>
/* Tamanho/fonte do seu nome */
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Paytone+One&display=swap');
h1{
font-size: 30px !important;
font-family: 'Paytone One', sans-serif;
text-transform: uppercase !important;
padding-left: 2px !important;
}
</style>
<style>
/* Cor do seu nome com gradiente */
.profile h1{
background: -webkit-linear-gradient(#7F59A3, #FFA3F1); /* gradiente entre o roxo profundo e o rosa */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
<style>
/* Estilização dos headers com gradiente */
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Paytone+One&display=swap');
h4{
font-size: 16px !important;
font-family: 'Paytone One', sans-serif;
text-transform: uppercase !important;
padding-left: 2px !important;
background: -webkit-linear-gradient(#FFA3F1, #F3EBFF); /* gradiente entre rosa e fundo suave */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
<style>
/* Texto em negrito com tamanho maior */
p{
font-size: 14px !important;
font-weight: bold;
text-transform: none !important;
}
</style>
<style>
/* Links na navigation bar @ do topo */
nav{
font-size: 13px !important;
font-family: 'Paytone One', sans-serif;
text-shadow: 1px 1px black;
text-transform: none;
padding-left: 3px;
text-align: center;
}
</style>
<style>
/* Centraliza seu friend space */
.profile .friends .inner, .profile .blurbs .section h4{
text-align: center;
}
</style>
<style>
/* Cor do número de amigos */
.count {
color: #FFA3F1; /* Rosa para destaque */
}
</style>
<style>
/* Cores dos links (estado normal e hover) */
a{
color: #7F59A3; /* Roxo profundo */
}
a:hover {
color: #FFA3F1; /* Rosa */
}
</style>
<style>
/* Cursors personalizados */
a:hover {
cursor: url('https://cur.cursors-4u.net/nature/nat-10/nat989.cur'), auto;
}
* {
cursor: url('https://cur.cursors-4u.net/nature/nat-10/nat989.cur'), auto;
}
</style>
<style>
/* Main profile background - a caixa com todos os textos */
/* Usando a cor de fundo suave e borda em rosa */
main {
background: rgba(243, 235, 255, 1); /* #F3EBFF */
border-radius: 15px;
border: 2px dotted rgba(255, 163, 241, 1); /* Rosa */
}
</style>
<style>
/* Background e borda dos cabeçalhos de blurbs e friend space */
.profile .blurbs .heading, .profile .friends .heading {
background-color: rgba(127, 89, 163, 1); /* Roxo profundo com opacidade */
text-transform: lowercase !important;
color: white;
border-radius: 15px;
border: 3px dotted rgba(216, 183, 255, 0.65); /* Lilás clarinho com opacidade */
}
</style>
<style>
/* Links para perfis de amigos */
.profile .friends .person p {
color: #81E4FF; /* Azul secundário */
}
.profile .friends .person p:hover {
color: #FFA3F1; /* Rosa */
}
</style>
<style>
/* Caixa de blog entries */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Roboto:wght@700&display=swap');
DIV.blog-preview{
text-align: center;
font-family: 'Josefin Sans', sans-serif;
background-color: rgba(127, 89, 163, 1); /* Mesma tonalidade para consistência */
text-transform: lowercase !important;
color: white;
border-radius: 15px;
border: 5px dotted rgba(216, 183, 255, 0.65); /* Lilás clarinho */
}
</style>
<style>
/* Ícones dos amigos */
.profile .friends .person img:not(.icon) {
border-radius: 15px;
box-shadow: 1px 0px 7px 2px rgba(127, 89, 163, 0.71); /* Sombra usando roxo profundo */
border: 3px dotted rgba(216, 183, 255, 1); /* Lilás clarinho */
}
</style>
<style>
/* Cores para os headings das tabelas à esquerda */
.profile .contact .heading,
.profile .table-section .heading,
.home-actions .heading {
background-color: rgba(127, 89, 163, 1); /* Roxo profundo */
}
</style>
<style>
/* Seção de contato */
.profile .contact {
background-color: rgba(127, 89, 163, 0.4); /* Roxo com opacidade */
}
</style>
<style>
/* Comentários de amigos */
.profile .friends .comments-table td {
background-color: rgba(127, 89, 163, 0.4); /* Consistente com os headers */
border: 1px solid rgba(255, 163, 241, 0.5); /* Rosa com opacidade */
}
</style>
<style>
/* Cores para a seção de interesses */
.profile .table-section .details-table td {
background-color: rgba(127, 89, 163, 0.4); /* Versão com opacidade do lilás clarinho */
}
</style>
<style>
/* Navigation bar: fundo transparente e hover nos links */
nav .links {
background-color: transparent;
}
nav .links a:hover {
color: rgba(255, 199, 226, 1);
}
</style>
<style>
nav .top{
/* Navigation bar no topo (barra de busca e logo) */
background-color: transparent;
}
</style>
<style>
@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 5px); }
100% { transform: translate(0, -0px); }
}
/* GIF para a foto do perfil */
.profile-pic > img { display: none; }
.profile-pic:after {
background-image: url("https://i.gifer.com/4OKl.gif");
display: inline-block;
content: "";
}
.general-about .profile-pic:after {
background-size: cover;
width: 160px;
height: 150px;
}
.profile-pic:after{
border: 2px dashed rgba(255, 163, 241, 1); /* Rosa */
box-shadow: 1px 0px 10px 2px rgba(127, 89, 163, 0.46); /* Sombra em roxo */
}
</style>
<style>
/* Animações flutuantes */
.profile-pic,
.profile .friends .person img:not(.icon),
.profile .friends .person p,
.profile h1 {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
margin-left: 0px;
margin-top: 0px;
}
</style>
<style>
/* Bordas tracejadas (usa a cor rosa) */
.profile .url-info {
border: 2px dashed rgba(255, 163, 241, 1);
}
.profile .contact {
border: 2px dashed rgba(255, 163, 241, 1);
}
.profile .table-section {
border: 2px dashed rgba(255, 163, 241, 1);
}
</style>
<style>
/* Borda interna dos comentários */
table.comments-table {
border: 2px dashed rgba(255, 163, 241, 1);
}
</style>
<style>
/* Logo spacehey (mantém filtro para destaque) */
nav img.logo{
filter: brightness(0) saturate(100%) invert(99%) sepia(73%) saturate(7472%) hue-rotate(280deg) brightness(101%) contrast(100%) !important;
}
</style>
<style>
/* Ícones de contato */
.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 favorite */
content: "🌟";
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a 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 2 group */
content: "🌙";
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "🛰️";
}
</style>
<style>
footer {
color: white !important;
text-decoration: underline !important;
text-decoration-style: dotted !important;
background-color: rgba(0, 0, 0, 0.82);
}
</style>
</style>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )