Okay, let's start building a vibrant, interactive, and responsive website inspired by the concept of a youth opportunities platform. Since I cannot access external websites, I'll create a structure based on common elements found on such platforms. We'll begin with the basic HTML structure and CSS for layout and responsiveness. Youth Opportunities Hub

Unlock Your Potential

Find learning, earning, and support opportunities.

Explore Now

Explore Opportunities

Learning

Courses, workshops, and skills development.

View Learning

Earning

Jobs, internships, and entrepreneurial support.

View Earning

Support

Mentorship, guidance, and resources.

View Support

About Us

We are dedicated to connecting youth with opportunities for growth and development.

/* Basic Reset & Defaults */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: sans-serif; line-height: 1.6; color: #333; background-color: #f4f4f4; } .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; } ul { list-style: none; } a { text-decoration: none; color: #007bff; /* Vibrant Blue */ } h1, h2, h3 { margin-bottom: 0.8em; color: #333; } /* Header */ .site-header { background-color: #fff; padding: 1rem 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 1000; } .site-header .container { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.8rem; font-weight: bold; color: #ff6f61; /* Vibrant Coral */ } .main-nav ul { display: flex; } .main-nav li { margin-left: 20px; } .main-nav a { color: #333; padding: 5px 10px; transition: color 0.3s ease; } .main-nav a:hover, .main-nav a.active { color: #ff6f61; /* Vibrant Coral */ } .menu-toggle { display: none; /* Hidden by default, shown on mobile */ background: none; border: none; cursor: pointer; padding: 10px; } .menu-toggle span { display: block; width: 25px; height: 3px; background-color: #333; margin: 5px 0; transition: all 0.3s ease-in-out; } /* Hero Section */ .hero-section { background: linear-gradient(rgba(0, 123, 255, 0.7), rgba(0, 86, 179, 0.7)), url('https://via.placeholder.com/1500x600.png?text=Youth+Empowerment') no-repeat center center/cover; /* Placeholder image */ color: #fff; padding: 6rem 0; text-align: center; } .hero-section h1 { font-size: 3rem; margin-bottom: 0.5em; color: #fff; } .hero-section p { font-size: 1.2rem; margin-bottom: 1.5em; } /* Buttons */ .btn { display: inline-block; padding: 12px 25px; border: none; border-radius: 5px; cursor: pointer; font-size: 1rem; transition: background-color 0.3s ease, transform 0.2s ease; } .btn-primary { background-color: #ff6f61; /* Vibrant Coral */ color: #fff; } .btn-primary:hover { background-color: #e65a50; transform: translateY(-2px); } .btn-secondary { background-color: #007bff; /* Vibrant Blue */ color: #fff; } .btn-secondary:hover { background-color: #0056b3; transform: translateY(-2px); } /* Opportunities Section */ .opportunities-section { padding: 4rem 0; background-color: #fff; text-align: center; } .opportunity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-top: 2rem; text-align: left; } .opportunity-card { background-color: #f9f9f9; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .opportunity-card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.15); } .opportunity-card h3 { color: #007bff; /* Vibrant Blue */ margin-bottom: 0.5em; } .opportunity-card p { margin-bottom: 1.5em; color: #555; } /* About Section */ .about-section { padding: 4rem 0; background-color: #e9ecef; /* Light Gray */ text-align: center; } /* Footer */ .site-footer { background-color: #343a40; /* Dark Gray */ color: #fff; padding: 2rem 0; text-align: center; } .site-footer .container { display: flex; flex-direction: column; align-items: center; } .site-footer p { margin-bottom: 1rem; } .footer-nav ul { display: flex; gap: 15px; } .footer-nav a { color: #adb5bd; /* Lighter gray for links */ transition: color 0.3s ease; } .footer-nav a:hover { color: #fff; } /* Responsive Design */ @media (max-width: 768px) { .main-nav { position: absolute; top: 100%; /* Position below header */ left: 0; width: 100%; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); max-height: 0; overflow: hidden; transition: max-height 0.5s ease-out; } .main-nav.active { max-height: 300px; /* Adjust as needed */ } .main-nav ul { flex-direction: column; padding: 1rem 0; } .main-nav li { margin: 0; text-align: center; } .main-nav a { display: block; padding: 1rem; border-bottom: 1px solid #eee; } .main-nav li:last-child a { border-bottom: none; } .menu-toggle { display: block; /* Show hamburger */ } /* Animate hamburger icon */ .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); } .hero-section h1 { font-size: 2.5rem; } .hero-section { padding: 4rem 0; } .opportunity-grid { grid-template-columns: 1fr; /* Stack cards on smaller screens */ } } const menuToggle = document.querySelector('.menu-toggle'); const mainNav = document.querySelector('.main-nav'); menuToggle.addEventListener('click', () => { // Toggle active class on button for animation menuToggle.classList.toggle('active'); // Toggle active class on nav for visibility mainNav.classList.toggle('active'); // Update aria-expanded attribute const isExpanded = mainNav.classList.contains('active'); menuToggle.setAttribute('aria-expanded', isExpanded); }); // Optional: Close menu when a link is clicked (good for single-page apps) mainNav.querySelectorAll('a').forEach(link => { link.addEventListener('click', () => { if (mainNav.classList.contains('active')) { menuToggle.classList.remove('active'); mainNav.classList.remove('active'); menuToggle.setAttribute('aria-expanded', 'false'); } }); }); // Optional: Close menu if clicked outside document.addEventListener('click', (event) => { const isClickInsideNav = mainNav.contains(event.target); const isClickOnToggle = menuToggle.contains(event.target); if (!isClickInsideNav && !isClickOnToggle && mainNav.classList.contains('active')) { menuToggle.classList.remove('active'); mainNav.classList.remove('active'); menuToggle.setAttribute('aria-expanded', 'false'); } }); This sets up the basic HTML structure, CSS for styling and responsiveness (including a mobile navigation toggle), and JavaScript to handle the mobile menu functionality. You should see a basic layout with a header, hero section, opportunities grid, and footer.