Refined UI with Pastel Color Palette for Tags

Author: TranHuuDat2004

projects.html

@@ -40,202 +40,161 @@
         /* CSS CHO TAG PHÂN LOẠI DỰ ÁN */
         .project-category-tag {
             display: inline-block;
-            background-color: var(--bs-primary);
-            /* Sử dụng màu primary của Bootstrap */
-            color: white;
+            background-color: #b3cde0; /* Pastel blue */
+            color: #333;
             padding: 0.3rem 0.8rem;
             font-size: 0.75rem;
             font-weight: 600;
             border-radius: 50px;
-            /* Bo tròn mạnh như pill */
             margin-bottom: 0.75rem;
-            /* Khoảng cách với tiêu đề dự án */
             text-transform: uppercase;
             letter-spacing: 0.05em;
         }
 
-        /* Tùy chọn: Thêm các màu khác cho các loại tag khác nhau nếu muốn */
         .project-category-tag.frontend {
-            background-color: #198754;
-            /* Màu success của Bootstrap */
+            background-color: #ccebc5; /* Pastel green */
         }
 
         .project-category-tag.mobile {
-            background-color: #ffc107;
-            /* Màu warning của Bootstrap */
+            background-color: #ffedbc; /* Pastel yellow */
             color: #333;
-            /* Đổi màu chữ cho dễ đọc trên nền vàng */
         }
 
         .project-category-tag.ml {
-            background-color: #6f42c1;
-            /* Màu indigo hoặc purple của Bootstrap */
+            background-color: #decbe4; /* Pastel purple */
         }
 
         .project-category-tag.fullstack {
-            background-color: #0d6efd;
-            /* Màu primary của Bootstrap */
+            background-color: #fed9a6; /* Pastel orange */
         }
 
-        /* Class cơ sở cho các tag đặc biệt - bạn có thể dùng màu primary hoặc một màu chung */
         .project-tag-special {
-            background-color: var(--bs-primary);
-            /* Màu primary mặc định */
+            background-color: #b3cde0; /* Pastel blue */
         }
 
-        /* Các biến thể màu sắc/style (ví dụ) */
         .project-tag-highly-recommended {
-            background-color: #198754;
-            /* Màu success (xanh lá) */
+            background-color: #ccebc5; /* Pastel green */
         }
 
         .project-tag-featured {
-            background-color: #ffc107;
-            /* Màu warning (vàng) */
+            background-color: #ffedbc; /* Pastel yellow */
             color: #333;
-            /* Chữ đen cho dễ đọc trên nền vàng */
         }
 
         .project-tag-best-choice {
-            background-color: #dc3545;
-            /* Màu danger (đỏ) - hoặc một màu nổi bật khác */
+            background-color: #fddaec; /* Pastel pink */
         }
 
         .project-tag-new-release {
-            background-color: #0dcaf0;
-            /* Màu info (xanh dương nhạt) */
-            color: #fff;
+            background-color: #b3e2cd; /* Pastel teal */
+            color: #333;
         }
 
         .project-tag-learning {
-            /* Dành cho dự án thử nghiệm như games_tools */
-            background-color: #6c757d;
-            /* Màu secondary (xám) */
+            background-color: #e6e6e6; /* Pastel gray */
         }
 
-
-
         /* CSS CHO TECH TAGS */
         .tech-stack-container {
             margin-top: 0.75rem;
-            /* Khoảng cách với đoạn mô tả ở trên */
             margin-bottom: 0.5rem;
-            /* Khoảng cách với các nút bên dưới */
         }
 
         .tech-tag {
             display: inline-block;
             padding: 0.35em 0.65em;
-            /* Padding của Bootstrap badge */
             font-size: 0.8em;
-            /* Kích thước chữ nhỏ hơn một chút */
             font-weight: 600;
             line-height: 1;
-            color: #fff;
+            color: #333;
             text-align: center;
             white-space: nowrap;
             vertical-align: baseline;
             border-radius: 0.375rem;
-            /* Bo tròn giống Bootstrap badge */
             margin-right: 0.5rem;
-            /* Khoảng cách giữa các tag */
             margin-bottom: 0.5rem;
-            /* Khoảng cách nếu các tag xuống dòng */
         }
 
-        /* Định nghĩa màu cho từng công nghệ (bạn có thể thêm/sửa) */
         .tech-tag.html5 {
-            background-color: #E34F26;
+            background-color: #f1d4d4; /* Pastel red */
         }
 
         .tech-tag.css3 {
-            background-color: #1572B6;
+            background-color: #d1e5f0; /* Pastel blue */
         }
 
         .tech-tag.javascript {
-            background-color: #F7DF1E;
-            color: #000;
+            background-color: #fff2cc; /* Pastel yellow */
         }
 
-        /* JS màu vàng, chữ đen */
         .tech-tag.bootstrap {
-            background-color: #7952B3;
+            background-color: #e6d9f2; /* Pastel purple */
         }
 
         .tech-tag.tailwind {
-            background-color: #06B6D4;
+            background-color: #b3e0e6; /* Pastel cyan */
         }
 
         .tech-tag.nodejs {
-            background-color: #339933;
+            background-color: #ccebd7; /* Pastel green */
         }
 
         .tech-tag.expressjs {
-            background-color: #000000;
+            background-color: #e6e6e6; /* Pastel gray */
         }
 
-        /* Hoặc màu xám #68A063 */
         .tech-tag.php {
-            background-color: #777BB4;
+            background-color: #f2e6d9; /* Pastel beige */
         }
 
         .tech-tag.mysql {
-            background-color: #4479A1;
+            background-color: #d9e6f2; /* Pastel light blue */
         }
 
         .tech-tag.firebase {
-            background-color: #FFCA28;
-            color: #000;
+            background-color: #fff2cc; /* Pastel yellow */
         }
 
-        /* Firebase màu vàng, chữ đen */
         .tech-tag.java {
-            background-color: #007396;
+            background-color: #f2d9e6; /* Pastel pink */
         }
 
-        /* Hoặc màu cam #f89820 */
         .tech-tag.android {
-            background-color: #3DDC84;
+            background-color: #e0f2e6; /* Pastel green */
         }
 
-        /* Hoặc màu cam #f89820 */
         .tech-tag.github {
-            background-color: #16d0ff;
-            color: #000;
+            background-color: #e6f0fa; /* Pastel light blue */
         }
 
-
         .tech-tag.python {
-            background-color: #3776AB;
+            background-color: #d9e6f2; /* Pastel light blue */
         }
 
         .tech-tag.tensorflow {
-            background-color: #FF6F00;
+            background-color: #ffe0b2; /* Pastel orange */
         }
 
         .tech-tag.keras {
-            background-color: #D00000;
+            background-color: #f2d9d9; /* Pastel red */
         }
 
         .tech-tag.opencv {
-            background-color: #5C3EE8;
+            background-color: #e6d9f2; /* Pastel purple */
         }
 
         .tech-tag.colab {
-            background-color: #F9AB00;
-            color: #000;
+            background-color: #fff2cc; /* Pastel yellow */
         }
 
         .tech-tag.git {
-            background-color: #F05032;
+            background-color: #f2e0e6; /* Pastel pink */
         }
 
         .tech-tag.figma {
-            background-color: #F24E1E;
+            background-color: #e6e0f2; /* Pastel lavender */
         }
 
-        /* Thêm các màu khác nếu cần */
-
         .project-card-image {
             max-width: 150px;
             display: block;