Xx_LilyanLogan_xX's profile picture

Published by

published
updated

Category: Web, HTML, Tech

HTML / CSS Assets Used On My Profile:

! Will Update This As Needed !

Original Page Layout Created by ---> Nes

--------------------------------------------

Custom Cursor CSS Guide ---> Here 
     Make sure you START your cursor code with <style>body {cursor:url( when using this code!
       Make sure you END your cursor code with ), auto; }</style></div> when using this code!
         Make sure whats inside the ( ) starts with data:image/png;base64, when using this code!
           The code will not work if its not within a style tag!
             The Cursor I Use ---> Here

MY EXAMPLE:

<style>body 
{
cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAM1BMVEUAAAACBRbqAAL/AAACBBXoAALrAALlAALnAALoAALoAAIDBRjtAAICBRf/AAAAAAD///9AmWIaAAAADnRSTlMAN/DyTfXu/Pb08xrpMeIeA0sAAAABYktHRBCVsg0sAAAACXBIWXMAAADIAAAAyABj+uetAAAAB3RJTUUH5wMbCRUexUbLLAAAAAFvck5UAc+id5oAAABlSURBVDjL7dFJDsAgDAPABAqlW/z/3xa6nmLOlerzyHIUMRUeCx1h6AhDR1TARQNUHICJExBxAV/cwBUP8MQLEOjIFhfECgZyRdQEJB9ElQxkr8LGOl4LMNGf1oqZgqWsm/z5enZWGQYewPwVUAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMy0wMy0yN1QwOToyMTozMCswMDowMAHD+l0AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjMtMDMtMjdUMDk6MjE6MjkrMDA6MDAprAesAAAAAElFTkSuQmCC), auto; }</style></div>

--------------------------------------------

Automatic Music Player HTML ---> Here
     Make sure you place the code into your About Me section of your profile.
       The player WILL NOT work if you place it anywhere else but your about me section. 
         The images on this blog will not load, so follow the worded instructions carefully! 

MY EXAMPLE:

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

</iframe>

--------------------------------------------

Scrolling Gif / Img HTML 
    Make sure you adjust the "top" and "left" % accordingly.
      You can also change "left" into "right" if you prefer it on the right side. 
        You can also change "top" into "bottom" if you prefer to change that as well.
          I reccomend changing the size of your gif / img prior and not with the HTML.
            It's primarily trial and error and how you prefer your gifs / imgs to look at this point!

MY EXAMPLE:

<div id="div" style="margin: 0px; padding: 0px; right: 0px; top: 0px; width: 100%; height: 100%; z-index: 30001; opacity: 10;">
<p style="position: fixed; color: White; top: 20%; left: 80%;">

<img src="https://i.pinimg.com/originals/9a/6f/4f/9a6f4f07344d27fc77d008c11a627225.gif"/></p></div>

If you're looking to place an image somewhere instead, use:
<img src="IMG URL">

--------------------------------------------

My Blogging Code

MY EXAMPLE:

<style>


body {


background-image:url(https://media.discordapp.net/attachments/679419646662803477/1089772489778921482/ezgif-5-d3c81b9b72.gif?width=1250&height=937);    

font-size: 15px;

font-display: bold;

}


:root {


--logo-blue: #960e0e;

--darker-blue: #FFFFFF;

--lighter-blue: #c20e0e;

--even-lighter-blue: #960e0e;

--lightest-blue: #960e0e;

--dark-orange: #960e0e;

--light-orange: #960e0e;

--even-lighter-orange: #960e0e;

--green: pink; 

}


main {

background: black;

border-radius: 14px;

padding: 0;

font-size: 85%;

color: #FFFFFF;

}


footer {

border-radius: 15px;

background-image: 

url(https://media.discordapp.net/attachments/679419646662803477/1089601073838313492/3dcd69e2df66f92a765dad997f2c916b.gif?width=1250&height=700);

color:White; 

}

nav .top {

        background: url("https://media.discordapp.net/attachments/679419646662803477/1089601073838313492/3dcd69e2df66f92a765dad997f2c916b.gif?width=1250&height=700");

}    

</style>

--------------------------------------------

If something looks wrong or didn't work when you tried it, let me know! I'll try to help you fix what may be wrong and if something is wrong on my end I'll be sure to fix that as well! I posted this to help people find things on my profile since I struggled making my HTML myself! Anything in Italics are things that you can change safely without breaking the code! Just make sure what you input is input correctly and in the right place. Make sure links work and such! Hope this helps!


6 Kudos

Comments

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

Valentine

Valentine's profile picture

OMG this is incredible thank you so much for this. i've spent the last four hours trying to figure out how to add images to the sides of my profile and this was so helpful


Report Comment



It's no prob!!! I'm so glad this helped out x3

by Xx_LilyanLogan_xX; ; Report