done

index.html

@@ -74,23 +74,137 @@
  }
 
 
-
- /* Theme Change Button Style */
+ .nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20px;
+ }
+
+ .action {
+ position: absolute;
+ right: 600px; 
+ top: 15px; 
+ }
+
+ .action .profile {
+ position: relative;
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ overflow: hidden;
+ cursor: pointer;
+ }
+
+ .action .profile img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ .action .menu {
+ position: absolute;
+ top: 120px;
+ right: -10px;
+ padding: 10px 20px;
+ background: #fff;
+ width: 200px;
+ box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
+ border-radius: 15px;
+ transition: 0.5s;
+ visibility: hidden;
+ opacity: 0;
+ }
+
+ .action .menu.active {
+ top: 80px;
+ visibility: visible;
+ opacity: 1;
+ }
+
+ .action .menu::before {
+ content: "";
+ position: absolute;
+ top: -5px;
+ right: 28px;
+ width: 20px;
+ height: 20px;
+ background: #fff;
+ transform: rotate(45deg);
+ }
+
+ .action .menu h3 {
+ width: 100%;
+ text-align: center;
+ font-size: 18px;
+ padding: 20px 0;
+ font-weight: 500;
+ color: #555;
+ line-height: 1.5em;
+ }
+
+ .action .menu h3 span {
+ font-size: 14px;
+ color: #cecece;
+ font-weight: 300;
+ }
+
+ .action .menu ul li {
+ list-style: none;
+ padding: 16px 0;
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
+ display: flex;
+ align-items: center;
+ }
+
+ .action .menu ul li img {
+ max-width: 20px;
+ margin-right: 10px;
+ opacity: 0.5;
+ transition: 0.5s;
+ }
+
+ .action .menu ul li:hover img {
+ opacity: 1;
+ }
+
+ .action .menu ul li a {
+ display: inline-flex;
+ text-align: center;
+ padding-left: 5%;
+ font-weight: 300;
+ font-size: 19px;
+ text-decoration: none;
+ color: #555;
+ font-weight: 500;
+ transition: 0.5s;
+ }
+
+ .action .menu ul li:hover a {
+ color: #ff5d94;
+ font-size: 21px;
+ }
+
+ /* Position the toggle button to the right */
+ .switch-container {
+ position: absolute;
+ right: 100px; /* Adjust this value to move the button more to the right */
+ top: 15px; /* Adjust this value to move the button vertically */
+ }
+
+ /* For responsiveness */
  @media (max-width: 990px) {
  .switch-container {
- margin-top: 3.2rem;
- margin-right: -0.5rem;
+ right: 90px; /* Adjust this value for smaller screens */
  }
  }
+
  @media (max-width: 575px) {
  .switch-container {
- margin-top: 2.4rem;
- margin-right: -0.5rem;
- }
- /* Navbar Toggle Button placed in center */
- .nav-toggle-btn{
- margin-top: -2rem;
- margin-left: 2.2rem;
+ right: 20px; /* Adjust this value for smaller screens */
  }
  }