Complete Revamp and Redesigned BlissRoms Website
Co-authored-by: Ayan Mukherjee <mukherjeeayan725@gmail.com>
Signed-off-by: Ayan Mukherjee <mukherjeeayan725@gmail.com>
Signed-off-by: Jackeagle <jackeagle102@gmail.com>
diff --git a/components/navbar.css b/components/navbar.css
new file mode 100644
index 0000000..5c19692
--- /dev/null
+++ b/components/navbar.css
@@ -0,0 +1,295 @@
+.nav_element-container {
+ display: flex;
+ position: relative;
+}
+.nav_element-text {
+ font-style: normal;
+ transition: 0.3s;
+ font-weight: 500;
+ margin-left: 72px;
+}
+
+
+.button-container {
+ display: flex;
+ position: relative;
+ align-items: flex-start;
+ flex-direction: column;
+}
+.button-text {
+ color: var(--dl-color-gray-white);
+ cursor: pointer;
+ align-self: center;
+ margin-top: var(--dl-space-space-halfunit);
+ transition: 0.3s;
+ margin-left: var(--dl-space-space-halfunit);
+ padding-top: var(--dl-space-space-halfunit);
+ margin-right: var(--dl-space-space-halfunit);
+ padding-left: var(--dl-space-space-oneandhalfunits);
+ border-radius: var(--dl-radius-radius-radius8);
+ margin-bottom: var(--dl-space-space-halfunit);
+ padding-right: var(--dl-space-space-oneandhalfunits);
+ padding-bottom: var(--dl-space-space-halfunit);
+ background-color: var(--dl-color-primary-300);
+}
+.button-text:hover {
+ color: var(--dl-color-primary-300);
+ background-color: var(--dl-color-gray-white);
+}
+
+
+
+
+
+
+
+
+
+
+
+.navbar-image {
+ width: 60px;
+ height: 60px;
+}
+.navbar-container {
+ flex: 0 0 auto;
+ width: auto;
+ height: auto;
+ display: flex;
+ align-items: space-between;
+ margin-right: var(--dl-space-space-oneandhalfunits);
+ flex-direction: column;
+}
+.navbar-nav-elements-desktop {
+ flex: 0 0 auto;
+ display: flex;
+ align-self: center;
+ align-items: center;
+ margin-left: 0px;
+ flex-direction: row;
+}
+.navbar-navlink {
+ display: contents;
+}
+.navbar-component {
+ text-decoration: none;
+}
+.navbar-navlink1 {
+ display: contents;
+}
+.navbar-component1 {
+ text-decoration: none;
+}
+.navbar-navlink2 {
+ display: contents;
+}
+.navbar-component2 {
+ text-decoration: none;
+}
+.navbar-link {
+ display: contents;
+}
+.navbar-component3 {
+ text-decoration: none;
+}
+.navbar-link1 {
+ display: contents;
+}
+.navbar-component4 {
+ text-decoration: none;
+}
+.navbar-btn-group {
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ justify-content: space-between;
+ text-decoration: none;
+}
+.navbar-component5 {
+ text-decoration: none;
+}
+.navbar-burger-menu {
+ display: none;
+}
+.navbar-icon {
+ width: var(--dl-size-size-xsmall);
+ height: var(--dl-size-size-xsmall);
+ display: none;
+ transition: 0.3s;
+}
+
+.navbar-nav-elements-mobile {
+ flex: 0 0 auto;
+ display: none;
+ position: absolute;
+ align-self: center;
+ align-items: center;
+ margin-left: 0px;
+ flex-direction: column;
+}
+.navbar-navlink3 {
+ font-style: normal;
+ transition: 0.3s;
+}
+
+.navbar-navlink3:active {
+ color: var(--dl-color-primary-300);
+}
+.navbar-link3 {
+ font-style: normal;
+ transition: 0.3s;
+}
+
+.navbar-link3:active {
+ color: var(--dl-color-primary-300);
+}
+.navbar-navlink4 {
+ font-style: normal;
+ transition: 0.3s;
+ text-decoration: none;
+}
+
+.navbar-navlink4:active {
+ color: var(--dl-color-primary-300);
+}
+.navbar-text {
+ font-style: normal;
+ transition: 0.3s;
+}
+
+.navbar-text:active {
+ color: var(--dl-color-primary-300);
+}
+.navbar-text1 {
+ font-style: normal;
+ transition: 0.3s;
+}
+
+.navbar-text1:active {
+ color: var(--dl-color-primary-300);
+}
+.navbar-btn-group1 {
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ justify-content: space-between;
+ text-decoration: none;
+}
+.navbar-component6 {
+ text-decoration: none;
+}
+.navbar-container1 {
+ top: 32px;
+ width: 24px;
+ height: 24px;
+ position: absolute;
+}
+.navbar-icon2 {
+ width: 24px;
+ height: 24px;
+}
+
+@media(max-width: 991px) {
+ .navbar-nav-elements-desktop {
+ display: none;
+ }
+ .navbar-btn-group {
+ display: none;
+ }
+ .navbar-burger-menu {
+ display: flex;
+ }
+ .navbar-icon {
+ fill: #D9D9D9;
+ width: var(--dl-size-size-small);
+ height: var(--dl-size-size-small);
+ display: flex;
+ }
+ .navbar-nav-elements-mobile {
+ top: 0px;
+ left: 0px;
+ right: 0px;
+ display: flex;
+ align-items: flex-start;
+ margin-left: 0px;
+ padding-top: var(--dl-space-space-twounits);
+ padding-left: var(--dl-space-space-twounits);
+ padding-right: var(--dl-space-space-twounits);
+ padding-bottom: var(--dl-space-space-twounits);
+ background-color: var(--dl-color-gray-black);
+ }
+ .navbar-btn-group1 {
+ display: none;
+ }
+ .navbar-container1 {
+ right: 32px;
+ }
+}
+@media(max-width: 767px) {
+ .navbar-icon {
+ fill: var(--dl-color-gray-900);
+ width: var(--dl-size-size-small);
+ height: var(--dl-size-size-small);
+ }
+}
+@media(max-width: 479px) {
+ .navbar-image {
+ width: auto;
+ height: auto;
+ }
+ .navbar-burger-menu {
+ display: flex;
+ }
+ .navbar-icon {
+ fill: var(--dl-color-gray-900);
+ width: 32px;
+ height: 32px;
+ }
+ .navbar-nav-elements-mobile {
+ height: 100vh;
+ flex-direction: column;
+ justify-content: center;
+ background-color: var(--dl-color-gray-white);
+ }
+ .navbar-navlink3 {
+ color: var(--dl-color-primary-100);
+ margin-top: var(--dl-space-space-unit);
+ text-align: left;
+ margin-bottom: var(--dl-space-space-unit);
+ }
+ .navbar-link3 {
+ color: var(--dl-color-primary-100);
+ margin-top: var(--dl-space-space-unit);
+ text-align: left;
+ margin-bottom: var(--dl-space-space-unit);
+ }
+ .navbar-navlink4 {
+ color: var(--dl-color-primary-100);
+ margin-top: var(--dl-space-space-unit);
+ text-align: left;
+ margin-bottom: var(--dl-space-space-unit);
+ }
+ .navbar-text {
+ color: var(--dl-color-primary-100);
+ margin-top: var(--dl-space-space-unit);
+ text-align: left;
+ margin-bottom: var(--dl-space-space-unit);
+ }
+ .navbar-text1 {
+ color: var(--dl-color-primary-100);
+ margin-top: var(--dl-space-space-unit);
+ text-align: left;
+ margin-bottom: var(--dl-space-space-unit);
+ }
+ .navbar-btn-group1 {
+ display: flex;
+ margin-top: var(--dl-space-space-halfunit);
+ margin-bottom: var(--dl-space-space-halfunit);
+ }
+ .navbar-icon2 {
+ fill: var(--dl-color-primary-100);
+ }
+ .rootClassName {
+ width: 100%;
+ }
+}