Playing with HTML5

 This is me going "Hey, let's open up VS Code and just mess around." Here is the website for this project.

 

Let's look at what I did!

 

 

    background-blend-mode: soft-light;

This will fade out the image to reflect the color of the background with the background-color property.

The hovering effect over the informative banners came from here. It's not new, I remember nth-child properties. Everyone of them has the same effect placed upon them.

Also old are marquees with loop counts -

marquee behavior="scroll" direction="right" loop="500"

I call it 'The Eternal Marquee'

Direction is new. I have seen text go up and down, and you can do it with images as well, but I stuck to right.

Something in my code is overriding the hover effects in my ps class (the scrolling images):

 CSS:

.ps :hover{

    opacity: 100%;

    background-blend-mode: multiply;  

  }

 HTML:

 <img src="l1.jpg" width="923" height="519" alt="Natural" class="ps" />

 

Putting everything between divs didn't work either;

 

<div class="ps"> 

        <img src="l1.jpg" width="923" height="519" alt="Natural" />

        /* omitted for brevity */

    </div> 

 

 

The hover effect works for links, so I'm not sure what.

a :hover {

    color: orange

}

 Let's look at the CSS for a marquee -

It's too much to put all here, and the details are for better control of webpage elements. This is particularly text based .

I did manage to put a temporary top to bottom marquee on the H1 element.

Let's focus on what I did learn - Responsive sizing.

So when you adjust the viewport, the informative banners will now adjust!

 

    <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>The Great Library</title>

 

    width: 100%;

 That soft light CSS filter above.

 

The animation effect to pop things up.

Check out the final product Here.