forked from jaiyankargupta/OCD-Website
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
186 lines (161 loc) · 7.52 KB
/
index.html
File metadata and controls
186 lines (161 loc) · 7.52 KB
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
186
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OCD Website</title>
<title>OCD Society</title>
<link rel="icon" type="image/x-icon" href="ocdlogo.png">
<!-- Link the CSS file -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<body class="light-mode">
<!-- dark mode toggle button -->
<!-- Pop-up Section Start -->
<div id="popup-banner" class="popup-banner">
<span id="close-btn" class="close-btn" ">×</span>
<div class="popup-content" style="align-items:center;text-align:center ;">
<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">
<div class="left">
<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>
<div class="emptydiv"></div>
<div class="right">
<input type="text" placeholder="Search" class="search-bar">
<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 id="dark-btn-holder" align="right">
<button id="dark-mode-toggle" class="button" >Dark Mode</button>
</div>
</div>
</div>
</header>
<!-- dark mode toggle button -->
</header>
<!-- 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 (eg.-bharati121@gmail.com)" 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="footer-bottom">
<div class="suggestion"><a href="./suggestion.html">Help Us To Improve</a></div>
<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>