Hugging Face's logo

Spaces:
Jae0009
/
working
Running

App Files Community
working / index.html
Jae0009's picture
Jae0009
Add 3 files
0222843 verified
Raw History Blame Contribute Delete
25.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GODSPOWER | Content Hub</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;900&display=swap');
body {
font-family: 'Poppins', sans-serif;
background-color: #f8fafc;
color: #1e293b;
}
.name-glow {
text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from {
text-shadow: 0 0 5px rgba(99, 102, 241, 0.5);
}
to {
text-shadow: 0 0 15px rgba(99, 102, 241, 0.8), 0 0 20px rgba(99, 102, 241, 0.6);
}
}
.gradient-bg {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: #6366f1;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.active-nav::after {
width: 100%;
}
.floating {
animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
</style>
</head>
<body class="min-h-screen">
<!-- Navigation -->
<nav class="bg-white shadow-sm sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<span class="text-2xl font-bold gradient-text bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
GODSPOWER
</span>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
<a href="#" class="nav-link active-nav text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Home</a>
<a href="#" class="nav-link text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Articles</a>
<a href="#" class="nav-link text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Projects</a>
<a href="#" class="nav-link text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">About</a>
<a href="#" class="nav-link text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Contact</a>
</div>
<div class="-mr-2 flex items-center md:hidden">
<button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span class="sr-only">Open main menu</span>
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="hidden md:hidden">
<div class="pt-2 pb-3 space-y-1">
<a href="#" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
<a href="#" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Articles</a>
<a href="#" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Projects</a>
<a href="#" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">About</a>
<a href="#" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Contact</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="gradient-bg text-white">
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
<div class="text-center">
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight name-glow mb-6">
GODSPOWER
</h1>
<p class="mt-6 max-w-lg mx-auto text-xl opacity-90">
Welcome to my digital space where ideas come to life and creativity meets innovation.
</p>
<div class="mt-10 flex justify-center space-x-4">
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-indigo-50">
Explore Content
</a>
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-800 bg-opacity-60 hover:bg-opacity-70">
Contact Me
</a>
</div>
</div>
</div>
</div>
<!-- Featured Content -->
<div class="py-12 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Featured</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
My Latest Work
</p>
</div>
<div class="mt-10">
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- Card 1 -->
<div class="card-hover bg-white rounded-lg overflow-hidden shadow-md border border-gray-100">
<div class="p-5">
<div class="flex items-center">
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
<i class="fas fa-pen-fancy text-white text-xl"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Creative Writing</h3>
<p class="mt-1 text-sm text-gray-500">Published: June 2023</p>
</div>
</div>
<p class="mt-4 text-gray-500">
Exploring the depths of human imagination through prose and poetry that challenges conventional thinking.
</p>
<div class="mt-6">
<a href="#" class="text-indigo-600 hover:text-indigo-900 font-medium">Read Article →</a>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="card-hover bg-white rounded-lg overflow-hidden shadow-md border border-gray-100">
<div class="p-5">
<div class="flex items-center">
<div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
<i class="fas fa-laptop-code text-white text-xl"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Web Development</h3>
<p class="mt-1 text-sm text-gray-500">Completed: May 2023</p>
</div>
</div>
<p class="mt-4 text-gray-500">
Building modern, responsive web applications with cutting-edge technologies and user-centered design.
</p>
<div class="mt-6">
<a href="#" class="text-indigo-600 hover:text-indigo-900 font-medium">View Project →</a>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="card-hover bg-white rounded-lg overflow-hidden shadow-md border border-gray-100">
<div class="p-5">
<div class="flex items-center">
<div class="flex-shrink-0 bg-pink-500 rounded-md p-3">
<i class="fas fa-chart-line text-white text-xl"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Data Analysis</h3>
<p class="mt-1 text-sm text-gray-500">Ongoing</p>
</div>
</div>
<p class="mt-4 text-gray-500">
Transforming raw data into meaningful insights through advanced analytics and visualization techniques.
</p>
<div class="mt-6">
<a href="#" class="text-indigo-600 hover:text-indigo-900 font-medium">Learn More →</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- About Section -->
<div class="py-12 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
<div class="relative mb-8 lg:mb-0">
<div class="relative mx-auto rounded-lg overflow-hidden w-64 h-64 md:w-80 md:h-80 lg:w-96 lg:h-96 floating">
<img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="About GODSPOWER">
<div class="absolute inset-0 bg-indigo-500 opacity-20"></div>
</div>
<div class="absolute -bottom-5 -right-5 bg-white p-3 rounded-lg shadow-lg">
<div class="flex items-center">
<div class="flex-shrink-0 bg-indigo-100 rounded-full p-2">
<i class="fas fa-check text-indigo-600"></i>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">Verified Creator</p>
<p class="text-xs text-gray-500">Since 2018</p>
</div>
</div>
</div>
</div>
<div class="mt-12 lg:mt-0">
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
About <span class="text-indigo-600">GODSPOWER</span>
</h2>
<p class="mt-3 text-lg text-gray-500">
I'm a multidisciplinary creator passionate about blending technology, art, and storytelling to craft meaningful experiences.
</p>
<div class="mt-8">
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
<i class="fas fa-lightbulb"></i>
</div>
</div>
<div class="ml-4">
<h3 class="text-lg leading-6 font-medium text-gray-900">Creative Vision</h3>
<p class="mt-2 text-base text-gray-500">
Bringing unique perspectives to every project, with a focus on innovation and aesthetic excellence.
</p>
</div>
</div>
<div class="mt-8 flex items-start">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
<i class="fas fa-cogs"></i>
</div>
</div>
<div class="ml-4">
<h3 class="text-lg leading-6 font-medium text-gray-900">Technical Expertise</h3>
<p class="mt-2 text-base text-gray-500">
Years of experience in web development, design, and content creation with a commitment to quality.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Newsletter -->
<div class="bg-indigo-700">
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center">
<div class="lg:w-0 lg:flex-1">
<h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
Stay updated
</h2>
<p class="mt-3 max-w-3xl text-lg leading-6 text-indigo-200">
Subscribe to my newsletter for the latest content, projects, and insights.
</p>
</div>
<div class="mt-8 lg:mt-0 lg:ml-8">
<form class="sm:flex">
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required class="w-full px-5 py-3 border border-transparent placeholder-gray-500 focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-700 focus:ring-white focus:border-white sm:max-w-xs rounded-md" placeholder="Enter your email">
<div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
<button type="submit" class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-700 focus:ring-white">
Subscribe
</button>
</div>
</form>
<p class="mt-3 text-sm text-indigo-200">
I respect your privacy. Unsubscribe at any time.
</p>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-800">
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<div class="space-y-8 xl:col-span-1">
<span class="text-2xl font-bold gradient-text bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400">
GODSPOWER
</span>
<p class="text-gray-300 text-base">
Creating content that inspires, educates, and entertains.
</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-twitter text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-github text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-linkedin text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-instagram text-xl"></i>
</a>
</div>
</div>
<div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
Content
</h3>
<ul class="mt-4 space-y-4">
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">
Articles
</a>
</li>
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">
Tutorials
</a>
</li>
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">
Case Studies
</a>
</li>
</ul>
</div>
<div class="mt-12 md:mt-0">
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
Projects
</h3>
<ul class="mt-4 space-y-4">
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">
Web Apps
</a>
</li>
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">
Design Work
</a>
</li>
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">
Open Source
</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
Legal
</h3>
<ul class="mt-4 space-y-4">
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">
Privacy
</a>
</li>
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">
Terms
</a>
</li>
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">
Cookie Policy
</a>
</li>
</ul>
</div>
<div class="mt-12 md:mt-0">
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
Contact
</h3>
<ul class="mt-4 space-y-4">
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">
Email
</a>
</li>
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">
Twitter
</a>
</li>
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">
LinkedIn
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mt-12 border-t border-gray-700 pt-8">
<p class="text-base text-gray-400 text-center">
&copy; 2023 GODSPOWER. All rights reserved.
</p>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
if (menu.classList.contains('hidden')) {
menu.classList.remove('hidden');
} else {
menu.classList.add('hidden');
}
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
}
});
});
// Add active class to nav links on scroll
window.addEventListener('scroll', function() {
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('.nav-link');
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (pageYOffset >= (sectionTop - 100)) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('active-nav');
link.classList.add('text-gray-500');
link.classList.remove('text-gray-900');
if (link.getAttribute('href') === `#${current}`) {
link.classList.add('active-nav');
link.classList.remove('text-gray-500');
link.classList.add('text-gray-900');
}
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Jae0009/working" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>