Hugging Face's logo

Spaces:
GuaccO
/
pixelperfect-landing-magic
Running

App Files Community
GuaccO commited on
Commit
3f77a7d
·
verified ·
1 Parent(s): 67e2e99

Enhance Dark Mode with #121212 color everywhere in the sections

Browse files
Files changed (2) hide show
  1. index.html +7 -10
  2. style.css +16 -5
index.html CHANGED
@@ -40,7 +40,7 @@ gray: {
40
  }
41
  </script>
42
  </head>
43
- <body class="font-inter antialiased text-gray-100 bg-gray-900">
44
  <!-- Navigation -->
45
  <nav class="bg-white shadow-sm fixed w-full z-10">
46
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -105,10 +105,9 @@ gray: {
105
  </div>
106
  </div>
107
  </section>
108
-
109
  <!-- Features Section -->
110
- <section id="features" class="py-12 bg-white sm:py-16 lg:py-20">
111
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
112
  <div class="text-center">
113
  <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
114
  Powerful Features
@@ -223,10 +222,9 @@ gray: {
223
  </div>
224
  </div>
225
  </section>
226
-
227
  <!-- Testimonials Section -->
228
- <section id="testimonials" class="py-12 bg-gray-50 sm:py-16 lg:py-20">
229
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
230
  <div class="text-center">
231
  <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
232
  Trusted by Thousands
@@ -356,10 +354,9 @@ gray: {
356
  </div>
357
  </div>
358
  </section>
359
-
360
  <!-- Footer -->
361
- <footer class="bg-gray-800">
362
- <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
363
  <div class="grid grid-cols-2 gap-8 md:grid-cols-4">
364
  <div class="col-span-2">
365
  <a href="#" class="flex items-center">
 
40
  }
41
  </script>
42
  </head>
43
+ <body class="font-inter antialiased text-gray-100 bg-[#121212]">
44
  <!-- Navigation -->
45
  <nav class="bg-white shadow-sm fixed w-full z-10">
46
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 
105
  </div>
106
  </div>
107
  </section>
 
108
  <!-- Features Section -->
109
+ <section id="features" class="py-12 bg-[#121212] sm:py-16 lg:py-20">
110
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
111
  <div class="text-center">
112
  <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
113
  Powerful Features
 
222
  </div>
223
  </div>
224
  </section>
 
225
  <!-- Testimonials Section -->
226
+ <section id="testimonials" class="py-12 bg-[#121212] sm:py-16 lg:py-20">
227
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
228
  <div class="text-center">
229
  <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
230
  Trusted by Thousands
 
354
  </div>
355
  </div>
356
  </section>
 
357
  <!-- Footer -->
358
+ <footer class="bg-[#121212]">
359
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
360
  <div class="grid grid-cols-2 gap-8 md:grid-cols-4">
361
  <div class="col-span-2">
362
  <a href="#" class="flex items-center">
style.css CHANGED
@@ -39,15 +39,27 @@ body {
39
  background-color: #121212;
40
  color: var(--color-light);
41
  }
 
42
  /* Dark mode components */
43
  .bg-white {
44
- background-color: var(--color-darker);
45
  }
46
 
47
  .bg-gray-50 {
48
- background-color: var(--color-dark);
49
  }
50
 
 
 
 
 
 
 
 
 
 
 
 
51
  .text-gray-500 {
52
  color: var(--color-gray-400);
53
  }
@@ -70,10 +82,9 @@ body {
70
  /* Animation for feature cards */
71
  .feature-card {
72
  transition: all 0.3s ease;
73
- background-color: var(--color-darker);
74
  border: 1px solid rgba(255, 255, 255, 0.1);
75
  }
76
-
77
  .feature-card:hover {
78
  transform: translateY(-5px);
79
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
@@ -102,7 +113,7 @@ input:focus {
102
 
103
  /* Footer */
104
  footer {
105
- background-color: var(--color-darker);
106
  border-top: 1px solid rgba(255, 255, 255, 0.1);
107
  }
108
  /* Optimized images */
 
39
  background-color: #121212;
40
  color: var(--color-light);
41
  }
42
+
43
  /* Dark mode components */
44
  .bg-white {
45
+ background-color: #121212;
46
  }
47
 
48
  .bg-gray-50 {
49
+ background-color: #121212;
50
  }
51
 
52
+ section {
53
+ background-color: #121212;
54
+ }
55
+
56
+ .bg-primary-50 {
57
+ background-color: rgba(0, 209, 193, 0.1);
58
+ }
59
+
60
+ .bg-secondary-50 {
61
+ background-color: rgba(0, 124, 112, 0.1);
62
+ }
63
  .text-gray-500 {
64
  color: var(--color-gray-400);
65
  }
 
82
  /* Animation for feature cards */
83
  .feature-card {
84
  transition: all 0.3s ease;
85
+ background-color: #121212;
86
  border: 1px solid rgba(255, 255, 255, 0.1);
87
  }
 
88
  .feature-card:hover {
89
  transform: translateY(-5px);
90
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
 
113
 
114
  /* Footer */
115
  footer {
116
+ background-color: #121212;
117
  border-top: 1px solid rgba(255, 255, 255, 0.1);
118
  }
119
  /* Optimized images */