SCode-Foundation/about.html at main · SCodeGit/SCode-Foundation · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SCode Foundations | About Us</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="https://github.com/SCodeGit/SCode-Foundation/3415d5a312482e1f8dcce28abc32ffaabf9a76a1/images/scode%20foundations.png">

<style>
:root{
  --bg:#ffffff;
  --text:#111;
  --card:#f3f3f3;
  --accent:#111;
  --shadow:rgba(0,0,0,.18);
  --radius:20px;
  --speed:.4s;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e1015;
    --text:#f1f1f1;
    --card:#1b1f2a;
    --accent:#ffffff;
    --shadow:rgba(0,0,0,.85);
  }
}
*{box-sizing:border-box;transition:all .35s ease}
body{margin:0;font-family:system-ui,Segoe UI,Arial;background:var(--bg);color:var(--text);}
header{display:flex;justify-content:space-between;align-items:center;padding:15px 30px;background:var(--bg);box-shadow:0 10px 30px var(--shadow);position:sticky;top:0;z-index:20;}
header img{height:45px;transition:.3s}
header img:hover{transform:scale(1.05);}
nav a{margin:0 12px;text-decoration:none;color:var(--text);font-weight:600;position:relative;}
nav a::after{content:"";position:absolute;bottom:-6px;left:0;width:0;height:2px;background:var(--accent);transition:.3s;}
nav a:hover::after{width:100%}
.hero{min-height:55vh;background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url("https://images.unsplash.com/photo-1523580846011-d3a5bc25702b") center/cover;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;}
.hero h1{font-size:3rem}
.section{padding:80px 10%;max-width:1100px;margin:auto;animation:fadeUp .9s ease both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.box{background:var(--card);padding:40px;border-radius:var(--radius);box-shadow:0 25px 60px var(--shadow);margin-bottom:40px;transition:.5s;}
.box:hover{transform:translateY(-10px);}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:25px;}
.value{padding:25px;border-radius:var(--radius);background:var(--card);box-shadow:0 20px 50px var(--shadow);transition:.4s;}
.value:hover{transform:translateY(-8px) scale(1.03);}
footer{background:#000;color:#fff;padding:60px 10%;text-align:center;}
footer a{color:#fff;text-decoration:none;}
#themeToggle{position:fixed;top:20px;right:20px;width:50px;height:50px;border-radius:50%;border:none;background:var(--accent);color:#fff;font-size:1.2rem;cursor:pointer;box-shadow:0 0 20px var(--shadow);z-index:999;transition:.3s;}
#themeToggle:hover{transform:rotate(25deg) scale(1.1);}
#backToTop{position:fixed;bottom:25px;right:25px;width:50px;height:50px;background:var(--accent);color:#fff;display:none;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;box-shadow:0 10px 25px rgba(0,0,0,.4);z-index:999;transition:.3s;}
#backToTop:hover{transform:translateY(-6px) scale(1.1);}
</style>
</head>

<body>

<header>
  <a href="index.html"><img src="https://github.com/SCodeGit/SCode-Foundation/3415d5a312482e1f8dcce28abc32ffaabf9a76a1/images/scode%20foundations.png" alt="Logo"></a>
  <nav>
    <a href="index.html">Home</a>
    <a href="events.html">Events</a>
    <a href="sponsors.html">Sponsors</a>
  </nav>
</header>

<button id="themeToggle">🌓</button>

<section class="hero">
  <div>
    <h1>About SCode Foundations</h1>
    <p>Driven by purpose. Built on compassion.</p>
  </div>
</section>

<section class="section">
  <div class="box">
    <h2>Our Story</h2>
    <p>
      SCode Foundations was established to address two silent barriers to learning:
      lack of educational resources and poor personal hygiene.
      We believe that every child deserves dignity, confidence, and access to quality education.
    </p>
  </div>

  <div class="box">
    <h2>Mission</h2>
    <p>
      To empower students through educational support and promote healthy living
      by providing essential hygiene resources to underserved communities.
    </p>
  </div>

  <div class="box">
    <h2>Vision</h2>
    <p>
      A future where no child is held back from learning due to poverty,
      poor hygiene, or lack of basic educational materials.
    </p>
  </div>

  <h2>Our Core Values</h2>
  <div class="values">
    <div class="value"><h3>Compassion</h3><p>We serve with empathy and care.</p></div>
    <div class="value"><h3>Transparency</h3><p>Every donation is accountable.</p></div>
    <div class="value"><h3>Community</h3><p>We grow through partnerships.</p></div>
    <div class="value"><h3>Sustainability</h3><p>Long-term impact matters.</p></div>
  </div>
</section>

<footer>
  <p>© <span id="year"></span> SCode Foundations | Join the Mission</p>
</footer>

<div id="backToTop">↑</div>

<script>
// Auto-update year
document.getElementById('year').textContent = new Date().getFullYear();

// Dark/Light Mode Toggle
const toggle=document.getElementById('themeToggle');
toggle.addEventListener('click',()=>{
  if(document.body.classList.contains('dark-mode')){
    document.body.classList.remove('dark-mode');
    document.body.classList.add('light-mode');
  } else {
    document.body.classList.remove('light-mode');
    document.body.classList.add('dark-mode');
  }
});

// Back-to-top Button
const back=document.getElementById('backToTop');
window.addEventListener('scroll',()=>{
  back.style.display = window.scrollY>300?'flex':'none';
});
back.addEventListener('click',()=>{window.scrollTo({top:0,behavior:'smooth'});});
</script>

</body>
</html>