<!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>🎯</div>
<div>☕</div>
<div>🔥</div>
<div>💪</div>
<div>🚀</div>
<div>👍</div>
<div>😀</div>
<div>💖</div>
<div>😍</div>
<div>😇</div>
<div>😈</div>
<div>😎</div>
<div>😁</div>
<div>⌛</div>
<div>✅</div>
<div>🔩</div>
<div>⌚</div>
<div>✌</div>
<div>☝</div>
<div>✊</div>
<div>🌍</div>
<div>✍</div>
<div>🌞</div>
<div>🌙</div>
<div>❤</div>
<div>🎉</div>
<div>🌟</div>
<div>🙏</div>
<div>❌</div>
<div>❎</div>
<div>⛔</div>
<div>🛑</div>
</div>
</body>
</html>
No comments:
Post a Comment