rpolito
/
easygate-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change to maincolor

Browse Source
master
Rosario Polito 1 week ago
parent 8cf8662463
commit 51ffbfa1c8
4 changed files with 99 additions and 154 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 42
      index.html
  2. 16
      input.css
  3. 172
      output.css
  4. 23
      tailwind.config.js

42
index.html
Unescape View File

@ -35,7 +35,7 @@
<div class="hidden mt-2 mr-4 sm:inline-block">
</div>
<!-- <a href="#" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 sm:mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Log in</a> -->
<a href="#TODO" class="text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 sm:mr-2 lg:mr-0 dark:bg-purple-600 dark:hover:bg-purple-700 focus:outline-none dark:focus:ring-purple-800">Kontakt</a>
<a href="#TODO" class="text-white bg-maincolor-700 hover:bg-maincolor-800 focus:ring-4 focus:ring-maincolor-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 sm:mr-2 lg:mr-0 dark:bg-maincolor-600 dark:hover:bg-maincolor-700 focus:outline-none dark:focus:ring-maincolor-800">Kontakt</a>
<button data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
@ -45,22 +45,22 @@
<div class="items-center justify-between hidden w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu-2">
<ul class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
<li>
<a href="#" class="block py-2 pl-3 pr-4 text-white bg-purple-700 rounded lg:bg-transparent lg:text-purple-700 lg:p-0 dark:text-white" aria-current="page">Home</a>
<a href="#" class="block py-2 pl-3 pr-4 text-white bg-maincolor-700 rounded lg:bg-transparent lg:text-maincolor-700 lg:p-0 dark:text-white" aria-current="page">Home</a>
</li>
<li>
<a href="#" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Company</a>
<a href="#" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-maincolor-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Company</a>
</li>
<li>
<a href="#" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Marketplace</a>
<a href="#" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-maincolor-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Marketplace</a>
</li>
<li>
<a href="#" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Features</a>
<a href="#" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-maincolor-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Features</a>
</li>
<li>
<a href="#" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Team</a>
<a href="#" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-maincolor-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Team</a>
</li>
<li>
<a href="#" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
<a href="#" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-maincolor-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
</li>
</ul>
</div>
@ -116,12 +116,12 @@
<ul role="list" class="pt-8 space-y-5 border-t border-gray-200 my-7 dark:border-gray-700">
<li class="flex space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<svg class="flex-shrink-0 w-5 h-5 text-maincolor-500 dark:text-maincolor-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span class="text-base font-medium leading-tight text-gray-900 dark:text-white">Integration mit MATTER-Geräten</span>
</li>
<li class="flex space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<svg class="flex-shrink-0 w-5 h-5 text-maincolor-500 dark:text-maincolor-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span class="text-base font-medium leading-tight text-gray-900 dark:text-white">Verschlüsselung via SSL</span>
</li>
</ul>
@ -138,22 +138,22 @@
<ul role="list" class="pt-8 space-y-5 border-t border-gray-200 my-7 dark:border-gray-700">
<li class="flex space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<svg class="flex-shrink-0 w-5 h-5 text-maincolor-500 dark:text-maincolor-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span class="text-base font-medium leading-tight text-gray-900 dark:text-white">Einfache Bedienung</span>
</li>
<li class="flex space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<svg class="flex-shrink-0 w-5 h-5 text-maincolor-500 dark:text-maincolor-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span class="text-base font-medium leading-tight text-gray-900 dark:text-white">Zugriff via WebApp</span>
</li>
<li class="flex space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<svg class="flex-shrink-0 w-5 h-5 text-maincolor-500 dark:text-maincolor-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span class="text-base font-medium leading-tight text-gray-900 dark:text-white">Zugangstoken fürs Smartphone</span>
</li>
<li class="flex space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<svg class="flex-shrink-0 w-5 h-5 text-maincolor-500 dark:text-maincolor-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span class="text-base font-medium leading-tight text-gray-900 dark:text-white">Effizientes Zutrittsmanagement</span>
</li>
</ul>
@ -167,12 +167,12 @@
<section class="bg-white dark:bg-gray-900">
<div class="items-center max-w-screen-xl px-4 py-8 mx-auto lg:grid lg:grid-cols-4 lg:gap-16 xl:gap-24 lg:py-24 lg:px-6">
<div class="col-span-2 mb-8">
<p class="text-lg font-medium text-purple-600 dark:text-purple-500">TODO</p>
<p class="text-lg font-medium text-maincolor-600 dark:text-maincolor-500">TODO</p>
<h2 class="mt-3 mb-4 text-3xl font-extrabold tracking-tight text-gray-900 md:text-3xl dark:text-white">Wir kümmern uns um TODO Kunden - weltweit</h2>
<p class="font-light text-gray-500 sm:text-xl dark:text-gray-400">Weltweit setzen bereits TODO Kunden auf unsere PGP-Verschlüsselte Smart Lock Plattform für ein effizienteres Zutrittsmanagement.</p>
<div class="pt-6 mt-6 space-y-4 border-t border-gray-200 dark:border-gray-700">
<div>
<a href="#" class="inline-flex items-center text-base font-medium text-purple-600 hover:text-purple-800 dark:text-purple-500 dark:hover:text-purple-700">
<a href="#" class="inline-flex items-center text-base font-medium text-maincolor-600 hover:text-maincolor-800 dark:text-maincolor-500 dark:hover:text-maincolor-700">
TODO Link mit Pfeil!
<svg class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
@ -181,22 +181,22 @@
</div>
<div class="col-span-2 space-y-8 md:grid md:grid-cols-2 md:gap-12 md:space-y-0">
<div>
<svg class="w-10 h-10 mb-2 text-purple-600 md:w-12 md:h-12 dark:text-purple-500" fill="currentColor" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg>
<svg class="w-10 h-10 mb-2 text-maincolor-600 md:w-12 md:h-12 dark:text-maincolor-500" fill="currentColor" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg>
<h3 class="mb-2 text-2xl font-bold dark:text-white">600+ Assets</h3>
<p class="font-light text-gray-500 dark:text-gray-400">Trusted by over 600 milion users around the world</p>
</div>
<div>
<svg class="w-10 h-10 mb-2 text-purple-600 md:w-12 md:h-12 dark:text-purple-500" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M144 0a80 80 0 1 1 0 160A80 80 0 1 1 144 0zM512 0a80 80 0 1 1 0 160A80 80 0 1 1 512 0zM0 298.7C0 239.8 47.8 192 106.7 192l42.7 0c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96c-.2 0-.4 0-.7 0L21.3 320C9.6 320 0 310.4 0 298.7zM405.3 320c-.2 0-.4 0-.7 0c26.6-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7l42.7 0C592.2 192 640 239.8 640 298.7c0 11.8-9.6 21.3-21.3 21.3l-213.3 0zM224 224a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM128 485.3C128 411.7 187.7 352 261.3 352l117.3 0C452.3 352 512 411.7 512 485.3c0 14.7-11.9 26.7-26.7 26.7l-330.7 0c-14.7 0-26.7-11.9-26.7-26.7z"/></svg>
<svg class="w-10 h-10 mb-2 text-maincolor-600 md:w-12 md:h-12 dark:text-maincolor-500" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M144 0a80 80 0 1 1 0 160A80 80 0 1 1 144 0zM512 0a80 80 0 1 1 0 160A80 80 0 1 1 512 0zM0 298.7C0 239.8 47.8 192 106.7 192l42.7 0c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96c-.2 0-.4 0-.7 0L21.3 320C9.6 320 0 310.4 0 298.7zM405.3 320c-.2 0-.4 0-.7 0c26.6-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7l42.7 0C592.2 192 640 239.8 640 298.7c0 11.8-9.6 21.3-21.3 21.3l-213.3 0zM224 224a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM128 485.3C128 411.7 187.7 352 261.3 352l117.3 0C452.3 352 512 411.7 512 485.3c0 14.7-11.9 26.7-26.7 26.7l-330.7 0c-14.7 0-26.7-11.9-26.7-26.7z"/></svg>
<h3 class="mb-2 text-2xl font-bold dark:text-white">600+ Users</h3>
<p class="font-light text-gray-500 dark:text-gray-400">Trusted by over 600 milion users around the world</p>
</div>
<div>
<svg class="w-10 h-10 mb-2 text-purple-600 md:w-12 md:h-12 dark:text-purple-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.197A5.973 5.973 0 0110 16v-2a2 2 0 00-2-2 2 2 0 01-2-2 2 2 0 00-1.668-1.973z" clip-rule="evenodd"></path></svg>
<svg class="w-10 h-10 mb-2 text-maincolor-600 md:w-12 md:h-12 dark:text-maincolor-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.197A5.973 5.973 0 0110 16v-2a2 2 0 00-2-2 2 2 0 01-2-2 2 2 0 00-1.668-1.973z" clip-rule="evenodd"></path></svg>
<h3 class="mb-2 text-2xl font-bold dark:text-white">100+ countries</h3>
<p class="font-light text-gray-500 dark:text-gray-400">Have used Landwind to create functional websites</p>
</div>
<div>
<svg class="w-10 h-10 mb-2 text-purple-600 md:w-12 md:h-12 dark:text-purple-500" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 64c-44.2 0-80 35.8-80 80l0 48 240 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0 0-48C80 64.5 144.5 0 224 0c57.5 0 107 33.7 130.1 82.3c7.6 16 .8 35.1-15.2 42.6s-35.1 .8-42.6-15.2C283.4 82.6 255.9 64 224 64zm32 320c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0z"/></svg>
<svg class="w-10 h-10 mb-2 text-maincolor-600 md:w-12 md:h-12 dark:text-maincolor-500" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 64c-44.2 0-80 35.8-80 80l0 48 240 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0 0-48C80 64.5 144.5 0 224 0c57.5 0 107 33.7 130.1 82.3c7.6 16 .8 35.1-15.2 42.6s-35.1 .8-42.6-15.2C283.4 82.6 255.9 64 224 64zm32 320c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0z"/></svg>
<h3 class="mb-2 text-2xl font-bold dark:text-white">5+ Millionen</h3>
<p class="font-light text-gray-500 dark:text-gray-400">Zugriffe pro Tag</p>
</div>
@ -270,7 +270,7 @@
<span>Free updates: <span class="font-semibold">6 months</span></span>
</li>
</ul>
<a href="#" class="text-white bg-purple-600 hover:bg-purple-700 focus:ring-4 focus:ring-purple-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white dark:focus:ring-purple-900">Get started</a>
<a href="#" class="text-white bg-maincolor-600 hover:bg-maincolor-700 focus:ring-4 focus:ring-maincolor-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white dark:focus:ring-maincolor-900">Get started</a>
</div>
</div>
@ -381,7 +381,7 @@
<img src="./images/lock-solid.png" class="h-6 mr-3 sm:h-9" alt="Landwind Logo" />
Landwind
</a>
<span class="block text-sm text-center text-gray-500 dark:text-gray-400">© 2021-2022 Landwind™. All Rights Reserved. Built with <a href="https://flowbite.com" class="text-purple-600 hover:underline dark:text-purple-500">Flowbite</a> and <a href="https://tailwindcss.com" class="text-purple-600 hover:underline dark:text-purple-500">Tailwind CSS</a>.
<span class="block text-sm text-center text-gray-500 dark:text-gray-400">© 2021-2022 Landwind™. All Rights Reserved. Built with <a href="https://flowbite.com" class="text-maincolor-600 hover:underline dark:text-maincolor-500">Flowbite</a> and <a href="https://tailwindcss.com" class="text-maincolor-600 hover:underline dark:text-maincolor-500">Tailwind CSS</a>.
</span>
<ul class="flex justify-center mt-5 space-x-5">
<li>

