Info/index.html at main · AnantreX/Info · 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
<!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="Anantrex Community - A platform for enthusiasts and professionals to connect, collaborate and innovate together">
  <meta name="keywords" content="community, forum, events, technology, innovation, collaboration">
  <title>Anantrex Community | Connect, Collaborate, Innovate</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <link rel="preconnect" href="https://cdnjs.cloudflare.com">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
  <header>
    <div class="container">
      <div class="logo-container">
        <img src="logo.png" alt="Anantrex Logo" class="logo" width="120" height="60">
        <h1>Anantrex Community</h1>
      </div>
      <nav aria-label="Main navigation">
        <ul>
          <li><a href="#home"><i class="fas fa-home" aria-hidden="true"></i> Home</a></li>
          <li><a href="#about"><i class="fas fa-info-circle" aria-hidden="true"></i> About</a></li>
          <li><a href="#forum"><i class="fas fa-comments" aria-hidden="true"></i> Forum</a></li>
          <li><a href="#events"><i class="fas fa-calendar" aria-hidden="true"></i> Events</a></li>
          <li><a href="#contact"><i class="fas fa-envelope" aria-hidden="true"></i> Contact</a></li>
        </ul>
      </nav>
      <button class="mobile-menu-toggle" aria-label="Toggle menu">
        <i class="fas fa-bars"></i>
      </button>
    </div>
  </header>

  <main class="container">
    <section id="home" class="hero">
      <div class="hero-content">
        <h2>Welcome to the Anantrex Community</h2>
        <p>Join us to share ideas, collaborate on projects, and grow together.</p>
        <a href="#join" class="btn">Join Now</a>
      </div>
    </section>

    <section id="about" class="about-section">
      <h2>About Us</h2>
      <div class="about-content">
        <div class="about-text">
          <p>The Anantrex Community is a platform for enthusiasts and professionals to connect and innovate. We focus on creating a collaborative environment where members can:</p>
          <ul>
            <li>Share knowledge and experiences</li>
            <li>Collaborate on cutting-edge projects</li>
            <li>Network with like-minded individuals</li>
            <li>Participate in workshops and events</li>
          </ul>
        </div>
        <div class="about-image">
          <img src="community.jpg" alt="People collaborating at an Anantrex Community event" width="400" height="300">
        </div>
      </div>
    </section>

    <section id="forum" class="forum-section">
      <h2>Community Forum</h2>
      <div class="forum-categories">
        <article class="category">
          <h3>Technology Discussions</h3>
          <p>Explore the latest in tech innovations and trends.</p>
          <a href="#" class="btn-small">Join Discussion</a>
        </article>
        <article class="category">
          <h3>Project Collaboration</h3>
          <p>Find partners for your next big idea.</p>
          <a href="#" class="btn-small">Browse Projects</a>
        </article>
        <article class="category">
          <h3>Q&A</h3>
          <p>Get help from community experts.</p>
          <a href="#" class="btn-small">Ask a Question</a>
        </article>
      </div>
    </section>

    <section id="events" class="events-section">
      <h2>Upcoming Events</h2>
      <div class="events-grid">
        <article class="event-card">
          <time datetime="2023-06-15" class="event-date">June 15, 2023</time>
          <h3>Summer Tech Meetup</h3>
          <p>Join us for networking and tech discussions in the park.</p>
          <a href="#" class="btn-small">Details</a>
        </article>
        <article class="event-card">
          <time datetime="2023-07-08" class="event-date">July 8, 2023</time>
          <h3>Web Development Workshop</h3>
          <p>Learn modern web development techniques and frameworks.</p>
          <a href="#" class="btn-small">Register</a>
        </article>
      </div>
    </section>

    <section id="contact" class="contact-section">
      <h2>Contact Us</h2>
      <div class="contact-container">
        <form class="contact-form" action="/submit-contact" method="post">
          <div class="form-group">
            <label for="name">Name</label>
            <input type="text" id="name" name="name" autocomplete="name" required>
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" name="email" autocomplete="email" required>
          </div>
          <div class="form-group">
            <label for="message">Message</label>
            <textarea id="message" name="message" rows="5" required></textarea>
          </div>
          <button type="submit" class="btn">Send Message</button>
        </form>
        <div class="contact-info">
          <h3>Get in Touch</h3>
          <address>
            <p><i class="fas fa-map-marker-alt" aria-hidden="true"></i> 123 Community St, Tech Valley</p>
            <p><i class="fas fa-phone" aria-hidden="true"></i> <a href="tel:+15551234567">(555) 123-4567</a></p>
            <p><i class="fas fa-envelope" aria-hidden="true"></i> <a href="mailto:info@anantrex.com">info@anantrex.com</a></p>
          </address>
          <div class="social-links">
            <a href="#" aria-label="Facebook" class="social-icon"><i class="fab fa-facebook"></i></a>
            <a href="#" aria-label="Twitter" class="social-icon"><i class="fab fa-twitter"></i></a>
            <a href="#" aria-label="LinkedIn" class="social-icon"><i class="fab fa-linkedin"></i></a>
            <a href="#" aria-label="Instagram" class="social-icon"><i class="fab fa-instagram"></i></a>
          </div>
        </div>
      </div>
    </section>
  </main>

  <footer>
    <div class="container">
      <div class="footer-content">
        <div class="footer-about">
          <h3>Anantrex Community</h3>
          <p>Bringing enthusiasts together since 2020</p>
        </div>
        <nav class="footer-links" aria-label="Footer navigation">
          <h3>Quick Links</h3>
          <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#forum">Forum</a></li>
            <li><a href="#events">Events</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </nav>
        <div class="footer-newsletter">
          <h3>Newsletter</h3>
          <p>Stay updated with our latest news</p>
          <form class="newsletter-form" action="/subscribe" method="post">
            <label for="newsletter-email" class="visually-hidden">Email address</label>
            <input type="email" id="newsletter-email" name="email" placeholder="Your email address" required>
            <button type="submit">Subscribe</button>
          </form>
        </div>
      </div>
      <div class="footer-bottom">
        <p>&copy; 2023 Anantrex Community. All rights reserved.</p>
      </div>
    </div>
  </footer>

  <script src="script.js"></script>
</body>
</html>