Spaces:
Running
Running
change to a ping theme - Follow Up Deployment
Browse files- index.html +11 -11
index.html
CHANGED
|
@@ -11,7 +11,7 @@
|
|
| 11 |
|
| 12 |
body {
|
| 13 |
font-family: 'Rubik', sans-serif;
|
| 14 |
-
background-color: #
|
| 15 |
}
|
| 16 |
|
| 17 |
.hero-section {
|
|
@@ -49,8 +49,8 @@
|
|
| 49 |
<!-- Hero Section -->
|
| 50 |
<section class="hero-section py-20 px-4 md:px-10 lg:px-20">
|
| 51 |
<div class="container mx-auto flex flex-col items-center text-center">
|
| 52 |
-
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-
|
| 53 |
-
<h2 class="text-3xl md:text-4xl lg:text-5xl font-semibold text-
|
| 54 |
<p class="text-xl md:text-2xl text-gray-700 mb-10 max-w-3xl">ืืืื ืืืืืช ืืืฆื ืืฆืืื ืืืคื ืื ืืจื ืืืคืื ืจืืฉื ืงืฆืจ-ืืืขื ืืืืฉื ืืืฉืืืช ืืืคืื ืืืืืข ืืืชืช-ืืืืข</p>
|
| 55 |
|
| 56 |
<div class="flex flex-wrap justify-center gap-6 mb-12">
|
|
@@ -59,9 +59,9 @@
|
|
| 59 |
<span class="px-6 py-3 bg-rose-100 text-rose-800 rounded-full font-medium">ืกืื ืืืช</span>
|
| 60 |
</div>
|
| 61 |
|
| 62 |
-
<div class="text-4xl md:text-5xl font-bold text-
|
| 63 |
|
| 64 |
-
<a href="#contact" class="floating-btn bg-
|
| 65 |
ืฆืจื ืงืฉืจ ืขืื ืืืื <i class="fas fa-arrow-left ml-2"></i>
|
| 66 |
</a>
|
| 67 |
</div>
|
|
@@ -89,7 +89,7 @@
|
|
| 89 |
</section>
|
| 90 |
|
| 91 |
<!-- Benefits Section -->
|
| 92 |
-
<section class="py-16 px-4 md:px-10 lg:px-20 bg-
|
| 93 |
<div class="container mx-auto">
|
| 94 |
<h2 class="text-3xl md:text-4xl font-bold text-center text-emerald-800 mb-16">ืืื ืืืืคืื ืืืื ืืขืืืจ ืื?</h2>
|
| 95 |
|
|
@@ -170,7 +170,7 @@
|
|
| 170 |
</section>
|
| 171 |
|
| 172 |
<!-- Testimonials Section -->
|
| 173 |
-
<section class="py-16 px-4 md:px-10 lg:px-20 bg-
|
| 174 |
<div class="container mx-auto">
|
| 175 |
<h2 class="text-3xl md:text-4xl font-bold text-center text-amber-800 mb-16">ืื ืืืืจืื ืขื ืืืืคืื ืืจืืฉื ืืืกืื ืืืช</h2>
|
| 176 |
|
|
@@ -272,7 +272,7 @@
|
|
| 272 |
</section>
|
| 273 |
|
| 274 |
<!-- Contact Section -->
|
| 275 |
-
<section id="contact" class="py-16 px-4 md:px-10 lg:px-20 bg-
|
| 276 |
<div class="container mx-auto">
|
| 277 |
<h2 class="text-3xl md:text-4xl font-bold text-center mb-6">ืืืืืข ื ืืกืฃ ืขื ืฉืืืช ืืืืคืื ืงืฆืจืช ืืืืขื</h2>
|
| 278 |
<p class="text-xl text-center mb-12 max-w-3xl mx-auto">ืืืืืฉืืช ืืงืืื ืืงื, ืื ืชืืืชืจื ืขื ืขืฆืื - ืฆืจื ืงืฉืจ ืขืื ืืืื</p>
|
|
@@ -300,11 +300,11 @@
|
|
| 300 |
</section>
|
| 301 |
|
| 302 |
<!-- Footer -->
|
| 303 |
-
<footer class="py-8 px-4 bg-
|
| 304 |
<div class="container mx-auto">
|
| 305 |
-
<p>ยฉ
|
| 306 |
<div class="flex justify-center mt-4 space-x-6">
|
| 307 |
-
<a href="#" class="text-white hover:text-
|
| 308 |
<i class="fab fa-facebook-f text-xl"></i>
|
| 309 |
</a>
|
| 310 |
<a href="#" class="text-white hover:text-emerald-300">
|
|
|
|
| 11 |
|
| 12 |
body {
|
| 13 |
font-family: 'Rubik', sans-serif;
|
| 14 |
+
background-color: #fdf2f8;
|
| 15 |
}
|
| 16 |
|
| 17 |
.hero-section {
|
|
|
|
| 49 |
<!-- Hero Section -->
|
| 50 |
<section class="hero-section py-20 px-4 md:px-10 lg:px-20">
|
| 51 |
<div class="container mx-auto flex flex-col items-center text-center">
|
| 52 |
+
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-pink-800 mb-6">ืฉืืจื ืืจื</h1>
|
| 53 |
+
<h2 class="text-3xl md:text-4xl lg:text-5xl font-semibold text-pink-700 mb-8">ืืขืืื ืืช ืฉื ืฆืืืื</h2>
|
| 54 |
<p class="text-xl md:text-2xl text-gray-700 mb-10 max-w-3xl">ืืืื ืืืืืช ืืืฆื ืืฆืืื ืืืคื ืื ืืจื ืืืคืื ืจืืฉื ืงืฆืจ-ืืืขื ืืืืฉื ืืืฉืืืช ืืืคืื ืืืืืข ืืืชืช-ืืืืข</p>
|
| 55 |
|
| 56 |
<div class="flex flex-wrap justify-center gap-6 mb-12">
|
|
|
|
| 59 |
<span class="px-6 py-3 bg-rose-100 text-rose-800 rounded-full font-medium">ืกืื ืืืช</span>
|
| 60 |
</div>
|
| 61 |
|
| 62 |
+
<div class="text-4xl md:text-5xl font-bold text-pink-600 tracking-wider mb-10">ื ืข ื ื ื ื ืช ืฉ ื ืฆ ื ื ื ื</div>
|
| 63 |
|
| 64 |
+
<a href="#contact" class="floating-btn bg-pink-600 hover:bg-pink-700 text-white px-8 py-4 rounded-full text-lg font-semibold shadow-lg transition duration-300">
|
| 65 |
ืฆืจื ืงืฉืจ ืขืื ืืืื <i class="fas fa-arrow-left ml-2"></i>
|
| 66 |
</a>
|
| 67 |
</div>
|
|
|
|
| 89 |
</section>
|
| 90 |
|
| 91 |
<!-- Benefits Section -->
|
| 92 |
+
<section class="py-16 px-4 md:px-10 lg:px-20 bg-pink-50">
|
| 93 |
<div class="container mx-auto">
|
| 94 |
<h2 class="text-3xl md:text-4xl font-bold text-center text-emerald-800 mb-16">ืืื ืืืืคืื ืืืื ืืขืืืจ ืื?</h2>
|
| 95 |
|
|
|
|
| 170 |
</section>
|
| 171 |
|
| 172 |
<!-- Testimonials Section -->
|
| 173 |
+
<section class="py-16 px-4 md:px-10 lg:px-20 bg-purple-50">
|
| 174 |
<div class="container mx-auto">
|
| 175 |
<h2 class="text-3xl md:text-4xl font-bold text-center text-amber-800 mb-16">ืื ืืืืจืื ืขื ืืืืคืื ืืจืืฉื ืืืกืื ืืืช</h2>
|
| 176 |
|
|
|
|
| 272 |
</section>
|
| 273 |
|
| 274 |
<!-- Contact Section -->
|
| 275 |
+
<section id="contact" class="py-16 px-4 md:px-10 lg:px-20 bg-pink-800 text-white">
|
| 276 |
<div class="container mx-auto">
|
| 277 |
<h2 class="text-3xl md:text-4xl font-bold text-center mb-6">ืืืืืข ื ืืกืฃ ืขื ืฉืืืช ืืืืคืื ืงืฆืจืช ืืืืขื</h2>
|
| 278 |
<p class="text-xl text-center mb-12 max-w-3xl mx-auto">ืืืืืฉืืช ืืงืืื ืืงื, ืื ืชืืืชืจื ืขื ืขืฆืื - ืฆืจื ืงืฉืจ ืขืื ืืืื</p>
|
|
|
|
| 300 |
</section>
|
| 301 |
|
| 302 |
<!-- Footer -->
|
| 303 |
+
<footer class="py-8 px-4 bg-pink-800 text-white text-center">
|
| 304 |
<div class="container mx-auto">
|
| 305 |
+
<p>ยฉ 2025 ืฉืืจื ืืจื - ืืขืืื ืืช ืฉื ืฆืืืื. ืื ืืืืืืืช ืฉืืืจืืช.</p>
|
| 306 |
<div class="flex justify-center mt-4 space-x-6">
|
| 307 |
+
<a href="#" class="text-white hover:text-pink-300">
|
| 308 |
<i class="fab fa-facebook-f text-xl"></i>
|
| 309 |
</a>
|
| 310 |
<a href="#" class="text-white hover:text-emerald-300">
|