thegreattech.github.io/test.html at main · thegreattech/thegreattech.github.io · 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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Wake Up for Palestine</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* Custom styles */
    .hero {
      background-image: url('https://example.com/gaza-hero.jpg');
      background-size: cover;
      background-position: center;
      height: 100vh;
      color: white;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .stats {
      background-color: #f8f9fa;
      padding: 60px 0;
    }
    .gallery img {
      width: 100%;
      height: auto;
    }
    .testimonies {
      background-color: #e9ecef;
      padding: 60px 0;
    }
    .cta {
      background-color: #343a40;
      color: white;
      padding: 60px 0;
      text-align: center;
    }
    .footer {
      background-color: #212529;
      color: white;
      padding: 20px 0;
      text-align: center;
    }

    #palestine-topbanner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #000;
  text-align: center;
  padding: 10px 0;
  z-index: 9999;
  animation: fadeOut 1s ease-in-out 5s forwards;
  color: white;
  font-family: Arial, sans-serif;
}

#palestine-topbanner img {
  height: 30px;
}

#palestine-topbanner p {
  margin: 5px 0 0;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}


  </style>
</head>
<body>
 <div id="palestine-topbanner">
  <img src="https://github.com/maqsoodhussain/maqsoodhussain/blob/main/palestine.gif?raw=true" alt="Palestine Flag">
  <p>Free Palestine</p>
</div>


  <!-- Hero Section -->
  <section class="hero">
    <h1>Wake Up for Palestine</h1>
    <p>Over 17,400 children have been killed in Gaza. The world must act.</p>
    <a href="#cta" class="btn btn-danger btn-lg">Take Action Now</a>
  </section>

  <!-- Statistics Section -->
  <section class="stats text-center">
    <div class="container">
      <h2>Tragic Statistics</h2>
      <div class="row">
        <div class="col-md-4">
          <h3><span id="childrenKilled">0</span>+</h3>
          <p>Children Killed</p>
        </div>
        <div class="col-md-4">
          <h3><span id="childrenInjured">0</span>+</h3>
          <p>Children Injured</p>
        </div>
        <div class="col-md-4">
          <h3><span id="childrenDisplaced">0</span>+</h3>
          <p>Children Displaced</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Image Gallery -->
  <section class="gallery">
    <div class="container">
      <h2 class="text-center">Images from Gaza</h2>
      <div id="gazaCarousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
          <!-- Images will be inserted here -->
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#gazaCarousel" data-bs-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#gazaCarousel" data-bs-slide="next">
          <span class="carousel-control-next-icon"></span>
        </button>
      </div>
    </div>
  </section>

  <!-- Testimonies Section -->
  <section class="testimonies text-center">
    <div class="container">
      <h2>Voices from Gaza</h2>
      <blockquote class="blockquote">
        <p>"I watched my mother take her final breath waiting for help after an Israeli missile hit our school."</p>
        <footer class="blockquote-footer">Leila, 17, Gaza</footer>
      </blockquote>
      <blockquote class="blockquote">
        <p>"Over 4,700 amputations have been reported—850 of them involving children."</p>
        <footer class="blockquote-footer">UN Office for the Coordination of Humanitarian Affairs</footer>
      </blockquote>
    </div>
  </section>

  <!-- Call to Action -->
  <section class="cta" id="cta">
    <div class="container">
      <h2>Join the Movement</h2>
      <p>Your support can make a difference. Stand with the children of Gaza.</p>
      <a href="https://www.unicef.org/emergencies/state-palestine-crisis" class="btn btn-light btn-lg" target="_blank">Donate Now</a>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="container">
      <p>&copy; 2025 Wake Up for Palestine. All rights reserved.</p>
      <p>
        <a href="https://twitter.com/yourhandle" target="_blank">Twitter</a> |
        <a href="https://facebook.com/yourpage" target="_blank">Facebook</a> |
        <a href="https://instagram.com/yourhandle" target="_blank">Instagram</a>
      </p>
    </div>
  </footer>

  <!-- Scripts -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    // Animate counters
    $(document).ready(function() {
      $('#childrenKilled').text('17,400');
      $('#childrenInjured').text('34,000');
      $('#childrenDisplaced').text('1,000,000');

      // Load images into carousel
      const images = [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        'https://example.com/image3.jpg'
      ];

      images.forEach((img, index) => {
        $('.carousel-inner').append(`
          <div class="carousel-item ${index === 0 ? 'active' : ''}">
            <img src="${img}" class="d-block w-100" alt="Gaza Image ${index + 1}">
          </div>
        `);
      });
    });
  </script>
</body>
</html>