Discover the Vulcano
A warm nature-friendly HTML and CSS visualisation journey to showcase some media integrations and animations.
Table of contents
For the GitHub repo, click this link.
Click on the picture for a YouTube Video which showcases compatibility on different browsers.
Tested on the following browsers:
intellij IDE build in browser (https://www.jetbrains.com/idea/)
Google Chrome (https://www.google.com/chrome/index.html)
Mozilla Firefox (https://www.mozilla.org/en-US/firefox/new/)
Apple Safari (https://www.apple.com/safari/)
Opera (https://www.opera.com/)
Yandex (https://browser.yandex.com/)
Microsoft Edge (https://www.microsoft.com/en-us/edge)
Page One (index.html) main elements
Serves as an entry page to the main website with a dedicated recognizable favicon.
Continuous scrolling of gradient colors from light red to deep black.
Footer with a copyright notice.
Embedded nature audio with almost hidden audio controls (on/off).
Clickable glowing circle, which acts as a gateway to the main portal.
Page Two (vulcanored.html) main elements
Portal page with dedicated favicon.
Fullscreen video animation.
Auto start video
Looped video animation with basic controls, fullscreen, sound on/off, play, pause and download.
Transparent footer overlay with copyright and about info and social media icons with links to their respective main websites in a glowing circle.
Link to MIT license page, about page and home page.
Most links will open in a separate browser tab.
Page Three (license.html) MIT license
MIT License page with description.
Fullscreen gradient animation.
Transparent footer overlay with copyright and about info and social media icons with links to their respective main websites in a glowing circle.
Embedded audio with audio controls (on/off).
Most links will open in a separate browser tab.
Notices:
To be able to autorun a video when opening a webpage, the sound must be off.
The favicon package was generated with RealFaviconGenerator: https://realfavicongenerator.net/
Convert your image into a circular image here: https://crop-circle.imageonline.co/
To add audio to the video Online Converter was used: https://www.onlineconverter.com/add-audio-to-video
Quickly resize your picture image resizer: https://imageresizer.com/
Content delivery service cdnjs: https://cdnjs.com/
The css and html code used in this project should be self-explanatory and together with the keywords explained in the readme the whole project should read like a book.