BlissRoms Website v2
Signed-off-by: Jackeagle <jackeagle102@gmail.com>
diff --git a/components/features.css b/components/features.css
index 44bd840..4e9029f 100644
--- a/components/features.css
+++ b/components/features.css
@@ -1,178 +1,250 @@
.features-features {
+ width: 100%;
display: flex;
+ padding: var(--dl-space-space-threeunits);
+ position: relative;
+ max-width: var(--dl-size-size-maxwidth);
+ align-self: center;
align-items: center;
flex-direction: column;
}
+.features-heading {
+ display: flex;
+ z-index: 100;
+ margin-bottom: var(--dl-space-space-threeunits);
+ flex-direction: column;
+ justify-content: center;
+}
.features-text {
- color: var(--dl-color-gray-white);
+ color: var(--dl-color-bliss-primary);
+ font-size: 3rem;
align-self: center;
- margin-top: 96px;
-}
-.features-text01 {
- color: var(--dl-color-primary-500);
- font-size: 24px;
- margin-top: 8px;
- font-family: Poppins;
-}
-.features-features1 {
- display: flex;
- margin-top: 32px;
- align-items: center;
- margin-bottom: 32px;
- flex-direction: row;
-}
-.features-sec-bb {
- display: flex;
- align-items: center;
- flex-direction: column;
-}
-.features-security {
- width: 352px;
- display: flex;
- padding: 16px;
- align-items: center;
- margin-bottom: 40px;
- flex-direction: column;
-}
-.features-icon {
- fill: var(--dl-color-gray-white);
- width: 32px;
-}
-.features-text02 {
- color: var(--dl-color-primary-300);
- font-style: normal;
- margin-top: 12px;
- margin-bottom: 12px;
+ text-align: center;
+ margin-bottom: var(--dl-space-space-unit);
}
.features-text03 {
- fill: var(--dl-color-gray-white);
- color: var(--dl-color-gray-white);
- text-align: center;
-}
-.features-battery {
- width: 352px;
- display: flex;
- padding: 16px;
- align-items: center;
- flex-direction: column;
-}
-.features-icon02 {
- fill: var(--dl-color-gray-white);
- width: 32px;
-}
-.features-text04 {
- color: var(--dl-color-primary-300);
+ font-size: 18px;
+ align-self: center;
font-style: normal;
- margin-top: 12px;
- margin-bottom: 12px;
-}
-.features-text05 {
- fill: var(--dl-color-gray-white);
- color: var(--dl-color-gray-white);
text-align: center;
+ font-weight: 500;
}
-.features-design-settings {
+.features-list {
+ gap: 24px;
display: flex;
- align-items: center;
+ z-index: 100;
flex-direction: column;
}
-.features-focusondesign {
- width: 352px;
+.features-f-1 {
+ gap: 24px;
+ width: auto;
display: flex;
- padding: 16px;
- align-items: center;
- flex-direction: column;
+ flex-wrap: wrap;
+ flex-direction: row;
+ justify-content: center;
}
-.features-icon04 {
- fill: var(--dl-color-gray-white);
- width: 32px;
+.features-focus-on-design {
+ transition: 0.3s;
}
-.features-text06 {
- color: var(--dl-color-primary-300);
- font-style: normal;
- margin-top: 12px;
- margin-bottom: 12px;
-}
-.features-text07 {
- fill: var(--dl-color-gray-white);
- color: var(--dl-color-gray-white);
- text-align: center;
+.features-focus-on-design:hover {
+ box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;;
}
.features-image {
- width: 180px;
- margin-top: 88px;
- object-fit: cover;
- margin-bottom: 88px;
-}
-.features-settings {
- width: 352px;
- display: flex;
- padding: 16px;
- align-items: center;
- flex-direction: column;
-}
-.features-icon07 {
- fill: var(--dl-color-gray-white);
width: 32px;
+ object-fit: cover;
}
-.features-text08 {
- color: var(--dl-color-primary-300);
- font-style: normal;
- margin-top: 12px;
- margin-bottom: 12px;
-}
-.features-text09 {
- fill: var(--dl-color-gray-white);
- color: var(--dl-color-gray-white);
- text-align: center;
-}
-.features-perf-comp {
- display: flex;
- align-items: center;
- flex-direction: column;
+.features-text04 {
+ color: #002766;
+ font-size: 18px;
}
.features-performance {
- width: 352px;
+ gap: 12px;
+ flex: 0 0 auto;
+ width: auto;
display: flex;
- padding: 16px;
- align-items: center;
- margin-bottom: 40px;
+ padding: var(--dl-space-space-unit);
+ max-width: 280px;
+ transition: 0.3s;
+ align-items: flex-start;
+ border-color: #AEF998;
+ border-width: 1.6px;
+ border-radius: 16px;
flex-direction: column;
+ background-color: #D2FDC5;
}
-.features-icon09 {
- fill: var(--dl-color-gray-white);
- width: 32px;
-}
-.features-text10 {
- color: var(--dl-color-primary-300);
- font-style: normal;
- margin-top: 12px;
- margin-bottom: 12px;
-}
-.features-text11 {
- fill: var(--dl-color-gray-white);
- color: var(--dl-color-gray-white);
- text-align: center;
-}
-.features-compatibility {
- width: 352px;
- display: flex;
- padding: 16px;
- align-items: center;
- flex-direction: column;
+.features-performance:hover {
+ box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;;
}
.features-image1 {
width: 32px;
object-fit: cover;
}
-.features-text12 {
- color: var(--dl-color-primary-300);
- font-style: normal;
- margin-top: 12px;
- margin-bottom: 12px;
+.features-text06 {
+ color: #186601;
+ font-size: 18px;
}
-.features-text13 {
- fill: var(--dl-color-gray-white);
- color: var(--dl-color-gray-white);
- text-align: center;
+.features-regular-updates {
+ gap: 12px;
+ flex: 0 0 auto;
+ width: auto;
+ display: flex;
+ padding: var(--dl-space-space-unit);
+ max-width: 280px;
+ transition: 0.3s;
+ align-items: flex-start;
+ border-color: #98EFF9;
+ border-width: 1.6px;
+ border-radius: 16px;
+ flex-direction: column;
+ background-color: #C5F7FD;
+}
+.features-regular-updates:hover {
+ box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;;
+}
+.features-image2 {
+ width: 32px;
+ object-fit: cover;
+}
+.features-text08 {
+ color: #002766;
+ font-size: 18px;
+}
+.features-f-2 {
+ gap: 24px;
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ justify-content: center;
+}
+.features-battery-friendly {
+ gap: 12px;
+ flex: 0 0 auto;
+ width: auto;
+ display: flex;
+ padding: var(--dl-space-space-unit);
+ max-width: 280px;
+ transition: 0.3s;
+ align-items: flex-start;
+ border-color: #F9E798;
+ border-width: 1.6px;
+ border-radius: 16px;
+ flex-direction: column;
+ background-color: #FDF3C5;
+}
+.features-battery-friendly:hover {
+ box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;;
+}
+.features-image3 {
+ width: 32px;
+ object-fit: cover;
+}
+.features-text10 {
+ color: #665300;
+ font-size: 18px;
+}
+.features-added-security {
+ gap: 12px;
+ flex: 0 0 auto;
+ width: auto;
+ display: flex;
+ padding: var(--dl-space-space-unit);
+ max-width: 280px;
+ transition: 0.3s;
+ align-items: flex-start;
+ border-color: #A598F9;
+ border-width: 1.6px;
+ border-radius: 16px;
+ flex-direction: column;
+ background-color: #CDC5FD;
+}
+.features-added-security:hover {
+ box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;;
+}
+.features-image4 {
+ width: 32px;
+ object-fit: cover;
+}
+.features-text12 {
+ color: #002766;
+ font-size: 18px;
+}
+.features-many-more {
+ gap: 12px;
+ flex: 0 0 auto;
+ width: auto;
+ display: flex;
+ padding: var(--dl-space-space-unit);
+ max-width: 280px;
+ transition: 0.3s;
+ align-items: flex-start;
+ border-color: #F9989C;
+ border-width: 1.6px;
+ border-radius: 16px;
+ flex-direction: column;
+ background-color: #FDC5C8;
+}
+.features-many-more:hover {
+ box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;;
+}
+.features-image5 {
+ width: 32px;
+ object-fit: cover;
+}
+.features-text14 {
+ color: #660005;
+ font-size: 18px;
+}
+.features-image6 {
+ top: 0px;
+ left: 0px;
+ right: 0px;
+ width: 306px;
+ margin: auto;
+ z-index: 1;
+ position: absolute;
+ object-fit: cover;
+}
+@media(max-width: 991px) {
+ .features-text {
+ align-self: center;
+ }
+}
+@media(max-width: 767px) {
+ .features-features {
+ max-width: 100%;
+ padding-left: var(--dl-space-space-twounits);
+ padding-right: var(--dl-space-space-twounits);
+ }
+ .features-f-1 {
+ flex-wrap: wrap;
+ align-items: center;
+ flex-direction: column;
+ justify-content: center;
+ }
+ .features-f-2 {
+ flex-wrap: wrap;
+ align-items: center;
+ flex-direction: column;
+ justify-content: center;
+ }
+}
+@media(max-width: 479px) {
+ .features-features {
+ width: 454px;
+ max-width: auto;
+ align-self: center;
+ align-items: center;
+ padding-top: var(--dl-space-space-twounits);
+ padding-left: var(--dl-space-space-unit);
+ padding-right: var(--dl-space-space-unit);
+ padding-bottom: var(--dl-space-space-twounits);
+ }
+ .features-text {
+ width: 478px;
+ font-size: 1.6rem;
+ margin-bottom: var(--dl-space-space-halfunit);
+ }
+ .features-text03 {
+ font-size: 16px;
+ }
}