style & translation updates

This commit is contained in:
Jeff Emmett 2025-04-09 16:57:44 -07:00
parent bcbbeef944
commit 3fa2b7d81f
7 changed files with 110 additions and 31 deletions

View File

@ -13,8 +13,10 @@
<div class="container">
<nav class="navbar">
<div class="logo">
<img src="images/logo.png" alt="Schools Without Borders Logo">
<span data-translate="organizationName">Schools Without Borders</span>
<a href="index.html">
<img src="images/logo.png" alt="Schools Without Borders Logo">
<span data-translate="organizationName">Schools Without Borders</span>
</a>
</div>
<ul class="nav-links">
<li><a href="index.html" data-translate="home">Home</a></li>

View File

@ -208,8 +208,10 @@
<div class="container">
<nav class="navbar">
<div class="logo">
<img src="images/logo.png" alt="Schools Without Borders Logo">
<span data-translate="organizationName">Schools Without Borders</span>
<a href="index.html">
<img src="images/logo.png" alt="Schools Without Borders Logo">
<span data-translate="organizationName">Schools Without Borders</span>
</a>
</div>
<ul class="nav-links">
<li><a href="index.html" data-translate="home">Home</a></li>

View File

@ -121,10 +121,23 @@ header {
.logo span {
color: white;
font-size: 1.5rem;
font-size: 2rem;
font-family: 'Arial', sans-serif;
font-weight: 600;
}
.logo a {
display: flex;
align-items: center;
text-decoration: none;
color: inherit;
}
.logo a:hover {
text-decoration: none;
color: inherit;
}
.nav-links {
display: flex;
}
@ -1235,3 +1248,77 @@ header.preserve-layout * {
main, section:first-of-type {
margin-top: 70px;
}
/* Shared donation card styles */
.donation-option, .donation-box {
background: rgba(255, 255, 255, 0.95);
padding: 2rem;
border-radius: 10px;
text-align: center;
flex: 1;
max-width: 300px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease;
}
.donation-option:hover, .donation-box:hover {
transform: translateY(-5px);
}
/* CTA section specific styles */
.cta .donation-options {
display: flex;
justify-content: space-around;
gap: 2rem;
margin-top: 3rem;
}
.donation-amount {
font-size: 2.5rem;
font-weight: bold;
color: var(--navy-blue);
margin-bottom: 1rem;
}
.donation-option p, .donation-box p {
color: #333;
font-size: 1.1rem;
margin-bottom: 1.5rem;
}
/* Add buttons to CTA donation options */
.donation-option {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.donation-option::after {
content: "Donate Now";
display: inline-block;
padding: 0.75rem 1.5rem;
background-color: var(--navy-blue);
color: white;
border-radius: 5px;
margin-top: 1rem;
cursor: pointer;
transition: background-color 0.2s ease;
}
.donation-option:hover::after {
background-color: var(--dark-navy);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.cta .donation-options {
flex-direction: column;
align-items: center;
}
.donation-option, .donation-box {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
}
}

View File

@ -14,8 +14,10 @@
<div class="container">
<nav class="navbar">
<div class="logo">
<img src="images/logo.png" alt="Schools Without Borders Logo">
<span data-translate="organizationName">Schools Without Borders</span>
<a href="index.html">
<img src="images/logo.png" alt="Schools Without Borders Logo">
<span data-translate="organizationName">Schools Without Borders</span>
</a>
</div>
<ul class="nav-links">
<li><a href="index.html" data-translate="home">Home</a></li>

View File

@ -1,7 +1,7 @@
const homeTranslations = {
en: {
// Hero Section
heroTitle: "Our Children<br>Our Future",
heroTitle: "Our Children Our Future",
heroSubtitle: "Bringing Education Where Schools Cannot Reach",
supportButton: "Support Our Mission",
@ -45,7 +45,7 @@ const homeTranslations = {
},
ar: {
// Hero Section
heroTitle: "أطفالنا<br>مستقبلنا",
heroTitle: "أطفالنا مستقبلنا",
heroSubtitle: "نوصل التعليم حيث لا تصل المدارس",
supportButton: "ادعم مهمتنا",

View File

@ -13,8 +13,10 @@
<div class="container">
<nav class="navbar">
<div class="logo">
<img src="images/logo.png" alt="Schools Without Borders Logo">
<span data-translate="organizationName">Schools Without Borders</span>
<a href="index.html">
<img src="images/logo.png" alt="Schools Without Borders Logo">
<span data-translate="organizationName">Schools Without Borders</span>
</a>
</div>
<ul class="nav-links">
<li><a href="index.html" data-translate="home">Home</a></li>
@ -83,24 +85,6 @@
<a href="#" class="btn btn-primary" data-translate="donateButton">Make a Donation</a>
</div>
</div>
<!-- Spread Word Card -->
<div class="support-card">
<div class="support-card-image">
<img src="images/spread-word.jpg" alt="Spread the word about Schools Without Borders">
</div>
<div class="support-card-content">
<h3 data-translate="spreadTitle">Spread the Word</h3>
<p data-translate="spreadText1">One of the simplest ways to support us is to help spread awareness about our mission. Share our story on social media, tell your friends and family about our work, and encourage others to get involved.</p>
<p data-translate="spreadText2">The more people who know about our efforts, the more children we can reach with education and hope.</p>
<div class="social-links" style="justify-content: flex-start;">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="support-card">
<div class="support-card-image">
<img src="images/partnership.jpg" alt="Partner with Schools Without Borders">

View File

@ -13,8 +13,10 @@
<div class="container">
<nav class="navbar">
<div class="logo">
<img src="images/logo.png" alt="Schools Without Borders Logo">
<span data-translate="organizationName">Schools Without Borders</span>
<a href="index.html">
<img src="images/logo.png" alt="Schools Without Borders Logo">
<span data-translate="organizationName">Schools Without Borders</span>
</a>
</div>
<ul class="nav-links">
<li><a href="index.html" data-translate="home">Home</a></li>