Spaces:
Running
Running
File size: 8,360 Bytes
ce00ad9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - SkillUp Nigeria</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
.form-gradient {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}
.btn-primary {
background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
}
.btn-primary:hover {
background: linear-gradient(90deg, #4338ca 0%, #6d28d9 100%);
}
</style>
</head>
<body class="font-sans bg-gray-50">
<!-- Navigation -->
<nav class="bg-white shadow-sm fixed w-full z-10">
<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">
<i data-feather="book-open" class="text-indigo-600 h-8 w-8"></i>
<a href="index.html" class="ml-2 text-xl font-bold text-gray-900">SkillUp Nigeria</a>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
<a href="index.html#features" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Features</a>
<a href="index.html#how-it-works" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">How It Works</a>
<a href="index.html#leaderboards" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Leaderboards</a>
<a href="index.html#about" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">About</a>
</div>
<div class="flex items-center">
<a href="login.html" class="text-gray-900 px-3 py-2 text-sm font-medium">Login</a>
<a href="register.html" class="btn-primary text-white px-4 py-2 rounded-md text-sm font-medium shadow-sm hover:shadow-md transition duration-300">Register</a>
</div>
</div>
</div>
</nav>
<!-- Login Form -->
<section class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8" data-aos="fade-up">
<div>
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">Sign in to your account</h2>
<p class="mt-2 text-center text-sm text-gray-600">Welcome back to SkillUp Nigeria</p>
</div>
<form class="mt-8 space-y-6 bg-white p-8 rounded-xl shadow-md" action="#" method="POST">
<div class="rounded-md shadow-sm -space-y-px">
<div>
<label for="email" class="sr-only">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Email address">
</div>
<div>
<label for="password" class="sr-only">Password</label>
<input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Password">
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
<label for="remember-me" class="ml-2 block text-sm text-gray-900"> Remember me </label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500"> Forgot your password? </a>
</div>
</div>
<div>
<button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white btn-primary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Sign in
</button>
</div>
</form>
<div class="text-center">
<p class="text-sm text-gray-600">
Don't have an account? <a href="register.html" class="font-medium text-indigo-600 hover:text-indigo-500">Register now</a>
</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-4 gap-8">
<div>
<h3 class="text-lg font-semibold mb-4">SkillUp Nigeria</h3>
<p class="text-gray-400">Empowering Nigerian students through collaborative learning and friendly competition.</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Quick Links</h3>
<ul class="space-y-2">
<li><a href="index.html" class="text-gray-400 hover:text-white">Home</a></li>
<li><a href="index.html#features" class="text-gray-400 hover:text-white">Features</a></li>
<li><a href="index.html#how-it-works" class="text-gray-400 hover:text-white">How It Works</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Leaderboards</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Support</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
<li><a href="contact.html" class="text-gray-400 hover:text-white">Contact Us</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Connect With Us</h3>
<div class="flex space-x-4">
<a href="https://facebook.com" target="_blank" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a>
<a href="https://twitter.com" target="_blank" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>
<a href="https://instagram.com" target="_blank" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a>
<a href="https://linkedin.com" target="_blank" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
<p>© 2023 SkillUp Nigeria. All rights reserved.</p>
</div>
</div>
</footer>
<script>
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true
});
feather.replace();
</script>
</body>
</html> |