Using ChatGPT for custom HTML – business info box

Could ChatGPT (version four) make me a quick add-on for a website? Lets see. I asked:

“I want some HTML for a a block component on a WordPress website. I would like the block to be used after information about a business, to list the address, phone number and website. I would like the boxed element to have rounded corners and be visually appealing”

It came back as follows:

I understand that you would like a visually appealing block component with rounded corners for your WordPress website to display address, phone number, and website information. Here’s an example of HTML and CSS code that you can use:

First, create a new Custom HTML block in your WordPress editor and paste the following code:

<div class="contact-info-box">
    <h3>Contact Information</h3>
    <ul>
        <li><strong>Address:</strong> 123 Main St, City, State, Zip Code</li>
        <li><strong>Phone:</strong> (123) 456-7890</li>
        <li><strong>Website:</strong> <a href="https://www.example.com" target="_blank">www.example.com</a></li>
    </ul>
</div>

Next, to style the block component, add the following CSS code to your WordPress theme’s custom CSS section or child theme’s style.css file:

.contact-info-box {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    max-width: 500px;
}

.contact-info-box h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.contact-info-box ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

.contact-info-box li {
    margin-bottom: 5px;
}

.contact-info-box a {
    color: #007bff;
    text-decoration: none;
}

.contact-info-box a:hover {
    text-decoration: underline;
}

This code will create a block component with rounded corners, a light gray background, and a drop shadow to make it visually appealing. The contact information will be displayed in an unordered list, and the website link will be underlined when hovered over. You can adjust the colors, padding, and other styling properties to match your website’s design.

---

Here’s how that looks in usage:

Not bad, not bad at all huh.

Featured image: a robot sat at desk working on designing a website using a laptop computer, a vintage style photograph, 4k –ar 3:2 –v 5