ACM-NITK · AadarshLN · Dec 16, 2022
diff --git a/images/1.jpeg b/images/1.jpeg
diff --git a/images/2.jpeg b/images/2.jpeg
diff --git a/images/3.jpeg b/images/3.jpeg
diff --git a/images/4.jpeg b/images/4.jpeg
diff --git a/images/5.jpeg b/images/5.jpeg
diff --git a/images/6.jpeg b/images/6.jpeg
diff --git a/images/facebook-img.png b/images/facebook-img.png
diff --git a/images/git-hub.webp b/images/git-hub.webp
diff --git a/images/header-line.png b/images/header-line.png
diff --git a/images/insta logo.webp b/images/insta logo.webp
diff --git a/images/krutagnata.jpg b/images/krutagnata.jpg
diff --git a/images/linkedin logo.png b/images/linkedin logo.png
diff --git a/images/logo.jpeg b/images/logo.jpeg
diff --git a/images/students.png b/images/students.png
diff --git a/images/twitter.png b/images/twitter.png
diff --git a/main.html b/main.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>ACM Krutagnata Website</title>
+    <link rel="shortcut icon" href="/images/krutagnata.jpg">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+    <link rel="stylesheet" href="styles.css">
+</head>
+  <body>
+
+    <nav class="navbar navbar-expand-lg bg-light">
+        <div class="container">
+            <img src="/images/logo.jpeg" class="acm-logo">
+
+           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav">
+                <li class="nav-item">
+                    <a class="nav-link active" aria-current="page" href="https://nitk.acm.org/#/">ACM Website </a>
+                  </li>  
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page" href="https://acmwnitk.hosting.acm.org/">ACM-W </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" href="https://nitk.acm.org/blog/">BLOG</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" href="https://nitk.acm.org/#/expo">Projects Expo</a>
+              </li>
+              <button onclick="darkMode()" id="dark-button" class="button">DarkMode</button>
+
+
+
+            </ul>
+          </div>
+        </div>
+
+    </nav>
+
+    <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script> -->
+
+
+
+   <p id="welcome">Welcome to Krutagnata! </p> 
+   <img src="/images/header-line.png" class="header-line">
+   <p id="intro"> ACM's Krutagnata is the social initiatives wing of ACM that aims at making a differrence in every little way.
+       It is an opportunity to make a difference to society! It is an auxillary SIG of ACM.
+   </p>
+   <br>
+   <p id="intro">Shiksha is a Krutagnata initiative wherein the members of ACM Krutagnata conduct weekly classes with the aim to teach the basics of computer science to students of the NITK Kannada Medium School.</p>
+
+   <section id="images-section">
+
+
+   <img src="images/1.jpeg"class="images-under" id="img1">
+   <img src="images/2.jpeg"class="images-under" id="img2">
+   <img src="images/3.jpeg"class="images-under" id="img3">
+   <img src="images/4.jpeg"class="images-under" id="img4">
+
+
+</section>
+<img src="images/5.jpeg"class="images-under" id="img5">
+<hr>
+<footer class="foot">
+    Find us at:<br>
+    <a href="https://www.instagram.com/acmnitk/?hl=en"><img src="/images/insta logo.webp" class="logo1"></a>
+        <a href="https://www.linkedin.com/company/acm-nitk/mycompany/"><img src="/images/linkedin logo.png" class="logo1"></a>
+    <a href="https://github.com/ACM-NITK"><img src="/images/git-hub.webp" style="height: 38px;
+        width: 38px;"></a>
+    <a href="https://www.facebook.com/nitkacm/"> <img src="/images/facebook-img.png" style="height: 33px;
+        width: 33px;"></a>
+    <a href="https://twitter.com/acmnitk?lang=en"><img src="/images/twitter.png" style="height: 33px;
+        width: 33px;" ></a>
+        <br>
+    <span id="author">Designed by Aadarsh L.N.</span>
+
+    </footer>
+    <script src="main.js"></script>
+
+
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,14 @@
+function darkMode()
+{
+    var element = document.body;
+    element.classList.toggle("dark-mode");
+
+
+}
+let inputOne=document.getElementById("first-name");
+let inputTwo=document.getElementById("last-name");
+let inputThree=document.getElementById("why");
+var submit=document.getElementById("submit");
+
+
+
diff --git a/styles.css b/styles.css
@@ -0,0 +1,112 @@
+
+
+/* .nav
+{
+    height:8rem;
+
+
+    width: 100vw;
+    margin:0px;
+
+} */
+li
+{
+    font-size: 1.5rem;
+}
+.acm-logo
+{
+    height: 20%;
+    width: 10%;
+}
+.button
+{
+    border-radius: 20px;
+    background-color: white;
+    border-width: 1px;
+}
+body{
+
+    background-color: whitesmoke;
+    /* color:black; */
+
+
+    }
+    .dark-mode
+    {
+      background-color: rgba(0, 0, 0, 0.4);
+      color: white;
+    }
+    .light-mode {
+      background-color: grey;
+      color: black;
+    }
+
+#welcome
+{
+    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    font-weight: 200;
+    color: #021e35;
+    text-align: center;
+    padding-top: 5%;
+    font-size: 60px;
+
+
+}
+.header-line
+{
+    padding-left:8%;
+
+
+}
+#intro
+{
+    font-size:30px;
+    padding-left:10%; padding-right: 10%;
+}
+.images-under
+{
+    padding-left:15rem ;
+    padding-top: 1rem;
+
+}
+
+#images-section
+{
+    display:flexbox;
+    padding-top: 50px;
+    padding-bottom: 20px;
+}
+#img1,#img2,#img3,#img4,#img5
+{
+    padding-top:3%;
+    height: 40vh;
+    width: 40vw;
+}
+#img5
+{ 
+    display: block;
+    margin-left: 20%;
+    margin-right: 40%;
+    padding-bottom: 20px;
+}
+hr{
+    opacity: 0.6;
+    border-width: 1.2px;
+    padding-left: 2px;
+  }
+.foot
+{
+    display: block;
+    text-align: center;
+    font-size: 1.5rem;
+    padding-bottom: 5%;
+
+}
+.logo1{
+    height: 30px;
+    width: 30px;
+  }
+#author
+{
+    padding-top:5px;
+}