Merge pull request #378 from Shreyaa173/main

added hover effect to containers
piyushg-07 · Jun 8, 2024 · 062beea · 062beea
2 parents 32e2b2c + ad00387
commit 062beea
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 3 deletions.
diff --git a/css/navbar.css b/css/navbar.css
@@ -143,6 +143,7 @@ body{
     padding: 1.2rem;
 }
 
+
 /* Sec-2 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 .navs2 {
     /* border: 1px solid black; */
@@ -153,6 +154,7 @@ body{
     margin-right: 1vw;
 }
 
+
 .navs2>img {
     cursor: pointer;
     width: 2vw;
@@ -180,6 +182,7 @@ body{
     cursor: pointer;
 }
 
+
 .navbtn2 {
     cursor: pointer;
     height: 2vw;
@@ -208,12 +211,31 @@ body{
     color: white;
 }
 .txtColor1{
-    color: var(--txtColor1);
+    color: white;
+}
+
+.txtColor:hover{
+    border: 1px solid #208FF4;
+    background-color: transparent;
+    color: #2a95f6;
+}
+
+.txtColor1:hover{
+    border: 1px solid #208FF4;
+    background-color: transparent;
+    color: #2a95f6;
 }
 .darktheme .txtColor1{
     color: rgba(0, 0, 0, 0.7);
 }
 
+.navs2 #themeImg:hover{
+    transform: scale(1.2);
+}
+
+
+
+
 .overlay {
   display: none;
   position: fixed;
@@ -353,3 +375,4 @@ body{
     color:rgb(211, 211, 211);
 }
 
+
diff --git a/css/sec2.css b/css/sec2.css
@@ -31,6 +31,10 @@
     color: #fff;
     background-color: #ff765d;
 }
+
+.sec2 img:hover{
+    transform: scale(1.1);
+}
 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 .sec2content{
     /* border: 1px solid black; */

diff --git a/css/sec3.css b/css/sec3.css
@@ -23,6 +23,10 @@
     justify-content: center;
 
 }
+
+.flex img:hover{
+    transform: scale(1.1);
+}
 .box1{
     /* border: 1px solid green; */
     padding-bottom: 2rem;

diff --git a/index.html b/index.html
@@ -43,10 +43,10 @@
     <div class="navs2">
       <!-- <img src="img/final logo 1.png" alt="" /> -->
       <img src="assests/moon.png" alt="image" id="themeImg">
-      <button onclick="click" id="loginButton" class="button_nav txtColor1" style="border: 1px solid #f6f8f9; background-color:#208FF4 ; color: white;">Log
+      <button onclick="click" id="loginButton" class="button_nav txtColor hello" >Log
         In</button>
       <button id="signup" class="button_nav txtColor">Sign Up</button>
-      <button onclick="click" id="Calender" class="button_nav txtColor1" style="border: 1px solid #f6f8f9; background-color:#208FF4 ; color: white;">Calendar</button>
+      <button onclick="click" id="Calender" class="button_nav txtColor1 hello">Calendar</button>
     </div>
   </div>
 <!--Calender-->