Untitled
unknown
plain_text
6 months ago
2.1 kB
2
Indexable
* { margin: 0; padding: 0; font-family: "Poppins", sans-serif; } .main_box { background-image: url(); height: 100vh; background-size: cover; } .btn_one i { position: absolute; left: 16px; cursor: pointer; color: #000000; font-size: 30px; font-weight: 700; line-height: 60px; transition: all 0.3s linear; } .sidebar_menu { position: fixed; left: -300px; width: 300px; height: 100vh; background-color: rgba(255, 255, 255, 0.1); box-shadow: 0 0 6px rgba(255, 255, 255, 0.5); transition: all 0.3s linear; } .sidebar_menu .logo { position: absolute; width: 100%; line-height: 60px; box-shadow: 0 2px 4px rgba(255, 255, 255, 0.5); height: 60px; } .sidebar_menu .logo a { position: absolute; left: 50px; color: #000000; text-decoration: none; font-size: 20px; font-weight: 500; } .sidebar_menu .btn_two i { color: grey; font-size: 25px; line-height: 60px; position: absolute; left: 275px; opacity: 0; cursor: pointer; transition: all 0.3s linear; right: 20px; /* Adjusted position for right side */ } .sidebar_menu .menu { position: absolute; width: 100%; top: 80px; } .sidebar_menu .menu li { margin-top: 6px; padding: 14px 20px; } .sidebar_menu .menu i,a { color: #000000; text-decoration: none; font-size: 20px; } .sidebar_menu .menu i { padding-right: 8px; } .sidebar_menu .social_media { position: absolute; left: 25%; bottom: 25px; } .sidebar_menu .social_media i{ color: black; opacity: 0.5; padding: 0.5px; } #check { display: none; } .sidebar_menu .menu li:hover { box-shadow: 0 0 4px rgba(255, 255, 255, 0.5); } .btn_one i:hover { font-size: 40px; } .btn_two i:hover { font-size: 30px; } .sidebar_menu .social_media i:hover { opacity: 1; transform: scale(1.1); } #check:checked ~ .sidebar_menu { left: 0; } #check:checked ~ .btn_one i { opacity: 0; } #check:checked ~ .sidebar_menu .btn_two i { opacity: 1; } update with thiss css
Editor is loading...
Leave a Comment