[FTU] Code Snippets

In this snippet we use two main features: an embeded video and a Fa icon (that works as a visual cue)
First we create the Iframe tag: <iframe src="" > </iframe>
  ⮡ The Iframe tag is used to embed a web page inside another page (in this case we put the youtube video page insite this page)
It'll create a box with the video; We will make this box smaller by adding height: 30px; width: 30px;

Now we create the icon that will server as a button: <i class="fal fa-play"></i>
We need both the icon and video player to be in the same position, so when the icon is clicked it'll trigger the video instead. We can achive this by usign the position: absolute atribute.
  ⮡   <i class="fal fa-play" style=" position: absolute " ></i>
  ⮡  <iframe src="SOURCE" style="position: absolute; height: 30px; width: 30px;"></iframe>
Now we need to make sure the video is playable, to achieve this we will put it on a higher layer then the rest of the code with z-index: 5
Then we make the video player invisible (but still usable) with opacity: 0
Thats it! You're all good to go now!

First of all remember that this link must be the on the top line of the code, so it can use the page size as reference;
Then we create a div: <div style=""></div>

This div needs to be te same size as the background, so we add <div style=" margin: 0px; padding: 0px; width: 100%; height: 100% "></div> this way we eliminate any margin and padding values so it stays at its true size. Then we max height and width.
Then we add the background, as a color or image:
  ⮡   background-color: lavender/#e6e6fa/rgba(230, 230, 250, 1) note: for a solid color bg I recommend using a strong color in rgba and changing its opacitty (last number) around 0.3 or 0.2, so if the user has a dark theme they can see it no problem. Try changing the themes on this page and see what happens!
  ⮡   background-image: url('IMGURL')
Then we add z-index: -3 so it doesn't get on top of the character avatar and info

This effect can be achieved with the box-shadow style
The syntax works like this: box-shadow: 5px(x axis) 5px(y axis) 5px(blur) color
So for the 3d effec we have two shadows: box-shadow: 5px -2px 2px blue
Then the second one: box-shadow: 5px -2px 2px blue , -5px 2px 2px red
note: the two shadows need to be in the same box-shadow separated by a ,

This code has to important elemenst: A link refering to the top, and the image itself
Lets start with the the thing the link is linking to: make a div ate the top of the code with and id="top". Everytime you click the image, it will go to this div and not the 'top' of the page

<div id="top></div>

Then we make the link for it:

<a href="#top"></a>

Now we'll make the character, a simple img will do:

<img src="URL">

Now for the important part: we will use position: fixed this means whatever you do with the page it will stay in that exact position. Also change height for the image size to adjust;

<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/42393568_UH9HWU3NKvLWqhS.gif" title="to the top!" style="height: 150px; position: fixed; right: 15px; bottom: 0px">

When used position: fixed you need to specify where exactly this will vbe fixed. In this case i used right: 15px so it isn't gluet to the border, and bottom 0 since the image is a little tall. You can change this at your will, and even use top and left

We add z-index: 5 so it will be on front of any other element

Now we will make sure this only appears on bg screens, so it doesn't affect mobile users. we add the classess: d-none and d-lg-block.
d-hidden means display is hidden, so it wo'nt appear by default.
d-lg-block means it will be displayed as a block in large (lg) screens. If it's not working on your monitor try d-sm-block as well
So we have:
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/42393568_UH9HWU3NKvLWqhS.gif" title="to the top!" style="height: 150px; position: fixed; right: 15px; bottom: 0px; z-index: 5" class="d-none d-lg-block">