osdc · TanyaSingh103 · Jan 8, 2024 · May 11, 2024
diff --git a/README.MD b/README.MD
@@ -1 +1,30 @@
-# Revamped OSDC website
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
diff --git a/index.html b/index.html
@@ -1,13 +1,99 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/assets/osdc logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>OSDC - open source developers community</title>
+    <title>OSDC-open source developers community</title>
+    <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <header>
+      <div class="header">
+        <div class="logo">
+          <img src="./images/osdc.png" alt="osdc logo" />
+        </div>
+        <div class="navbar">
+          <a href="#about_section"><li>ABOUT</li></a>
+          <li></li>
+          <a href="#contact_section"><li>CONTACT</li></a>
+        </div>
+      </div>
+    </header>
+
+    <section class="logosection">
+      <div class="osdclogo">
+        <img src="./images/logo.png" alt="OSDC DESIGN" />
+        <div class="society">OPEN SOURCE DEVELOPERS COMMUNITY</div>
+        <div class="joindiscord">
+          <div class="invitition">Join our Discord Server</div>
+          <div class="button">
+            <a target="_blank" href="https://discord.com/invite/Yaq3eNBrwW"><div class="discordbutton">JODC Discord</div></a>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section id="about_section">
+      <div class="about">
+        <br><br>
+        <div class="div1">About OSDC</div>
+        <div class="div2">
+          We are an Open Source Community based in and around Jaypee Institute
+          of Information Technology, Noida, India. A community of web
+          developers, android freaks, machine learning enthusiasts, hackers,
+          designers, game developers and most significantly Explorers. We
+          welcome those who believe in the open source philosophy and are
+          willing to sacrifice their naps in order to change the world.
+        </div>
+        <div class="div3">
+          We also organize various workshops, talks and hackathons in an effort
+          towards encouraging more people to lean into the open source world! We
+          love having late night conversations on tech and building new things.
+          If you love the same just hop in, we are looking forward for your
+          participation.
+        </div>
+      </div>
+    </section>
+
+    <section id="contact_section" class="findus">
+        <div class="socials">
+            <p>Find us on</p>
+            <div class="socialicons">
+                <a target="_blank" href="https://discord.com/invite/Yaq3eNBrwW"><img src="./images/discord_5968759 1.png"></img></a>
+                <a target="_blank" href="https://github.com/osdc"><img src="./images/github_3488425 1.png"></img></a>
+                <a target="_blank" href="https://t.me/jiitosdc"><img src="./images/telegram_3536705 1.png"></img></a>
+                <a target="_blank" href="https://twitter.com/osdcjiit"><img src="./images/twitter_5968830 1.png"></img></a>
+                <a target="_blank" href="https://www.facebook.com/groups/jiitlug/"><img src="./images/facebook_1051309 1.png"></img></a>
+            </div>
+        </div>
+    </section>
+
+    <section>
+        <div class="subscribe">
+            <div class="subscribe-message">Subscribe to our Newsletter</div>
+        <div class="emailinput">
+            <div class="bg">
+                <input class="email" type="email" placeholder="Drop your mail here...">
+                <label>Subscribe</label>
+            </div>
+        </div>
+        </div>
+    </section>
+
+    <div class="left-blob">
+        <img src="./images/left blob.png" alt="Left Blob Image">
+    </div>
+    <div class="right-upper-blob">
+        <img src="./images/right blob upper.png" alt="Right upper Blob Image">
+    </div>
+    <div class="right-lower-blob">
+        <img src="./images/right blob lower.png" alt="Right lower Blob Image">
+    </div>
+    <div class="bottom-left-blob">
+        <img src="./images/bottom left blob.png" alt="Bottom left Blob Image">
+    </div>
+    <div class="bottom-right-blob">
+        <img src="./images/bottom right blob.png" alt="Bottom right Blob Image">
+    </div>
   </body>
 </html>
diff --git a/style.css b/style.css
@@ -50,6 +50,10 @@
     font-size: 1.2rem;
 }
 
+a {
+    text-decoration: none;
+  }
+
 /* logosection */
 
 .osdclogo{