Proyectos (DIA 1 - 13)

Realizados gracias al curso "JAVASCRIPT TOTAL"
2026-08-15 02:50:10 +00:00 · 2026-01-30 19:16:11 -05:00
commit 03a7ef3253
67 changed files with 2204 additions and 0 deletions
@@ -0,0 +1,142 @@
+body {
+    text-align: center;
+    font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
+    max-width: 420px;
+    margin: 0 auto;
+    padding: 40px 20px;
+    background: linear-gradient(180deg, #0f172a, #020617);
+    color: #e5e7eb;
+    animation: fadeIn 0.8s ease-out;
+}
+
+/* Título */
+h1 {
+    color: #38bdf8;
+    font-weight: 500;
+    letter-spacing: 1px;
+    margin-bottom: 25px;
+    animation: slideDown 0.8s ease-out;
+}
+
+/* Logo */
+.logo img {
+    height: 160px;
+    width: 160px;
+    border-radius: 50%;
+    margin-bottom: 20px;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
+    animation: popIn 0.7s ease-out;
+}
+
+/* Loader */
+.espera img {
+    height: 28px;
+    width: 28px;
+    visibility: hidden;
+    margin-top: 20px;
+    animation: spin 1.2s linear infinite;
+}
+
+
+/* Tarjeta de cotizaciones */
+.cuadro {
+    background: rgba(15, 23, 42, 0.85);
+    border-radius: 14px;
+    padding: 20px 10px;
+    margin: 20px 0;
+    box-shadow:
+        0 15px 30px rgba(0,0,0,0.6),
+        inset 0 1px 0 rgba(255,255,255,0.04);
+    animation: riseUp 0.9s ease-out;
+    transition:
+        transform 0.25s ease,
+        box-shadow 0.25s ease;
+}
+
+.cuadro:hover {
+    transform: translateY(-4px);
+    box-shadow:
+        0 20px 40px rgba(0,0,0,0.7),
+        inset 0 1px 0 rgba(255,255,255,0.06);
+}
+
+/* Cada fila */
+.cuadro div {
+    margin: 16px 0;
+    font-size: 1rem;
+    letter-spacing: 0.3px;
+    transition: color 0.25s ease, transform 0.25s ease;
+}
+
+.cuadro div:hover {
+    color: #e0f2fe;
+    transform: translateX(4px);
+}
+
+/* BTC destacado */
+#btc {
+    color: #facc15;
+    font-weight: 600;
+}
+
+/* USD / EUR */
+#UsdEur,
+#UsdCop {
+    color: #a5f3fc;
+}
+
+/* Separador elegante */
+.cuadro div:not(:last-child) {
+    border-bottom: 1px solid rgba(255,255,255,0.08);
+    padding-bottom: 10px;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-15px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes popIn {
+    0% {
+        opacity: 0;
+        transform: scale(0.85);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes riseUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}