section 1 button

in dark theme section1 buttons get fixed

css/desktop_9.css

@@ -18,6 +18,7 @@
     color: white;
 
 }
+
 #themeImg{
     width: 25px;
     height: 25px;
@@ -81,6 +82,13 @@ nav {
     margin-left: 10px;
 }
 
+/* dark sec 1 */
+
+.dark-button {
+    background-color: #1A1A1A;
+    color: white;
+}
+
 .calendar_container {
     display: flex;
     align-items: center;

css/sec1.css

@@ -1,89 +1,90 @@
-:root {
-    --element-color: black;
-    --element1-color:rgba(0, 0, 0, 0.5);
-    --element2-color:rgba(0, 0, 0, 0.8);
-}
-
-
+/* :root {
+	--element-color: black;
+	--element1-color: rgba(0, 0, 0, 0.5);
+	--element2-color: rgba(0, 0, 0, 0.8);
+} */
 
 .sec1 {
-    height: 20rem;
-    margin-top: 110px;
-    width: 100%;
+	height: 20rem;
+	margin-top: 110px;
+	width: 100%;
 }
 
 .s1part1 {
-    height: 7rem;
-    width: 97%;
-    margin: 3.2rem 2%;
-    border-radius: 2rem;
-    background-color: #7D41E2;
-    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.199);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
+	height: 7rem;
+	width: 97%;
+	margin: 3.2rem 2%;
+	border-radius: 2rem;
+	background-color: #7d41e2;
+	box-shadow: 0 2px 1px rgba(0, 0, 0, 0.199);
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 
 .s1part1 span {
-    font-size: 2.7em;
-    font-weight: bold;
-    color: white;
+	font-size: 2.7em;
+	font-weight: bold;
+	color: white;
 }
 
 .search {
-    height: 3rem;
-    width: 34rem;
-    border-radius: 2rem;
-    position: relative;
-    top: -2.5rem;
-    background-color: white;
-    border: none;
-    box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.155);
-    color: rgba(0, 0, 0, 0.148);
-    left: 50%;
-    transform: translate(-50%, -50%);
+	height: 3rem;
+	width: 34rem;
+	border-radius: 2rem;
+	position: relative;
+	top: -2.5rem;
+	background-color: white;
+	border: none;
+	box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.155);
+	color: rgba(0, 0, 0, 0.148);
+	left: 50%;
+	transform: translate(-50%, -50%);
 }
 
 .search[placeholder] {
-    color: black;
-    padding-left: 1rem;
+	color: black;
+	padding-left: 1rem;
 }
 
 .s1part2 {
-    /* border: 1px solid black; */
-    height: 5vw;
-    width: 40vw;
-    position: relative;
-    left: 33vw;
-    bottom: 3vw;
-    display: flex;
-    align-items: center;
+	/* border: 1px solid black; */
+	height: 5vw;
+	width: 40vw;
+	position: relative;
+	left: 33vw;
+	bottom: 3vw;
+	display: flex;
+	align-items: center;
 }
 
 .s1part2 a:hover {
-    text-decoration: underline;
+	text-decoration: underline;
 }
-.buttons{
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    margin: -2rem 0.7rem;
-
+.buttons {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+	margin: -2rem 0.7rem;
+	/* color: white; */
 }
 .s1btn1 {
-    width:fit-content;
-    padding: .9rem;
-    margin: 0 0.7rem;
-    border: none;
-    border-radius: 1rem;
-    background-color: #ff765d;
-    color: white;
+	width: fit-content;
+	padding: 0.9rem;
+	margin: 0 0.7rem;
+	border: none;
+	border-radius: 1rem;
+	background-color: transparent;
+	/* background-color: #ff765d; */
+	/* color: white; */
+}
+.s1btn1:hover {
+	background-color: #ff765d;
 }
 
 .s1part2 a {
-    margin: 0 0.7vw;
-    text-decoration: none;
-    color: var(--element-color);
-}
+	margin: 0 0.7vw;
+	text-decoration: none;
+	color: var(--element-color);
+}

index.html

@@ -112,16 +112,16 @@
       </script>
     </div>
     <input class="search" placeholder="Search"></input>
-    <div class="buttons">
+    <div class="buttons" id="sec1">
       <button class="s1btn1" >All</button>
-      <button class="s1btn1" style="background-color: white;color:black;" id = 'Tech' onclick="buttonClick('Tech')">Technology</button>
-      <button class="s1btn1"style="background-color: white;color:black;" id = 'branding' onclick="buttonClick('branding')">Branding </button>
-        <button class="s1btn1"style="background-color: white;color:black" id = 'news' onclick="buttonClick('news')" >News</button>
-          <button class="s1btn1"style="background-color: white;color:black"  id = 'AI' onclick="buttonClick('AI')" > AI</button>
-            <button class="s1btn1"style="background-color: white;color:black" id = 'Management' onclick="buttonClick('Management')" >Management</button>
-              <button class="s1btn1"style="background-color: white;color:black" id = 'Design' onclick="buttonClick('Design')">Design</button>
+      <button class="s1btn1"  id = 'Tech' onclick="buttonClick('Tech')">Technology</button>
+      <button class="s1btn1" id = 'branding' onclick="buttonClick('branding')">Branding </button>
+        <button class="s1btn1" id = 'news' onclick="buttonClick('news')" >News</button>
+          <button class="s1btn1"  id = 'AI' onclick="buttonClick('AI')" > AI</button>
+            <button class="s1btn1" id = 'Management' onclick="buttonClick('Management')" >Management</button>
+              <button class="s1btn1" id = 'Design' onclick="buttonClick('Design')">Design</button>
     </div>
-
+    <!-- style="background-color: transparent;color:black;" -->
   </div>
   <!-- Sec-2 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
 

js/Landingpage.js

@@ -6,13 +6,13 @@ console.log("FucY")
   function buttonClick(ele) {
     NavBar= document.getElementsByClassName("s1btn1");
     console.log("Hi")
-    for(i=0; i<NavBar.length; i++)
-    {
-      NavBar[i].style.backgroundColor="white";
-      NavBar[i].style.color="black";
-    }
-    document.getElementById(ele).style.backgroundColor="#ff765d"
-    document.getElementById(ele).style.color="white";
+    // for(i=0; i<NavBar.length; i++)
+    // {
+    //   NavBar[i].style.backgroundColor="white";
+    //   NavBar[i].style.color="black";
+    // }
+    // document.getElementById(ele).style.backgroundColor="#ff765d"
+    // document.getElementById(ele).style.color="white";
     //
     var tbody = document.getElementById("tbody");
     let get = Array.from(document.getElementsByClassName('mainContainer'));