*•.¸♡ krissy ♡¸.•*'s profile picture

Published by

published
updated

Category: Web, HTML, Tech

View Blog View Profile Report Blog Entry

Coding for my layout

<style>
/* ------------------------------------------------------------------------------------------------ */
/* ----------PAGE CUSTOMIZATION, GO TO THE END FOR ABOUT ME TEXT---------------- */
/* -----------------------AND BACKGROUND MUSIC TOOL----------------------------------- */
/* ---------------------------------------------------------------------------------------------- */
</style>


<style>
/* ------------------------------------------------- */
/*-This is the background for the entire page--*/
/* ----------------------------------------------- */
</style>
<style>
body { 
background: url(https://64.media.tumblr.com/b899e9b349cdb21b5fbc1bcb142f9505/tumblr_piniy1zOGZ1ua0pcd_540.gif);
}
</style>



<style>
/* ---------------------------------------------------- */
/* ------------This is the background for ---------- */
/* --the main profile area containing the boxes-- */
/* -------------------------------------------------- */
</style>
<style>
main {
background: rgba(255, 227, 168, 0);

}
</style>

<style>
/* ---------------------------------------------------- */
/* -------------This is the main font----------------*/
/*----------and the font for the headers--------- */
/* --You can alter your personal text font by--- */
/* -----adding the personalization around -----*/
/*----------------the text directly-------------- */
/*----------------------------------------------- */
</style>
<style> 
@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;
color:rgba(255, 255, 255, 1);
}
</style>



<style>
/* -------------------------------------------- */
/* -----------------Cursors!------------------*/
/*----------Top link is "hovering" --------- */
/* -----Bottom link is main "resting"----- */
/* --------https://cursors-4u.net-------- */
/* ---------------------------------------- */
</style>
<style>
a:hover {    
 cursor: url('https://cur.cursors-4u.net/nature/nat-10/nat997.cur'), auto;
}
* {
 cursor: url('https://cur.cursors-4u.net/nature/nat-10/nat985.cur'), auto;
}
</style>


<style>
/* ------------------------------------------------- */
/* --Link colors when "hovering" over them--- */
/* ----------------------------------------------- */
</style>
<style>
   a:hover {
     color: white; 
   } 
   a{
     color: #ff9ce0; 
   }
</style>



<style>
/* ---------------------------------------------- */
/* ------This is the Boxes Header fonts------ */
/* --------------------------------------------- */
</style>
<style>
/* this changes the color of your headers */
@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;
/* gradient text, you can replace existing colors with whatever ones you want */
background: -webkit-linear-gradient(#ff97c1, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style> 


<style>
/* ------------------------------------------------ */
/* ------This is for the dashed box borders--- */
/* --------------------------------------------- */
</style>
<style>
.profile .url-info {
border: 2px dashed  rgba(255, 161, 207, 1);    
}
.profile .contact {
border: 2px dashed  rgba(255, 161, 207, 1);     
}
.profile .table-section {
border: 2px dashed  rgba(255, 161, 207, 1); 
}
</style>

<style>
/* ------------------------------------------------------------------------------------------------ */
/* -----------------------------------The PAGE HEADER--------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------- */
</style>
<style>
/* ------------------------------------------------ */
/* -------This is for the navigation bar-------- */
/* -------First row, Logo, search bar--------- */
/* -------------and login section--------------*/ 
/*--------------------------------------------- */
</style>
<style>
nav .top{
background-color: transparent;
}
</style>




<style>
/* ------------------------------------------------ */
/* -----This is for the Spacehey logo---------- */
/* ---------------------------------------------- */
</style>
<style>
nav img.logo{filter: brightness(0) 
saturate(100%) 
invert(99%) 
sepia(73%) 
saturate(7472%) 
hue-rotate(280deg) 
brightness(101%) 
contrast(100%); 
!important;}
</style>



<style>
/* --------------------------------------------- */
/* -----This is for the navigation bar------- */
/* --------Second row, Nav links---------- */
/* ----------------------------------------- */
</style>
<style>
nav .links {
background-color: transparent;
}
nav .links a:hover {
color: rgba(255, 199, 226, 1);
}
</style>


<style>
/* -------------------------------------------- */
/*----------------Nav Bar Links------------ */
/* ----------------------------------------- */
</style>
<style>
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>
/* ------------------------------------------------------------------------------------------------ */
/* --------------------------------------YOUR NAME-------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------- */
</style>

<style>
/* --------------------------------------------------- */
/* ------This is the size/font of your name------- */
/* ------------------------------------------------- */
</style>
<style>
@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>
/* --------------------------------------------------- */
/* --------This is the color of your name--------- */
/* ------------------------------------------------- */
</style>
<style> 
/* this changes the color of your name */
.profile h1{
background: -webkit-linear-gradient(#8870ff, #ff70de);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>



<style>
/* ------------------------------------------------ */
/* ---This is for the floating animations------- */
/* ---for profile pic and friends section------ */
/* -------------------------------------------- */
</style>
<style>
/* This makes your profile picture float */
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 5px); }
    100%   { transform: translate(0, -0px); }   
}
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 150px; } 
.profile-pic:after{ 
  border: 2px dashed  rgba(255, 161, 207, 1);  
  box-shadow: 1px 0px 10px 2px rgba(254, 120, 180, 0.46);
 }   
