├── README.md ├── assets ├── 46-banner.png ├── classes-1.jpg ├── classes-2.jpg ├── classes-3.jpg ├── classes-4.jpg ├── classes-5.jpg ├── classes-6.jpg ├── header.jpg ├── icon-1.png ├── icon-2.png ├── icon-3.png ├── icon-4.png ├── logo.png ├── photos-1.jpg ├── photos-2.jpg ├── photos-3.jpg ├── photos-4.jpg ├── posts-1.jpg ├── posts-2.jpg ├── posts-3.jpg ├── stories-1.jpg ├── stories-2.jpg ├── stories-3.jpg └── why.jpg ├── index.html ├── main.js └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # Yogalax 2 | Create an Engaging Yoga Classes Website Design | HTML, CSS & JS with ScrollReveal Animations! 3 | -------------------------------------------------------------------------------- /assets/46-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Yogalax/dfaa1edd44f1d7570ded2065e20be288bd06ead5/assets/46-banner.png -------------------------------------------------------------------------------- /assets/classes-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Yogalax/dfaa1edd44f1d7570ded2065e20be288bd06ead5/assets/classes-1.jpg -------------------------------------------------------------------------------- /assets/classes-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Yogalax/dfaa1edd44f1d7570ded2065e20be288bd06ead5/assets/classes-2.jpg -------------------------------------------------------------------------------- /assets/classes-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Yogalax/dfaa1edd44f1d7570ded2065e20be288bd06ead5/assets/classes-3.jpg -------------------------------------------------------------------------------- /assets/classes-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Yogalax/dfaa1edd44f1d7570ded2065e20be288bd06ead5/assets/classes-4.jpg -------------------------------------------------------------------------------- /assets/classes-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Yogalax/dfaa1edd44f1d7570ded2065e20be288bd06ead5/assets/classes-5.jpg -------------------------------------------------------------------------------- /assets/classes-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Yogalax/dfaa1edd44f1d7570ded2065e20be288bd06ead5/assets/classes-6.jpg -------------------------------------------------------------------------------- /assets/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Yogalax/dfaa1edd44f1d7570ded2065e20be288bd06ead5/assets/header.jpg -------------------------------------------------------------------------------- /assets/icon-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Yogalax/dfaa1edd44f1d7570ded2065e20be288bd06ead5/assets/icon-1.png -------------------------------------------------------------------------------- /assets/icon-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Yogalax/dfaa1edd44f1d7570ded2065e20be288bd06ead5/assets/icon-2.png -------------------------------------------------------------------------------- /assets/icon-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Yogalax/dfaa1edd44f1d7570ded2065e20be288bd06ead5/assets/icon-3.png -------------------------------------------------------------------------------- /assets/icon-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Yogalax/dfaa1edd44f1d7570ded2065e20be288bd06ead5/assets/icon-4.png -------------------------------------------------------------------------------- /assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Yogalax/dfaa1edd44f1d7570ded2065e20be288bd06ead5/assets/logo.png -------------------------------------------------------------------------------- /assets/photos-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Yogalax/dfaa1edd44f1d7570ded2065e20be288bd06ead5/assets/photos-1.jpg -------------------------------------------------------------------------------- /assets/photos-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Yogalax/dfaa1edd44f1d7570ded2065e20be288bd06ead5/assets/photos-2.jpg -------------------------------------------------------------------------------- /assets/photos-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Yogalax/dfaa1edd44f1d7570ded2065e20be288bd06ead5/assets/photos-3.jpg -------------------------------------------------------------------------------- /assets/photos-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Yogalax/dfaa1edd44f1d7570ded2065e20be288bd06ead5/assets/photos-4.jpg -------------------------------------------------------------------------------- /assets/posts-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Yogalax/dfaa1edd44f1d7570ded2065e20be288bd06ead5/assets/posts-1.jpg -------------------------------------------------------------------------------- /assets/posts-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Yogalax/dfaa1edd44f1d7570ded2065e20be288bd06ead5/assets/posts-2.jpg -------------------------------------------------------------------------------- /assets/posts-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Yogalax/dfaa1edd44f1d7570ded2065e20be288bd06ead5/assets/posts-3.jpg -------------------------------------------------------------------------------- /assets/stories-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Yogalax/dfaa1edd44f1d7570ded2065e20be288bd06ead5/assets/stories-1.jpg -------------------------------------------------------------------------------- /assets/stories-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Yogalax/dfaa1edd44f1d7570ded2065e20be288bd06ead5/assets/stories-2.jpg -------------------------------------------------------------------------------- /assets/stories-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Yogalax/dfaa1edd44f1d7570ded2065e20be288bd06ead5/assets/stories-3.jpg -------------------------------------------------------------------------------- /assets/why.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Yogalax/dfaa1edd44f1d7570ded2065e20be288bd06ead5/assets/why.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 12 | CODE AASHU | Yogalax 13 | 14 | 15 | 29 |
30 |
31 |
32 |

Effective YOGA

33 |

Do yoga today for better tomorrow

34 | 35 |
36 |
37 | header 38 |
39 |
40 |
41 | 42 |
43 |
44 | why yoga 45 |
46 |
47 |

Why You Should Go To Yoga

48 |

49 | Engaging in yoga offers a holistic approach to wellness, encompassing 50 | both physical and mental benefits. Through a series of poses, 51 | stretches, and muscle strength. Its meditative aspects encourage 52 | mindfulness, reducing stress and anxiety while promoting a sense of 53 | inner peace. 54 |

55 | 77 |
78 |
79 | 80 |
81 |
82 |
83 | hero 84 |

Healthy Lifestyle

85 |

86 | Embrace a healthy lifestyle through the transformative power of yoga 87 | and cultivate physical vitality and inner peace. 88 |

89 |
90 |
91 | hero 92 |

Body & Mind Balance

93 |

94 | Through purposeful poses and mindful breathing, yoga cultivates a 95 | strong, flexible body while nurturing inner calm. 96 |

97 |
98 |
99 | hero 100 |

Meditation Practice

101 |

102 | Discover inner serenity and mindfulness as you cultivate a profound 103 | connection with the present moment. 104 |

105 |
106 |
107 | hero 108 |

Self-Care

109 |

110 | Discover the transformative power of self-care through yoga and 111 | embrace moments of tranquility and mindfulness. 112 |

113 |
114 |
115 |
116 | 117 |
118 |

YOGA CLASSES

119 |

Choose Your Level & Focus

120 |
121 |
122 | classes 123 |
124 | 125 |
126 |
127 |
128 | classes 129 |
130 | 131 |
132 |
133 |
134 | classes 135 |
136 | 137 |
138 |
139 |
140 | classes 141 |
142 | 143 |
144 |
145 |
146 | classes 147 |
148 | 149 |
150 |
151 |
152 | classes 153 |
154 | 155 |
156 |
157 |
158 |
159 | 160 |
161 |
162 |

PRICING TABLE

163 |

Membership Cards

164 |
165 |
166 |

YEAR CARD

167 |

₹6999

168 |

For 1 Year

169 |

ENJOY ALL THE FEATURES

170 |

Onetime access to all club

171 |

Group trainer

172 |

Book a group class

173 |

Fitness orientation

174 | 175 |
176 |
177 |

MONTHLY CARD

178 |

₹600

179 |

For 1 Month

180 |

ENJOY ALL THE FEATURES

181 |

Group classes

182 |

Discuss fitness goals

183 |

Group trainer

184 |

Fitness orientation

185 | 186 |
187 |
188 |

WEEKLY CARD

189 |

₹150

190 |

For 1 Week

191 |

ENJOY ALL THE FEATURES

192 |

Access to yoga area

193 |

Group trainer

194 |

Group classes

195 |

Fitness orientation

196 | 197 |
198 |
199 |
200 |
201 | 202 |
203 |

TESTIMONY

204 |

Successful Stories

205 |
206 |
207 |
208 | 209 |

210 | This yoga website has been a game-changer for me. The variety of 211 | classes and guided sessions have not only improved my flexibility 212 | but also brought a sense of calm to my hectic days. 213 |

214 |
215 |
216 | author 217 |
218 |

Kangana Puri

219 |
Trainer
220 |
221 |
222 |
223 |
224 |
225 | 226 |

227 | The tailored sessions and expert guidance have not only eased my 228 | discomfort but also boosted my overall well-being. A fantastic 229 | resource for both beginners and experienced yogis. 230 |

231 |
232 |
233 | author 234 |
235 |

Tina Kapoor

236 |
Member
237 |
238 |
239 |
240 |
241 |
242 | 243 |

244 | The on-demand classes allow me to practice whenever I can, and the 245 | mindfulness exercises have brought a new level of clarity to my 246 | life.A must-visit for anyone seeking holistic wellness. 247 |

248 |
249 |
250 | author 251 |
252 |

Sania Tondon

253 |
Member
254 |
255 |
256 |
257 |
258 |
259 | 260 | 280 | 281 |
282 |
283 |

BLOG

284 |

Recent Posts

285 |
286 |
287 | post 288 |
289 |
290 | 31 291 |
292 |

2021

293 |

December

294 |
295 |
296 |

Unlocking Inner Peace

297 |

298 | Dive into the practices that help you cultivate inner peace, 299 | reduce stress, and enhance your overall well-being. 300 |

301 |
302 |
303 |
304 | post 305 |
306 |
307 | 25 308 |
309 |

2022

310 |

March

311 |
312 |
313 |

From Desk to Mat

314 |

315 | Learn incorporating simple yoga stretches and breathing 316 | techniques to counter effects of sedentary lifestyle. 317 |

318 |
319 |
320 |
321 | post 322 |
323 |
324 | 06 325 |
326 |

2022

327 |

August

328 |
329 |
330 |

Yoga Through the Ages

331 |

332 | From prenatal yoga to gentle senior yoga, discover enhance 333 | flexibility and foster a lifelong love for well-being. 334 |

335 |
336 |
337 |
338 |
339 |
340 | 341 |
342 |

GALLERY

343 |

See The Latest Photos

