# Ghana Community Israel App
I’ll create a comprehensive web application for the Ghanaian community in Israel to share news, promotions, and entertainment. This will be a single-page application with a clean, responsive design.
## Final Solution
“`html
–primary: #006B3F;
–secondary: #FCD116;
–accent: #CE1126;
–light: #F5F5F5;
–dark: #333;
–gray: #777;
–shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
–radius: 8px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: ‘Open Sans’, sans-serif;
background-color: #f9f9f9;
color: var(–dark);
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header Styles */
header {
background: linear-gradient(135deg, var(–primary) 0%, #004d2b 100%);
color: white;
padding: 15px 0;
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(–shadow);
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
}
.logo img {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(–secondary);
padding: 5px;
}
.logo h1 {
font-family: ‘Poppins’, sans-serif;
font-weight: 700;
font-size: 1.8rem;
}
.logo span {
color: var(–secondary);
}
nav ul {
display: flex;
list-style: none;
gap: 25px;
}
nav a {
color: white;
text-decoration: none;
font-weight: 500;
padding: 8px 12px;
border-radius: var(–radius);
transition: all 0.3s ease;
}
nav a:hover, nav a.active {
background: rgba(255, 255, 255, 0.15);
}
.user-actions {
display: flex;
gap: 15px;
}
.btn {
padding: 8px 20px;
border-radius: 30px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
border: none;
}
.btn-login {
background: var(–secondary);
color: var(–dark);
}
.btn-register {
background: var(–accent);
color: white;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: var(–shadow);
}
.hamburger {
display: none;
cursor: pointer;
font-size: 1.5rem;
}
/* Main Content */
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.7), url(‘https://images.unsplash.com/photo-1517244683847-7456b63c5969?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80’);
background-size: cover;
background-position: center;
color: white;
text-align: center;
padding: 100px 20px;
margin-bottom: 40px;
}
.hero h2 {
font-size: 2.8rem;
margin-bottom: 20px;
font-family: ‘Poppins’, sans-serif;
}
.hero p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 30px;
}
.btn-hero {
background: var(–accent);
color: white;
padding: 12px 30px;
font-size: 1.1rem;
border-radius: 30px;
text-decoration: none;
display: inline-block;
}
/* Category Tabs */
.category-tabs {
display: flex;
justify-content: center;
gap: 15px;
margin: 30px 0;
flex-wrap: wrap;
}
.tab-btn {
background: white;
border: 2px solid var(–primary);
color: var(–primary);
padding: 10px 25px;
border-radius: 30px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.tab-btn.active, .tab-btn:hover {
background: var(–primary);
color: white;
}
/* Content Sections */
.section-title {
text-align: center;
margin: 40px 0 30px;
font-family: ‘Poppins’, sans-serif;
color: var(–primary);
position: relative;
}
.section-title:after {
content: ”;
display: block;
width: 80px;
height: 4px;
background: var(–secondary);
margin: 10px auto;
border-radius: 2px;
}
.content-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
margin-bottom: 50px;
}
.card {
background: white;
border-radius: var(–radius);
overflow: hidden;
box-shadow: var(–shadow);
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-10px);
}
.card-image {
height: 200px;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.card:hover .card-image img {
transform: scale(1.1);
}
.card-content {
padding: 20px;
}
.card-category {
display: inline-block;
background: var(–secondary);
color: var(–dark);
padding: 4px 12px;
border-radius: 30px;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 12px;
}
.card-title {
font-size: 1.3rem;
margin-bottom: 10px;
font-family: ‘Poppins’, sans-serif;
}
.card-details {
display: flex;
justify-content: space-between;
color: var(–gray);
font-size: 0.9rem;
margin-bottom: 15px;
}
.card-text {
margin-bottom: 15px;
}
.card-link {
color: var(–primary);
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 5px;
}
/* Events Section */
.events {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 50px 0;
}
.events-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.event-card {
background: white;
border-radius: var(–radius);
padding: 25px;
box-shadow: var(–shadow);
display: flex;
flex-direction: column;
}
.event-date {
background: var(–primary);
color: white;
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.event-day {
font-size: 1.8rem;
font-weight: 700;
line-height: 1;
}
.event-month {
font-size: 0.9rem;
text-transform: uppercase;
}
.event-title {
font-size: 1.3rem;
margin-bottom: 10px;
font-family: ‘Poppins’, sans-serif;
}
.event-details {
margin-bottom: 15px;
flex-grow: 1;
}
.event-meta {
display: flex;
align-items: center;
gap: 10px;
color: var(–gray);
margin-top: 15px;
}
/* Submit Form */
.submit-form {
background: white;
border-radius: var(–radius);
padding: 40px;
box-shadow: var(–shadow);
max-width: 800px;
margin: 50px auto;
}
.form-title {
text-align: center;
margin-bottom: 30px;
color: var(–primary);
font-family: ‘Poppins’, sans-serif;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
}
.form-control {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: var(–radius);
font-family: ‘Open Sans’, sans-serif;
font-size: 1rem;
}
.form-control:focus {
outline: none;
border-color: var(–primary);
}
textarea.form-control {
min-height: 150px;
resize: vertical;
}
.btn-submit {
background: var(–primary);
color: white;
width: 100%;
padding: 14px;
font-size: 1.1rem;
border-radius: var(–radius);
cursor: pointer;
transition: background 0.3s ease;
}
.btn-submit:hover {
background: #005a34;
}
/* Footer */
footer {
background: var(–dark);
color: white;
padding: 60px 0 30px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-bottom: 40px;
}
.footer-section h3 {
font-family: ‘Poppins’, sans-serif;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}
.footer-section h3:after {
content: ”;
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background: var(–secondary);
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 10px;
}
.footer-links a {
color: #bbb;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: var(–secondary);
}
.social-links {
display: flex;
gap: 15px;
margin-top: 20px;
}
.social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: white;
transition: all 0.3s ease;
}
.social-links a:hover {
background: var(–primary);
transform: translateY(-3px);
}
.contact-info {
display: flex;
flex-direction: column;
gap: 12px;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 10px;
}
.copyright {
text-align: center;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #aaa;
font-size: 0.9rem;
}
/* Responsive Design */
@media (max-width: 992px) {
.hero h2 {
font-size: 2.3rem;
}
nav ul {
gap: 15px;
}
}
@media (max-width: 768px) {
.header-content {
flex-wrap: wrap;
}
.logo h1 {
font-size: 1.5rem;
}
nav {
order: 3;
width: 100%;
margin-top: 15px;
display: none;
}
nav.active {
display: block;
}
nav ul {
flex-direction: column;
gap: 5px;
}
nav a {
display: block;
padding: 10px;
}
.hamburger {
display: block;
}
.hero {
padding: 70px 20px;
}
.hero h2 {
font-size: 2rem;
}
.user-actions {
margin-left: auto;
}
}
@media (max-width: 576px) {
.hero h2 {
font-size: 1.7rem;
}
.hero p {
font-size: 1rem;
}
.submit-form {
padding: 25px;
}
.category-tabs {
gap: 10px;
}
.tab-btn {
padding: 8px 15px;
font-size: 0.9rem;
}
}
GhanaIsrael
Welcome to the Ghanaian Community in Israel
Your hub for news, events, promotions, and connections within the vibrant Ghanaian community living in Israel.
Latest Community News
Annual Community Meeting a Success
Oct 15, 2023
Over 200 members attended our annual community meeting to discuss important issues and plan for the upcoming year.
Scholarship Opportunities for Students
Oct 10, 2023
New scholarship programs available for Ghanaian students in Israel. Application deadline is November 30th.
New Ghanaian Restaurant Opens in Tel Aviv
Oct 5, 2023
Experience authentic Ghanaian cuisine at “Taste of Ghana” now open in the heart of Tel Aviv. Special opening discounts this week!
Special Promotions
20% Off at Ghana Foods Market
Special discount for community members on all imported Ghanaian food products. Show this post at checkout!
Special Flight Deals to Ghana
Exclusive discounted rates for community members traveling to Accra and Kumasi this holiday season.
Free Money Transfers to Ghana
Zero fees on money transfers to Ghana for the first three transactions with our partner service.
Upcoming Events
Independence Day Celebration
Join us for our annual Ghana Independence Day celebration with traditional music, dance, and food.
Business Networking Mixer
Connect with fellow Ghanaian entrepreneurs and business professionals in Israel.
Ghana vs Nigeria Football Match
Community football tournament featuring Ghana vs Nigeria teams. Come support our players!
Share Your News or Event
hamburger.addEventListener(‘click’, () => {
nav.classList.toggle(‘active’);
});
// Tab Switching
const tabButtons = document.querySelectorAll(‘.tab-btn’);
tabButtons.forEach(button => {
button.addEventListener(‘click’, () => {
// Remove active class from all buttons
tabButtons.forEach(btn => btn.classList.remove(‘active’));
// Add active class to clicked button
button.classList.add(‘active’);
// In a real app, this would filter content
// For this demo, we’ll just show an alert
alert(`Showing content for: ${button.textContent}`);
});
});
// Form Submission
const submitForm = document.querySelector(‘.submit-form form’);
if(submitForm) {
submitForm.addEventListener(‘submit’, (e) => {
e.preventDefault();
alert(‘Thank you for your submission! Our team will review it and publish it soon.’);
submitForm.reset();
});
}
“`
## Key Features of the Application
1. **Community-Centric Design**:
– Uses colors from the Ghana flag (red, gold, green)
– Clean, modern interface with responsive layout
– Mobile-friendly navigation
2. **Core Functionality**:
– News section for community updates
– Promotions area for business discounts
– Events calendar for upcoming gatherings
– Submission form for community contributions
3. **User Experience**:
– Intuitive category tabs for easy navigation
– Visual cards with images for each item
– Clear event details with dates and locations
– Simple submission form for sharing content
4. **Responsive Design**:
– Works on mobile, tablet, and desktop devices
– Hamburger menu for mobile navigation
– Flexible grid layouts
5. **Community Engagement**:
– Social media links
– Contact information
– Business directory (implied)
This application serves as a central hub for the Ghanaian community in Israel to stay connected, informed, and engaged with their cultural events and business opportunities.
