RBCortex/ceecup-under-construction
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>CEECup - Coffee Excellence</title>7 <link rel="icon" href="https://www.ceecup.org/wp-content/uploads/2022/02/cropped-ceecup-favicon-32x32.png">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <style>11 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');12 body {13 font-family: 'Inter', sans-serif;14 background: url('https://www.ceecup.org/wp-content/uploads/2022/02/hero-home.jpg') no-repeat center center fixed;15 background-size: cover;16 }17 .overlay {18 background-color: rgba(255, 255, 255, 0.85);19 }20.construction-animation {21 animation: pulse 2s infinite;22 }23 @keyframes pulse {24 0% { transform: scale(1); }25 50% { transform: scale(1.05); }26 100% { transform: scale(1); }27 }28 </style>29</head>30<body class="min-h-screen flex flex-col">31 <header class="bg-white shadow-sm py-4">32 <div class="container mx-auto px-4 flex justify-between items-center">33 <div class="flex items-center">34 <img src="https://www.ceecup.org/wp-content/uploads/2022/02/ceecup-logo.png" alt="CEECup Logo" class="h-12">35</div>36 <nav class="hidden md:flex space-x-8">37 <a href="#" class="text-gray-600 hover:text-gray-900 font-medium">About</a>38 <a href="#" class="text-gray-600 hover:text-gray-900 font-medium">Contact</a>39 </nav>40 <button class="md:hidden">41 <i data-feather="menu" class="w-6 h-6 text-gray-700"></i>42 </button>43 </div>44 </header>45 <main class="flex-grow flex items-center justify-center py-12 px-4">46 <div class="overlay rounded-xl shadow-xl p-8 md:p-12 max-w-4xl mx-4">47 <div class="text-center">48 <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6">Welcome to CEECup</h1>49 <p class="text-xl text-gray-700 mb-8">The Coffee Excellence and Education Cup</p>50 51 <div class="grid md:grid-cols-2 gap-8 mt-10">52 <div class="bg-white p-6 rounded-lg shadow-md">53 <i data-feather="award" class="w-12 h-12 text-yellow-600 mb-4 mx-auto"></i>54 <h3 class="text-xl font-semibold text-gray-800 mb-3">Our Mission</h3>55 <p class="text-gray-600">Promoting coffee excellence through education, competitions, and community building.</p>56 </div>57 <div class="bg-white p-6 rounded-lg shadow-md">58 <i data-feather="calendar" class="w-12 h-12 text-yellow-600 mb-4 mx-auto"></i>59 <h3 class="text-xl font-semibold text-gray-800 mb-3">Upcoming Events</h3>60 <p class="text-gray-600">Stay tuned for our next competitions and educational programs.</p>61 </div>62 </div>63 64 <div class="mt-12">65 <a href="https://www.ceecup.org/about/" class="inline-block bg-yellow-600 hover:bg-yellow-700 text-white font-medium px-6 py-3 rounded-lg transition duration-200">66 Learn More About Us67 </a>68 </div>69 </div>70</div>71 </main>72 <footer class="bg-white py-6">73 <div class="container mx-auto px-4 text-center text-gray-600">74 <p>© 2023 CEECup. All rights reserved.</p>75 <div class="flex justify-center space-x-6 mt-4">76 <a href="https://twitter.com/ceecup" class="text-gray-500 hover:text-yellow-600 transition duration-200">77 <i data-feather="twitter" class="w-5 h-5"></i>78 </a>79 <a href="https://www.instagram.com/ceecup/" class="text-gray-500 hover:text-yellow-600 transition duration-200">80 <i data-feather="instagram" class="w-5 h-5"></i>81 </a>82 <a href="https://www.facebook.com/ceecup" class="text-gray-500 hover:text-yellow-600 transition duration-200">83 <i data-feather="facebook" class="w-5 h-5"></i>84 </a>85 </div>86</div>87 </footer>88 89 <script>90 feather.replace();91 </script>92</body>93</html>94