<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Menu Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="menu"> <div class="menu-item"> <i class="icon home-icon"></i> <span>Anasayfa</span> </div> <div class="menu-item"> <i class="icon message-icon"></i> <span>Yeni Mesajlar</span> </div> <div class="menu-item"> <i class="icon popular-icon"></i> <span>Popüler Konular</span> </div> <div class="menu-item"> <i class="icon menu-icon"></i> <span>Hızlı Menü</span> </div> </div> </body> </html>
/* styles.css */ body { font-family: Arial, sans-serif; background-color: #282c35; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .menu { display: flex; background-color: #333a4a; padding: 20px; border-radius: 8px; } .menu-item { flex: 1; text-align: center; color: #ffffff; font-size: 14px; } .menu-item i { display: block; font-size: 24px; margin-bottom: 8px; } /* Placeholder icons for demonstration */ .home-icon::before { content: "🏠"; } .message-icon::before { content: "✉️"; } .popular-icon::before { content: "📄"; } .menu-icon::before { content: "☰"; }iyi günlerde kullanın