-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
60 lines (60 loc) · 3.23 KB
/
about.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
<title>About Me</title>
</head>
<body>
<nav class="container-fluid">
<ul>
<li><strong>CyberSafe Campaign</strong></li>
</ul>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#contact" role="button">Contact</a></li>
</ul>
</nav>
<main class="container">
<div class="grid">
<section id="about">
<hgroup>
<h2>About Us</h2>
<h3>Get to Know Our Team</h3>
</hgroup>
<p>We are a group of passionate individuals dedicated to promoting cyber security awareness and online safety. With years of experience in the field, we aim to provide practical tips and insights to help individuals protect themselves from cyber threats.</p>
<figure>
<img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8dGVhbXxlbnwwfHwwfHx8MA%3D%3D" alt="Cyber Security" />
<figcaption><a href="https://unsplash.com/photos/random" target="_blank">Photo by Unsplash</a></figcaption>
</figure>
<h3>Our Mission</h3>
<p>Our mission is to educate individuals about the risks and challenges of the digital world and empower them with the knowledge and skills to navigate it safely. Through this campaign, we hope to make a positive impact on the online community.</p>
<h3>Contact Us</h3>
<p>If you have any questions or would like to collaborate, feel free to reach out to us using the contact form below. We would be happy to connect with you!</p>
</section>
</div>
</main>
<section id="contact" aria-label="Contact Us">
<div class="container">
<article>
<hgroup>
<h2>Contact Us</h2>
<h3>Get in Touch</h3>
</hgroup>
<form class="grid">
<input type="text" id="firstname" name="firstname" placeholder="Your Name" aria-label="Name" required />
<input type="email" id="email" name="email" placeholder="Your Email" aria-label="Email" required />
<button type="submit" onclick="event.preventDefault()">Send Message</button>
</form>
</article>
</div>
</section>
<footer class="container">
<small>
<a href="#">Privacy Policy</a> • <a href="#">Terms of Use</a>
</small>
</footer>
</body>
</html>