Update headers button

This commit is contained in:
khatabwedaa 2021-06-03 23:52:10 +02:00
parent dc9a6dfba3
commit 0bc9e6266d
5 changed files with 17 additions and 17 deletions

View file

@ -43,7 +43,7 @@
<div class="max-w-lg">
<h1 class="text-2xl font-semibold text-gray-800 uppercase dark:text-white md:text-3xl">Best Place To Choose Your Clothes</h1>
<p class="mt-2 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro beatae error laborum ab amet sunt recusandae? Reiciendis natus perspiciatis optio.</p>
<button class="px-3 py-2 mt-6 text-xs font-medium text-white uppercase transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500">Shop Now</button>
<button class="w-full px-3 py-2 mt-6 text-xs font-medium text-white uppercase transition-colors duration-200 transform bg-indigo-600 rounded-md md:w-auto hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500">Shop Now</button>
</div>
</div>
@ -110,7 +110,7 @@
<div class="max-w-lg">
<h1 class="text-2xl font-semibold text-gray-800 uppercase dark:text-white md:text-3xl">Best Place To Choose Your Clothes</h1>
<p class="mt-2 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro beatae error laborum ab amet sunt recusandae? Reiciendis natus perspiciatis optio.</p>
<button class="px-3 py-2 mt-4 text-sm font-medium text-white uppercase bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500">Shop Now</button>
<button class="w-full px-3 py-2 mt-6 text-xs font-medium text-white uppercase transition-colors duration-200 transform bg-indigo-600 rounded-md md:w-auto hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500">Shop Now</button>
</div>
</div>

View file

@ -33,7 +33,7 @@
<div class="flex items-center justify-center w-full h-full bg-gray-900 bg-opacity-50">
<div class="text-center">
<h1 class="text-2xl font-semibold text-white uppercase md:text-3xl">Build Your new <span class="text-blue-400 underline">Saas</span></h1>
<button class="px-4 py-2 mt-4 text-sm font-medium text-white uppercase transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-blue-500">Start project</button>
<button class="w-full px-4 py-2 mt-4 text-sm font-medium text-white uppercase transition-colors duration-200 transform bg-blue-600 rounded-md md:w-auto hover:bg-blue-500 focus:outline-none focus:bg-blue-500">Start project</button>
</div>
</div>
</div>
@ -94,7 +94,7 @@
<div class="flex items-center justify-center w-full h-full bg-gray-900 bg-opacity-50">
<div class="text-center">
<h1 class="text-2xl font-semibold text-white uppercase md:text-3xl">Build Your new <span class="text-blue-400 underline">Saas</span></h1>
<button class="px-4 py-2 mt-4 text-sm font-medium text-white uppercase transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-blue-500">Start project</button>
<button class="w-full px-4 py-2 mt-4 text-sm font-medium text-white uppercase transition-colors duration-200 transform bg-blue-600 rounded-md md:w-auto hover:bg-blue-500 focus:outline-none focus:bg-blue-500">Start project</button>
</div>
</div>
</div>

View file

