forked from GDGC-MET/Hacktoberfest2024Nashik
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
126 lines (126 loc) · 6.83 KB
/
index.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hacktoberfest 2024</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Lobster&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<header>
<h1>Hacktoberfest 2024</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#importance">Importance</a></li>
<li><a href="#qa">Q&A</a></li>
<li><a href="#prizes">Prizes</a></li>
<li><a href="#overview">Event Overview</a></li>
<li><a href="#details">Event Details</a></li>
<li><a href="#video">Watch Now</a></li>
<li><a href="#comments">Comments</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about" class="fade-in">
<h2><i class="fas fa-info-circle"></i> About Hacktoberfest</h2>
<img src="hacktoberfest-about.jpg" alt="Hacktoberfest Celebration" class="responsive about-image">
<p>Hacktoberfest is a month-long celebration of open source software, encouraging people to contribute to projects and celebrate the spirit of collaboration.</p>
<p>Join thousands of developers worldwide in creating a more open and inclusive tech community. Together, we can make a difference!</p>
</section>
<section id="importance" class="slide-in">
<h2><i class="fas fa-star"></i> Importance of Open Source Development</h2>
<div class="importance-container">
<img src="open-source-importance.jpg" alt="Open Source Development" class="responsive small-image">
<div class="importance-text">
<p>Open source development fosters innovation, enhances collaboration, and allows developers to learn from one another. It creates a community where everyone can contribute, improving the quality and security of software.</p>
<p>Open source projects drive technological advancements, empower learners, and build valuable skills in software development. They also enable transparency and trust in software, allowing anyone to inspect and modify the code.</p>
</div>
</div>
</section>
<section id="qa" class="fade-in">
<h2><i class="fas fa-question-circle"></i> Q&A</h2>
<div class="qa-item">
<h3>What is Hacktoberfest?</h3>
<p>Hacktoberfest is an annual event that encourages open source contributions throughout the month of October.</p>
</div>
<div class="qa-item">
<h3>Who can participate?</h3>
<p>Anyone can participate, regardless of their skill level. All you need is a GitHub account!</p>
</div>
<div class="qa-item">
<h3>How do I submit a pull request?</h3>
<p>You can submit a pull request to any repository that is participating in Hacktoberfest.</p>
</div>
</section>
<section id="prizes" class="slide-in">
<h2><i class="fas fa-trophy"></i> Prizes and Swag</h2>
<div class="prizes-list">
<div class="prize-item">
<img src="tshirt-icon.png" alt="T-shirt" class="prize-icon">
<p>Exclusive Hacktoberfest T-shirt</p>
</div>
<div class="prize-item">
<img src="sticker-icon.png" alt="Sticker" class="prize-icon">
<p>Limited Edition Stickers</p>
</div>
<div class="prize-item">
<img src="gadget-icon.png" alt="Gadget" class="prize-icon">
<p>Cool Tech Gadgets</p>
</div>
</div>
<p>Contribute to four pull requests and earn exclusive Hacktoberfest swag including T-shirts, stickers, and more!</p>
<p>Top contributors may also have a chance to win exciting tech gadgets and other prizes!</p>
</section>
<section id="overview" class="fade-in">
<h2><i class="fas fa-calendar-alt"></i> Event Overview</h2>
<p>Hacktoberfest runs from October 1 to October 31. Participants are encouraged to make contributions to any open source project.</p>
<p>This event not only improves the software ecosystem but also helps developers connect with each other.</p>
</section>
<section id="details" class="slide-in">
<h2><i class="fas fa-info-circle"></i> Event Details and Schedule</h2>
<ul>
<li><strong>October 1:</strong> Hacktoberfest begins! Register on the website.</li>
<li><strong>October 15:</strong> Mid-month check-in and community events.</li>
<li><strong>October 31:</strong> Last day to submit pull requests. Don't miss out!</li>
</ul>
</section>
<section id="video" class="fade-in">
<h2><i class="fas fa-video"></i> Watch Our Promo Video</h2>
<iframe src="https://www.youtube.com/embed/your_video_id"
title="Hacktoberfest Promo"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</section>
<section id="comments" class="slide-in">
<h2><i class="fas fa-comments"></i> Comments</h2>
<div class="comment-box">
<textarea placeholder="Leave your comment here..."></textarea>
<button>Submit</button>
</div>
<div class="comment-list">
<p><strong>User1:</strong> Excited for Hacktoberfest 2024!</p>
<p><strong>User2:</strong> Can't wait to contribute to more projects!</p>
</div>
</section>
<section id="contact" class="fade-in">
<h2><i class="fas fa-envelope"></i> Contact Us</h2>
<form>
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<textarea placeholder="Your Message" required></textarea>
<button type="submit">Send Message</button>
</form>
</section>
</main>
<footer>
<p>© 2024 Hacktoberfest. All rights reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>