From ae27a6935a23870f5427a0099277745a536a6212 Mon Sep 17 00:00:00 2001 From: Anusha Date: Tue, 6 Aug 2024 15:57:49 +0530 Subject: [PATCH] done --- index.html | 136 ++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 125 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index e2f275755..d759fc90c 100644 --- a/index.html +++ b/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 */ } }