</style>

<style>
/* this helps pfp float and makes friends float */
.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>
/* ------------------------------------------------------------------------------------------------ */
/* -----------------------------The LEFT HALF OF THE PAGE---------------------------------- */
/* ---------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------- */
</style>


<style>
/* ------------------------------------------------ */
/* ----------these are the colors for the-------*/
/*-----------table headings on the left------- */
/* -------------------------------------------- */
</style>


<style>
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
background-color: rgba(171, 118, 207, 0.4);
}
</style>



<style>
/* ------------------------------------------------ */
/* ---------This is the background for ---------*/
/* -------------the contact table-------------- */
/* --------------------------------------------- */
</style>
<style>
.profile .contact {
background-color: rgba(171, 118, 207, 0.4);
}
</style>


<style>
/* ------------------------------------------------ */
/* ------This is for the contact box------------ */
/* -----------------icons----------------------- */
/* --------------------------------------------- */
</style>
<style>
.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 {
/* foward 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>
/* ----------------------------------------------- */
/* -------This is for the Interests Section ----*/
/* ----------------box colors----------------- */
/* ------------------------------------------- */
</style>
<style>
.profile .table-section .details-table td {
background-color:rgba(223, 162, 210, 0.58);
}
</style>



<style>
/* ------------------------------------------------------------------------------------------------ */
/* ---------------------------The RIGHT HALF OF THE PAGE---------------------------------- */
/* ---------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------- */
</style>

<style>
/* ---------------------------------------------- */
/* ------these are the colors for the----------*/
/*--------table headings on the right------- */
/* -------minus the blog entries box------- */
/* ------------------------------------------- */
</style>
<style>
.profile .blurbs .heading, .profile .friends .heading {
color: white;
background-color:rgba(171, 118, 207, 0.4);
color: white;
border-radius:15px;
border: 3px dotted rgba(218, 165, 255, 0.65)
}
</style>


<style>
/* ---------------------------------------------- */
/* ----------This is the blog entries box----- */
/* -------------------------------------------- */
</style>
<style> 
@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(171, 118, 207, 0.4);
color: white;
border-radius:15px;
border: 5px dotted rgba(218, 165, 255, 0.65)
}
</style>


<style>
/* ------------------------------------------------ */
/* -----"centering" your friend space--------- */
/* --------------------------------------------- */
</style>
<style>
    .profile .friends .inner, .profile .blurbs .section h4{
    text-align: center;
    }
</style>


<style>
/* ------------------------------------------------ */
/* -Color of the number of friends you have- */
/* --------------------------------------------- */
</style>
<style>
    .count {
        color: #ff00aa;
    }
</style>



