footer responsive 2

tailwind/custom/base.css

@@ -10,6 +10,10 @@ body {
 	@apply bg-background font-sans;
 }
 
+#topbar-footer {
+	@apply bg-primary h-[5vw] w-full;
+	background: url("assets/img/topbar-footer.jpg") no-repeat center top;
+}
 footer {
 	@apply bg-secondary w-full text-white;
 
@@ -24,6 +28,12 @@ footer {
 			}
 		}
 	}
+	.footer-text-and-icons {
+		@apply font-roboto flex w-full flex-col items-start justify-between gap-4 py-8 text-sm md:ml-0 md:flex-row md:items-center md:gap-8;
+		.w-1\/4 {
+			@apply w-full justify-start pl-8 md:w-1/4 md:justify-center md:pl-0;
+		}
+	}
 }
 
 #header-menu {

theme/template-parts/layout/footer-content.php

@@ -9,7 +9,7 @@
  */
 
 ?>
-
+<div id="topbar-footer"></div>
 <footer id="colophon" class="site-footer py-8">
 	<section class="container mx-auto">
 		<?php if (is_active_sidebar('sidebar-footer')) : ?>
@@ -18,8 +18,7 @@
 			</aside>
 		<?php endif; ?>
 
-		<div class="flex w-full flex-col items-center justify-between font-roboto gap-4 py-8  text-sm md:flex-row md:gap-8">
-
+		<div class="flex w-full flex-col items-start justify-between font-roboto gap-4 py-8  text-sm lg:flex-row lg:gap-8">
 			<?php if (has_nav_menu('footer')) : ?>
 				<nav aria-label="<?php esc_attr_e('Footer Menu', 'studio-up'); ?>">
 					<?php
@@ -35,9 +34,9 @@
 				</nav>
 			<?php endif; ?>
 
-			<div>
+			<div class="ml-3 md:ml-0">
 				Copyright ® <?= date('Y') ?> <?= get_bloginfo('name') ?> <?= __('Todos los derechos reservados', 'studio-up') ?>.
 			</div>
 		</div>
 	</section>
-</footer><!-- #colophon -->
+</footer><!-- #colophon -->