From 3d042c5c3249bf3d144cf73b8e220c3d1a8d5b8a Mon Sep 17 00:00:00 2001
From: merajjahir <meraj.jahir17@gmail.com>
Date: Wed, 16 Feb 2022 15:35:09 +0600
Subject: [PATCH] added 31 number footer

---
 dist/tailshape.css                     | 125 +++++++++++++++++++++++++
 public/componets/footer/31_footer.html |  42 +++++++++
 public/componets/footer/footer.html    |  25 +++++
 3 files changed, 192 insertions(+)
 create mode 100644 public/componets/footer/31_footer.html

diff --git a/dist/tailshape.css b/dist/tailshape.css
index eb68082..c6b2c5c 100755
--- a/dist/tailshape.css
+++ b/dist/tailshape.css
@@ -1750,6 +1750,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(156 163 175 / var(--tw-bg-opacity));
 }
 
+.bg-indigo-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(238 242 255 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
@@ -1780,6 +1785,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-gradient-stops: var(--tw-gradient-from), #ef4444, var(--tw-gradient-to, rgb(239 68 68 / 0));
 }
 
+.via-emerald-300 {
+  --tw-gradient-stops: var(--tw-gradient-from), #6ee7b7, var(--tw-gradient-to, rgb(110 231 183 / 0));
+}
+
 .to-yellow-500 {
   --tw-gradient-to: #eab308;
 }
@@ -3089,19 +3098,126 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-cyan-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(6 182 212 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-cyan-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(14 116 144 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-indigo-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 48 163 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-indigo-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(165 180 252 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-indigo-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
+}
+
 .dark .dark\:bg-opacity-40 {
   --tw-bg-opacity: 0.4;
 }
 
+.dark .dark\:bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+
+.dark .dark\:bg-gradient-to-b {
+  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
+}
+
+.dark .dark\:bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+
+.dark .dark\:bg-gradient-to-l {
+  background-image: linear-gradient(to left, var(--tw-gradient-stops));
+}
+
 .dark .dark\:from-emerald-800 {
   --tw-gradient-from: #065f46;
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(6 95 70 / 0));
 }
 
+.dark .dark\:from-red-200 {
+  --tw-gradient-from: #fecaca;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(254 202 202 / 0));
+}
+
+.dark .dark\:from-red-500 {
+  --tw-gradient-from: #ef4444;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(239 68 68 / 0));
+}
+
+.dark .dark\:from-violet-500 {
+  --tw-gradient-from: #8b5cf6;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(139 92 246 / 0));
+}
+
+.dark .dark\:from-violet-600 {
+  --tw-gradient-from: #7c3aed;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(124 58 237 / 0));
+}
+
+.dark .dark\:from-black {
+  --tw-gradient-from: #000;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(0 0 0 / 0));
+}
+
+.dark .dark\:via-emerald-300 {
+  --tw-gradient-stops: var(--tw-gradient-from), #6ee7b7, var(--tw-gradient-to, rgb(110 231 183 / 0));
+}
+
+.dark .dark\:via-emerald-500 {
+  --tw-gradient-stops: var(--tw-gradient-from), #10b981, var(--tw-gradient-to, rgb(16 185 129 / 0));
+}
+
+.dark .dark\:via-emerald-800 {
+  --tw-gradient-stops: var(--tw-gradient-from), #065f46, var(--tw-gradient-to, rgb(6 95 70 / 0));
+}
+
 .dark .dark\:to-cyan-800 {
   --tw-gradient-to: #155e75;
 }
 
+.dark .dark\:to-red-200 {
+  --tw-gradient-to: #fecaca;
+}
+
+.dark .dark\:to-green-300 {
+  --tw-gradient-to: #86efac;
+}
+
+.dark .dark\:to-green-500 {
+  --tw-gradient-to: #22c55e;
+}
+
+.dark .dark\:to-black {
+  --tw-gradient-to: #000;
+}
+
+.dark .dark\:to-green-600 {
+  --tw-gradient-to: #16a34a;
+}
+
+.dark .dark\:to-green-800 {
+  --tw-gradient-to: #166534;
+}
+
 .dark .dark\:fill-white {
   fill: #fff;
 }
@@ -3114,6 +3230,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding: 0.5rem;
 }
 
+.dark .dark\:font-bold {
+  font-weight: 700;
+}
+
 .dark .dark\:text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -3215,6 +3335,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-ring-color: rgb(216 180 254 / var(--tw-ring-opacity));
 }
 
