Help me with the navigation html and css codes
I'll provide you with the complete navigation HTML structure and CSS styles from the Blessed Writing Platform.
<!-- Fixed Navigation Bar -->
<nav class="fixed top-0 w-full z-50 glass-card border-b border-white/10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- Logo Section -->
<a href="/" class="flex items-center space-x-2">
<div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg flex items-center justify-center">
<span class="text-white font-bold text-sm">BW</span>
</div>
<span class="gradient-text font-bold text-xl">Blessed Writing</span>
</a>
<!-- Desktop Navigation Links -->
<div class="hidden md:flex items-center space-x-8">
<a href="/" class="text-gray-300 hover:text-white transition-colors duration-200 hover:gradient-text">
Home
</a>
<a href="/services" class="text-gray-300 hover:text-white transition-colors duration-200 hover:gradient-text">
Services
</a>
<a href="/tools" class="text-gray-300 hover:text-white transition-colors duration-200 hover:gradient-text">
Tools
</a>
<a href="/request" class="text-gray-300 hover:text-white transition-colors duration-200 hover:gradient-text">
Request
</a>
<a href="/admin" class="text-gray-300 hover:text-white transition-colors duration-200 hover:gradient-text">
Admin
</a>
</div>
<!-- Action Buttons (Desktop) -->
<div class="hidden md:flex items-center space-x-4">
<!-- Notification Bell -->
<button class="relative p-2 text-gray-300 hover:text-white transition-colors duration-200">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-5 5v-5z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4"></path>
</svg>
<!-- Notification Badge -->
<span class="absolute -top-1 -right-1 h-3 w-3 bg-red-500 rounded-full animate-pulse"></span>
</button>
<!-- Message Icon -->
<button class="p-2 text-gray-300 hover:text-white transition-colors duration-200">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg>
</button>
<!-- User Profile -->
<button class="p-2 text-gray-300 hover:text-white transition-colors duration-200">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
</button>
</div>
<!-- Mobile Menu Button -->
<div class="md:hidden">
<button id="mobile-menu-button" class="p-2 text-gray-300 hover:text-white transition-colors duration-200">
<!-- Hamburger Icon -->
<svg id="hamburger-icon" class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
<!-- Close Icon (Hidden by default) -->
<svg id="close-icon" class="h-6 w-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
<!-- Mobile Navigation Menu (Hidden by default) -->
<div id="mobile-menu" class="md:hidden hidden">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 glass-card mt-2 rounded-lg">
<a href="/" class="block px-3 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded-md transition-all duration-200">
Home
</a>
<a href="/services" class="block px-3 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded-md transition-all duration-200">
Services
</a>
<a href="/tools" class="block px-3 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded-md transition-all duration-200">
Tools
</a>
<a href="/request" class="block px-3 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded-md transition-all duration-200">
Request
</a>
<a href="/admin" class="block px-3 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded-md transition-all duration-200">
Admin
</a>
<!-- Mobile Action Buttons -->
<div class="border-t border-white/10 pt-3 mt-3">
<div class="flex items-center justify-around">
<button class="p-2 text-gray-300 hover:text-white transition-colors duration-200">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-5 5v-5z"></path>
</svg>
</button>
<button class="p-2 text-gray-300 hover:text-white transition-colors duration-200">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg>
</button>
<button class="p-2 text-gray-300 hover:text-white transition-colors duration-200">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</nav>/* Navigation Specific Styles */
.navigation-container {
/* Fixed positioning */
position: fixed;
top: 0;
width: 100%;
z-index: 50;
/* Glassmorphism effect */
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Logo Styles */
.logo-container {
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
}
.logo-icon {
width: 2rem;
height: 2rem;
background: linear-gradient(to right, #3b82f6, #8b5cf6);
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.logo-text {
background: linear-gradient(to right, #60a5fa, #a78bfa, #22d3ee);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-weight: 700;
font-size: 1.25rem;
}
/* Navigation Links */
.nav-links {
display: none;
align-items: center;
gap: 2rem;
}
@media (min-width: 768px) {
.nav-links {
display: flex;
}
}
.nav-link {
color: #d1d5db;
text-decoration: none;
transition: all 0.2s ease-in-out;
position: relative;
}
.nav-link:hover {
color: #ffffff;
background: linear-gradient(to right, #60a5fa, #a78bfa, #22d3ee);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
/* Add underline effect on hover */
.nav-link::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(to right, #3b82f6, #8b5cf6);
transition: width 0.3s ease-in-out;
}
.nav-link:hover::after {
width: 100%;
}
/* Action Buttons */
.action-buttons {
display: none;
align-items: center;
gap: 1rem;
}
@media (min-width: 768px) {
.action-buttons {
display: flex;
}
}
.action-button {
position: relative;
padding: 0.5rem;
color: #d1d5db;
background: transparent;
border: none;
cursor: pointer;
transition: color 0.2s ease-in-out;
border-radius: 0.5rem;
}
.action-button:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.1);
}
/* Notification Badge */
.notification-badge {
position: absolute;
top: -4px;
right: -4px;
width: 12px;
height: 12px;
background: #ef4444;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* Mobile Menu Button */
.mobile-menu-button {
display: block;
padding: 0.5rem;
color: #d1d5db;
background: transparent;
border: none;
cursor: pointer;
transition: color 0.2s ease-in-out;
}
@media (min-width: 768px) {
.mobile-menu-button {
display: none;
}
}
.mobile-menu-button:hover {
color: #ffffff;
}
/* Mobile Menu */
.mobile-menu {
display: none;
}
.mobile-menu.active {
display: block;
}
@media (min-width: 768px) {
.mobile-menu {
display: none !important;
}
}
.mobile-menu-content {
margin-top: 0.5rem;
padding: 0.5rem;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.5rem;
}
.mobile-menu-link {
display: block;
padding: 0.75rem;
color: #d1d5db;
text-decoration: none;
border-radius: 0.375rem;
transition: all 0.2s ease-in-out;
}
.mobile-menu-link:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.1);
}
/* Responsive Utilities */
@media (max-width: 767px) {
.logo-text {
font-size: 1rem;
}
.navigation-container {
padding: 0 1rem;
}
}
/* Smooth Scrolling Offset for Fixed Nav */
html {
scroll-padding-top: 4rem;
}
/* Active Link State */
.nav-link.active {
background: linear-gradient(to right, #60a5fa, #a78bfa, #22d3ee);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.nav-link.active::after {
width: 100%;
}// Mobile Menu Toggle Functionality
document.addEventListener('DOMContentLoaded', function() {
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
const hamburgerIcon = document.getElementById('hamburger-icon');
const closeIcon = document.getElementById('close-icon');
mobileMenuButton.addEventListener('click', function() {
// Toggle mobile menu visibility
mobileMenu.classList.toggle('hidden');
// Toggle icons
hamburgerIcon.classList.toggle('hidden');
closeIcon.classList.toggle('hidden');
});
// Close mobile menu when clicking on a link
const mobileMenuLinks = mobileMenu.querySelectorAll('a');
mobileMenuLinks.forEach(link => {
link.addEventListener('click', function() {
mobileMenu.classList.add('hidden');
hamburgerIcon.classList.remove('hidden');
closeIcon.classList.add('hidden');
});
});
// Close mobile menu when clicking outside
document.addEventListener('click', function(event) {
if (!mobileMenuButton.contains(event.target) && !mobileMenu.contains(event.target)) {
mobileMenu.classList.add('hidden');
hamburgerIcon.classList.remove('hidden');
closeIcon.classList.add('hidden');
}
});
});
// Active Link Highlighting
document.addEventListener('DOMContentLoaded', function() {
const currentPath = window.location.pathname;
const navLinks = document.querySelectorAll('.nav-link, .mobile-menu-link');
navLinks.forEach(link => {
if (link.getAttribute('href') === currentPath) {
link.classList.add('active');
}
});
});
// Scroll Effect for Navigation
window.addEventListener('scroll', function() {
const nav = document.querySelector('nav');
if (window.scrollY > 50) {
nav.style.background = 'rgba(0, 0, 0, 0.8)';
nav.style.backdropFilter = 'blur(20px)';
} else {
nav.style.background = 'rgba(255, 255, 255, 0.05)';
nav.style.backdropFilter = 'blur(16px)';
}
});This navigation provides a modern, futuristic feel while maintaining excellent usability across all devices.
Help me with html and css codes for footer section of this Futuristic writing platform
I'll create a comprehensive footer section that matches the futuristic design of the Blessed Writing Platform with glassmorphism effects, gradient accents, and responsive layout.
<!-- Footer Section -->
<footer class="relative mt-20 overflow-hidden">
<!-- Animated Background Elements -->
<div class="absolute inset-0 overflow-hidden">
<div class="absolute top-1/4 left-1/4 w-64 h-64 bg-blue-500/5 rounded-full blur-3xl animate-pulse-slow"></div>
<div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-500/5 rounded-full blur-3xl animate-pulse-slow" style="animation-delay: 2s"></div>
</div>
<!-- Main Footer Content -->
<div class="relative z-10 glass-card border-t border-white/10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<!-- Top Section -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
<!-- Company Info -->
<div class="lg:col-span-1">
<!-- Logo -->
<div class="flex items-center space-x-2 mb-6">
<div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg flex items-center justify-center">
<span class="text-white font-bold text-lg">BW</span>
</div>
<span class="gradient-text font-bold text-2xl">Blessed Writing</span>
</div>
<!-- Description -->
<p class="text-gray-300 mb-6 leading-relaxed">
Empowering students worldwide with premium academic writing services, cutting-edge tools, and 24/7 expert support for academic excellence.
</p>
<!-- Social Media Links -->
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 glass-card flex items-center justify-center hover:neon-glow transition-all duration-300 group">
<svg class="w-5 h-5 text-gray-400 group-hover:text-blue-400 transition-colors" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
</svg>
</a>
<a href="#" class="w-10 h-10 glass-card flex items-center justify-center hover:neon-glow transition-all duration-300 group">
<svg class="w-5 h-5 text-gray-400 group-hover:text-blue-400 transition-colors" fill="currentColor" viewBox="0 0 24 24">
<path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
</svg>
</a>
<a href="#" class="w-10 h-10 glass-card flex items-center justify-center hover:neon-glow transition-all duration-300 group">
<svg class="w-5 h-5 text-gray-400 group-hover:text-blue-400 transition-colors" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<a href="#" class="w-10 h-10 glass-card flex items-center justify-center hover:neon-glow transition-all duration-300 group">
<svg class="w-5 h-5 text-gray-400 group-hover:text-blue-400 transition-colors" fill="currentColor" viewBox="0 0 24 24">
<path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24.009 12.017 24c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001 12.017.001z"/>
</svg>
</a>
</div>
</div>
<!-- Services -->
<div>
<h3 class="text-white font-semibold text-lg mb-6 gradient-text">Services</h3>
<ul class="space-y-3">
<li><a href="/services" class="text-gray-300 hover:text-white hover:gradient-text transition-all duration-200 flex items-center group">
<span class="w-1 h-1 bg-blue-400 rounded-full mr-3 group-hover:w-2 transition-all duration-200"></span>
Essay Writing
</a></li>
<li><a href="/services" class="text-gray-300 hover:text-white hover:gradient-text transition-all duration-200 flex items-center group">
<span class="w-1 h-1 bg-purple-400 rounded-full mr-3 group-hover:w-2 transition-all duration-200"></span>
Research Papers
</a></li>
<li><a href="/services" class="text-gray-300 hover:text-white hover:gradient-text transition-all duration-200 flex items-center group">
<span class="w-1 h-1 bg-cyan-400 rounded-full mr-3 group-hover:w-2 transition-all duration-200"></span>
Thesis & Dissertations
</a></li>
<li><a href="/services" class="text-gray-300 hover:text-white hover:gradient-text transition-all duration-200 flex items-center group">
<span class="w-1 h-1 bg-green-400 rounded-full mr-3 group-hover:w-2 transition-all duration-200"></span>
Exam Preparation
</a></li>
<li><a href="/services" class="text-gray-300 hover:text-white hover:gradient-text transition-all duration-200 flex items-center group">
<span class="w-1 h-1 bg-yellow-400 rounded-full mr-3 group-hover:w-2 transition-all duration-200"></span>
Lab Reports
</a></li>
<li><a href="/services" class="text-gray-300 hover:text-white hover:gradient-text transition-all duration-200 flex items-center group">
<span class="w-1 h-1 bg-pink-400 rounded-full mr-3 group-hover:w-2 transition-all duration-200"></span>
Business Cases
</a></li>
</ul>
</div>
<!-- Quick Links -->
<div>
<h3 class="text-white font-semibold text-lg mb-6 gradient-text">Quick Links</h3>
<ul class="space-y-3">
<li><a href="/about" class="text-gray-300 hover:text-white hover:gradient-text transition-all duration-200 flex items-center group">
<span class="w-1 h-1 bg-blue-400 rounded-full mr-3 group-hover:w-2 transition-all duration-200"></span>
About Us
</a></li>
<li><a href="/tools" class="text-gray-300 hover:text-white hover:gradient-text transition-all duration-200 flex items-center group">
<span class="w-1 h-1 bg-purple-400 rounded-full mr-3 group-hover:w-2 transition-all duration-200"></span>
Academic Tools
</a></li>
<li><a href="/pricing" class="text-gray-300 hover:text-white hover:gradient-text transition-all duration-200 flex items-center group">
<span class="w-1 h-1 bg-cyan-400 rounded-full mr-3 group-hover:w-2 transition-all duration-200"></span>
Pricing
</a></li>
<li><a href="/testimonials" class="text-gray-300 hover:text-white hover:gradient-text transition-all duration-200 flex items-center group">
<span class="w-1 h-1 bg-green-400 rounded-full mr-3 group-hover:w-2 transition-all duration-200"></span>
Testimonials
</a></li>
<li><a href="/blog" class="text-gray-300 hover:text-white hover:gradient-text transition-all duration-200 flex items-center group">
<span class="w-1 h-1 bg-yellow-400 rounded-full mr-3 group-hover:w-2 transition-all duration-200"></span>
Blog
</a></li>
<li><a href="/faq" class="text-gray-300 hover:text-white hover:gradient-text transition-all duration-200 flex items-center group">
<span class="w-1 h-1 bg-pink-400 rounded-full mr-3 group-hover:w-2 transition-all duration-200"></span>
FAQ
</a></li>
</ul>
</div>
<!-- Contact & Support -->
<div>
<h3 class="text-white font-semibold text-lg mb-6 gradient-text">Contact & Support</h3>
<div class="space-y-4">
<!-- Email -->
<div class="flex items-center space-x-3 group">
<div class="w-8 h-8 glass-card flex items-center justify-center group-hover:neon-glow transition-all duration-300">
<svg class="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
</div>
<div>
<p class="text-gray-400 text-xs">Email</p>
<a href="mailto:support@blessedwriting.com" class="text-gray-300 hover:text-white hover:gradient-text transition-all duration-200">
support@blessedwriting.com
</a>
</div>
</div>
<!-- Phone -->
<div class="flex items-center space-x-3 group">
<div class="w-8 h-8 glass-card flex items-center justify-center group-hover:neon-glow transition-all duration-300">
<svg class="w-4 h-4 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
</svg>
</div>
<div>
<p class="text-gray-400 text-xs">24/7 Support</p>
<a href="tel:+1-800-BLESSED" class="text-gray-300 hover:text-white hover:gradient-text transition-all duration-200">
+1 (800) BLESSED
</a>
</div>
</div>
<!-- Live Chat -->
<div class="flex items-center space-x-3 group">
<div class="w-8 h-8 glass-card flex items-center justify-center group-hover:neon-glow transition-all duration-300">
<svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg>
</div>
<div>
<p class="text-gray-400 text-xs">Live Chat</p>
<button class="text-gray-300 hover:text-white hover:gradient-text transition-all duration-200">
Start Conversation
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Newsletter Subscription -->
<div class="glass-card p-8 mb-12 bg-gradient-to-r from-blue-500/10 to-purple-500/10 border border-white/20">
<div class="text-center mb-6">
<h3 class="text-2xl font-bold gradient-text mb-2">Stay Updated</h3>
<p class="text-gray-300">Get the latest academic tips, writing guides, and exclusive offers delivered to your inbox.</p>
</div>
<form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
<div class="flex-1">
<input
type="email"
placeholder="Enter your email address"
class="w-full px-4 py-3 bg-gray-800/50 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
required
>
</div>
<button
type="submit"
class="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white font-semibold rounded-lg neon-glow transition-all duration-300 whitespace-nowrap"
>
Subscribe Now
</button>
</form>
</div>
<!-- Trust Badges -->
<div class="flex flex-wrap justify-center items-center gap-8 mb-12 opacity-60">
<div class="flex items-center space-x-2">
<svg class="w-6 h-6 text-green-400" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
<span class="text-gray-400 text-sm">SSL Secured</span>
</div>
<div class="flex items-center space-x-2">
<svg class="w-6 h-6 text-blue-400" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/>
</svg>
<span class="text-gray-400 text-sm">Privacy Protected</span>
</div>
<div class="flex items-center space-x-2">
<svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
<span class="text-gray-400 text-sm">Money Back Guarantee</span>
</div>
<div class="flex items-center space-x-2">
<svg class="w-6 h-6 text-purple-400" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
<span class="text-gray-400 text-sm">24/7 Support</span>
</div>
</div>
<!-- Bottom Section -->
<div class="border-t border-white/10 pt-8">
<div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<!-- Copyright -->
<div class="text-gray-400 text-sm text-center md:text-left">
<p>© 2024 Blessed Writing Services. All rights reserved.</p>
<p class="mt-1">Empowering academic excellence worldwide since 2020.</p>
</div>
<!-- Legal Links -->
<div class="flex flex-wrap justify-center md:justify-end space-x-6 text-sm">
<a href="/privacy" class="text-gray-400 hover:text-white hover:gradient-text transition-all duration-200">
Privacy Policy
</a>
<a href="/terms" class="text-gray-400 hover:text-white hover:gradient-text transition-all duration-200">
Terms of Service
</a>
<a href="/cookies" class="text-gray-400 hover:text-white hover:gradient-text transition-all duration-200">
Cookie Policy
</a>
<a href="/refund" class="text-gray-400 hover:text-white hover:gradient-text transition-all duration-200">
Refund Policy
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Back to Top Button -->
<button
id="back-to-top"
class="fixed bottom-20 right-6 w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white rounded-full shadow-lg neon-glow transition-all duration-300 opacity-0 invisible hover:scale-110"
aria-label="Back to top"
>
<svg class="w-6 h-6 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
</svg>
</button>
</footer>/* Footer Specific Styles */
.footer-container {
position: relative;
margin-top: 5rem;
overflow: hidden;
}
/* Animated Background Elements */
.footer-bg-elements {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.footer-bg-blur {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.3;
}
.footer-bg-blur-1 {
top: 25%;
left: 25%;
width: 16rem;
height: 16rem;
background: rgba(59, 130, 246, 0.05);
animation: pulse-slow 4s ease-in-out infinite;
}
.footer-bg-blur-2 {
bottom: 25%;
right: 25%;
width: 24rem;
height: 24rem;
background: rgba(147, 51, 234, 0.05);
animation: pulse-slow 4s ease-in-out infinite;
animation-delay: 2s;
}
/* Main Footer Glass Effect */
.footer-glass {
position: relative;
z-index: 10;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
background: rgba(255, 255, 255, 0.05);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Footer Grid Layout */
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 3rem;
}
@media (min-width: 768px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.footer-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* Company Section */
.footer-company {
grid-column: span 1;
}
@media (min-width: 1024px) {
.footer-company {
grid-column: span 1;
}
}
/* Logo Styles */
.footer-logo {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.footer-logo-icon {
width: 2.5rem;
height: 2.5rem;
background: linear-gradient(to right, #3b82f6, #8b5cf6);
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.footer-logo-text {
background: linear-gradient(to right, #60a5fa, #a78bfa, #22d3ee);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-weight: 700;
font-size: 1.5rem;
}
/* Social Media Links */
.footer-social {
display: flex;
gap: 1rem;
}
.footer-social-link {
width: 2.5rem;
height: 2.5rem;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
text-decoration: none;
}
.footer-social-link:hover {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3), 0 0 40px rgba(147, 51, 234, 0.2);
transform: translateY(-2px);
}
/* Footer Section Headings */
.footer-section-title {
color: white;
font-weight: 600;
font-size: 1.125rem;
margin-bottom: 1.5rem;
background: linear-gradient(to right, #60a5fa, #a78bfa, #22d3ee);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
/* Footer Links */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 0.75rem;
}
.footer-link {
color: #d1d5db;
text-decoration: none;
display: flex;
align-items: center;
transition: all 0.2s ease;
group: true;
}
.footer-link:hover {
color: white;
background: linear-gradient(to right, #60a5fa, #a78bfa, #22d3ee);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.footer-link-dot {
width: 0.25rem;
height: 0.25rem;
border-radius: 50%;
margin-right: 0.75rem;
transition: all 0.2s ease;
}
.footer-link:hover .footer-link-dot {
width: 0.5rem;
}
/* Contact Section */
.footer-contact-item {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.footer-contact-icon {
width: 2rem;
height: 2rem;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.375rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.footer-contact-item:hover .footer-contact-icon {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3), 0 0 40px rgba(147, 51, 234, 0.2);
}
/* Newsletter Section */
.footer-newsletter {
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
background: linear-gradient(to right, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 1rem;
padding: 2rem;
margin-bottom: 3rem;
}
.footer-newsletter-form {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 28rem;
margin: 0 auto;
}
@media (min-width: 640px) {
.footer-newsletter-form {
flex-direction: row;
}
}
.footer-newsletter-input {
flex: 1;
padding: 0.75rem 1rem;
background: rgba(31, 41, 55, 0.5);
border: 1px solid #4b5563;
border-radius: 0.5rem;
color: white;
transition: all 0.2s ease;
}
.footer-newsletter-input::placeholder {
color: #9ca3af;
}
.footer-newsletter-input:focus {
outline: none;
ring: 2px;
ring-color: #3b82f6;
border-color: transparent;
}
.footer-newsletter-button {
padding: 0.75rem 1.5rem;
background: linear-gradient(to right, #3b82f6, #8b5cf6);
color: white;
font-weight: 600;
border-radius: 0.5rem;
border: none;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3), 0 0 40px rgba(147, 51, 234, 0.2);
}
.footer-newsletter-button:hover {
background: linear-gradient(to right, #2563eb, #7c3aed);
transform: translateY(-1px);
}
/* Trust Badges */
.footer-trust-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 2rem;
margin-bottom: 3rem;
opacity: 0.6;
}
.footer-trust-badge {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Bottom Section */
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 2rem;
}
.footer-bottom-content {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
@media (min-width: 768px) {
.footer-bottom-content {
flex-direction: row;
gap: 0;
}
}
.footer-legal-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
font-size: 0.875rem;
}
@media (min-width: 768px) {
.footer-legal-links {
justify-content: flex-end;
}
}
.footer-legal-link {
color: #9ca3af;
text-decoration: none;
transition: all 0.2s ease;
}
.footer-legal-link:hover {
color: white;
background: linear-gradient(to right, #60a5fa, #a78bfa, #22d3ee);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
/* Back to Top Button */
.back-to-top {
position: fixed;
bottom: 5rem;
right: 1.5rem;
width: 3rem;
height: 3rem;
background: linear-gradient(to right, #3b82f6, #8b5cf6);
color: white;
border-radius: 50%;
border: none;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
z-index: 50;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background: linear-gradient(to right, #2563eb, #7c3aed);
transform: scale(1.1);
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3), 0 0 40px rgba(147, 51, 234, 0.2);
}
/* Animations */
@keyframes pulse-slow {
0%, 100% {
opacity: 0.3;
}
50% {
opacity: 0.1;
}
}
/* Responsive Adjustments */
@media (max-width: 640px) {
.footer-container {
margin-top: 3rem;
}
.footer-glass {
padding: 3rem 1rem;
}
.footer-logo-text {
font-size: 1.25rem;
}
.footer-newsletter {
padding: 1.5rem;
}
.footer-trust-badges {
gap: 1rem;
}
.footer-legal-links {
gap: 1rem;
font-size: 0.75rem;
}
}// Back to Top Button Functionality
document.addEventListener('DOMContentLoaded', function() {
const backToTopButton = document.getElementById('back-to-top');
// Show/hide back to top button based on scroll position
window.addEventListener('scroll', function() {
if (window.pageYOffset > 300) {
backToTopButton.classList.add('visible');
} else {
backToTopButton.classList.remove('visible');
}
});
// Smooth scroll to top when button is clicked
backToTopButton.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
});
// Newsletter Form Submission
document.addEventListener('DOMContentLoaded', function() {
const newsletterForm = document.querySelector('.footer-newsletter-form');
if (newsletterForm) {
newsletterForm.addEventListener('submit', function(e) {
e.preventDefault();
const email = this.querySelector('input[type="email"]').value;
const button = this.querySelector('button');
const originalText = button.textContent;
// Show loading state
button.textContent = 'Subscribing...';
button.disabled = true;
// Simulate API call
setTimeout(() => {
// Show success message
button.textContent = 'Subscribed!';
button.style.background = 'linear-gradient(to right, #10b981, #059669)';
// Reset form
this.querySelector('input[type="email"]').value = '';
// Reset button after 3 seconds
setTimeout(() => {
button.textContent = originalText;
button.disabled = false;
button.style.background = 'linear-gradient(to right, #3b82f6, #8b5cf6)';
}, 3000);
}, 1500);
});
}
});
// Animate footer elements on scroll
document.addEventListener('DOMContentLoaded', function() {
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// Observe footer sections
const footerSections = document.querySelectorAll('.footer-grid > div');
footerSections.forEach((section, index) => {
section.style.opacity = '0';
section.style.transform = 'translateY(20px)';
section.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
observer.observe(section);
});
});This footer perfectly complements the futuristic design of the Blessed Writing Platform while providing all essential information and functionality users expect.
Generate admin page html and css codes.