HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!

85x19

1.68 KB

Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:

Script

Open in browser

**index.html**
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI World</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Header Section -->
    <header id="header">
        <nav id="nav-bar">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About A.I.</a></li>
                <li><a href="#contact">Contact Us</a></li>
            </ul>
        </nav>
    </header>

    <!-- Hero Section -->
    <section id="hero">
        <h1>Welcome to AI World</h1>
        <p>A world where technology and human intelligence come together.</p>
        <button>Learn More</button>
    </section>

    <!-- Home Section -->
    <section id="home">
        <h2>What is A.I.? </h2>
        <p>A.I. stands for Artificial Intelligence, which refers to the development of computer systems able to perform tasks that
typically require human intelligence.</p>
        <img src="images/ai.jpg" alt="A.I. Image">

        <!-- Feature Section -->
        <div id="features">
            <h3>Key Features:</h3>
            <ul>
                <li><i class="fas fa-check"></i>Machine Learning</li>
                <li><i class="fas fa-check"></i>Natural Language Processing</li>
                <li><i class="fas fa-check"></i>Computer Vision</li>
                <li><i class="fas fa-check"></i>Robotics</li>
            </ul>
        </div>
    </section>

    <!-- About Section -->
    <section id="about">
        <h2>About A.I.</h2>
        <p>A.I. has revolutionized the way we live and work, transforming industries such as healthcare, finance, education, and
transportation.</p>
        <img src="images/ai-about.jpg" alt="A.I.-About Image">

        <!-- Fact Section -->
        <div id="facts">
            <h3>Interesting Facts:</h3>
            <ul>
                <li><i class="fas fa-check"></i>A.I. has increased efficiency by 50% in the healthcare industry.</li>
                <li><i class="fas fa-check"></i>A.I. has improved customer satisfaction by 30% in the finance industry.</li>
                <li><i class="fas fa-check"></i>A.I. has enabled machines to learn and adapt faster than humans.</li>
            </ul>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact">
        <h2>Get in Touch</h2>
        <p>Have a question or want to collaborate? Let's talk!</p>
        <form id="contact-form">
            <input type="text" placeholder="Name">
            <input type="email" placeholder="Email">
            <textarea placeholder="Message"></textarea>
            <button>Send Message</button>
        </form>
    </section>

    <!-- Footer Section -->
    <footer id="footer">
        <p>&copy; 2023 AI World. All rights reserved.</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>
```

**styles.css**
```css
/* Global Styles */
* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Header Styles */
#header {
    background-color: #333;
    color: #fff;
    padding: 1rem;
    text-align: center;
}

#nav-bar {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
}

#nav-bar li {
    margin-right: 20px;
}

#nav-bar a {
    color: #fff;
    text-decoration: none;
}

/* Hero Styles */
#hero {
    background-image: linear-gradient(to bottom, #f0f0f0, #333);
    background-size: cover;
    padding: 5rem 2rem;
}

#hero h1 {
    font-weight: bold;
}

/* Feature Styles */
#features ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#features li {
    margin-bottom: 10px;
}

/* Fact Styles */
#facts ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#facts li {
    margin-bottom: 10px;
}
```

**script.js**
```javascript
// Selecting elements
const heroButton = document.querySelector("#hero button");
const contactForm = document.querySelector("#contact-form");

// Event listeners
heroButton.addEventListener("click", () => {
    alert("Learn more about A.I.");
});

contactForm.addEventListener("submit", (e) => {
    e.preventDefault();
    const formData = new FormData(contactForm);
    // Send form data to server-side API or email service
});
```

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

2KB

Transfer Size

5KB

Content Size

180.0ms

Dom Content Loaded

97.0ms

First Paint

181.0ms

Load Time

Domain Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests

Timings (ms)

Total Time

Content Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests