Your content goes here.
Your content goes here.
Your content goes here.
He made me whole!
Flac He made me whole!
| extras.wav |
Responsive Text
Resize the browser window to see how the text size scales.
Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.
Accordion with symbols
In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.
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.
HTML Table
| Company | Contact | Country |
|---|---|---|
| Maria Anders | ||
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
| r_11-5-23_frank_cornelius_luke_21_5-28_for_these_be_the_days_of_vengeance_10-29-23_pm.flac |
Responsive Flexbox
The "flex-direction: row;" stacks the flex items horizontally (from left to right).
The "flex-direction: column;" stacks the flex items vertically (from top to bottom).
Resize the browser window to see that the direction changes when the screen size is 800px wide or smaller.
Your content goes here.
Your content goes here.
Your content goes here.
Responsive Table
If you have a table that is too wide, you can add a container element with overflow-x:auto around the table, and it will display a horizontal scroll bar when needed.
Resize the browser window to see the effect. Try to remove the div element and see what happens to the table.
| First Name | Last Name | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Jill | Smith | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
| Eve | Jackson | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
| Adam | Johnson | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Accordion Example
Note: The data-parent attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.
Date |
Name |
Message |
Welch family |
Touch through me |
|
https://www.pottersrefuge.org/uploads/5/7/8/6/57862057/welch_tellitagain_touchthroughme15_1.mp3 |
Value |
|