Emojis

 

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

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

    <title>Emoji Grid</title>

    <style>

        body{

            display: flex;

            justify-content: center;

            align-items: center;

            min-height: 100vh;

            background: #f5f5f5;

            margin: 0;

        }

        .emoji-grid{

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));

            gap: 15px;

            max-width: 600px;

            padding: 20px;

        }

        .emoji-grid div{

            font-size: 2.5rem;

            background: #fff;

            border: 1px solid #ddd;

            border-radius: 10px;

            display: flex;

            justify-content: center;

            align-items: center;

            padding: 15px;

            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

        }

    </style>

</head>

<body>

    <div class="emoji-grid">

        <div>&#127919</div>

        <div>&#9749</div>

        <div>&#128293</div>

        <div>&#128170</div>

        <div>&#128640</div>

        <div>&#128077</div>

        <div>&#128512</div>

        <div>&#128150</div>

        <div>&#128525</div>

        <div>&#128519</div>

        <div>&#128520</div>

        <div>&#128526</div>

        <div>&#128513</div>

        <div>&#8987</div>

        <div>&#9989</div>

        <div>&#128297</div>

        <div>&#8986</div>

        <div>&#9996</div>

        <div>&#9757</div>

        <div>&#9994</div>

        <div>&#127757</div>

        <div>&#9997</div>

        <div>&#127774</div>

        <div>&#127769</div>

        <div>&#10084</div>

        <div>&#127881</div>

        <div>&#127775</div>

        <div>&#128591</div>

        <div>&#10060</div>

        <div>&#10062</div>

        <div>&#9940</div>

        <div>&#128721</div>

    </div>

</body>

</html>

No comments:

Post a Comment