Skip to main content

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.

 

Animal Crossing: New Horizons villager Pashmina looks confused at a bookshelf

Let's look at what I did!

 

 
    background-blend-modesoft-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{
    opacity100%;
    background-blend-modemultiply;  
  }

 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 {
    colororange
}

 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>

 

    width100%;

 That soft light CSS filter above.

 

The animation effect to pop things up.

Check out the final product Here.

 

Comments

Popular posts from this blog

Making KPI Dashboards with PowerBI

 While this is the free tier, I cannot share or collaborate with others, nor can I publish content to other people's workspaces, but they will not stop me from screenshooting and recording these self-taught adventures,so! I'm doing this because I idly searched "Mattel careers" and "Information Technology", and seeing a bulletpoint saying the following: Analytical and reporting skills such as creating dashboards and establishing KPIs such as experience with PowerBI, Cognos, Tableau, and Google Data Lake/AWS is preferred And thought "Well, I've used Tableau, and I've heard about PowerBI,  even if its in-demandness is questionable , so how similar is it? And can I write about it?"  First, PowerBI (PIB) does have a downloadable, local version, but apparently Windows-only. I could download the .exe but I couldn't run it / drag it to applications on my MacBook.  Not a problem, we'll use the online SaaS version, and a dataset found here, ...

Connecting IoT Devices to a Registration Server (Packet Tracer, Cisco)

 If you're seeing this post, I'm helping you, and you probably have LI presence: React and share this post to help me in return.   In Packet Tracer, a demo software made by Cisco Systems. It certainly has changed a lot since 2016. It's almost an Olympic feat to even get started with it now, but it does look snazzy. This is for the new CCNA, that integrates, among other things, IoT and Automation, which I've worked on here before. Instructions here . I don't know if this is an aspect of "Let's make sure people are paying attention and not simply following blindly", or an oversight - The instructions indicate a Meraki Server, when a regular one is the working option here. I have to enable the IoT service on this server. Also, we assign the server an IPv4 address from a DHCP pool instead of giving it a static one. For something that handles our IoT business, perhaps that's safer; Getting a new IPv4 address every week or so is a minimal step against an...

AWS Infrastructure Composer

 A very brief look. The text says; Drag and drop any CloudFormation resource on a visual canvas Connect and configure enhanced components to automatically build IaC for an application architecture Seamlessly transition between authoring workflows visually with Step Functions Workflow Studio and defining resources with Infrastructure Composer Integrate your browser with your project through “local sync” or use Composer in the AWS Toolkit for Visual Studio Code In 2019 there was a similar tool to build infrastructure that would be converted to code. Nice to know they bought it back. When you enter the Composer, it's a blank space with a background reminiscent to the screen for Cloud Formation. Infrastructure Objects are to the left in a drawer;  I've selected a bucket that I can rename. I went to connect a bucket to a Dynamo DB Table, and it's not available yet. It also lost a bucket somewhere in the ether of the GUI. Ah well. I couldn't find the EC2 instance in the...