Untitled

avatar
unknown
plain_text
a year ago
2.4 kB
3
Indexable
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
    <title>Senior-Friendly App UI</title>
</head>

<body>
    <nav class="container-fluid">
        <ul>
            <li><strong>AppName</strong></li>
        </ul>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#" role="button">Contact</a></li>
        </ul>
    </nav>

    <main class="container">
        <div class="grid">
            <section>
                <hgroup>
                    <h2>Welcome to AppName</h2>
                    <h3>Designed with simplicity in mind</h3>
                </hgroup>
                <p>AppName is built to help you stay connected, informed, and entertained. Enjoy the simplicity and ease of use.</p>
                <figure>
                    <img src="https://source.unsplash.com/random/800x600" alt="App Interface" />
                    <figcaption><a href="#" target="_blank">Explore Features</a></figcaption>
                </figure>
                <h3>Easy to Use</h3>
                <p>Large buttons and clear instructions guide you every step of the way.</p>
                <h3>Safe and Secure</h3>
                <p>Your privacy and security are our top priorities. Enjoy peace of mind with AppName.</p>
            </section>
        </div>
    </main>

    <section aria-label="Subscribe example">
        <div class="container">
            <article>
                <hgroup>
                    <h2>Stay Updated</h2>
                    <h3>Subscribe for the latest news</h3>
                </hgroup>
                <form class="grid">
                    <input type="text" id="firstname" name="firstname" placeholder="Your Name" aria-label="Your Name" required />
                    <input type="email" id="email" name="email" placeholder="Your Email" aria-label="Your Email" required />
                    <button type="submit" onclick="event.preventDefault()">Subscribe</button>
                </form>
            </article>
        </div>
    </section>

    <footer class="container">
        <small>
            <a href="#">Privacy Policy</a> • <a href="#">Terms of Service</a>
        </small>
    </footer>
</body>

</html>
Editor is loading...
Leave a Comment