344 |
345 |
346 | photo 347 |
348 |
349 | photo 350 |
351 |
352 | photo 353 |
354 |
355 | photo 356 |
357 |
358 |
359 | 360 | 380 | 381 | 382 | 383 | 384 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | /* ===( CODE AASHU )=== */ 2 | const scrollRevealOption = { 3 | distance: "50px", 4 | origin: "bottom", 5 | duration: 1000, 6 | }; 7 | 8 | // header container 9 | ScrollReveal().reveal(".header__container h1", { 10 | ...scrollRevealOption, 11 | delay: 500, 12 | }); 13 | 14 | ScrollReveal().reveal(".header__container h2", { 15 | ...scrollRevealOption, 16 | delay: 1000, 17 | }); 18 | 19 | ScrollReveal().reveal(".header__container .btn", { 20 | ...scrollRevealOption, 21 | delay: 1500, 22 | }); 23 | 24 | ScrollReveal().reveal(".header__container img", { 25 | ...scrollRevealOption, 26 | origin: "right", 27 | }); 28 | 29 | // why container 30 | ScrollReveal().reveal(".why__container .section__header", { 31 | ...scrollRevealOption, 32 | delay: 500, 33 | }); 34 | 35 | ScrollReveal().reveal(".why__container p", { 36 | ...scrollRevealOption, 37 | delay: 1000, 38 | }); 39 | 40 | ScrollReveal().reveal(".why__container li", { 41 | ...scrollRevealOption, 42 | delay: 1500, 43 | interval: 500, 44 | }); 45 | 46 | ScrollReveal().reveal(".why__container img", { 47 | ...scrollRevealOption, 48 | origin: "left", 49 | }); 50 | 51 | // hero container 52 | ScrollReveal().reveal(".hero__card", { 53 | ...scrollRevealOption, 54 | interval: 500, 55 | }); 56 | 57 | // classes container 58 | ScrollReveal().reveal(".classes__image", { 59 | duration: 1000, 60 | interval: 500, 61 | }); 62 | 63 | // membership container 64 | ScrollReveal().reveal(".membership__card", { 65 | ...scrollRevealOption, 66 | interval: 500, 67 | }); 68 | 69 | // stories container 70 | ScrollReveal().reveal(".stories__card", { 71 | ...scrollRevealOption, 72 | interval: 500, 73 | }); 74 | 75 | // posts container 76 | ScrollReveal().reveal(".posts__card", { 77 | ...scrollRevealOption, 78 | interval: 500, 79 | }); 80 | 81 | // photos container 82 | ScrollReveal().reveal(".photos__card", { 83 | duration: 1000, 84 | interval: 500, 85 | }); 86 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap"); 2 | /* ===( CODE AASHU )=== */ 3 | :root { 4 | --primary-color: #d291bc; 5 | --primary-color-dark: #f7ebf3; 6 | --text-dark: #1e293b; 7 | --text-light: #64748b; 8 | --extra-light: #fafafa; 9 | --white: #ffffff; 10 | --max-width: 1200px; 11 | } 12 | 13 | * { 14 | padding: 0; 15 | margin: 0; 16 | box-sizing: border-box; 17 | } 18 | 19 | .section__container { 20 | max-width: var(--max-width); 21 | margin: auto; 22 | padding: 5rem 1rem; 23 | } 24 | 25 | .section__header { 26 | font-size: 3rem; 27 | font-weight: 300; 28 | text-align: center; 29 | color: var(--text-dark); 30 | } 31 | 32 | .section__subheader { 33 | font-size: 1rem; 34 | font-weight: 300; 35 | text-align: center; 36 | color: var(--text-light); 37 | letter-spacing: 2px; 38 | } 39 | 40 | .btn { 41 | padding: 1rem 1.5rem; 42 | outline: none; 43 | border: none; 44 | font-size: 1rem; 45 | color: var(--white); 46 | background-color: var(--primary-color); 47 | border-radius: 5rem; 48 | cursor: pointer; 49 | } 50 | 51 | img { 52 | width: 100%; 53 | display: flex; 54 | } 55 | 56 | a { 57 | text-decoration: none; 58 | } 59 | 60 | html, 61 | body { 62 | scroll-behavior: smooth; 63 | } 64 | 65 | body { 66 | font-family: "Work Sans", sans-serif; 67 | } 68 | 69 | nav { 70 | max-width: var(--max-width); 71 | margin: auto; 72 | padding: 2rem 1rem; 73 | display: flex; 74 | align-items: center; 75 | justify-content: space-between; 76 | } 77 | 78 | .nav__logo { 79 | display: flex; 80 | align-items: center; 81 | gap: 5px; 82 | } 83 | 84 | .nav__logo img { 85 | max-width: 40px; 86 | } 87 | 88 | .nav__logo span { 89 | font-size: 1.25rem; 90 | color: var(--text-dark); 91 | } 92 | 93 | .nav__links { 94 | list-style: none; 95 | display: flex; 96 | align-items: center; 97 | gap: 2rem; 98 | } 99 | 100 | .link a { 101 | padding: 5px; 102 | color: var(--text-light); 103 | } 104 | 105 | .link a:hover { 106 | color: var(--primary-color); 107 | } 108 | 109 | header { 110 | position: relative; 111 | } 112 | 113 | header::before { 114 | position: absolute; 115 | content: ""; 116 | left: -25%; 117 | bottom: 0; 118 | width: 100%; 119 | height: 100%; 120 | background-image: linear-gradient(to top, var(--primary-color), transparent); 121 | opacity: 0.2; 122 | } 123 | 124 | .header__container { 125 | padding: 0 1rem; 126 | display: grid; 127 | grid-template-columns: repeat(2, 1fr); 128 | align-items: center; 129 | } 130 | 131 | .header__content { 132 | z-index: 1; 133 | } 134 | 135 | .header__content h1 { 136 | margin-bottom: 1rem; 137 | font-size: 4rem; 138 | font-weight: 300; 139 | color: var(--text-dark); 140 | } 141 | 142 | .header__content h2 { 143 | margin-bottom: 2rem; 144 | font-size: 2rem; 145 | font-weight: 300; 146 | color: var(--text-light); 147 | } 148 | 149 | .header__image { 150 | z-index: -1; 151 | } 152 | 153 | .header__image img { 154 | max-width: 475px; 155 | margin: auto; 156 | } 157 | 158 | .why__container { 159 | display: grid; 160 | grid-template-columns: repeat(2, 1fr); 161 | align-items: center; 162 | } 163 | 164 | .why__image img { 165 | max-width: 600px; 166 | margin: auto; 167 | } 168 | 169 | .why__content .section__header { 170 | margin-bottom: 1rem; 171 | text-align: left; 172 | } 173 | 174 | .why__content p { 175 | margin-bottom: 2rem; 176 | line-height: 1.5rem; 177 | color: var(--text-light); 178 | } 179 | 180 | .why__content ul { 181 | list-style: none; 182 | } 183 | 184 | .why__content li { 185 | margin-bottom: 1.5rem; 186 | font-size: 1.2rem; 187 | color: var(--primary-color); 188 | } 189 | 190 | .hero { 191 | background-color: var(--extra-light); 192 | } 193 | 194 | .hero__container { 195 | display: grid; 196 | grid-template-columns: repeat(4, 1fr); 197 | gap: 2rem; 198 | } 199 | 200 | .hero__card span { 201 | margin-bottom: 1rem; 202 | display: inline-flex; 203 | align-items: center; 204 | justify-content: center; 205 | width: 75px; 206 | aspect-ratio: 1; 207 | background-color: var(--primary-color-dark); 208 | border-radius: 100%; 209 | } 210 | 211 | .hero__card span img { 212 | max-width: 40px; 213 | } 214 | 215 | .hero__card h4 { 216 | margin-bottom: 10px; 217 | font-size: 1.2rem; 218 | font-weight: 500; 219 | color: var(--text-dark); 220 | } 221 | 222 | .hero__card p { 223 | line-height: 1.5rem; 224 | color: var(--text-light); 225 | } 226 | 227 | .classes__grid { 228 | margin-top: 4rem; 229 | display: grid; 230 | grid-template-columns: repeat(3, 1fr); 231 | } 232 | 233 | .classes__image { 234 | position: relative; 235 | overflow: hidden; 236 | } 237 | 238 | .classes__content { 239 | position: absolute; 240 | left: 0; 241 | bottom: -100%; 242 | height: 100%; 243 | width: 100%; 244 | display: grid; 245 | place-content: center; 246 | background-image: linear-gradient(to top, var(--primary-color), transparent); 247 | transition: 0.5s; 248 | } 249 | 250 | .classes__image:hover .classes__content { 251 | bottom: 0; 252 | } 253 | 254 | .membership { 255 | background-color: var(--extra-light); 256 | } 257 | 258 | .membership__grid { 259 | margin-top: 4rem; 260 | display: grid; 261 | grid-template-columns: repeat(3, 1fr); 262 | gap: 2rem; 263 | } 264 | 265 | .membership__card { 266 | padding: 2rem; 267 | text-align: center; 268 | background-color: var(--white); 269 | box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.05); 270 | } 271 | 272 | .membership__card h4 { 273 | font-size: 1rem; 274 | font-weight: 600; 275 | margin-bottom: 1rem; 276 | color: var(--text-dark); 277 | } 278 | 279 | .membership__card h2 { 280 | margin-bottom: 1rem; 281 | font-size: 3.5rem; 282 | font-weight: 500; 283 | color: var(--primary-color); 284 | } 285 | 286 | .membership__card h2 sup { 287 | font-size: 1.5rem; 288 | } 289 | 290 | .membership__card h3 { 291 | margin-bottom: 1.5rem; 292 | font-size: 1rem; 293 | font-weight: 500; 294 | color: var(--text-light); 295 | } 296 | 297 | .membership__card p { 298 | margin-bottom: 1.5rem; 299 | color: var(--text-light); 300 | } 301 | 302 | .membership__btn { 303 | width: calc(100% - 4rem); 304 | font-size: 0.9rem; 305 | font-weight: 600; 306 | letter-spacing: 1px; 307 | border-radius: 2px; 308 | transform: translateY(calc(50% + 2rem)); 309 | } 310 | 311 | .stories__grid { 312 | margin-top: 4rem; 313 | display: grid; 314 | grid-template-columns: repeat(3, 1fr); 315 | gap: 2rem; 316 | } 317 | 318 | .stories__card { 319 | padding: 1rem; 320 | } 321 | 322 | .stories__content { 323 | position: relative; 324 | isolation: isolate; 325 | margin-bottom: 2rem; 326 | display: flex; 327 | align-items: center; 328 | gap: 1rem; 329 | } 330 | 331 | .stories__content span { 332 | padding: 7px 10px; 333 | font-size: 2rem; 334 | color: var(--white); 335 | background-color: var(--primary-color); 336 | border-radius: 100%; 337 | } 338 | 339 | .stories__content::after { 340 | position: absolute; 341 | content: ""; 342 | height: 100%; 343 | width: 2px; 344 | top: 0; 345 | left: 24px; 346 | background-color: var(--text-light); 347 | opacity: 0.1; 348 | z-index: -1; 349 | } 350 | 351 | .stories__content p { 352 | line-height: 1.5rem; 353 | color: var(--text-light); 354 | } 355 | 356 | .stories__author { 357 | display: flex; 358 | align-items: center; 359 | gap: 1rem; 360 | } 361 | 362 | .stories__author img { 363 | max-width: 100px; 364 | border-radius: 100%; 365 | } 366 | 367 | .stories__author__details h4 { 368 | margin-bottom: 5px; 369 | font-size: 1.1rem; 370 | font-weight: 500; 371 | color: var(--text-dark); 372 | } 373 | 374 | .stories__author__details h6 { 375 | font-size: 1rem; 376 | font-weight: 500; 377 | color: var(--text-light); 378 | } 379 | 380 | .banner { 381 | padding: 5rem 0; 382 | background-image: linear-gradient(to right, var(--primary-color), transparent), 383 | url("assets/46-banner.png"); 384 | background-position: center center; 385 | background-size: cover; 386 | background-repeat: no-repeat; 387 | } 388 | 389 | .banner__container { 390 | max-width: 900px; 391 | display: grid; 392 | grid-template-columns: repeat(4, 1fr); 393 | gap: 2rem; 394 | text-align: center; 395 | } 396 | 397 | .banner__card h4 { 398 | margin-bottom: 1rem; 399 | font-size: 3rem; 400 | font-weight: 500; 401 | color: var(--white); 402 | } 403 | 404 | .banner__card p { 405 | color: var(--white); 406 | } 407 | 408 | .posts { 409 | background-color: var(--extra-light); 410 | } 411 | 412 | .posts__grid { 413 | margin-top: 4rem; 414 | display: grid; 415 | grid-template-columns: repeat(3, 1fr); 416 | gap: 2rem; 417 | } 418 | 419 | .posts__card { 420 | background-color: var(--white); 421 | box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.05); 422 | } 423 | 424 | .posts__content { 425 | padding: 2rem; 426 | } 427 | 428 | .posts__date { 429 | margin-bottom: 1rem; 430 | display: flex; 431 | align-items: center; 432 | gap: 1rem; 433 | } 434 | 435 | .posts__date span { 436 | font-size: 3rem; 437 | font-weight: 300; 438 | color: var(--primary-color); 439 | } 440 | 441 | .posts__date div { 442 | color: var(--text-light); 443 | } 444 | 445 | .posts__content h4 { 446 | margin-bottom: 1rem; 447 | font-size: 1.2rem; 448 | font-weight: 500; 449 | color: var(--text-dark); 450 | } 451 | 452 | .posts__content p { 453 | line-height: 1.5rem; 454 | color: var(--text-light); 455 | } 456 | 457 | .photos__grid { 458 | margin-top: 4rem; 459 | display: grid; 460 | grid-template-columns: repeat(4, 1fr); 461 | gap: 2rem; 462 | } 463 | 464 | .footer { 465 | background-color: var(--primary-color); 466 | } 467 | 468 | .footer__container { 469 | display: grid; 470 | grid-template-columns: 1fr 2fr 1fr; 471 | gap: 2rem; 472 | } 473 | 474 | .footer__logo a { 475 | font-size: 1.5rem; 476 | font-weight: 400; 477 | color: var(--white); 478 | } 479 | 480 | .footer__col p { 481 | font-size: 1.25rem; 482 | color: var(--white); 483 | text-align: center; 484 | } 485 | 486 | .footer__socials { 487 | display: flex; 488 | align-items: center; 489 | justify-content: flex-end; 490 | gap: 1rem; 491 | } 492 | 493 | .footer__socials a { 494 | display: inline-flex; 495 | align-items: center; 496 | justify-content: center; 497 | width: 50px; 498 | aspect-ratio: 1; 499 | font-size: 1.5rem; 500 | color: var(--white); 501 | background-color: #f7ebf330; 502 | border-radius: 100%; 503 | } 504 | 505 | .footer__bar { 506 | font-size: 0.9rem; 507 | color: var(--white); 508 | text-align: center; 509 | } 510 | 511 | @media (width < 900px) { 512 | .nav__links { 513 | gap: 1rem; 514 | } 515 | 516 | header::before { 517 | left: 0; 518 | } 519 | 520 | .header__container { 521 | grid-template-columns: repeat(1, 1fr); 522 | } 523 | 524 | .header__image { 525 | grid-area: 1/1/2/2; 526 | } 527 | 528 | .header__content { 529 | padding: 5rem 0; 530 | text-align: center; 531 | } 532 | 533 | .why__container { 534 | grid-template-columns: repeat(1, 1fr); 535 | } 536 | 537 | .why__content :is(.section__header, p) { 538 | text-align: center; 539 | } 540 | 541 | .hero__container { 542 | grid-template-columns: repeat(2, 1fr); 543 | } 544 | 545 | .membership__grid { 546 | grid-template-columns: repeat(2, 1fr); 547 | row-gap: 4rem; 548 | column-gap: 1rem; 549 | } 550 | 551 | .stories__grid { 552 | grid-template-columns: repeat(2, 1fr); 553 | gap: 1rem; 554 | } 555 | 556 | .banner__container { 557 | grid-template-columns: repeat(2, 1fr); 558 | } 559 | 560 | .posts__grid { 561 | grid-template-columns: repeat(2, 1fr); 562 | gap: 1rem; 563 | } 564 | 565 | .photos__grid { 566 | gap: 1rem; 567 | } 568 | 569 | .footer__container { 570 | grid-template-columns: 1fr; 571 | text-align: center; 572 | } 573 | 574 | .footer__socials { 575 | justify-content: center; 576 | } 577 | } 578 | 579 | @media (width < 750px) { 580 | .nav__links { 581 | gap: 0.5rem; 582 | } 583 | 584 | .classes__grid { 585 | grid-template-columns: repeat(2, 1fr); 586 | } 587 | 588 | .photos__grid { 589 | grid-template-columns: repeat(2, 1fr); 590 | } 591 | } 592 | 593 | @media (width < 600px) { 594 | .nav__links { 595 | display: none; 596 | } 597 | 598 | .hero__container { 599 | grid-template-columns: repeat(1, 1fr); 600 | } 601 | 602 | .membership__grid { 603 | grid-template-columns: repeat(1, 1fr); 604 | } 605 | 606 | .stories__grid { 607 | grid-template-columns: repeat(1, 1fr); 608 | } 609 | 610 | .posts__grid { 611 | grid-template-columns: repeat(1, 1fr); 612 | } 613 | } 614 | --------------------------------------------------------------------------------