@ -19,15 +19,15 @@
<div class="container px-6 py-16 mx-auto">
<div class="items-center md:flex">
<div class="w-full md:w-1/2">
<div class="max-w-lg">
<div class="md:max-w-lg">
<h1 class="text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">Subscribe To The <span class="text-indigo-500">Newsletter</span></h1>
<p class="mt-4 text-gray-600 dark:text-gray-400">be the first to knows when our <span class="font-medium text-indigo-500">Brand</span> is live</p>
<div class="flex flex-col mt-8 space-y-3 sm:space-y-0 sm:flex-row">
<div class="flex flex-col mt-8 space-y-3 md:space-y-0 md:flex-row">
<input id="email" type="text" class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Email Address">
<button class="px-4 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-500 rounded-md sm:mx-4 hover:bg-indigo-400 focus:outline-none focus:bg-indigo-400">
<button class="w-full px-4 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-500 rounded-md md:w-auto md:mx-4 hover:bg-indigo-400 focus:outline-none focus:bg-indigo-400">
Subscribe
</button>
</div>
@ -68,15 +68,15 @@
<div class="container px-6 py-16 mx-auto">
<div class="items-center md:flex">
<div class="w-full md:w-1/2">
<div class="max-w-lg">
<div class="md:max-w-lg">
<h1 class="text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">Subscribe To The <span class="text-indigo-500">Newsletter</span></h1>
<p class="mt-4 text-gray-600 dark:text-gray-400">be the first to knows when our <span class="font-medium text-indigo-500">Brand</span> is live</p>
<div class="flex flex-col mt-8 space-y-3 sm:space-y-0 sm:flex-row">
<div class="flex flex-col mt-8 space-y-3 md:space-y-0 md:flex-row">
<input id="email" type="text" class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Email Address">
<button class="px-4 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-500 rounded-md sm:mx-4 hover:bg-indigo-400 focus:outline-none focus:bg-indigo-400">
<button class="w-full px-4 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-500 rounded-md md:w-auto md:mx-4 hover:bg-indigo-400 focus:outline-none focus:bg-indigo-400">
Subscribe
</button>
</div>

View file

@ -35,9 +35,9 @@
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p>
<div class="flex mt-6">
<a href="#" class="block px-3 py-2 text-xs font-semibold text-white transition-colors duration-200 transform bg-gray-900 rounded-md hover:bg-gray-700">Get Started</a>
<a href="#" class="block px-3 py-2 mx-4 text-xs font-semibold text-gray-700 transition-colors duration-200 transform bg-gray-200 rounded-md hover:bg-gray-300">Learn More</a>
<div class="flex flex-col mt-6 space-y-3 md:space-y-0 md:flex-row">
<a href="#" class="block px-3 py-2 text-sm font-semibold text-center text-white transition-colors duration-200 transform bg-gray-900 rounded-md hover:bg-gray-700">Get Started</a>
<a href="#" class="block px-3 py-2 text-sm font-semibold text-center text-gray-700 transition-colors duration-200 transform bg-gray-200 rounded-md md:mx-4 hover:bg-gray-300">Learn More</a>
</div>
</div>
</div>
@ -105,9 +105,9 @@
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p>
<div class="flex mt-6">
<a href="#" class="block px-3 py-2 text-xs font-semibold text-white transition-colors duration-200 transform bg-gray-900 rounded-md hover:bg-gray-700">Get Started</a>
<a href="#" class="block px-3 py-2 mx-4 text-xs font-semibold text-gray-700 transition-colors duration-200 transform bg-gray-200 rounded-md hover:bg-gray-300">Learn More</a>
<div class="flex flex-col mt-6 space-y-3 md:space-y-0 md:flex-row">
<a href="#" class="block px-3 py-2 text-sm font-semibold text-center text-white transition-colors duration-200 transform bg-gray-900 rounded-md hover:bg-gray-700">Get Started</a>
<a href="#" class="block px-3 py-2 text-sm font-semibold text-center text-gray-700 transition-colors duration-200 transform bg-gray-200 rounded-md md:mx-4 hover:bg-gray-300">Learn More</a>
</div>
</div>
</div>

View file

@ -4,7 +4,7 @@
<footer-component />
<back-to-top visibleoffset="800">
<app-button class="fixed bottom-0 right-0 p-2 mx-10 my-10 text-white bg-gray-800 rounded-md hover:bg-gray-900 dark:hover:bg-gray-700 focus:outline-none" aria-label="Back to top">
<app-button class="fixed bottom-0 right-0 p-2 mx-5 my-10 text-white bg-gray-800 rounded-md lg:mx-10 hover:bg-gray-900 dark:hover:bg-gray-700 focus:outline-none" aria-label="Back to top">
<svg class="w-6 h-6" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"/>
</svg>