<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dark Mode</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="switch">Dark mode:
        <span class="inner-switch">OFF</span>
    </div>
    <h1 class="title">Animals</h1>
    <article>
        <h1>Lion</h1>
        <p><small>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur, laudantium.</small></p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius, nulla. Debitis qui quam, ratione totam voluptatibus vitae necessitatibus sit laudantium, optio quis nam quidem est officia nemo architecto cum repellendus dolores eveniet ullam eligendi porro?</p>
        <img src="https://www.myritebook.com/wp-content/uploads/2025/11/Lion.jpg">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium tempora error deleniti eum facilis eaque neque laboriosam repellat molestiae deserunt, aliquid numquam a, nisi qui ipsa debitis obcaecati, voluptate expedita veritatis similique laudantium. Magni dolorum dolores labore eius aut. Fugiat.</p>
    </article>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
