W3Schools How To

https://www.w3schools.com/howto/default.asp



Hoverable Dropdown

Move the mouse over the button to open the dropdown menu.

Hoverable Dropup

Just Example text...

JustExample text...

Move the mouse over the button to open the dropup menu.

Dad

Scroll Down

The image will "stick" to the screen when you reach its scroll position.

Scroll back up again to "remove" the sticky effect.

Example text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed

Collapsibles

A Collapsible:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Collapsible Set:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Accordion

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Click on the buttons inside the tabbed menu:

London

London is the capital city of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

Image Text Blocks

How to place text blocks over an image:

Nature

Hero

There is a hero in every Theroff


Home

Home is where the heart is..

News

Some news this fine day!

Contact

Get in touch, or swing by for a cup of coffee.

About

Who we are and what we do.

Image modalM

In this example, we use CSS to create a modalM (dialog box) that is hidden by default.

We use JavaScript to trigger the modalM and to display the current image inside the modalM when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image captionM text inside the modalM.

Ivan Theroff
×

Automatic Slideshow

Change image every 2 seconds:

1 / 3
Caption a-text
2 / 3
Caption Two
3 / 3
Caption Three


Notebook

Heading

Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.


Full Page Background Image

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

3 of 12
3 of 12
3 of 12

4of 12
4 of 12
4 of 12

Responsive Image Grid

Resize the browser window to see the responsive effect.

Pineapple Pineapple Pineapple Pineapple Pineapple Pineapple Pineapple Pineapple Pineapple Pineapple Pineapple

Converters

Type a value in any of the fields to convert between temperature measurements:

Type a value in any of the fields to convert between weight measurements:

Type a value in any of the fields to convert between Length measurements:


12 of 12

12 of 12

3 of 12
3 of 12
3 of 12
3 of 12

4of 12
4 of 12
4 of 12

6 of 12
6 of 12

12 of 12


12 of 12

3 of 12
3 of 12
3 of 12
3 of 12

4of 12
4 of 12
4 of 12

6 of 12
6 of 12

12 of 12

12 of 12

12 of 12

3 of 12
3 of 12
3 of 12
3 of 12

4of 12
4 of 12
4 of 12

6 of 12
6 of 12

12 of 12


This is the footer 2!! Resize the browser window to see how the content respond to the resizing.

This is the footer!! Resize the browser window to see how the content respond to the resizing.