+.dark .dark\:ring-green-400 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(74 222 128 / var(--tw-ring-opacity));
+}
+
 .dark .dark\:focus-within\:border-blue-300:focus-within {
   --tw-border-opacity: 1;
   border-color: rgb(147 197 253 / var(--tw-border-opacity));
diff --git a/public/componets/footer/31_footer.html b/public/componets/footer/31_footer.html
new file mode 100644
index 0000000..9c5dd43
--- /dev/null
+++ b/public/componets/footer/31_footer.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <title>footer 1</title>
+</head>
+<body>
+    
+
+    <!-- footer 31 start -->
+
+    <section class="section_divider " id="footer_31">
+        <div>Footer 31</div>
+      </section>
+      <footer class="w-full flex h-50 bg-indigo-50 py-10 px-20 justify-between dark:bg-gradient-to-r dark:from-black dark:via-emerald-500 dark:to-green-800">
+        <div class="w-2/3">
+            <h1 class="text-2xl font-bold bg-white dark:bg-indigo-600 dark:text-white dark:ring-2 dark:ring-green-400 inline-block p-4 rounded-md text-gray-700 mb-4">Ready to get started?</h1>
+            <p class="w-2/3 text-gray-600 dark:text-white font-semibold">Lorem ipsum dolor sit amet, consectetur adipiscing elit, br sed do eiusmod tempor incididunt.</p>
+        <button class="block bg-indigo-600 font-bold px-4 py-2 dark:ring-2 dark:ring-green-400 rounded-md text-white tracking-wide mt-4">Get started</button>
+        </div>
+        <div class="w-1/3 flex items-center justify-center dark:text-white dark:font-bold">
+        <di>
+            <p class="hover:text-indigo-600 transition duration-100 cursor-pointer font">Navigation</p>
+            <p class="hover:text-indigo-600 transition duration-100 cursor-pointer font">Email Marketing</p>
+            <p class="hover:text-indigo-600 transition duration-100 cursor-pointer font">Campaigns</p>
+            <p class="hover:text-indigo-600 transition duration-100 cursor-pointer font">Branding</p>
+            <p class="hover:text-indigo-600 transition duration-100 cursor-pointer font">Offline</p>
+        </div>
+        </div>
+      </footer>
+  
+      
+      <!-- footer 31 end -->
+  
+
+
+
+</body>
+</html>
diff --git a/public/componets/footer/footer.html b/public/componets/footer/footer.html
index 6a7b2bd..a2ff076 100644
--- a/public/componets/footer/footer.html
+++ b/public/componets/footer/footer.html
@@ -3023,6 +3023,31 @@
     
     <!-- footer 30 end  -->
 
+    <!-- footer 31 start -->
+
+    <section class="section_divider " id="footer_31">
+      <div>Footer 31</div>
+    </section>
+    <footer class="w-full flex h-50 bg-indigo-50 py-10 px-20 justify-between dark:bg-gradient-to-r dark:from-black dark:via-emerald-500 dark:to-green-800">
+      <div class="w-2/3">
+          <h1 class="text-2xl font-bold bg-white dark:bg-indigo-600 dark:text-white dark:ring-2 dark:ring-green-400 inline-block p-4 rounded-md text-gray-700 mb-4">Ready to get started?</h1>
+          <p class="w-2/3 text-gray-600 dark:text-white font-semibold">Lorem ipsum dolor sit amet, consectetur adipiscing elit, br sed do eiusmod tempor incididunt.</p>
+      <button class="block bg-indigo-600 font-bold px-4 py-2 dark:ring-2 dark:ring-green-400 rounded-md text-white tracking-wide mt-4">Get started</button>
+      </div>
+      <div class="w-1/3 flex items-center justify-center dark:text-white dark:font-bold">
+      <di>
+          <p class="hover:text-indigo-600 transition duration-100 cursor-pointer font">Navigation</p>
+          <p class="hover:text-indigo-600 transition duration-100 cursor-pointer font">Email Marketing</p>
+          <p class="hover:text-indigo-600 transition duration-100 cursor-pointer font">Campaigns</p>
+          <p class="hover:text-indigo-600 transition duration-100 cursor-pointer font">Branding</p>
+          <p class="hover:text-indigo-600 transition duration-100 cursor-pointer font">Offline</p>
+      </div>
+      </div>
+    </footer>
+
+    
+    <!-- footer 31 end -->
+
     <!-- start of script section -->
     <script type="text/javascript">
         let toogler = document.getElementById("dark_mood_toogler");