16
input.css
Unescape View File

@ -1,17 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss";
@theme maincolor {
--color-maincolor-50: oklch(0.967 0.003 296.56);
--color-maincolor-100: oklch(0.919 0.018 296.26);
--color-maincolor-200: oklch(0.825 0.05 296.57);
--color-maincolor-300: oklch(0.723 0.088 296.7);
--color-maincolor-400: oklch(0.603 0.128 296.46);
--color-maincolor-500: oklch(0.507 0.147 296.17);
--color-maincolor-600: oklch(0.408 0.128 296.19);
--color-maincolor-700: oklch(0.331 0.1 296.46);
--color-maincolor-800: oklch(0.264 0.079 296.5);
--color-maincolor-900: oklch(0.201 0.062 296.88);
}
@tailwind utilities;

172
output.css
Unescape View File

@ -1470,11 +1470,19 @@ input:checked + .toggle-bg {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-maincolor-700 {
background-color: oklch(0.331 0.1 296.46);
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.bg-maincolor-600 {
background-color: oklch(0.408 0.128 296.19);
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@ -1499,16 +1507,6 @@ input:checked + .toggle-bg {
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.bg-purple-700 {
--tw-bg-opacity: 1;
background-color: rgb(108 43 217 / var(--tw-bg-opacity));
}
.bg-purple-600 {
--tw-bg-opacity: 1;
background-color: rgb(126 58 242 / var(--tw-bg-opacity));
}
.bg-opacity-50 {
--tw-bg-opacity: 0.5;
}
@ -1722,6 +1720,14 @@ input:checked + .toggle-bg {
color: rgb(17 24 39 / var(--tw-text-opacity));
}
.text-maincolor-500 {
color: oklch(0.507 0.147 296.17);
}
.text-maincolor-600 {
color: oklch(0.408 0.128 296.19);
}
.text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
@ -1737,16 +1743,6 @@ input:checked + .toggle-bg {
color: rgb(28 100 242 / var(--tw-text-opacity));
}
.text-purple-500 {
--tw-text-opacity: 1;
color: rgb(144 97 249 / var(--tw-text-opacity));
}
.text-purple-600 {
--tw-text-opacity: 1;
color: rgb(126 58 242 / var(--tw-text-opacity));
}
.opacity-0 {
opacity: 0;
}
@ -1804,28 +1800,6 @@ input:checked + .toggle-bg {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
@theme maincolor {
--color-maincolor-50: oklch(0.967 0.003 296.56);
--color-maincolor-100: oklch(0.919 0.018 296.26);
--color-maincolor-200: oklch(0.825 0.05 296.57);
--color-maincolor-300: oklch(0.723 0.088 296.7);
--color-maincolor-400: oklch(0.603 0.128 296.46);
--color-maincolor-500: oklch(0.507 0.147 296.17);
--color-maincolor-600: oklch(0.408 0.128 296.19);
--color-maincolor-700: oklch(0.331 0.1 296.46);
--color-maincolor-800: oklch(0.264 0.079 296.5);
--color-maincolor-900: oklch(0.201 0.062 296.88);
}
.hover\:border-gray-300:hover {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
@ -1836,11 +1810,19 @@ input:checked + .toggle-bg {
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.hover\:bg-maincolor-800:hover {
background-color: oklch(0.264 0.079 296.5);
}
.hover\:bg-gray-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
.hover\:bg-maincolor-700:hover {
background-color: oklch(0.331 0.1 296.46);
}
.hover\:bg-blue-800:hover {
--tw-bg-opacity: 1;
background-color: rgb(30 66 159 / var(--tw-bg-opacity));
@ -1851,21 +1833,15 @@ input:checked + .toggle-bg {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.hover\:bg-purple-800:hover {
--tw-bg-opacity: 1;
background-color: rgb(85 33 181 / var(--tw-bg-opacity));
}
.hover\:bg-purple-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(108 43 217 / var(--tw-bg-opacity));
}
.hover\:text-gray-900:hover {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
.hover\:text-maincolor-800:hover {
color: oklch(0.264 0.079 296.5);
}
.hover\:text-blue-600:hover {
--tw-text-opacity: 1;
color: rgb(28 100 242 / var(--tw-text-opacity));
@ -1876,11 +1852,6 @@ input:checked + .toggle-bg {
color: rgb(75 85 99 / var(--tw-text-opacity));
}
.hover\:text-purple-800:hover {
--tw-text-opacity: 1;
color: rgb(85 33 181 / var(--tw-text-opacity));
}
.hover\:underline:hover {
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
@ -1908,24 +1879,22 @@ input:checked + .toggle-bg {
--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
}
.focus\:ring-gray-200:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
.focus\:ring-maincolor-300:focus {
--tw-ring-color: oklch(0.723 0.088 296.7);
}
.focus\:ring-blue-300:focus {
.focus\:ring-gray-200:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity));
--tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
}
.focus\:ring-purple-300:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(202 191 253 / var(--tw-ring-opacity));
.focus\:ring-maincolor-200:focus {
--tw-ring-color: oklch(0.825 0.05 296.57);
}
.focus\:ring-purple-200:focus {
.focus\:ring-blue-300:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(220 215 254 / var(--tw-ring-opacity));
--tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity));
}
.dark .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
@ -1957,6 +1926,10 @@ input:checked + .toggle-bg {
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.dark .dark\:bg-maincolor-600 {
background-color: oklch(0.408 0.128 296.19);
}
.dark .dark\:bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
@ -1981,11 +1954,6 @@ input:checked + .toggle-bg {
background-color: rgb(31 41 55 / 0.5);
}
.dark .dark\:bg-purple-600 {
--tw-bg-opacity: 1;
background-color: rgb(126 58 242 / var(--tw-bg-opacity));
}
.dark .dark\:bg-opacity-80 {
--tw-bg-opacity: 0.8;
}
@ -2000,6 +1968,14 @@ input:checked + .toggle-bg {
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.dark .dark\:text-maincolor-400 {
color: oklch(0.603 0.128 296.46);
}
.dark .dark\:text-maincolor-500 {
color: oklch(0.507 0.147 296.17);
}
.dark .dark\:text-gray-600 {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity));
@ -2015,21 +1991,15 @@ input:checked + .toggle-bg {
color: rgb(63 131 248 / var(--tw-text-opacity));
}
.dark .dark\:text-purple-400 {
--tw-text-opacity: 1;
color: rgb(172 148 250 / var(--tw-text-opacity));
}
.dark .dark\:text-purple-500 {
--tw-text-opacity: 1;
color: rgb(144 97 249 / var(--tw-text-opacity));
}
.dark .dark\:hover\:bg-gray-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
.dark .dark\:hover\:bg-maincolor-700:hover {
background-color: oklch(0.331 0.1 296.46);
}
.dark .dark\:hover\:bg-gray-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
@ -2045,16 +2015,15 @@ input:checked + .toggle-bg {
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.dark .dark\:hover\:bg-purple-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(108 43 217 / var(--tw-bg-opacity));
}
.dark .dark\:hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .dark\:hover\:text-maincolor-700:hover {
color: oklch(0.331 0.1 296.46);
}
.dark .dark\:hover\:text-blue-500:hover {
--tw-text-opacity: 1;
color: rgb(63 131 248 / var(--tw-text-opacity));
@ -2065,29 +2034,22 @@ input:checked + .toggle-bg {
color: rgb(209 213 219 / var(--tw-text-opacity));
}
.dark .dark\:hover\:text-purple-700:hover {
--tw-text-opacity: 1;
color: rgb(108 43 217 / var(--tw-text-opacity));
}
.dark .dark\:focus\:ring-gray-800:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
}
.dark .dark\:focus\:ring-gray-600:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity));
.dark .dark\:focus\:ring-maincolor-800:focus {
--tw-ring-color: oklch(0.264 0.079 296.5);
}
.dark .dark\:focus\:ring-purple-800:focus {
.dark .dark\:focus\:ring-gray-600:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(85 33 181 / var(--tw-ring-opacity));
--tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity));
}
.dark .dark\:focus\:ring-purple-900:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(74 29 150 / var(--tw-ring-opacity));
.dark .dark\:focus\:ring-maincolor-900:focus {
--tw-ring-color: oklch(0.201 0.062 296.88);
}
@media (min-width: 640px) {
@ -2362,18 +2324,16 @@ input:checked + .toggle-bg {
line-height: 1.75rem;
}
.lg\:text-purple-700 {
--tw-text-opacity: 1;
color: rgb(108 43 217 / var(--tw-text-opacity));
.lg\:text-maincolor-700 {
color: oklch(0.331 0.1 296.46);
}
.lg\:hover\:bg-transparent:hover {
background-color: transparent;
}
.lg\:hover\:text-purple-700:hover {
--tw-text-opacity: 1;
color: rgb(108 43 217 / var(--tw-text-opacity));
.lg\:hover\:text-maincolor-700:hover {
color: oklch(0.331 0.1 296.46);
}
.dark .lg\:dark\:hover\:bg-transparent:hover {

23
tailwind.config.js
Unescape View File

@ -4,18 +4,17 @@ module.exports = {
theme: {
extend: {
colors: {
maincol: {
50: 'oklch(74.746% 0.14552 294.81)',
100: 'oklch(69.968% 0.17443 293.46)',
200: 'oklch(60.861% 0.22942 290)',
300: 'oklch(53.31% 0.27191 284.48)',
400: 'oklch(48.41% 0.29592 276.8)',
500: 'oklch(43.228% 0.2715 275.08)',
600: 'oklch(37.476% 0.23377 275.94)',
700: 'oklch(31.291% 0.19366 276.95)',
800: 'oklch(24.793% 0.15139 278.74)',
900: 'oklch(15.192% 0.08843 285.58)',
950: 'oklch(9.8542% 0.05352 296.92)',
maincolor: {
50: 'oklch(0.967 0.003 296.56)',
100: 'oklch(0.919 0.018 296.26)',
200: 'oklch(0.825 0.05 296.57)',
300: 'oklch(0.723 0.088 296.7)',
400: 'oklch(0.603 0.128 296.46)',
500: 'oklch(0.507 0.147 296.17)',
600: 'oklch(0.408 0.128 296.19)',
700: 'oklch(0.331 0.1 296.46)',
800: 'oklch(0.264 0.079 296.5)',
900: 'oklch(0.201 0.062 296.88)',
}
}
},

Write Preview
Loading…
Cancel
Save