Mobile Tab Bar HTML

<!-- Created by TheiPhoneFan on 2024-04-05 -->
<!-- Revised On 2024-05-04 -->
<!DOCTYPE html>
<html>

<head>
    <style>
        .bottom-tab-bar {
            background-image: url('https://theiphonefan.w3spaces.com/theme/pinstripes-1x.png');
            height: 55px;
            width: 98.5%;
            border-radius: 16px;
            position: fixed;
            bottom: 0;
            border: 1px solid grey;
        }

        .bottom-tab-bar img {
            height: 45px;
            margin: 5px;
        }

        .bottom-tab-bar img:hover {
            background-color: #bfbfbf;
            border-radius: 5px;
        }

        .menu {
            padding: 0;
            margin: 0;
        }

        .menu li {
            display: inline;
            text-align: center;
        }

        a {
            text-decoration:none;
        }

        /* Implement this if you wish to only show the tab bar on mobile.
        @media screen and (min-width:750px) {
            .bottom-tab-bar {
                display: none;
            }
        }
        */
    </style>
</head>

<body>
    <div class="bottom-tab-bar">
        <ul class="menu">
            <!-- Articles Tab Button -->
            <li>
                <a href="https://theiphonefan.w3spaces.com/articles.html">
                    <img src="https://theiphonefan.w3spaces.com/theme/glyphs/articles.png">
                </a>
            </li>

            <!-- Clipart Tab Button -->
            <li>
                <a href="https://theiphonefan.w3spaces.com/clipart.html">
                    <img src="https://theiphonefan.w3spaces.com/theme/glyphs/clipart.png">
                </a>
            </li>

            <!-- My Photograhy Tab Button -->
            <li>
                <a href="https://theiphonefan.w3spaces.com/my-photography.html">
                    <img src="https://theiphonefan.w3spaces.com/theme/glyphs/my-photography.png">
                </a>
            </li>
        </ul>
    </div>
</body>

</html>