img/install.html

<style>
    .chrome{
        color: white;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 1rem;
        background-image: linear-gradient(to top right, rgb(253 224 71),rgb(21 128 61));
        padding: 1rem;
        border-radius: 0.25rem;
        width: 250px;
    }    
    .edge{
        color: white;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 1rem;
        background-image: linear-gradient(to top right, rgb(29 78 216),rgb(21 128 61));
        padding: 1rem;
        border-radius: 0.25rem;
        width: 250px;
    }
    .firefox{
        color: white;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 1rem;
        background-image: linear-gradient(to top right, rgb(194 65 12),rgb(161 98 7));
        padding: 1rem;
        border-radius: 0.25rem;
        width: 250px;
    }
    .img{
        width: 3rem;
        height: 3rem;
    }
    .text{
        font-size: 0.875rem; /* 14px */
        line-height: 1.25rem; /* 20px */
    }
</style>
<html>
    <!-- <a target="_blank" class="firefox" href="https://addons.mozilla.org/zh-CN/firefox/addon/notepal/">
        <img src="firefox.svg" class="img" alt="">
        <div>
            <div>适用于 Mozilla Firefox</div>
            <div class="text">从 Firefox 商店安装</div>
        </div>
    </a> -->

    <a target="_blank" class="firefox" href="https://addons.mozilla.org/zh-CN/firefox/addon/notepal/">
        <img src="firefox.svg" class="img" alt="">
        <div>
            <div>Applies to Mozilla Firefox</div>
            <div class="text">Install from Firefox store</div>
        </div>
    </a>

    <a target="_blank" class="edge" href="https://addons.mozilla.org/zh-CN/firefox/addon/notepal/">
        <img src="edge.svg" class="img" alt="">
        <div>
            <div>适用于 to Edge</div>
            <div class="text">从 Edge 商店安装</div>
        </div>
    </a>

    <a target="_blank" class="edge" href="https://addons.mozilla.org/zh-CN/firefox/addon/notepal/">
        <img src="edge.svg" class="img" alt="">
        <div>
            <div>Applies to Edge</div>
            <div class="text">Install from Edge store</div>
        </div>
    </a>

    <a target="_blank" class="chrome" href="https://addons.mozilla.org/zh-CN/firefox/addon/notepal/">
        <img src="chrome.svg" class="img" alt="">
        <div>
            <div>Applies to Chrome</div>
            <div class="text">Install from Chrome store</div>
        </div>
    </a>

    <a target="_blank" class="chrome" href="https://addons.mozilla.org/zh-CN/firefox/addon/notepal/">
        <img src="chrome.svg" class="img" alt="">
        <div>
            <div>适用于 to Chrome</div>
            <div class="text">从 Chrome 商店安装</div>
        </div>
    </a>


</html>