<style>
/* ---------------------------------------------- */
/* ---------This edits your friend's icons----- */
/* --------------------------------------------- */
</style>
<style>
.profile .friends .person img:not(.icon) {
border-radius:15px;
box-shadow: 1px 0px 7px 2px rgba(254, 120, 180, 0.71);
border: 3px dotted rgba(255, 221, 241, 1)
}
</style>



<style>
/* ------------------------------------------------ */
/* ------This links to your friend's profiles---- */
/* --------------------------------------------- */
</style>
<style>
.profile .friends .person p {
color: #ff75d1;  
}
.profile .friends .person p:hover {
color: #ffd6f1;  
}
</style>


<style>
/* ------------------------------------------------ */
/* ---This is for the friend comments table--- */
/* ---------------------------------------------- */
</style>
<style>
.profile .friends .comments-table td {
background-color: rgba(171, 118, 207, 0.4);
border: 1px solid rgba(255, 161, 207, 0.5);  
}
.comments-table td*{
}
</style>


<style>
/* ------------------------------------------------ */
/* -----------This is for the border--------------*/
/* ------------inside of comments------------- */
/* ---------------------------------------------- */
</style>
<style>
table.comments-table {
border: 2px dashed rgba(255, 161, 207, 1);      
}    
</style>




<style>
/* ------------------------------------------------------------------------------------------------ */
/* -----------------------------------The PAGE FOOTER---------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------- */
</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>
/* ----------------------------------------------------------------------------------------------- */
/* --------------------Youtube Link Autoplay in Background--------------------------------- */
/* -----------------Paste URL letters and numbers after -embed- -------------------------*/
/* -----------------------Dont remove the question mark--------------------------------- */
/* ------------------------------------------------------------------------------------------ */
</style>

<iframe width="1" height="1" src="https://www.youtube.com/embed/C7lZS2BnFxA?&;amp;;autoplay=1&;loop=1" title="Youtube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;picture-in-picture" allowfullscreen="">
</iframe>



<style>
/* ------------------------------------------------------------------------------------------------ */
/* -----------------------------BEGIN ABOUT ME SECTION HERE----------------------------- */
/* ---------------------------------------------------------------------------------------------- */
</style>


<p style="font-family:Brush Script MT, Brush Script Std;
font-size:35px;
text-align:center;">
TEXT HERE 
</p>


<p 
style="font-family:Brush Script MT, Brush Script Std;
font-size:20px;
text-align:center;
color: #ff75d1;">
TEXT HERE
</p>


<p style="font-family:Brush Script MT, Brush Script Std;
font-size:20px;
text-align:center;
color: #ff75d1;">
TEXT HERE
</p>


<p style="font-family:Brush Script MT, Brush Script Std;
font-size:20px;
text-align:center;">
TEXT HERE
</p>


<p style="font-family:Brush Script MT, Brush Script Std;
font-size:20px;
text-align:center;
color: #ff75d1;">
TEXT HERE 
</p>


<p style="font-family:Brush Script MT, Brush Script Std;
font-size:20px;
text-align:center;">
TEXT HERE
</p>


<p style="font-family:Brush Script MT, Brush Script Std;
font-size:20px;
text-align:center; 
color: #ff75d1;">
TEXT HERE  
</p>




--------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
Adding; here is the code for my Media- I have the titles of movies, books, and tv show as hyperlinks to their IMDB/ Goodreads, and then a gif of the media, and a quote. 


<p style="font-family:Brush Script MT, Brush Script Std;
font-size:20px;
text-align:center;">
<a href="https://www.imdb.com/title/tt1099212/?ref_=fn_al_tt_1" target="_top">
Twilight</a></p>
<img src="https://thewhisp.mommyish.com/wp-content/uploads/2018/11/Twilight-Harry-Potter-Gif.gif" alt="Twilight The Comedy Series" width="100%"/>
<p style="font-family:Brush Script MT, Brush Script Std;
font-size:20px;
text-align:center;">
"Bella, Where the hell have you been, Loca?" 
</p>


2 Kudos

—

Comments

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

5ativa vampir3

 5ativa vampir3's profile picture

i've been trying to change the color of the friend count for agez tysm ur a hero


Report Comment