1 <!DOCTYPE html>2 <html lang="es">3 <head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Mi Mundo - Menú de Autenticación</title>7 <style>8 body {9 font-family: Arial, sans-serif;10 margin: 0;11 padding: 0;12 background-color: #f4f8fc;13 color: #333;14 }15 .container {16 max-width: 400px;17 margin: 0 auto;18 padding: 20px;19 text-align: center;20 }21 .header {22 font-size: 24px;23 margin-bottom: 20px;24 }25 .user-list {26 display: flex;27 flex-direction: column;28 gap: 15px;29 }30 .user {31 display: flex;32 align-items: center;33 justify-content: space-between;34 background-color: #fff;35 padding: 10px 15px;36 border-radius: 8px;37 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);38 }39 .user img {40 width: 40px;41 height: 40px;42 border-radius: 50%;43 margin-right: 10px;44 }45 .user .name {46 flex-grow: 1;47 text-align: left;48 }49 .settings {50 cursor: pointer;51 color: #007bff;52 font-size: 16px;53 }54 .add-user {55 margin-top: 20px;56 padding: 10px 15px;57 font-size: 16px;58 background-color: #007bff;59 color: white;60 border: none;61 border-radius: 8px;62 cursor: pointer;63 transition: background-color 0.3s;64 }65 .add-user:hover {66 background-color: #0056b3;67 }68 </style>69 </head>70 <body>71 <div class="container">72 <div class="header">Selecciona un usuario</div>73 <div class="user-list">74 <div class="user">75 <div class="name">Pablo</div>76 <div class="settings">⚙️ Configurar</div>77 </div>78 <div class="user">79 <div class="name">Sara</div>80 <div class="settings">⚙️ Configurar</div>81 </div>82 </div>83 <button class="add-user">Agregar usuario</button>84 </div>85 </body>86 </html>87 Enlace
El enlace para compartir es: