Gitiles
Code Review Sign In
review.blissroms.org / blissroms.github.io / a6a5fa03a786a49a14b6d330c1633a93d04a421b / . / components / features.css
blob: 4e9029ff9cd01a8f537234684091fef777cc71d5 [file] [log] [blame]
Lokesh Yadavba544372021-12-07 15:09:27 +0530[diff] [blame]1.features-features {
Lokesh Yadava6a5fa02022-07-15 19:20:06 +0530[diff] [blame^]2 width: 100%;
Lokesh Yadavba544372021-12-07 15:09:27 +0530[diff] [blame]3 display: flex;
Lokesh Yadava6a5fa02022-07-15 19:20:06 +0530[diff] [blame^]4 padding: var(--dl-space-space-threeunits);
5 position: relative;
6 max-width: var(--dl-size-size-maxwidth);
7 align-self: center;
Lokesh Yadavba544372021-12-07 15:09:27 +0530[diff] [blame]8 align-items: center;
9 flex-direction: column;
10}
Lokesh Yadava6a5fa02022-07-15 19:20:06 +0530[diff] [blame^]11.features-heading {
12 display: flex;
13 z-index: 100;
14 margin-bottom: var(--dl-space-space-threeunits);
15 flex-direction: column;
16 justify-content: center;
17}
Lokesh Yadavba544372021-12-07 15:09:27 +0530[diff] [blame]18.features-text {
Lokesh Yadava6a5fa02022-07-15 19:20:06 +0530[diff] [blame^]19 color: var(--dl-color-bliss-primary);
20 font-size: 3rem;
Lokesh Yadavba544372021-12-07 15:09:27 +0530[diff] [blame]21 align-self: center;
Lokesh Yadava6a5fa02022-07-15 19:20:06 +0530[diff] [blame^]22 text-align: center;
23 margin-bottom: var(--dl-space-space-unit);
Lokesh Yadavba544372021-12-07 15:09:27 +0530[diff] [blame]24}
25.features-text03 {
Lokesh Yadava6a5fa02022-07-15 19:20:06 +0530[diff] [blame^]26 font-size: 18px;
27 align-self: center;
Lokesh Yadavba544372021-12-07 15:09:27 +0530[diff] [blame]28 font-style: normal;
Lokesh Yadavba544372021-12-07 15:09:27 +0530[diff] [blame]29 text-align: center;
Lokesh Yadava6a5fa02022-07-15 19:20:06 +0530[diff] [blame^]30 font-weight: 500;
Lokesh Yadavba544372021-12-07 15:09:27 +0530[diff] [blame]31}
Lokesh Yadava6a5fa02022-07-15 19:20:06 +0530[diff] [blame^]32.features-list {
33 gap: 24px;
Lokesh Yadavba544372021-12-07 15:09:27 +0530[diff] [blame]34 display: flex;
Lokesh Yadava6a5fa02022-07-15 19:20:06 +0530[diff] [blame^]35 z-index: 100;
Lokesh Yadavba544372021-12-07 15:09:27 +0530[diff] [blame]36 flex-direction: column;
37}
Lokesh Yadava6a5fa02022-07-15 19:20:06 +0530[diff] [blame^]38.features-f-1 {
39 gap: 24px;
40 width: auto;
Lokesh Yadavba544372021-12-07 15:09:27 +0530[diff] [blame]41 display: flex;
Lokesh Yadava6a5fa02022-07-15 19:20:06 +0530[diff] [blame^]42 flex-wrap: wrap;
43 flex-direction: row;
44 justify-content: center;
Lokesh Yadavba544372021-12-07 15:09:27 +0530[diff] [blame]45}
Lokesh Yadava6a5fa02022-07-15 19:20:06 +0530[diff] [blame^]46.features-focus-on-design {
47 transition: 0.3s;
Lokesh Yadavba544372021-12-07 15:09:27 +0530[diff] [blame]48}
Lokesh Yadava6a5fa02022-07-15 19:20:06 +0530[diff] [blame^]49.features-focus-on-design:hover {
50 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;;
Lokesh Yadavba544372021-12-07 15:09:27 +0530[diff] [blame]51}
52.features-image {
Lokesh Yadavba544372021-12-07 15:09:27 +0530[diff] [blame]53 width: 32px;
Lokesh Yadava6a5fa02022-07-15 19:20:06 +0530[diff] [blame^]54 object-fit: cover;
Lokesh Yadavba544372021-12-07 15:09:27 +0530[diff] [blame]55}
Lokesh Yadava6a5fa02022-07-15 19:20:06 +0530[diff] [blame^]56.features-text04 {
57 color: #002766;
58 font-size: 18px;
Lokesh Yadavba544372021-12-07 15:09:27 +0530[diff] [blame]59}
60.features-performance {
Lokesh Yadava6a5fa02022-07-15 19:20:06 +0530[diff] [blame^]61 gap: 12px;
62 flex: 0 0 auto;
63 width: auto;
Lokesh Yadavba544372021-12-07 15:09:27 +0530[diff] [blame]64 display: flex;
Lokesh Yadava6a5fa02022-07-15 19:20:06 +0530[diff] [blame^]65 padding: var(--dl-space-space-unit);
66 max-width: 280px;
67 transition: 0.3s;
68 align-items: flex-start;
69 border-color: #AEF998;
70 border-width: 1.6px;
71 border-radius: 16px;
Lokesh Yadavba544372021-12-07 15:09:27 +0530[diff] [blame]72 flex-direction: column;
Lokesh Yadava6a5fa02022-07-15 19:20:06 +0530[diff] [blame^]73 background-color: #D2FDC5;
Lokesh Yadavba544372021-12-07 15:09:27 +0530[diff] [blame]74}
Lokesh Yadava6a5fa02022-07-15 19:20:06 +0530[diff] [blame^]75.features-performance:hover {
76 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;;
Lokesh Yadavba544372021-12-07 15:09:27 +0530[diff] [blame]77}
78.features-image1 {
79 width: 32px;
80 object-fit: cover;
81}
Lokesh Yadava6a5fa02022-07-15 19:20:06 +0530[diff] [blame^]82.features-text06 {
83 color: #186601;
84 font-size: 18px;
Lokesh Yadavba544372021-12-07 15:09:27 +0530[diff] [blame]85}
Lokesh Yadava6a5fa02022-07-15 19:20:06 +0530[diff] [blame^]86.features-regular-updates {
87 gap: 12px;
88 flex: 0 0 auto;
89 width: auto;
90 display: flex;
91 padding: var(--dl-space-space-unit);
92 max-width: 280px;
93 transition: 0.3s;
94 align-items: flex-start;
95 border-color: #98EFF9;
96 border-width: 1.6px;
97 border-radius: 16px;
98 flex-direction: column;
99 background-color: #C5F7FD;
100}
101.features-regular-updates:hover {
102 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;;
103}
104.features-image2 {
105 width: 32px;
106 object-fit: cover;
107}
108.features-text08 {
109 color: #002766;
110 font-size: 18px;
111}
112.features-f-2 {
113 gap: 24px;
114 display: flex;
115 flex-wrap: wrap;
116 flex-direction: row;
117 justify-content: center;
118}
119.features-battery-friendly {
120 gap: 12px;
121 flex: 0 0 auto;
122 width: auto;
123 display: flex;
124 padding: var(--dl-space-space-unit);
125 max-width: 280px;
126 transition: 0.3s;
127 align-items: flex-start;
128 border-color: #F9E798;
129 border-width: 1.6px;
130 border-radius: 16px;
131 flex-direction: column;
132 background-color: #FDF3C5;
133}
134.features-battery-friendly:hover {
135 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;;
136}
137.features-image3 {
138 width: 32px;
139 object-fit: cover;
140}
141.features-text10 {
142 color: #665300;
143 font-size: 18px;
144}
145.features-added-security {
146 gap: 12px;
147 flex: 0 0 auto;
148 width: auto;
149 display: flex;
150 padding: var(--dl-space-space-unit);
151 max-width: 280px;
152 transition: 0.3s;
153 align-items: flex-start;
154 border-color: #A598F9;
155 border-width: 1.6px;
156 border-radius: 16px;
157 flex-direction: column;
158 background-color: #CDC5FD;
159}
160.features-added-security:hover {
161 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;;
162}
163.features-image4 {
164 width: 32px;
165 object-fit: cover;
166}
167.features-text12 {
168 color: #002766;
169 font-size: 18px;
170}
171.features-many-more {
172 gap: 12px;
173 flex: 0 0 auto;
174 width: auto;
175 display: flex;
176 padding: var(--dl-space-space-unit);
177 max-width: 280px;
178 transition: 0.3s;
179 align-items: flex-start;
180 border-color: #F9989C;
181 border-width: 1.6px;
182 border-radius: 16px;
183 flex-direction: column;
184 background-color: #FDC5C8;
185}
186.features-many-more:hover {
187 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;;
188}
189.features-image5 {
190 width: 32px;
191 object-fit: cover;
192}
193.features-text14 {
194 color: #660005;
195 font-size: 18px;
196}
197.features-image6 {
198 top: 0px;
199 left: 0px;
200 right: 0px;
201 width: 306px;
202 margin: auto;
203 z-index: 1;
204 position: absolute;
205 object-fit: cover;
206}
207@media(max-width: 991px) {
208 .features-text {
209 align-self: center;
210 }
211}
212@media(max-width: 767px) {
213 .features-features {
214 max-width: 100%;
215 padding-left: var(--dl-space-space-twounits);
216 padding-right: var(--dl-space-space-twounits);
217 }
218 .features-f-1 {
219 flex-wrap: wrap;
220 align-items: center;
221 flex-direction: column;
222 justify-content: center;
223 }
224 .features-f-2 {
225 flex-wrap: wrap;
226 align-items: center;
227 flex-direction: column;
228 justify-content: center;
229 }
230}
231@media(max-width: 479px) {
232 .features-features {
233 width: 454px;
234 max-width: auto;
235 align-self: center;
236 align-items: center;
237 padding-top: var(--dl-space-space-twounits);
238 padding-left: var(--dl-space-space-unit);
239 padding-right: var(--dl-space-space-unit);
240 padding-bottom: var(--dl-space-space-twounits);
241 }
242 .features-text {
243 width: 478px;
244 font-size: 1.6rem;
245 margin-bottom: var(--dl-space-space-halfunit);
246 }
247 .features-text03 {
248 font-size: 16px;
249 }
Lokesh Yadavba544372021-12-07 15:09:27 +0530[diff] [blame]250}