<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>White Cafe Menu</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        

        body, html {

            height: 100%;

            overflow: auto;

        }

        

        .menu-container {

            width: 100vw;

            height: 100vh;

            display: flex;

            justify-content: center;

            align-items: center;

            background-color: #f5f5f5;

        }

        

        .menu-image {

            max-width: 100%;

            max-height: 100vh;

            object-fit: contain;

            display: block;

        }

        

        @media (max-width: 768px) {

            .menu-image {

                width: 100%;

                height: 100%;

                object-fit: cover;

            }

        }

    </style>

</head>

<body>

    <div class="menu-container">

        <img src="menu.png” alt="White Cafe Menu" class="menu-image">

    </div>

</body>

</html>