1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6<title data-id="th-modified">Stand Together â Bullying stops with us</title> 7<link rel="preconnect" href="https://fonts.googleapis.com"> 8<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> 9<style> 10 :root{ 11 --navy:#14213D; 12 --navy-deep:#0D162B; 13 --paper:#F5F1E8; 14 --coral:#FF6B4D; 15 --coral-dark:#C8451F; 16 --gold:#FFB627; 17 --sage:#6FA88A; 18 --sage-dark:#3E7359; 19 --ink:#1C2333; 20 } 21 *{box-sizing:border-box;margin:0;padding:0;} 22 html{scroll-behavior:smooth;} 23 body{ 24 font-family:'Inter',sans-serif; 25 background:var(--paper); 26 color:var(--ink); 27 line-height:1.6; 28 } 29 h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;font-weight:700;} 30 a{color:inherit;} 31 img{max-width:100%;display:block;} 32 33 /* NAV */ 34 nav{ 35 position:sticky;top:0;z-index:50; 36 background:var(--navy); 37 display:flex;align-items:center;justify-content:space-between; 38 padding:18px 6vw; 39 } 40 .logo{ 41 font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px; 42 color:var(--paper);letter-spacing:-0.02em; 43 display:flex;align-items:center;gap:8px; 44 } 45 .logo .dot{width:10px;height:10px;background:var(--coral);border-radius:50%;display:inline-block;} 46 .nav-links{display:flex;gap:28px;} 47 .nav-links a{ 48 color:var(--paper);opacity:0.8;text-decoration:none;font-size:14px;font-weight:500; 49 transition:opacity 0.2s; 50 } 51 .nav-links a:hover{opacity:1;} 52 .nav-cta{ 53 background:var(--coral);color:var(--navy-deep);padding:9px 18px;border-radius:100px; 54 font-weight:600;font-size:14px;text-decoration:none; 55 } 56 @media (max-width:720px){.nav-links{display:none;}} 57 58 /* HERO */ 59 .hero{ 60 background:var(--navy); 61 color:var(--paper); 62 position:relative; 63 overflow:hidden; 64 padding:80px 6vw 60px; 65 display:grid; 66 grid-template-columns:1.1fr 0.9fr; 67 gap:40px; 68 align-items:center; 69 } 70 @media (max-width:860px){.hero{grid-template-columns:1fr;padding-top:50px;}} 71 .hero-eyebrow{ 72 font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase; 73 color:var(--gold);margin-bottom:18px; 74 } 75 .hero h1{ 76 font-size:clamp(36px,5.2vw,60px); 77 line-height:1.05; 78 letter-spacing:-0.02em; 79 margin-bottom:22px; 80 } 81 .hero h1 em{ 82 font-style:normal;color:var(--coral); 83 } 84 .hero p{ 85 font-size:17px;color:rgba(245,241,232,0.78);max-width:480px;margin-bottom:32px; 86 } 87 .hero-actions{display:flex;gap:14px;flex-wrap:wrap;} 88 .btn-primary{ 89 background:var(--coral);color:var(--navy-deep);padding:14px 26px;border-radius:100px; 90 font-weight:600;font-size:15px;text-decoration:none;border:none;cursor:pointer; 91 transition:transform 0.15s; 92 } 93 .btn-primary:hover{transform:translateY(-2px);} 94 .btn-secondary{ 95 background:transparent;color:var(--paper);padding:14px 26px;border-radius:100px; 96 font-weight:600;font-size:15px;text-decoration:none;border:1.5px solid rgba(245,241,232,0.35); 97 } 98 99 /* MOSAIC (signature element) */ 100 .mosaic-wrap{position:relative;aspect-ratio:1/1;max-width:420px;justify-self:center;} 101 .mosaic{ 102 display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr); 103 gap:4px;width:100%;height:100%; 104 } 105 .mosaic div{border-radius:3px;background:rgba(245,241,232,0.06);} 106 .mosaic div.on{animation:pop 0.5s ease forwards;} 107 @keyframes pop{from{transform:scale(0.4);opacity:0;}to{transform:scale(1);opacity:1;}} 108 109 /* SECTION SHARED */ 110 section{padding:88px 6vw;} 111 .section-head{max-width:640px;margin:0 auto 48px;text-align:left;} 112 .eyebrow{ 113 font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase; 114 color:var(--coral-dark);margin-bottom:12px; 115 } 116 .section-head h2{font-size:clamp(28px,3.4vw,38px);letter-spacing:-0.01em;margin-bottom:14px;} 117 .section-head p{color:#5A5749;font-size:16px;max-width:560px;} 118 119 /* TYPES GRID */ 120 .types-grid{ 121 display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px; 122 } 123 .type-card{ 124 background:#fff;border:1px solid #E4DFD2;border-radius:16px;padding:26px; 125 } 126 .type-card .tag{ 127 display:inline-block;font-size:12px;font-weight:600;padding:5px 12px;border-radius:100px; 128 margin-bottom:16px; 129 } 130 .type-card h3{font-size:18px;margin-bottom:8px;} 131 .type-card p{font-size:14px;color:#5A5749;} 132 .tag.verbal{background:#FDE9E3;color:var(--coral-dark);} 133 .tag.social{background:#FFF3D9;color:#946200;} 134 .tag.physical{background:#E4EEE8;color:var(--sage-dark);} 135 .tag.cyber{background:#E4E9F5;color:#2E4A8F;} 136 137 /* STEPS */ 138 .steps-section{background:var(--navy);color:var(--paper);} 139 .steps-section .section-head p{color:rgba(245,241,232,0.7);} 140 .steps-section .eyebrow{color:var(--gold);} 141 .steps-list{display:grid;gap:0;border-top:1px solid rgba(245,241,232,0.15);}
142 .step-row{ 143 display:grid;grid-template-columns:56px 1fr;gap:20px;padding:26px 0; 144 border-bottom:1px solid rgba(245,241,232,0.15); 145 } 146 .step-num{ 147 font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;color:var(--coral); 148 } 149 .step-row h3{font-size:17px;margin-bottom:6px;} 150 .step-row p{font-size:14px;color:rgba(245,241,232,0.7);max-width:600px;} 151 152 /* BYSTANDER */ 153 .bystander-grid{ 154 display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px; 155 } 156 .bystander-card{ 157 background:var(--paper);border:1px solid #E4DFD2;border-radius:14px;padding:22px; 158 text-align:left; 159 } 160 .bystander-card .icon{ 161 width:38px;height:38px;border-radius:10px;background:var(--sage);color:#fff; 162 display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk';font-weight:700; 163 margin-bottom:14px;font-size:16px; 164 } 165 .bystander-card h3{font-size:15px;margin-bottom:6px;} 166 .bystander-card p{font-size:13.5px;color:#5A5749;} 167 168 /* PLEDGE WALL */ 169 .pledge-section{background:#EFEADC;} 170 .pledge-form{ 171 display:flex;gap:10px;max-width:560px;margin-bottom:36px;flex-wrap:wrap; 172 } 173 .pledge-form input{ 174 flex:1;
174min-width:200px;padding:14px 18px;border-radius:100px;border:1.5px solid #D8D2C0; 175 font-size:15px;font-family:'Inter',sans-serif;background:#fff; 176 } 177 .pledge-form input:focus{outline:2px solid var(--coral);outline-offset:2px;} 178 .pledge-wall{ 179 display:flex;flex-wrap:wrap;gap:12px;min-height:60px; 180 } 181 .pledge-tile{ 182 background:#fff;padding:12px 18px;border-radius:10px;font-size:14px;font-weight:500; 183 box-shadow:0 1px 2px rgba(0,0,0,0.06); 184 animation:tilein 0.35s ease forwards; 185 border-bottom:3px solid var(--coral); 186 } 187 .pledge-tile.c1{border-bottom-color:var(--coral);} 188 .pledge-tile.c2{border-bottom-color:var(--gold);} 189 .pledge-tile.c3{border-bottom-color:var(--sage);} 190 @keyframes tilein{from{opacity:0;transform:translateY(10px) scale(0.95);}to{opacity:1;transform:translateY(0) scale(1);}} 191 .pledge-count{font-size:14px;color:#5A5749;margin-top:24px;} 192 193 /* FOOTER */ 194 footer{ 195 background:var(--navy-deep);color:rgba(245,241,232,0.7); 196 padding:56px 6vw 32px; 197 } 198 .footer-grid{ 199 display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;margin-bottom:40px; 200 } 201 @media (max-width:720px){.footer-grid{grid-template-columns:1fr;}} 202 footer h4{color:var(--paper);font-size:14px;margin-bottom:14px;font-family:'Space Grotesk';} 203 footer ul{list-style:none;} 204 footer li{margin-bottom:9px;font-size:14px;} 205 footer a{text-decoration:none;} 206 footer a:hover{color:var(--paper);} 207 .footer-bottom{ 208 border-top:1px solid rgba(245,241,232,0.12);padding-top:24px;font-size:12.5px; 209 display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px; 210 } 211</style> 212<meta property="og:title" content="Stand Together â Bullying stops with us" data-id="th-modified" ><meta property="og:image" content="https://tiiny.host/assets/logo-purple-bg.png" data-id="th-modified" ><meta property="og:image:width" content="1501" data-id="th-modified" ><meta property="og:image:height" content="1501" data-id="th-modified" ><meta property="og:image:type" content="image/png" data-id="th-modified" ><meta property="og:url" content="https://standtogether.tiiny.site/" data-id="th-modified" ><meta property="og:type" content="website" data-id="th-modified" >
212<script defer data-domain="standtogether.tiiny.site" src="https://analytics.tiiny.net/js/plausible.js"></script>
212<script type="text/javascript" src="https://tiiny.host/ad-script.js"></script>
212</head> 213<body> 214 215<nav> 216 <div class="logo"><span class="dot"></span>Stand Together</div> 217 <div class="nav-links"> 218 <a href="#recognize">Recognize it</a> 219 <a href="#help">Get help</a> 220 <a href="#act">Take action</a> 221 <a href="#pledge">Pledge wall</a> 222 </div> 223 <a href="#pledge" class="nav-cta">Add your voice</a> 224</nav> 225 226<section class="hero"> 227 <div> 228 <div class="hero-eyebrow">A campaign for students, parents, and schools</div> 229 <h1>One voice is a whisper.<br>Together, we're a <em>wall</em>.</h1> 230 <p>Bullying thrives in silence. This is a place to learn what it looks like, know what to do if it's happening to you, and stand up for someone else â because it stops fastest when it stops together.</p> 231 <div class="hero-actions"> 232 <a href="#help" class="btn-primary">If it's happening to you â</a> 233 <a href="#pledge" class="btn-secondary">Join the pledge wall</a> 234 </div> 235 </div> 236 <div class="mosaic-wrap"> 237 <div class="mosaic" id="mosaic"></div> 238 </div> 239</section> 240 241<section id="recognize"> 242 <div class="section-head"> 243 <div class="eyebrow">Recognize it</div> 244 <h2>Bullying isn't always loud</h2> 245 <p>
245It can be a shove in the hallway or a joke that never stops landing. Knowing the forms it takes is the first step to naming it and stopping it.</p> 246 </div> 247 <div class="types-grid"> 248 <div class="type-card"> 249 <span class="tag verbal">Verbal</span> 250 <h3>Name-calling and threats</h3> 251 <p>Insults, mocking, or threats â said to your face or dressed up as "just joking."</p> 252 </div> 253 <div class="type-card"> 254 <span class="tag social">Social</span> 255 <h3>Exclusion and rumors</h3> 256 <p>Being left out on purpose, spreading rumors, or turning a group against one person.</p> 257 </div> 258 <div class="type-card"> 259 <span class="tag physical">Physical</span> 260 <h3>Hitting and blocking</h3> 261 <p>Hitting, pushing, taking or breaking belongings, or blocking someone's way on purpose.</p> 262 </div> 263 <div class="type-card"> 264 <span class="tag cyber">Online</span> 265 <h3>Messages and posts</h3> 266 <p>Hurtful texts, posts, or pile-ons that follow someone home and never really stop.</p> 267 </div> 268 </div> 269</section> 270 271<section id="help" class="steps-section"> 272 <div class="section-head"> 273 <div class="eyebrow">If it's happening to you</div> 274 <h2>You don't have to handle this alone</h2> 275 <p>These steps won't fix everything overnight, but they're where to start â and every one of them makes it more likely an adult can actually help.</p> 276 </div> 277 <div class="steps-list"> 278 <div class="step-row"> 279 <div class="step-num">01</div> 280 <div><h3>Tell a trusted adult</h3><p>A parent, teacher, coach, or school counselor. Saying it out loud is often the hardest part â and the most important.</p></div> 281 </div> 282 <div class="step-row"> 283 <div class="step-num">02</div> 284 <div><h3>Keep the evidence</h3><p>Screenshot messages, save posts, and note dates and places. It helps whoever's helping you understand the full pattern.</p></div> 285 </div> 286 <div class="step-row"> 287 <div class="step-num">03</div> 288 <div><h3>Don't respond in the moment</h3><p>Walk away if it's safe to. Reacting in the moment rarely helps, but reporting it afterward does.</p></div> 289 </div> 290 <div class="step-row"> 291 <div class="step-num">04</div> 292 <div><h3>Stay near people you trust</h3><p>Bullying often happens when someone's isolated. Sitting with friends or staying near staff makes it harder to target you.</p></div> 293 </div> 294 <div class="step-row"> 295 <div class="step-num">05</div> 296 <div><h3>Keep telling until someone helps</h3><p>If the first adult you tell doesn't act, tell another one. You're allowed to keep asking until it actually stops.</p></div> 297 </div> 298 </div> 299</section> 300 301<section id="act"> 302 <div class="section-head"> 303 <div class="eyebrow">If you see it happen</div> 304 <h2>Being a bystander is a choice too</h2> 305 <p>Most bullying happens in front of other people. What happens next often depends on what they do.</p> 306 </div> 307 <div class="bystander-grid"> 308 <div class="bystander-card"> 309 <div class="icon">1</div> 310 <h3>Don't laugh or share it</h3> 311 <p>An audience is often the point. Not reacting takes away a lot of the power.</p> 312 </div> 313 <div class="bystander-card"> 314 <div class="icon">2</div> 315 <h3>Check in privately</h3> 316 <p>Afterward, ask the person if they're okay. It tells them someone noticed.</p> 317 </div> 318 <div class="bystander-card"> 319 <div class="icon">3</div> 320 <h3>Include them</h3> 321 <p>Invite them to sit with you, join in, or just talk. Small inclusion matters.</p> 322 </div> 323 <div class="bystander-card"> 324 <div class="icon">4</div> 325 <h3>Report what you saw</h3> 326 <p>Tell a teacher or staff member, even if it wasn't aimed at you. It counts as evidence.</p> 327 </div> 328 </div> 329</section> 330 331<section id="pledge" class="pledge-section"> 332 <div class="section-head"> 333 <div class="eyebrow">Add your voice</div> 334 <h2>
334Build the wall</h2> 335 <p>Add your name or a short pledge â to stand up, speak out, or just be someone others can trust. Watch the wall grow with everyone who's shown up.</p> 336 </div> 337 <form class="pledge-form" id="pledgeForm"> 338 <input type="text" id="pledgeInput" placeholder="Your name or a short pledge" maxlength="200" required> 339 <button type="submit" class="btn-primary">Add to the wall</button> 340 </form> 341 <div class="pledge-wall" id="pledgeWall"></div> 342 <div class="pledge-count" id="pledgeCount">0 people have added their voice today.</div> 343</section> 344 345<footer> 346 <div class="footer-grid"> 347 <div> 348 <h4>Stand Together</h4> 349 <p style="font-size:14px;max-width:280px;">A campaign to help students, parents, and schools recognize bullying, respond to it, and stand up for one another.</p> 350 </div> 351 <div> 352 <h4>Resources</h4> 353 <ul> 354 <li><a href="#recognize">Recognize the signs</a></li> 355 <li><a href="#help">If it's happening to you</a></li> 356 <li><a href="#act">Bystander guide</a></li> 357 </ul> 358 </div> 359 <div> 360 <h4>Talk to someone</h4> 361 <ul> 362 <li>A parent or guardian</li> 363 <li>A teacher or school counselor</li> 364 <li>Your school's front office</li> 365 </ul> 366 </div> 367 </div> 368 <div class="footer-bottom"> 369 <span>Stand Together Campaign</span> 370 <span>If you or someone you know is in immediate danger, contact local emergency services.</span> 371 </div> 372</footer> 373
374<script> 375 // Mosaic animation â tiles filling in like a growing wall 376 const mosaic = document.getElementById('mosaic'); 377 const total = 81; 378 const cells = []; 379 for(let i=0;i<total;i++){ 380 const d = document.createElement('div'); 381 mosaic.appendChild(d); 382 cells.push(d); 383 } 384 const colors = ['#FF6B4D','#FFB627','#6FA88A']; 385 let order = [...Array(total).keys()]; 386 for(let i=order.length-1;i>0;i--){ 387 const j = Math.floor(Math.random()*(i+1)); 388 [order[i],order[j]]=[order[j],order[i]]; 389 } 390 order.forEach((idx,i)=>{ 391 setTimeout(()=>{ 392 cells[idx].style.background = colors[Math.floor(Math.random()*colors.length)]; 393 cells[idx].classList.add('on'); 394 }, i*25); 395 }); 396 397 // Pledge wall 398 const form = document.getElementById('pledgeForm'); 399 const input = document.getElementById('pledgeInput'); 400 const wall = document.getElementById('pledgeWall'); 401 const countEl = document.getElementById('pledgeCount'); 402 let count = 0; 403 const tileColors = ['c1','c2','c3']; 404 405 form.addEventListener('submit', function(e){ 406 e.preventDefault(); 407 const val = input.value.trim(); 408 if(!val) return; 409 const tile = document.createElement('div'); 410 tile.className = 'pledge-tile ' + tileColors[count % tileColors.length]; 411 tile.textContent = val;
412 wall.prepend(tile); 413 count++; 414 countEl.textContent = count + (count===1 ? ' person has' : ' people have') + ' added their voice today.'; 415 input.value = ''; 416 }); 417</script>
417 418 419</body> 420</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.