diff --git a/Responsive Navigation Bar /style.css b/Responsive Navigation Bar /style.css deleted file mode 100644 index 2e565d8d4..000000000 --- a/Responsive Navigation Bar /style.css +++ /dev/null @@ -1,151 +0,0 @@ -*{ - margin: 0; - padding: 0; -} - -nav{ - display: flex; - align-items: center; - height: 7vh; - justify-content: space-between; - background-color: blueviolet; - color: white; - -} - -.navbar-list{ - display: flex; - gap: 18px; -} - -.navbar-list> li{ - display: inline; - -} - -.sec{ - display: flex; - width: 100vw; - height: 100vh; - background-color: rgb(183, 217, 13); - align-items: center; - justify-content: center; - color: white; - -} - -.mobile-navbar-btn{ - - display: none; - gap: 12px; - cursor: pointer; - color: black; - cursor: pointer; - margin: 0px 45px; - - -} - -.navbar-list{ - display: flex; - gap: 18px; -} - -.navbar-list> li{ - display: inline; - font-size: 2rem; - -} - - - -.mobile-nav-icon{ - font-size: 2em; - line-height: .03125em - - - - -} - -.mobile-nav-icon[name="close-outline"]{ - display: none; -} - -@media screen and (max-width:600px) { - -.mobile-navbar-btn { - - display: flex; - justify-content: right; - position: absolute; - top: 0; - padding: 12px 12px; - - width: 100%; - gap: 12px; - background-color: rgb(211, 35, 35); - - - -} - -.mobile-navbar-btn > ion-icon { - - margin-right: 30px; - border: 2px solid black; - - - - -} - -.mobile-navbar-btn > i{ - padding: 5px; - - margin-right: 30px; - border: 2px solid black; - - - - -} - - -.logo{ - display: none; -} - - -nav{ - position: absolute; - width: 100%; - /* display: none; */ - align-items: center; - justify-content: center; - height: auto; - top: 0; - left: 0; - - -} - -.navbar-list{ - - display: none; - - flex-direction: column; -} - -.navbar-list> li{ - /* display: none; */ - - - -} - - - - - -} \ No newline at end of file diff --git a/Responsive Navigation Bar /index.html b/Responsive Navigation Bar/index.html similarity index 100% rename from Responsive Navigation Bar /index.html rename to Responsive Navigation Bar/index.html diff --git a/Responsive Navigation Bar /script.js b/Responsive Navigation Bar/script.js similarity index 100% rename from Responsive Navigation Bar /script.js rename to Responsive Navigation Bar/script.js diff --git a/Responsive Navigation Bar/style.css b/Responsive Navigation Bar/style.css new file mode 100644 index 000000000..23a94c23c --- /dev/null +++ b/Responsive Navigation Bar/style.css @@ -0,0 +1,95 @@ +* { + margin: 0; + padding: 0; +} + +nav { + display: flex; + align-items: center; + height: 7vh; + justify-content: space-between; + background-color: blueviolet; + color: white; +} + +/* Combined the duplicate .navbar-list blocks here */ +.navbar-list { + display: flex; + gap: 18px; +} + +/* Combined the duplicate .navbar-list > li blocks here */ +.navbar-list > li { + display: inline; + font-size: 2rem; +} + +.sec { + display: flex; + width: 100vw; + height: 100vh; + background-color: rgb(183, 217, 13); + align-items: center; + justify-content: center; + color: white; +} + +.mobile-navbar-btn { + display: none; + gap: 12px; + color: black; + cursor: pointer; /* Removed the duplicate cursor line here */ + margin: 0px 45px; +} + +.mobile-nav-icon { + font-size: 2em; + line-height: .03125em; +} + +.mobile-nav-icon[name="close-outline"] { + display: none; +} + +@media screen and (max-width:600px) { + .mobile-navbar-btn { + display: flex; + justify-content: right; + position: absolute; + top: 0; + padding: 12px; /* Fixed: Changed '12px 12px' to just '12px' */ + width: 100%; + gap: 12px; + background-color: rgb(211, 35, 35); + } + + .mobile-navbar-btn > ion-icon { + margin-right: 30px; + border: 2px solid black; + } + + .mobile-navbar-btn > i { + padding: 5px; + margin-right: 30px; + border: 2px solid black; + } + + .logo { + display: none; + } + + nav { + position: absolute; + width: 100%; + align-items: center; + justify-content: center; + height: auto; + top: 0; + left: 0; + } + + .navbar-list { + display: none; + flex-direction: column; + } +}