HTML5 Widget A.I. Generator

Widget Type: Hero Section with Image Hero Section with Headline over Image, no excerpt Hero Section with Headline over Image, excerpt below image Headline with Call to Action Button widget Portable Dashboard Widget Creativity: Deterministic Mild Creativity Average Creativity Above-average Creativity Highly Creative Psychedelic Psychosis

Error message here

Cool Widget

This is a cool widget!

                    

<!-- COOL WIDGET -->
<div class="cool-widget">
    <h2>Cool Widget</h2>
    <div class="cool-widget-container">
        <img src="https://myhomeio.com/wp-content/uploads/2023/04/3f39a01e-1aa4-464a-9ffd-6825f27289aa.png" alt="Cool Widget Image" width="200" height="200">
        <div class="cool-widget-text">
            <p>This is a cool widget!</p>
        </div>
    </div>
    <audio src="https://myhomeio.com/wp-content/uploads/2023/06/AI_Test_Kitchen_funky_song_using_lots_of_guitar_and_brass_hor.mp3" controls></audio>
    <video src="https://myhomeio.com/wp-content/uploads/2023/06/2021-11-15-21-02-57.mp4" width="320" height="240" controls></video>
</div>

<style>
    .cool-widget {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .cool-widget-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .cool-widget-text {
        margin-left: 10px;
    }
</style>

The ChatGPT prompt currently being used is as follows:

Write the html5, css3 and javascript code for a useful widget or cool web site feature or code snippet.
Make sure to enclose the css rules in <style></style> tags and place the styles at the end of the code.
Write the code so that it can be portable and will not conflict with other elements, classes or style 
rules on any page it is pasted into.
Use semantic tags instead of divs and adhere to semantic HTML markup best practice.
When creating img tags, use one of the following image urls as the placeholder image and use explicit height and width values 
according to the widget design: 
    https://myhomeio.com/wp-content/uploads/2023/04/3f39a01e-1aa4-464a-9ffd-6825f27289aa.png
    https://myhomeio.com/wp-content/uploads/2023/04/21c24407-49c6-4f01-88be-e42f0a1504ce.jpg
    https://myhomeio.com/wp-content/uploads/2023/04/016e154a-b1c4-4cfe-9507-c3fbcf18b586.png
    https://myhomeio.com/wp-content/uploads/2023/02/smart-home-camera-looking-down-over-robot.png

If your code includes any audio tags, use one of the following audio urls:
        https://myhomeio.com/wp-content/uploads/2023/06/AI_Test_Kitchen_funky_song_using_lots_of_guitar_and_brass_hor.mp3
        https://myhomeio.com/wp-content/uploads/2023/06/sample-9s.mp3
Don't always include audio.
        
If your code includes any video tags, use one of the following video urls:        
        https://myhomeio.com/wp-content/uploads/2023/06/2021-11-15-21-02-57.mp4
        https://myhomeio.com/wp-content/uploads/2023/06/2021-11-15-20-48-46.mp4
Don't always include video.
        
Do not infer any context from the image, audio or video urls, they are simply placeholders.
Give your new html code a cool name.