Skip to content

Instantly share code, notes, and snippets.

@nabily4e-dev

nabily4e-dev/footer.html

Last active February 3, 2023 16:16
Show Gist options
  • Save nabily4e-dev/2e52337ff8a8f6afede188105d257d05 to your computer and use it in GitHub Desktop.
Save nabily4e-dev/2e52337ff8a8f6afede188105d257d05 to your computer and use it in GitHub Desktop.
Download ZIP
An attempt: HTML TailwinCSS footer
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" />
<link rel="stylesheet" href="style.css" />
<title>Movie</title>
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
<style>
.dropdown-button {
position: relative;
}
.dropdown-button:after {
content: "";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
border-top: 5px solid;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
</style>
</head>
<body>
<nav class="flex justify-between items-center shadow-lg p-6">
<a class="navbar-brand text-2xl font-bold" href="#">Movie Database</a>
<div class="flex">
<div class="relative">
<button class="text-gray-600 dropdown-toggle focus:outline-none">
Movies
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div class="absolute right-0 w-48 mt-2 origin-top-right rounded-md shadow-lg">
<div class="bg-white rounded-md shadow-xs">
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sci-Fi</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Comedy</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Romance</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Thriller</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Drama</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Horror</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Adventure</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Animation</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Fantasy</a>
</div>
</div>
</div>
</div>
<a class="px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900" href="#">Actors</a>
<a class="px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900" href="#">About</a>
<form class="ml-4 relative">
<input
class="border-l-purple-50 form-input w-32 h-10 pl-10 pr-4 text-sm text-gray-600 placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
type="text" placeholder="Search" aria-label="Search" />
<button class="absolute right-0 top-0 mt-2 mr-4">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</button>
</form>
<div class="ml-4 relative">
<button class="text-gray-600 focus:outline-none">
Filter
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div class="absolute right-0 w-48 mt-2 origin-top-right rounded-md shadow-lg">
<div class="bg-white rounded-md shadow-xs">
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Popular</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Release Date</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Top Rated</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Now Playing</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Upcoming</a>
</div>
</div>
</div>
</div>
</div>
</nav>
<div class="container"></div>
<footer class="bg-gray-900 py-12 text-white text-center">
<div class="container mx-auto">
<p class="text-sm">
Built with ❤️ by <a href="#" class="text-blue-400 hover:underline">Your Team Name</a>
</p>
<div class="flex justify-center mt-8">
<a href="https://github.com/you" class="text-gray-400 hover:text-white mx-4">
<i class="fab fa-github fa-2x"></i>
</a>
<a href="https://github.com/partner" class="text-gray-400 hover:text-white mx-4">
<i class="fab fa-github fa-2x"></i>
</a>
</div>
<div class="flex justify-center mt-8">
<a href="https://twitter.com/you" class="text-gray-400 hover:text-white mx-4">
<i class="fab fa-twitter fa-2x"></i>
</a>
<a href="https://linkedin.com/in/you" class="text-gray-400 hover:text-white mx-4">
<i class="fab fa-linkedin fa-2x"></i>
</a>
</div>
</div>
</footer>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment