index

custom.css

@@ -0,0 +1,76 @@
+/* Animations */
+
+.animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
+.animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
+.animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
+.animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
+.animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
+.animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
+.animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+.animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}
+
+/* Animate Zoom */
+
+.animate-zoom-1 {animation:animatezoom 0.3s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+.animate-zoom-2 {animation:animatezoom 0.5s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+.animate-zoom-3 {animation:animatezoom 0.7s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+.animate-zoom-4 {animation:animatezoom 0.9s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+.animate-zoom-5 {animation:animatezoom 1.1s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+.animate-zoom-6 {animation:animatezoom 1.3s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+.animate-zoom-7 {animation:animatezoom 1.5s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+.animate-zoom-8 {animation:animatezoom 1.7s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+.animate-zoom-9 {animation:animatezoom 1.9s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+.animate-zoom-10 {animation:animatezoom 2.1s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+.animate-zoom-11 {animation:animatezoom 2.3s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+.animate-zoom-12 {animation:animatezoom 2.5s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+
+/* Animate Top */
+
+.animate-top-1{position:relative;animation:animatetop 0.3s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
+.animate-top-2{position:relative;animation:animatetop 0.5s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
+.animate-top-3{position:relative;animation:animatetop 0.7s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
+.animate-top-4{position:relative;animation:animatetop 0.9s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
+.animate-top-5{position:relative;animation:animatetop 1.1s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
+.animate-top-6{position:relative;animation:animatetop 1.3s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
+.animate-top-7{position:relative;animation:animatetop 1.5s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
+.animate-top-8{position:relative;animation:animatetop 1.7s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
+.animate-top-9{position:relative;animation:animatetop 1.9s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
+
+/* Animate Bottom */
+
+.animate-bottom-1{position:relative;animation:animatebottom 0.3s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
+.animate-bottom-2{position:relative;animation:animatebottom 0.5s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
+.animate-bottom-3{position:relative;animation:animatebottom 0.7s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
+.animate-bottom-4{position:relative;animation:animatebottom 0.9s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
+.animate-bottom-5{position:relative;animation:animatebottom 1.1s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
+.animate-bottom-6{position:relative;animation:animatebottom 1.3s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
+.animate-bottom-7{position:relative;animation:animatebottom 1.5s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
+.animate-bottom-8{position:relative;animation:animatebottom 1.7s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
+.animate-bottom-9{position:relative;animation:animatebottom 1.9s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
+
+/* Zoom Box */
+
+.zoom-box {
+    -webkit-transition: -webkit-transform 0.2s;
+    transition: -webkit-transform 0.2s;
+    transition: transform 0.2s;
+    transition: transform 0.2s, -webkit-transform 0.2s;
+}
+
+.zoom-box:hover {
+    -webkit-transform: scale(1.05);
+    transform: scale(1.05);
+}
+
+/* Hide on phone */
+
+@media (max-width: 576px) {
+    .element {
+        display: none;
+    }
+}
+
+.half-transparent {
+    color: #0008;
+}
+

index.html

@@ -26,6 +26,8 @@
 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.1/flowbite.min.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.1/flowbite.min.js"></script>
+    <link href="custom.css" rel="stylesheet" />
+
 
     <script>
         // On page load or when changing themes, best to add inline in `head` to avoid FOUC
@@ -93,13 +95,13 @@
                     <a href="#" class="block py-2 px-3 md:p-0 text-white bg-blue-500 rounded-sm md:bg-transparent md:text-blue-700 md:dark:text-blue-500" aria-current="page">Home</a>
                 </li>
                 <li>
-                    <a href="#" class="block py-2 px-3 md:p-0 text-white rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">About</a>
+                    <a href="#" class="block py-2 px-3 md:p-0 text-white rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Leistungen</a>
                 </li>
                 <li>
-                    <a href="#" class="block py-2 px-3 md:p-0 text-white rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Services</a>
+                    <a href="#" class="block py-2 px-3 md:p-0 text-white rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Über uns</a>
                 </li>
                 <li>
-                    <a href="#" class="block py-2 px-3 md:p-0 text-white rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
+                    <a href="#" class="block py-2 px-3 md:p-0 text-white rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Kontakt</a>
                 </li>
             </ul>
         </div>
@@ -109,11 +111,11 @@
 
     <section>
         <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
-            <h1 class="mb-4 text-7xl font-extrabold tracking-tight leading-none text-gray-900 md:text-8xl lg:text-8xl dark:text-white">Unsere Leistungen</h1>
+            <h1 class="animate-top-2 mb-4 text-7xl font-extrabold tracking-tight leading-none text-gray-900 md:text-8xl lg:text-8xl dark:text-white">Unsere Leistungen</h1>
             <p class="mb-8 text-lg font-normal text-gray-400 lg:text-xl sm:px-16 lg:px-48 dark:text-gray-100">Spezialisiert auf die Fahrzeugcodierung mit Fokus auf BMW-Modelle. <br>Markenübergreifende Fahrzeugdiagnose </p>
             <div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0">
                 <a href="#" class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900">
-                    Kontakt aufnehmen
+                    Jetzt Anfragen
                 </a>
             </div>
         </div>
@@ -128,7 +130,9 @@
         <bR>
         <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
 
-    <div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm ">
+
+
+    <div class="zoom-box animate-bottom-3 max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm ">
         <a href="#">
             <h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-900">Need a help in Claim?</h5>
         </a>
@@ -141,7 +145,7 @@
         </a>
     </div>
 
-    <div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm ">
+    <div class="zoom-box animate-bottom-4 max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm ">
         <a href="#">
             <h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-900">Need a help in Claim?</h5>
         </a>
@@ -154,7 +158,7 @@
         </a>
     </div>
 
-    <div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm ">
+    <div class="zoom-box animate-bottom-5 max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm ">
         <a href="#">
             <h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-900">Need a help in Claim?</h5>
         </a>
@@ -167,7 +171,7 @@
         </a>
     </div>
 
-    <div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm ">
+    <div class="zoom-box animate-bottom-6 max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm ">
         <a href="#">
             <h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-900">Need a help in Claim?</h5>
         </a>
@@ -180,7 +184,7 @@
         </a>
     </div>
 
-    <div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm ">
+    <div class="zoom-box animate-bottom-7 max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm ">
         <a href="#">
             <h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-900">Need a help in Claim?</h5>
         </a>
@@ -193,7 +197,7 @@
         </a>
     </div>
 
-    <div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm ">
+    <div class="zoom-box animate-bottom-8 max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm ">
         <a href="#">
             <h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-900">Need a help in Claim?</h5>
         </a>
@@ -206,8 +210,25 @@
         </a>
     </div>
 
+    </div>
+    </section>
 
 
+
+
+
+
+<section>
+    <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
+
+        <h1 class="mb-4 text-3xl font-extrabold leading-none tracking-tight text-gray-900 dark:text-white">Jetzt Frage stellen!</h1>
+        <p class="mb-2 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 xl:px-48 dark:text-gray-400">Wir sind offen für Fragen und unterbreiten ihnen gerne ein Angebot. </p>
+        <a href="#" class="text-blue-600 dark:text-blue-500 hover:underline font-medium text-lg inline-flex items-center">Whatsapp&nbsp;
+            <svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
+            </svg>
+        </a>
+
     </div>
 </section>