forked from jaiyankargupta/OCD-Website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
185 lines (160 loc) · 7.42 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
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
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add languages bar</title>
<title>OCD Society</title>
<link rel="icon" type="image/x-icon" href="ocdlogo.png">
<!-- Link the CSS file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<body class="light-mode">
<!-- dark mode toggle button -->
<!-- Pop-up Section Start -->
<div id="popup-banner" class="popup-banner">
<div class="popup-content">
<span id="close-btn" class="close-btn">×</span>
<h2>Welcome to OCD Website !</h2>
<p>We are currently working on DSA, Competitive Programming, and a 30 Days Java challenge. Join us and
enhance your coding skills!</p>
</div>
</div>
<!-- Pop-up Section end -->
<!-- Header Section-->
<header>
<div class="header-content">
<input type="text" placeholder="Search" class="search-bar"><br>
<!-- Add language bar start -->
<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- add language bar ends-->
</div>
</header>
<div class="logo-div">
<img class='logo' src="ocdlogo.png">
</div>
<div class="header-text">
<a href="events.html"><h3>EVENTS</h3></a>
</div>
<div class="header-text">
<a href="about.html"><h3>ABOUT</h3></a>
</div>
<div class="header-text">
<a href="achievements.html"><h3>TEAM</h3></a>
</div>
<div class="header-text">
<h3><a href="ContactUs.html">CONTACT US</a></h3>
</div>
<div class="emptydiv"></div>
<input type="text" placeholder="Search" class="search-bar">
</div>
</header>
<!-- dark mode toggle button -->
<div align="right">
<button id="dark-mode-toggle" class="button">Dark Mode</button>
</div>
<!-- Your existing body content -->
<div class="body-content">
<h1>OCD Society NIT KKR</h1>
<div class="content-container">
<div class="heropara">
<p>The Open Code Developers (OCD) society at NIT Kurukshetra is an enthusiastic technical club that
aims to boost the coding and problem-solving abilities of its members.
OCD focuses on competitive programming, data structures and algorithms (DSA), and project building.
It offers a team-based platform for students to improve their technical know-how.
The group often holds coding contests, hackathons, and workshops.
These events spark creativity and push participants to excel.
By taking part in these activities, members hone their coding skills and get ready for
various national and international contests. OCD strives to build a lively community where
up-and-coming developers can grow, share ideas, and work on meaningful projects.
This approach helps members develop personally and advances the college's tech prowess.</p>
</div>
<div class="img-container">
<img src="4pic1.jpeg" alt="Img1">
<img src="4pic2.png" alt="Img2">
<img src="4pic3.jpg" alt="Img3">
<img src="4pic4.jpg" alt="Img4">
</div>
</div>
</div>
<div class="teamleads">
<div class="holders">POST HOLDERS</div>
<div class="wrapper">
<div class="members">
<div class="image"><img src="img/image.png" alt=""></div>
<p>Lorem ipsum</p>
<p>President</p>
</div>
<div class="members">
<div class="image"><img src="img/image.png" alt=""></div>
<p>Lorem ipsum</p>
<p>Vice President</p>
</div>
<div class="members">
<div class="image"><img src="img/image.png" alt=""></div>
<p>Lorem ipsum</p>
<p>Secretary</p>
</div>
<div class="members">
<div class="image"><img src="img/image.png" alt=""></div>
<p>Lorem ipsum</p>
<p>Joint Secretary</p>
</div>
</div>
</div>
<!-- Footer Section -->
<footer class="sticky-footer">
<div class="footer-content">
<h3>OCD Society NIT KKR</h3>
<p>Fostering innovation and collaboration among the coding enthusiasts of NIT Kurukshetra.</p>
<!-- Contact Form -->
<div class="contact-form">
<h4>Contact Us</h4>
<form action="#" method="post" id="contactForm">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" placeholder="Enter your name" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" placeholder="Email-id ([email protected])" id="email" name="email" required>
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea name="message" id="message" placeholder="Feedback box" cols="30" rows="10" required></textarea>
</div>
<div class="form-group">
<label for="countryCode">Select Country Code:</label>
<select id="countryCode" name="countryCode">
<option value="+91">India (+91)</option>
<option value="+1">USA (+1)</option>
<option value="+86">China (+86)</option>
<option value="+49">Germany (+49)</option>
<option value="+81">Japan (+81)</option>
</select><br><br>
</div>
<div class="form-group">
<label for="contact">Contact Number:</label>
<input type="tel" id="contact" name="contact" placeholder="10 digit valid number" pattern="[0-9]{10}" required>
</div>
<button class="button" id="formbtn" type="submit">Submit</button>
<p id="messageSubmit" style="display:none;">Thank You</p>
</form>
<!-- suggestion box -->
<div class="suggestion"><a href="./suggestion.html">Help Us To Improve</a></div>
<div class="footer-bottom">
<p>© 2024 OCD Society NIT KKR. All Rights Reserved.</p>
</div>
</footer>
<!-- Font Awesome CDN for social icons -->
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>