Created
December 6, 2025 04:23
-
-
Save adrunken/67ec2aac3cb3b172a2ea333eac653522 to your computer and use it in GitHub Desktop.
Untitled
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Help and support for those dealing with cyberbullying."> | |
| <title>Stand Up Against Cyberbullying</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Stand Up Against Cyberbullying</h1> | |
| </header> | |
| <main> | |
| <section id="intro"> | |
| <p>Cyberbullying is real. And it is tough. But you don’t have to go through it alone. This website is here to give you some simple advice, resources, and support if you're being bullied online.</p> | |
| <p>If you're feeling overwhelmed, it’s okay. You have options, and there is help available.</p> | |
| </section> | |
| <section id="what-to-do"> | |
| <h2>What to Do If You’re Being Cyberbullied</h2> | |
| <ul> | |
| <li><strong>Document Everything:</strong> Take screenshots or save messages. This will help if you need to report it later.</li> | |
| <li><strong>Report It:</strong> Most platforms have ways to report abuse. It’s not your fault, and reporting helps stop the bully from doing it to others.</li> | |
| <li><strong>Talk to Someone:</strong> A friend, a family member, or a teacher can help. You don’t have to carry this alone.</li> | |
| <li><strong>Block the Bully:</strong> Cut them off from your life. Don’t let them keep hurting you.</li> | |
| <li><strong>Know Your Rights:</strong> In some cases, there are laws to protect you from cyberbullying. It's worth looking into.</li> | |
| </ul> | |
| </section> | |
| <section id="resources"> | |
| <h2>Helpful Resources</h2> | |
| <p>If you’re looking for more info or immediate help, here are some places you can go:</p> | |
| <ul> | |
| <li><a href="https://www.stopbullying.gov" target="_blank">StopBullying.gov</a> – A government resource to help kids, parents, and schools prevent bullying.</li> | |
| <li><a href="https://www.cyberbullying.org" target="_blank">Cyberbullying.org</a> – Tips, resources, and legal info for dealing with cyberbullying.</li> | |
| <li><a href="https://www.suicidepreventionlifeline.org" target="_blank">National Suicide Prevention Lifeline</a> – Talk to someone if you need immediate help.</li> | |
| </ul> | |
| </section> | |
| <section id="contact"> | |
| <h2>Need Someone to Talk To?</h2> | |
| <p>If you want to share your story or ask questions, reach out. You can send us a message, and we’ll get back to you. "this is demo email doesnt actually go any where"</p> | |
| <form id="contact-form"> | |
| <label for="name">Your Name (Optional):</label> | |
| <input type="text" id="name" placeholder="Your name (optional)" required> | |
| <label for="email">Your Email:</label> | |
| <input type="email" id="email" placeholder="Your email" required> | |
| <label for="message">Your Message:</label> | |
| <textarea id="message" placeholder="How can we help?" required></textarea> | |
| <button type="submit">Send Message</button> | |
| </form> | |
| </section> | |
| </main> | |
| <footer> | |
| <p>© 2025 Stand Up Against Cyberbullying. You’re not alone.</p> | |
| </footer> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Basic Reset */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| background-color: #f4f4f9; | |
| color: #333; | |
| line-height: 1.6; | |
| padding: 20px; | |
| } | |
| header { | |
| text-align: center; | |
| margin-bottom: 40px; | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| color: #4e73df; | |
| margin-bottom: 10px; | |
| } | |
| main { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| section { | |
| margin-bottom: 40px; | |
| } | |
| h2 { | |
| font-size: 1.8rem; | |
| color: #4e73df; | |
| margin-bottom: 20px; | |
| } | |
| ul { | |
| list-style-type: none; | |
| } | |
| ul li { | |
| font-size: 1.1rem; | |
| margin-bottom: 10px; | |
| } | |
| ul li strong { | |
| color: #4e73df; | |
| } | |
| a { | |
| color: #4e73df; | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| /* Contact Form Styling */ | |
| form { | |
| background-color: #fff; | |
| padding: 20px; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| form label { | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| display: block; | |
| } | |
| form input, form textarea { | |
| width: 100%; | |
| padding: 10px; | |
| margin-bottom: 15px; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| } | |
| form button { | |
| background-color: #4e73df; | |
| color: white; | |
| border: none; | |
| padding: 12px 20px; | |
| font-size: 1.1rem; | |
| cursor: pointer; | |
| border-radius: 4px; | |
| transition: background-color 0.3s ease; | |
| } | |
| form button:hover { | |
| background-color: #375a9b; | |
| } | |
| /* Footer */ | |
| footer { | |
| text-align: center; | |
| font-size: 0.9rem; | |
| color: #888; | |
| margin-top: 40px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment