BlissRoms Website v2
Signed-off-by: Jackeagle <jackeagle102@gmail.com>
diff --git a/components/footer.css b/components/footer.css
index f638265..98af4ba 100644
--- a/components/footer.css
+++ b/components/footer.css
@@ -1,112 +1,105 @@
.footer-footer {
width: 100%;
display: flex;
- max-width: 100%;
+ position: relative;
+ max-width: var(--dl-size-size-maxwidth);
align-items: center;
padding-top: var(--dl-space-space-twounits);
- padding-left: var(--dl-space-space-fourunits);
- padding-right: var(--dl-space-space-fourunits);
+ padding-left: var(--dl-space-space-threeunits);
+ padding-right: var(--dl-space-space-threeunits);
flex-direction: column;
padding-bottom: var(--dl-space-space-twounits);
justify-content: space-between;
- background-image: linear-gradient(180deg, rgb(18, 18, 18) 0.00%,rgb(35, 55, 74) 97.00%);
}
.footer-container {
width: 100%;
display: flex;
- align-items: flex-start;
- flex-direction: row;
justify-content: space-between;
}
.footer-logo {
+ width: 32%;
display: flex;
max-width: var(--dl-size-size-maxwidth);
- align-self: flex-start;
align-items: flex-start;
- margin-right: 56px;
- flex-direction: column;
- justify-content: center;
-}
-.footer-logo1 {
- display: flex;
- align-items: center;
+ margin-bottom: var(--dl-space-space-twounits);
flex-direction: column;
}
.footer-image {
- width: var(--dl-size-size-medium);
- height: 64px;
+ width: 64px;
+ height: auto;
}
.footer-text {
- color: var(--dl-color-primary-500);
- margin-top: var(--dl-space-space-halfunit);
- margin-bottom: var(--dl-space-space-halfunit);
-}
-.footer-text02 {
- color: var(--dl-color-gray-900);
- width: 224px;
- margin-top: var(--dl-space-space-unit);
- line-height: 1.32;
+ width: 100%;
+ margin-top: var(--dl-space-space-twounits);
}
.footer-links-container {
display: flex;
align-items: flex-start;
flex-direction: row;
- justify-content: space-between;
+ justify-content: flex-end;
}
.footer-container1 {
display: flex;
align-items: flex-start;
- margin-right: var(--dl-space-space-fourunits);
+ margin-right: 4rem;
flex-direction: row;
- justify-content: space-between;
+ justify-content: flex-start;
}
-.footer-community-container {
+.footer-product-container {
flex: 0 0 auto;
display: flex;
align-items: flex-start;
- margin-right: var(--dl-space-space-fourunits);
+ margin-right: 4rem;
flex-direction: column;
justify-content: flex-start;
}
-.footer-text05 {
- color: var(--dl-color-primary-700);
+.footer-text1 {
+ color: var(--dl-color-bliss-primary);
font-weight: 700;
margin-bottom: var(--dl-space-space-oneandhalfunits);
}
.footer-link {
+ margin-bottom: var(--dl-space-space-unit);
text-decoration: none;
}
.footer-link01 {
+ margin-bottom: var(--dl-space-space-unit);
text-decoration: none;
}
.footer-link02 {
+ margin-bottom: var(--dl-space-space-unit);
text-decoration: none;
}
-.footer-sources-container {
+.footer-company-container {
flex: 0 0 auto;
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: flex-start;
}
-.footer-text08 {
- color: var(--dl-color-primary-700);
+.footer-text2 {
+ color: var(--dl-color-bliss-primary);
font-weight: 700;
margin-bottom: var(--dl-space-space-oneandhalfunits);
}
.footer-link03 {
+ margin-bottom: var(--dl-space-space-unit);
text-decoration: none;
}
.footer-link04 {
+ margin-bottom: var(--dl-space-space-unit);
text-decoration: none;
}
.footer-link05 {
+ margin-bottom: var(--dl-space-space-unit);
text-decoration: none;
}
.footer-link06 {
+ margin-bottom: var(--dl-space-space-unit);
text-decoration: none;
}
.footer-link07 {
+ margin-bottom: var(--dl-space-space-unit);
text-decoration: none;
}
.footer-container2 {
@@ -118,18 +111,21 @@
.footer-contact {
display: flex;
align-items: flex-start;
- margin-bottom: 40px;
+ margin-bottom: var(--dl-space-space-oneandhalfunits);
flex-direction: column;
justify-content: flex-start;
}
-.footer-text12 {
- color: var(--dl-color-primary-700);
+.footer-text3 {
+ color: var(--dl-color-bliss-primary);
+ font-weight: 700;
margin-bottom: var(--dl-space-space-oneandhalfunits);
}
.footer-link08 {
+ margin-bottom: var(--dl-space-space-unit);
text-decoration: none;
}
.footer-link09 {
+ margin-bottom: var(--dl-space-space-unit);
text-decoration: none;
}
.footer-link10 {
@@ -141,9 +137,10 @@
flex-direction: column;
justify-content: flex-start;
}
-.footer-text13 {
- color: var(--dl-color-primary-700);
- margin-bottom: var(--dl-space-space-unit);
+.footer-text4 {
+ color: var(--dl-color-bliss-primary);
+ font-weight: 700;
+ margin-bottom: var(--dl-space-space-oneandhalfunits);
}
.footer-icon-group {
display: flex;
@@ -154,58 +151,47 @@
.footer-link11 {
display: contents;
}
+.footer-icon {
+ width: var(--dl-size-size-xsmall);
+ height: var(--dl-size-size-xsmall);
+ margin-right: var(--dl-space-space-unit);
+ text-decoration: none;
+}
.footer-link12 {
display: contents;
}
-.footer-icon02 {
+.footer-icon2 {
+ width: var(--dl-size-size-xsmall);
+ height: var(--dl-size-size-xsmall);
+ margin-right: var(--dl-space-space-unit);
text-decoration: none;
}
.footer-link13 {
display: contents;
}
-.footer-icon04 {
+.footer-icon4 {
+ width: var(--dl-size-size-xsmall);
+ height: var(--dl-size-size-xsmall);
text-decoration: none;
}
-.footer-link14 {
- display: contents;
-}
-.footer-icon06 {
- fill: #D9D9D9;
- text-decoration: none;
-}
-.footer-link15 {
- display: contents;
-}
-.footer-icon08 {
- text-decoration: none;
-}
-.footer-link16 {
- display: contents;
-}
.footer-separator {
width: 100%;
height: 1px;
margin-top: var(--dl-space-space-twounits);
margin-bottom: var(--dl-space-space-twounits);
- background-color: var(--dl-color-primary-700);
+ background-color: var(--dl-color-gray-900);
}
-
-.rootClassName1 {
- margin-top: var(--dl-space-space-oneandhalfunits);
- background-image: linear-gradient(180deg, rgb(18, 18, 18) 0.00%,rgb(16, 44, 70) 97.00%);
+.footer-text5 {
+ align-self: center;
}
@media(max-width: 991px) {
.footer-footer {
flex-direction: column;
}
- .footer-links-container {
- align-items: flex-start;
- flex-direction: column;
- }
.footer-container1 {
margin-right: var(--dl-space-space-fourunits);
}
- .footer-community-container {
+ .footer-product-container {
margin-right: var(--dl-space-space-fourunits);
}
}
@@ -225,13 +211,13 @@
.footer-image {
margin-bottom: var(--dl-space-space-oneandhalfunits);
}
- .footer-text02 {
- margin-top: var(--dl-space-space-twounits);
+ .footer-text {
+ margin-top: var(--dl-space-space-unit);
text-align: center;
- margin-bottom: var(--dl-space-space-twounits);
}
.footer-links-container {
width: 100%;
+ margin-top: var(--dl-space-space-twounits);
align-items: flex-start;
flex-direction: row;
justify-content: center;
@@ -239,81 +225,48 @@
.footer-container1 {
margin-right: var(--dl-space-space-fourunits);
}
- .footer-community-container {
+ .footer-product-container {
margin-right: var(--dl-space-space-fourunits);
}
- .rootClassName {
- width: 100%;
- }
}
@media(max-width: 479px) {
.footer-footer {
padding: var(--dl-space-space-unit);
}
.footer-container {
- padding: var(--dl-space-space-twounits);
- align-self: center;
align-items: center;
flex-direction: column;
}
.footer-logo {
- align-self: center;
- align-items: center;
- margin-right: 0px;
- justify-content: center;
+ width: auto;
}
.footer-image {
margin-bottom: 0px;
}
- .footer-text02 {
- width: var(--dl-size-size-xxlarge);
- align-self: center;
- margin-top: var(--dl-space-space-unit);
- text-align: center;
- margin-bottom: var(--dl-space-space-unit);
+ .footer-text {
+ width: 80%;
}
.footer-links-container {
- align-self: flex-start;
+ align-items: flex-start;
flex-direction: column;
}
.footer-container1 {
- margin: var(--dl-space-space-unit);
+ margin-right: 0px;
flex-direction: column;
}
- .footer-sources-container {
+ .footer-company-container {
margin-top: var(--dl-space-space-twounits);
}
.footer-container2 {
- margin: var(--dl-space-space-unit);
+ margin-top: var(--dl-space-space-twounits);
+ align-items: flex-start;
+ margin-bottom: 0px;
}
.footer-contact {
align-items: flex-start;
margin-bottom: var(--dl-space-space-unit);
}
- .footer-socials {
- margin-top: var(--dl-space-space-oneandhalfunits);
- }
- .footer-icon02 {
- fill: var(--dl-color-gray-white);
- }
- .footer-icon04 {
- fill: var(--dl-color-gray-white);
- }
- .footer-icon06 {
- fill: var(--dl-color-gray-white);
- }
- .footer-icon08 {
- fill: var(--dl-color-gray-white);
- }
- .footer-icon10 {
- fill: var(--dl-color-gray-white);
- }
- .footer-separator {
- margin-top: 0px;
- margin-bottom: 0px;
- background-color: var(--dl-color-primary-700);
- }
- .rootClassName {
- width: 100%;
+ .footer-text5 {
+ text-align: center;
}
}