# Discover the Vulcano

[For the GitHub repo, click this link.](https://github.com/RobertoTorino/_vulcanored)

Click on the picture for a YouTube Video which showcases compatibility on different browsers.

[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1672519545379/1429f036-e98b-4dba-a339-68f13f1a06c8.png align="center")](https://youtu.be/p3b5E6xKjRI)

### **Tested on the following browsers:**

* intellij IDE build in browser ([https://www.jetbrains.com/idea/](https://www.jetbrains.com/idea/))
    
* Google Chrome ([https://www.google.com/chrome/index.html](https://www.google.com/chrome/index.html))
    
* Mozilla Firefox ([https://www.mozilla.org/en-US/firefox/new/](https://www.mozilla.org/en-US/firefox/new/))
    
* Apple Safari ([https://www.apple.com/safari/](https://www.apple.com/safari/))
    
* Opera ([https://www.opera.com/](https://www.opera.com/))
    
* Yandex ([https://browser.yandex.com/](https://browser.yandex.com/))
    
* Microsoft Edge ([https://www.microsoft.com/en-us/edge](https://www.microsoft.com/en-us/edge?exp=e501&form=MA13FJ))
    

**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/](https://realfavicongenerator.net/)
    
* Convert your image into a circular image here: [https://crop-circle.imageonline.co/](https://crop-circle.imageonline.co/)
    
* To add audio to the video Online Converter was used: [https://www.onlineconverter.com/add-audio-to-video](https://www.onlineconverter.com/add-audio-to-video)
    
* Quickly resize your picture image resizer: [https://imageresizer.com/](https://imageresizer.com/)
    
* Content delivery service cdnjs: [https://cdnjs.com/](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.*