bits and pieces of code used on my profile!!

hii!! welcome to my codes collection (sort of) 
i will be adding more to this if i find any cool stuff
basically this is all the code i learnt and have used on my page! 

major thanks to the people that helped me with my code because i too have no knowledge of code whatsoever!

( i put links on the posts & people on where i got the codes from at least to the ones i can remember, a bunch of these i searched on google and just clicked on the results )

// DROPDOWN MENU //

for plain text:

<details><summary style="font-size: 13px;" class="mb8"><u>put any text you want here</u> </summary>
<p>
put any text you want here
</p>
</details>

for images/gifs:

<details><summary style="font-size: 13px;" class="mb8"><u>put any text you want here</u> </summary>
<p>
<img src="insert gif/image link here" width=""/>
</p>
</details>

// ADDING A SCROLLBAR/SCROLLBOX //

comments:

(this ones pretty easy! all i pretty much did was look for this code below, and lower the height to 250px, but you can edit to any size you want!)
(something to add also, i put in the code to have the comments in a scrollbar somewhere, and it gave me two scrollbars for the comments?? if you have that glitch, remove the code you found and do what i said above)

#comments .inner {
        height: 250px;
        overflow: auto;
    }

interest table (inside):

<div style="height: 120px; width: AUTO; border: 1px solid black; overflow:auto;">
<p>put any text you want here</p><p>
</p><div></div></div>

*** NOTE DO NOT ADD <style> tags, when i did, it made it so the text would appear invisible, also put this code --in the interest boxes-- like this image below vv

(thank you to kyon who helped me with this <3 check their page out, its so cool o( ❛ᴗ❛ )o)

interest table (outside):

(you can safely add this & the interest table inside ver together, i did it in page for an example)

<style>
:not(.table-section) + .table-section {
border: none!important;
height: 300px;
overflow-y: auto;
transition: all 0.3s ease!important;
}

.table-section:nth-of-type(even):{
height: 90px;
overflow-y: auto;
transition: all 0.3s ease!important;
}
</style>

(also thank you very much to kyon again who also helped me with this !!)

friends table:

.friends-grid {
    background: #hex code color of your background;
    border: 7px ridge #whatever you want the border color to be;
    padding: 10px;
    max-height: 150px; 
    overflow-y: auto;
}

// REMOVING(HIDING) SECTIONS //

hiding url section:

<style>
.profile .url-info {
    display: none;
</style>

hiding both interests & links section:

<style>
.table-section{display:none;}
</style>

hiding interests section only:

<style>
:not(.table-section) + .table-section{display:none;}
</style>

hiding links section only:
<style>
.table-section + .table-section{display:none;}
</style>

// RANDOM PIECES OF CODE //

auto play music:

making pfp a circle:

<style>
    .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border: none;
    }

    table.details-table {
        border-collapse: collapse;
    }

    table.details-table td {
        background-color: transparent !important;
    }

    .profile-pic {
        border-radius: 500px;
        overflow: hidden;
</style>

film grain on your profile:

html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.imgur.com/QpnTsrV.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}

( thank you to this post by Cory )

have images & gifs shake when you hover over them:

<style>
a{
color: #0000ff;
-webkit-transition: all ease 0.5s; 
-moz-transition: all ease 0.5s; transition: all ease 0.5s;
}

  a:hover { 
    box-shadow: inset 0 50px 0 0 #5A61A3; 
    color: white;
  }

footer a{
color: #2b3d4f;
}

.friends-grid img{
   border: 3px double #6F8FAF;
}

::-webkit-scrollbar {
width: 14px;
height: 10px;
}

::-webkit-scrollbar-thumb {
background: linear-gradient(90deg, rgba(238,238,238,1) 38%, rgba(206,206,206,1) 62%);
border: 1.5px solid #888888;
border-radius: 5px;
}

::-webkit-scrollbar-track {
background: linear-gradient(90deg, rgba(230,230,230,1) 6%, rgba(240,240,240,1) 18%);
}

.profile-pic:hover img { 
animation: shake 0.5s; 
animation-iteration-count: infinite; 
-webkit-transition: .5s ease-in; 
} 

img:hover{ 
animation: shake 0.5s; 
animation-iteration-count: infinite; 
-webkit-transition: .5s ease-in; 
} 

@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
} 

</style>

tv lines on our profile:

<style>
body::before {content: " ";display: block; 

body::before {

content: " ";

display: block;

position: fixed;

top: 0;

left: 0;

bottom: 0;

right: 0;

background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);

z-index: 2;

background-size: 100% 2px, 3px 100%;

pointer-events: none;

}
</style>

*** FOR  AN EXAMPLE OF ALL OF THESE (except for the circle pfp) LOOK AT MY PAGE (ﾉ´ヮ`)ﾉ*: ･ﾟ

// HELPFUL LINKS //

profile resources masterpost by Caitlynn
(has a whole ton of profile deco links, to decorate your page!!)

some of my best layout resources by Maki
(has a bunch of helpful codes!)

useful css codes for your page! by Laura
(well,,, as the title says!!)

Web, HTML, Tech Forum
(bunch of posts with other more helpful stuff!!) 

tiny gifs collection <3 by kuurousa on Tumblr!
(cute tiny gifs to add to your graphics collection)

windows 98 icons by Alex Meub
(what i used for my contact icons)

annnnnd that is all!! hopefully i managed to help at least one person with this :))