Spaces:
Running
Running
make more color sexy create a new dark pallet colors theme
Browse files- index.html +7 -4
- style.css +32 -9
index.html
CHANGED
|
@@ -13,14 +13,17 @@
|
|
| 13 |
theme: {
|
| 14 |
extend: {
|
| 15 |
colors: {
|
| 16 |
-
primary: '#
|
| 17 |
-
secondary: '#
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
| 19 |
}
|
| 20 |
}
|
| 21 |
}
|
| 22 |
}
|
| 23 |
-
|
| 24 |
</head>
|
| 25 |
<body class="bg-[#0a0a0a] text-gray-200">
|
| 26 |
<custom-navbar></custom-navbar>
|
|
|
|
| 13 |
theme: {
|
| 14 |
extend: {
|
| 15 |
colors: {
|
| 16 |
+
primary: '#7c3aed', // violet-600
|
| 17 |
+
secondary: '#10b981', // emerald-500
|
| 18 |
+
accent: '#ec4899', // pink-500
|
| 19 |
+
dark: '#0f0f0f', // custom dark
|
| 20 |
+
light: '#f0f0f0', // custom light
|
| 21 |
+
card: '#1a1a1a', // custom card bg
|
| 22 |
}
|
| 23 |
}
|
| 24 |
}
|
| 25 |
}
|
| 26 |
+
</script>
|
| 27 |
</head>
|
| 28 |
<body class="bg-[#0a0a0a] text-gray-200">
|
| 29 |
<custom-navbar></custom-navbar>
|
style.css
CHANGED
|
@@ -1,10 +1,15 @@
|
|
| 1 |
|
| 2 |
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap');
|
| 3 |
:root {
|
| 4 |
-
--bg-color: #
|
| 5 |
-
--text-color: #
|
| 6 |
-
--border-color: #
|
| 7 |
-
--highlight-color: #
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 8 |
}
|
| 9 |
* {
|
| 10 |
font-family: 'Vazirmatn', sans-serif;
|
|
@@ -38,14 +43,13 @@ input, textarea, select, button {
|
|
| 38 |
::-webkit-scrollbar-track {
|
| 39 |
background: var(--bg-color);
|
| 40 |
}
|
| 41 |
-
|
| 42 |
::-webkit-scrollbar-thumb {
|
| 43 |
-
background:
|
| 44 |
border-radius: 4px;
|
| 45 |
}
|
| 46 |
|
| 47 |
::-webkit-scrollbar-thumb:hover {
|
| 48 |
-
background:
|
| 49 |
}
|
| 50 |
/* Animation classes */
|
| 51 |
.fade-in {
|
|
@@ -74,21 +78,40 @@ input, textarea, select, button {
|
|
| 74 |
0%, 100% { opacity: 1; }
|
| 75 |
50% { opacity: 0.5; }
|
| 76 |
}
|
| 77 |
-
|
| 78 |
.highlight-box {
|
| 79 |
position: relative;
|
|
|
|
|
|
|
|
|
|
| 80 |
}
|
| 81 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 82 |
.highlight-box::before {
|
| 83 |
content: '';
|
| 84 |
position: absolute;
|
| 85 |
inset: -5px;
|
| 86 |
-
border: 2px solid
|
| 87 |
border-radius: 1rem;
|
| 88 |
animation: highlight-pulse 4s ease infinite;
|
| 89 |
pointer-events: none;
|
| 90 |
}
|
| 91 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 92 |
@keyframes highlight-pulse {
|
| 93 |
0%, 100% { opacity: 0; }
|
| 94 |
50% { opacity: 1; }
|
|
|
|
| 1 |
|
| 2 |
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap');
|
| 3 |
:root {
|
| 4 |
+
--bg-color: #0f0f0f;
|
| 5 |
+
--text-color: #f0f0f0;
|
| 6 |
+
--border-color: #333333;
|
| 7 |
+
--highlight-color: #7c3aed;
|
| 8 |
+
--accent-color: #ec4899;
|
| 9 |
+
--secondary-color: #10b981;
|
| 10 |
+
--card-bg: #1a1a1a;
|
| 11 |
+
--gradient-start: #7c3aed;
|
| 12 |
+
--gradient-end: #ec4899;
|
| 13 |
}
|
| 14 |
* {
|
| 15 |
font-family: 'Vazirmatn', sans-serif;
|
|
|
|
| 43 |
::-webkit-scrollbar-track {
|
| 44 |
background: var(--bg-color);
|
| 45 |
}
|
|
|
|
| 46 |
::-webkit-scrollbar-thumb {
|
| 47 |
+
background: var(--highlight-color);
|
| 48 |
border-radius: 4px;
|
| 49 |
}
|
| 50 |
|
| 51 |
::-webkit-scrollbar-thumb:hover {
|
| 52 |
+
background: var(--accent-color);
|
| 53 |
}
|
| 54 |
/* Animation classes */
|
| 55 |
.fade-in {
|
|
|
|
| 78 |
0%, 100% { opacity: 1; }
|
| 79 |
50% { opacity: 0.5; }
|
| 80 |
}
|
|
|
|
| 81 |
.highlight-box {
|
| 82 |
position: relative;
|
| 83 |
+
background: var(--card-bg);
|
| 84 |
+
border: 1px solid rgba(124, 58, 237, 0.2);
|
| 85 |
+
transition: all 0.3s ease;
|
| 86 |
}
|
| 87 |
|
| 88 |
+
.highlight-box:hover {
|
| 89 |
+
border-color: rgba(124, 58, 237, 0.5);
|
| 90 |
+
transform: translateY(-3px);
|
| 91 |
+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
| 92 |
+
}
|
| 93 |
.highlight-box::before {
|
| 94 |
content: '';
|
| 95 |
position: absolute;
|
| 96 |
inset: -5px;
|
| 97 |
+
border: 2px solid var(--highlight-color);
|
| 98 |
border-radius: 1rem;
|
| 99 |
animation: highlight-pulse 4s ease infinite;
|
| 100 |
pointer-events: none;
|
| 101 |
}
|
| 102 |
|
| 103 |
+
.gradient-bg {
|
| 104 |
+
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
|
| 105 |
+
}
|
| 106 |
+
|
| 107 |
+
.glow-text {
|
| 108 |
+
text-shadow: 0 0 8px rgba(236, 72, 153, 0.6);
|
| 109 |
+
}
|
| 110 |
+
|
| 111 |
+
.neon-border {
|
| 112 |
+
border: 1px solid var(--highlight-color);
|
| 113 |
+
box-shadow: 0 0 10px var(--highlight-color), 0 0 20px rgba(124, 58, 237, 0.3);
|
| 114 |
+
}
|
| 115 |
@keyframes highlight-pulse {
|
| 116 |
0%, 100% { opacity: 0; }
|
| 117 |
50% { opacity: 1; }
|