1 * {2 box-sizing: border-box;3 margin: 0;4 padding: 0;5 font-family: Arial, sans-serif;6 }7 8 body {9 background-color: #f4f6f8;10 color: #333;11 }12 13 header {14 display: flex;15 justify-content: space-between;16 align-items: center;17 background-color: #2c3e50;18 padding: 10px 20px;19 color: #fff;20 }21 22 .logo {23 font-size: 1.5em;24 font-weight: bold;25 }26 27 nav ul {28 list-style: none;29 display: flex;30 }31 32 nav ul li {33 margin-left: 20px;34 }35 36 nav ul li a {37 color: #fff;38 text-decoration: none;39 padding: 8px 12px;40 border-radius: 4px;41 transition: background-color 0.3s;42 }43 44 nav ul li a:hover {45 background-color: #34495e;46 }47 48 .user-profile {49 position: relative;50 }51 52 .user-profile img {53 width: 40px;54 height: 40px;55 border-radius: 50%;56 }57 58 .dropdown {59 position: absolute;60 top: 50px;61 right: 0;62 display: none;63 }64 65 .dropdown-content {66 background-color: #fff;67 color: #333;68 min-width: 150px;69 box-shadow: 0px 8px 16px rgba(0,0,0,0.2);70 border-radius: 4px;71 overflow: hidden;72 z-index: 1;73 }74 75 .dropdown-content a {76 padding: 12px 16px;77 display: block;78 text-decoration: none;79 color: #333;80 }81 82 .dropdown-content a:hover {83 background-color: #f1f1f1;84 }85 86 .dropbtn {87 background: none;88 border: none;89 color: #fff;90 cursor: pointer;91 font-size: 1em;92 }93 94 .user-profile:hover .dropdown {95 display: block;96 }97 98 main {99 padding: 20px;100 }101 102 .dashboard-overview {103 display: grid;104 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));105 gap: 20px;106 }107 108 .dashboard-overview div {109 background-color: #fff;110 padding: 20px;111 border-radius: 8px;112 box-shadow: 0px 2px 4px rgba(0,0,0,0.1);113 }114 115 .dashboard-overview h2 {116 margin-bottom: 15px;117 font-size: 1.2em;118 color: #2c3e50;119 }120 121 .storage-summary {122 display: flex;123 flex-direction: column;124 align-items: center;125 }126 127 .storage-chart {128 width: 100px;129 height: 100px;130 background-color: #bdc3c7;131 border-radius: 50%;132 margin-bottom: 10px;133 position: relative;134 }135 136 .circle {137 width: 100%;138 height: 100%;139 background: conic-gradient(#27ae60 60%, #bdc3c7 0%);140 border-radius: 50%;141 }142 143 .storage-details p {144 margin: 5px 0;145 }146 147 .backup-status ul, .recent-activity ul, .alerts-notifications ul {148 list-style: none;149 }150 151 .backup-status li, .recent-activity li, .alerts-notifications li {152 margin-bottom: 10px;153 }154 155 .backup-status button {156 padding: 10px 15px;157 background-color: #2980b9;158 color: #fff;159 border: none;160 border-radius: 4px;161 cursor: pointer;162 transition: background-color 0.3s;163 }164 165 .backup-status button:hover {166 background-color: #3498db;167 }168 Enlace
El enlace para compartir es: