Anfaeia's profile picture

Published by

published

Category: Web, HTML, Tech

Spacehey Background Space from earth



<style>
:root{
  --headers: purple;
  --links: royalblue;
  --text: purple;
  --names: royalblue;

  --background_image: url("https://imgur.com/OUwzpbw.jpg");

  --font-family: sans-gothic;
   
  --mynamesize: 45px;

  --transparency: 0.00;

  --curve: 360px;

  --hue: 0deg;

  --simple_bg: #8995ad;

  --topic1: "General";
  --topic2: "Music";
  --topic3: "Movies";
  --topic4: "Television";
  --topic5: "Books";
  --topic6: "Heroes";

  --myactions: "Explore With Me";
  --mytopics: "My Interests";
  --mylinks: "Find Me Here";
}


h3, h4, h5, .url-info b{ color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
p, h2{color: var(--text) !important;} /* color of text */
h1{
background-color:var(--box_color_and_seethru) !important;
border-radius: var(--curve) !important;
padding: 10px !important;
border: var(--borders) !important;
color: darkblue; !important;
} /* color of username */
.count, .friends a p{color: var(--names); !important;} /* color of names, and friends counter */
nav label{color: var(--headers) !important;} /* color of search */
.section h4{color: var(--names) !important;} /* aboutme & want2meet headings */
.online{color: var(--links) !important;} /* color of the 'online' text */
.section{color: var(--text) !important;} /* sometimes <p> is broken by embeds maybe. */

:root{  --box_color_and_seethru: rgba(236,228,210, var(--transparency));}  

h1, h2, h3, h4, h5, a, nav label{ 
font-family: var(--font-family) !important;
 text-transform:uppercase !important;
}

.section,p,a{
font-family: var(--font-family) !important;
}

h1, h2, h3, h4, h5, p {padding-left:5px !important;}

h1{ 
 font-size: var(--mynamesize) !important;
 text-transform:none !important;
 padding-left:12px !important;
}

body {
background-image: var(--background_image) !important;

}   

.heading, .url-info, .blurbs, .mood, .blog-preview, .friends, .contact, .table, .table-section, footer{
background-color:var(--box_color_and_seethru) !important;
border-radius: var(--curve) !important;
padding: 10px !important;
border: var(--borders) !important;
}


.details{
background-color:var(--box_color_and_seethru) !important;
border-radius: var(--curve) !important;
padding: 10px !important;
border: var(--borders) !important;
height: 175px;
}

#comments, .blurbs, .blog-preview, .friends, .mood, .contact, .table-section, footer
{   backdrop-filter: blur(0.58px);}

.table-section{border:none !important;background-color:var(--box_color_and_seethru)!important;border-radius: var(--curve) !important;}
.heading{background:none !important;padding-bottom:0px !important;}

.profile-pic img{
/* the face rotation is funny, but let's comment it away for default */
/* transform: rotate(90deg) !important;  */
outline:none !important;
border-radius: var(--curve) !important;
}

.friends-grid img{
outline:none !important;filter: opacity(90%) !important;
width:60% !important; height:30% !important;
border-radius: var(--curve) !important;
filter:hue-rotate(var(--hue)) !important;

}

.inner img{
outline:none !important;
border-radius: var(--curve) !important;
}

iframe{border-radius: 60px !important;opacity: 0.66 !important;}

nav{background-color:var(--box_color_and_seethru); !important;border-radius: 0px 0px var(--curve) var(--curve); !important;}
nav ul{background:none !important;}
nav img{filter: opacity(80%) !important;}
nav ul a img, .mood a img{display:none !important;}
.top{background:none !important;background-color:rgba(0, 0, 0, 0.8); !important;}

nav img.logo{filter: brightness(0) saturate(100%) invert(30%) sepia(70%) saturate(5131%) hue-rotate(219deg) brightness(89%) contrast(80%) !important;}

.url-info{display:none !important;}

td {background-color:rgba(0, 0, 0, 0.0) !important;border-radius: var(--curve) !important;}

main{border-radius: var(--curve) !important;}

main{background-color:rgba(0, 0, 0, 0.0); !important;}

.friends th, tr, .friends td, th, .icon, #comments, main, .comments-table, .friends, .profile-info, .table, .table-section, .contact, .url-info, .mood, .blurbs, .blog-preview, .details, .profile-pic img
{
border: 0px dotted gray !important;
outline: none !important;
}

.icon{border:none !important;}
.mood{margin-bottom:12px !important;}
.blurbs{margin-top:12px !important;}
.friends{margin-top:-12px !important;}
.profile-info{border-radius: var(--curve) !important;}
.comments-table{border-radius: var(--curve) !important;border:none !important;}
.table-section{padding-bottom:9px !important;}
#comments{margin-top:17px !important;padding-bottom:17px !important}
.details p:last-child{color:var(--links) !important;  filter: brightness(95%);
}

.contact, .f-row, .f-col{padding-left:0px !important;margin-left:0px !important;margin-right:0px !important;padding-right:0px !important;}
.contact{padding-left:2px !important;}
.f-row{margin-bottom:3px !important;padding-bottom:0px !important;padding-top:2px !important;margin-top:0px !important;}
.f-col a{margin-left:-2px !important;padding-left:-2px !important;}
.contact{padding-bottom:12px !important;}

.search-wrapper input[type=text] {background-color: rgba(255, 255, 255, 0.5) !important;border: 1px solid var(--headers) !important;color:var(--names) !important;border-radius: 10px !important;}
button{border-radius: 10px !important;border: 1px solid var(--headers) !important;font-family: var(--font-family) !important;background-color:rgba(255, 255, 255, 0.5) !important;color:var(--headers) !important;}

code{  word-break: break-all !important;}

.w-40 .table-section:last-child .heading h4{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.w-40 .table-section:last-child .heading::after{
  content: var(--mylinks);
font-family: var(--font-family) !important;
 text-transform:uppercase !important;color: var(--headers) !important;font-weight: bold !important;}

.w-40 .table-section:nth-last-child(2) .heading h4{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.w-40 .table-section:nth-last-child(2) .heading::after{
  content: var(--mytopics);
font-family: var(--font-family) !important;
 text-transform:uppercase !important;color: var(--headers) !important; font-weight: bold !important;
}

.w-40 .contact .heading h4{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.w-40 .contact .heading::after{
  content: var(--myactions);
font-family: var(--font-family) !important;
 text-transform:uppercase !important;color: var(--headers) !important;font-weight: bold !important;}

.blurbs .heading{display:none !important;}

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
  color:var(--links) !important;
  letter-spacing:normal !important;
   filter: brightness(95%) !important;
}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: var(--topic6);
}

hr{  border: 1px dashed var(--names) !important;filter: brightness(55%) !important;}

button.logout-btn {
    border: none !important;
}

</style>


2 Kudos

Comments

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

Nelo Wolf

🐺Nelo Wolf🐺's profile picture

thanks


Report Comment



Not a problem

by Anfaeia; ; Report

Oklahoma Tomcat

Oklahoma Tomcat's profile picture

Maybe if the font is larger or bolder? Is there a way I can fix it so that the font can be easier to read?


Report Comment

Oklahoma Tomcat

Oklahoma Tomcat's profile picture

I thank you so much. I love this profile layout. I now have to add you to my favorites list. There is only one problem with this profile layout. The purple font is hard to read in some areas. Other than that, I love the design.


Report Comment



I'm so very glad you like it, I have been trying to figure out how to get the text larger in order to see it better. Im still trying to relearn all this coding I use to use when I was 17 and had a MySpace way back in the day. I'm getting back into it and figuring it out. As I go, I'm going to try to update all the layouts as I go along and post them to my blog. I'm so sorry that it's hard to see. I will try to do better! But thank you so much, I'm really happy and excited that you like it!

by Anfaeia; ; Report