30 footer ready
This commit is contained in:
@@ -8,62 +8,63 @@
|
||||
<title>footer 13</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<!-- footer 13 start -->
|
||||
|
||||
<section class="section_divider">
|
||||
<div>Footer 13</div>
|
||||
</section>
|
||||
<div>Footer 13</div>
|
||||
</section>
|
||||
|
||||
<div class="px-4 pt-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
|
||||
<section class="dark:bg-gray-800">
|
||||
<footer class="px-4 pt-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 ">
|
||||
<div class="grid gap-10 row-gap-6 mb-8 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div class="sm:col-span-2">
|
||||
<a href="/" aria-label="Go home" title="Company" class="inline-flex items-center">
|
||||
<svg class="w-8 text-deep-purple-accent-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
|
||||
<svg class="w-8 text-purple-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
|
||||
<rect x="3" y="1" width="7" height="12"></rect>
|
||||
<rect x="3" y="17" width="7" height="6"></rect>
|
||||
<rect x="14" y="1" width="7" height="6"></rect>
|
||||
<rect x="14" y="11" width="7" height="12"></rect>
|
||||
</svg>
|
||||
<span class="ml-2 text-xl font-bold tracking-wide text-gray-800 uppercase">Company</span>
|
||||
<span class="ml-2 text-xl font-bold tracking-wide text-gray-800 dark:text-gray-300 uppercase">Company</span>
|
||||
</a>
|
||||
<div class="mt-6 lg:max-w-sm">
|
||||
<p class="text-sm text-gray-800">
|
||||
<p class="text-sm text-gray-500 ">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
|
||||
</p>
|
||||
<p class="mt-4 text-sm text-gray-800">
|
||||
<p class="mt-4 text-sm text-gray-500 ">
|
||||
Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
<p class="text-base font-bold tracking-wide text-gray-900">Contacts</p>
|
||||
<p class="text-base font-bold tracking-wide text-gray-900 dark:text-purple-400">Contacts</p>
|
||||
<div class="flex">
|
||||
<p class="mr-1 text-gray-800">Phone:</p>
|
||||
<a href="tel:850-123-5021" aria-label="Our phone" title="Our phone" class="transition-colors duration-300 text-deep-purple-accent-400 hover:text-deep-purple-800">850-123-5021</a>
|
||||
<p class="mr-1 text-gray-800 dark:text-gray-400">Phone:</p>
|
||||
<a href="tel:850-123-5021" aria-label="Our phone" title="Our phone" class="transition-colors duration-300 text-gray-300 hover:text-purple-400">850-123-5021</a>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<p class="mr-1 text-gray-800">Email:</p>
|
||||
<a href="mailto:info@lorem.mail" aria-label="Our email" title="Our email" class="transition-colors duration-300 text-deep-purple-accent-400 hover:text-deep-purple-800">info@lorem.mail</a>
|
||||
<p class="mr-1 text-gray-800 dark:text-gray-400">Email:</p>
|
||||
<a href="mailto:info@lorem.mail" aria-label="Our email" title="Our email" class="transition-colors duration-300 text-gray-300 hover:text-purple-400">info@lorem.mail</a>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<p class="mr-1 text-gray-800">Address:</p>
|
||||
<a href="https://www.google.com/maps" target="_blank" rel="noopener noreferrer" aria-label="Our address" title="Our address" class="transition-colors duration-300 text-deep-purple-accent-400 hover:text-deep-purple-800">
|
||||
<p class="mr-1 text-gray-800 dark:text-gray-400">Address:</p>
|
||||
<a href="https://www.google.com/maps" target="_blank" rel="noopener noreferrer" aria-label="Our address" title="Our address" class="transition-colors duration-400 text-gray-300 hover:text-purple-300">
|
||||
312 Lovely Street, NY
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-base font-bold tracking-wide text-gray-900">Social</span>
|
||||
<span class="text-base font-bold tracking-wide text-gray-900 dark:text-purple-400">Social</span>
|
||||
<div class="flex items-center mt-1 space-x-3">
|
||||
<a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-800">
|
||||
<a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
|
||||
<path
|
||||
d="M24,4.6c-0.9,0.4-1.8,0.7-2.8,0.8c1-0.6,1.8-1.6,2.2-2.7c-1,0.6-2,1-3.1,1.2c-0.9-1-2.2-1.6-3.6-1.6 c-2.7,0-4.9,2.2-4.9,4.9c0,0.4,0,0.8,0.1,1.1C7.7,8.1,4.1,6.1,1.7,3.1C1.2,3.9,1,4.7,1,5.6c0,1.7,0.9,3.2,2.2,4.1 C2.4,9.7,1.6,9.5,1,9.1c0,0,0,0,0,0.1c0,2.4,1.7,4.4,3.9,4.8c-0.4,0.1-0.8,0.2-1.3,0.2c-0.3,0-0.6,0-0.9-0.1c0.6,2,2.4,3.4,4.6,3.4 c-1.7,1.3-3.8,2.1-6.1,2.1c-0.4,0-0.8,0-1.2-0.1c2.2,1.4,4.8,2.2,7.5,2.2c9.1,0,14-7.5,14-14c0-0.2,0-0.4,0-0.6 C22.5,6.4,23.3,5.5,24,4.6z"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-800">
|
||||
<a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">
|
||||
<svg viewBox="0 0 30 30" fill="currentColor" class="h-6">
|
||||
<circle cx="15" cy="15" r="4"></circle>
|
||||
<path
|
||||
@@ -71,7 +72,7 @@
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-800">
|
||||
<a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
|
||||
<path
|
||||
d="M22,0H2C0.895,0,0,0.895,0,2v20c0,1.105,0.895,2,2,2h11v-9h-3v-4h3V8.413c0-3.1,1.893-4.788,4.659-4.788 c1.325,0,2.463,0.099,2.795,0.143v3.24l-1.918,0.001c-1.504,0-1.795,0.715-1.795,1.763V11h4.44l-1,4h-3.44v9H22c1.105,0,2-0.895,2-2 V2C24,0.895,23.105,0,22,0z"
|
||||
@@ -90,19 +91,19 @@
|
||||
</p>
|
||||
<ul class="flex flex-col mb-3 space-y-2 lg:mb-0 sm:space-y-0 sm:space-x-5 sm:flex-row">
|
||||
<li>
|
||||
<a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">F.A.Q</a>
|
||||
<a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">F.A.Q</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Privacy Policy</a>
|
||||
<a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">Privacy Policy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Terms & Conditions</a>
|
||||
<a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">Terms & Conditions</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- footer 13 end -->
|
||||
|
||||
</footer>
|
||||
</section>
|
||||
<!-- footer 13 end -->
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user