From f6c2cfdf633dd61a7271cdb99d1e465f7f5833de Mon Sep 17 00:00:00 2001 From: Aditya Date: Thu, 18 Jan 2024 14:43:00 +0530 Subject: [PATCH] Add: Sidebar --- index.html | 71 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 71 insertions(+) diff --git a/index.html b/index.html index a39ab23..aefa329 100644 --- a/index.html +++ b/index.html @@ -71,12 +71,72 @@ .card:hover img { transform: scale(1.1); } + + #toggelBtn{ + display: none; + cursor: pointer; + } + + + .Sidebar { + display: flex; + flex-direction: column; + position: fixed; + top: 0; + right: -290px; + width: 250px; + height: 100%; + background-color: #afffa5; + padding: 20px; + transition: right 0.3s ease-in-out; + } + + .CloseButton { + cursor: pointer; + position: absolute; + top: 35px; + right: 30px; + color: #000; + font-size: 20px; + } + + @media (width < 600px){ + #toggelBtn{ + display: inline; + text-align: center; + } + + #sidebar{ + display: inline; + } + .Header{ + display: flex; + align-items: center; + justify-content: space-between; + } + h1{ + margin: 0; + padding: 0; + } + + .Sidebar { + right: -300px; /* Adjusted for better responsiveness */ + } + } + + +
@@ -140,6 +200,17 @@
Memory Card Game

+ +