screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp&display=swap" rel="stylesheet"> </head> <body> <div class="container"> <h3>Google Material Icons CDN</h3> <div class="card"><i class="material-icons">check_circle</i> <i class="material-icons-outlined">star</i> <i class="material-icons-two-tone">thumb_up</i> <i class="material-icons-round">favorite</i> <i class="material-icons-outlined">settings</i> <i class="material-icons-two-tone">mail</i> <i class="material-icons">person</i> <i class="material-icons-outlined">cloud_upload</i> <i class="material-icons-two-tone">attach_file</i> <i class="material-icons-round">location_on</i> <i class="material-icons-outlined">alarm</i> <i class="material-icons-two-tone">check</i> <i class="material-icons">book</i> <i class="material-icons-outlined">dashboard</i> <i class="material-icons-two-tone">face</i> <i class="material-icons">logout</i> </div> </div> </body> <style> .container { margin: 0 auto; width: 600px; padding: 20px; display: flex; align-items: center; flex-direction: column; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24); } .card { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; justify-items: center; } .card i { font-size: 24px; color: #333; padding: 20px; transition: color 0.3s ease-in-out; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24); } .card i:hover { color: #ff0000; /* Change to your desired hover color */ cursor: pointer; } </style> </html>