Build a complete modern website showcasing advanced Grid and Flexbox techniques. Create a professional portfolio demonstrating layout mastery.
This capstone project brings together everything you've learned about CSS Grid and Flexbox into a stunning, professional website. You'll create a modern layout showcase that demonstrates your mastery of contemporary CSS layout techniques.
The project integrates advanced Grid layouts, sophisticated Flexbox arrangements, responsive design principles, and progressive enhancement strategies. By the end, you'll have a portfolio-worthy website that showcases both your technical skills and understanding of modern web design principles.
Plan and structure a complete modern website using professional layout techniques and contemporary design patterns.
Project Requirements:
Technical Specifications:
Layout Strategy:
1/* Page-level Grid Structure */
2.page-grid {
3 display: grid;
4 grid-template-rows: auto 1fr auto;
5 min-height: 100vh;
6 grid-template-areas:
7 "header"
8 "main"
9 "footer";
10}
11
12/* Section-level Grid Layouts */
13.hero-grid {
14 display: grid;
15 grid-template-columns: 1fr 1fr;
16 grid-template-areas:
17 "content image"
18 "stats stats";
19 gap: 3rem;
20 align-items: center;
21}
22
23/* Component-level Flexbox */
24.card-container {
25 display: flex;
26 flex-direction: column;
27 height: 100%;
28}Strategic planning ensures the project demonstrates all learned concepts while maintaining professional quality.
Implement sophisticated layout patterns that showcase mastery of modern CSS techniques.
Complex Grid Arrangements:
1/* Portfolio Masonry Grid */
2.portfolio-grid {
3 display: grid;
4 grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
5 grid-auto-rows: masonry; /* Future CSS */
6 gap: 2rem;
7 align-items: start;
8}
9
10/* Fallback for current browsers */
11@supports not (grid-auto-rows: masonry) {
12 .portfolio-grid {
13 grid-auto-rows: min-content;
14 }
15
16 .portfolio-item:nth-child(6n+1) { grid-row-end: span 2; }
17 .portfolio-item:nth-child(6n+3) { grid-row-end: span 3; }
18 .portfolio-item:nth-child(6n+5) { grid-row-end: span 2; }
19}Sophisticated Flexbox Patterns:
1/* Navigation with Perfect Centering */
2.navigation {
3 display: flex;
4 justify-content: space-between;
5 align-items: center;
6 position: sticky;
7 top: 0;
8 backdrop-filter: blur(10px);
9}
10
11/* Service Cards with Equal Heights */
12.services-grid {
13 display: grid;
14 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
15 gap: 2rem;
16}
17
18.service-card {
19 display: flex;
20 flex-direction: column;
21 padding: 2rem;
22 border-radius: 1rem;
23}
24
25.service-content {
26 flex: 1;
27 display: flex;
28 flex-direction: column;
29 justify-content: space-between;
30}Responsive Layout Strategies:
1/* Container Query Pattern (Future CSS) */
2.component {
3 container-type: inline-size;
4}
5
6@container (min-width: 400px) {
7 .card-grid {
8 grid-template-columns: repeat(2, 1fr);
9 }
10}
11
12/* Current Responsive Approach */
13.adaptive-grid {
14 display: grid;
15 grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
16 gap: clamp(1rem, 3vw, 2rem);
17}These advanced patterns demonstrate professional-level layout expertise.
Apply cutting-edge CSS features and enhancement techniques for a truly modern website.
CSS Custom Properties Integration:
1:root {
2 /* Spacing System */
3 --space-xs: clamp(0.5rem, 2vw, 0.75rem);
4 --space-sm: clamp(0.75rem, 3vw, 1rem);
5 --space-md: clamp(1rem, 4vw, 1.5rem);
6 --space-lg: clamp(1.5rem, 5vw, 2rem);
7 --space-xl: clamp(2rem, 8vw, 4rem);
8
9 /* Grid System */
10 --grid-max-width: 1400px;
11 --grid-gutter: var(--space-md);
12 --grid-margin: var(--space-sm);
13
14 /* Component Sizing */
15 --card-min-width: min(100%, 320px);
16 --card-aspect-ratio: 4 / 3;
17}
18
19/* Fluid Grid System */
20.container {
21 width: min(var(--grid-max-width), 100% - var(--grid-margin) * 2);
22 margin-inline: auto;
23}Advanced Responsive Techniques:
1/* Intrinsic Web Design */
2.auto-grid {
3 --min-column-width: 20rem;
4 display: grid;
5 grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-width), 100%), 1fr));
6 gap: var(--grid-gutter);
7}
8
9/* Fluid Typography */
10.heading {
11 font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
12 line-height: calc(2px + 2ex + 2px);
13}
14
15/* Modern Aspect Ratios */
16.media-container {
17 aspect-ratio: 16 / 9;
18 overflow: hidden;
19 border-radius: 0.75rem;
20}
21
22.media-container img {
23 width: 100%;
24 height: 100%;
25 object-fit: cover;
26}Performance and Accessibility:
1/* Reduced Motion Respect */
2@media (prefers-reduced-motion: reduce) {
3 *,
4 *::before,
5 *::after {
6 animation-duration: 0.01ms !important;
7 animation-iteration-count: 1 !important;
8 transition-duration: 0.01ms !important;
9 }
10}
11
12/* High Contrast Support */
13@media (prefers-contrast: high) {
14 .card {
15 border: 2px solid currentColor;
16 }
17}
18
19/* Focus Management */
20.skip-link {
21 position: absolute;
22 top: -40px;
23 left: 6px;
24 background: var(--color-primary);
25 color: white;
26 padding: 8px;
27 z-index: 100;
28 text-decoration: none;
29 border-radius: 4px;
30}
31
32.skip-link:focus {
33 top: 6px;
34}These modern techniques create truly professional, accessible, and future-ready websites.
A comprehensive modern website demonstrating advanced Grid and Flexbox techniques with professional design patterns.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Modern Layout Showcase - Advanced CSS Grid & Flexbox</title>
7 <meta name="description" content="Showcase of modern CSS layout techniques using Grid and Flexbox">
8 <style>
9 /* =============================================
10 CSS Custom Properties System
11 ============================================= */
12 :root {
13 /* Color System */
14 --color-primary: #3b82f6;
15 --color-primary-dark: #1e40af;
16 --color-secondary: #8b5cf6;
17 --color-accent: #f59e0b;
18 --color-text: #1f2937;
19 --color-text-light: #6b7280;
20 --color-bg: #ffffff;
21 --color-bg-alt: #f9fafb;
22 --color-border: #e5e7eb;
23
24 /* Spacing System */
25 --space-xs: clamp(0.5rem, 2vw, 0.75rem);
26 --space-sm: clamp(0.75rem, 3vw, 1rem);
27 --space-md: clamp(1rem, 4vw, 1.5rem);
28 --space-lg: clamp(1.5rem, 5vw, 2rem);
29 --space-xl: clamp(2rem, 8vw, 4rem);
30
31 /* Typography Scale */
32 --font-size-sm: clamp(0.875rem, 2vw, 1rem);
33 --font-size-base: clamp(1rem, 2.5vw, 1.125rem);
34 --font-size-lg: clamp(1.125rem, 3vw, 1.25rem);
35 --font-size-xl: clamp(1.25rem, 4vw, 1.5rem);
36 --font-size-2xl: clamp(1.5rem, 5vw, 2rem);
37 --font-size-3xl: clamp(2rem, 6vw, 3rem);
38
39 /* Layout System */
40 --container-max-width: 1400px;
41 --container-padding: var(--space-md);
42 --grid-gap: var(--space-lg);
43 --card-border-radius: 1rem;
44
45 /* Animation */
46 --transition-fast: 0.15s ease-out;
47 --transition-base: 0.25s ease-out;
48 --transition-slow: 0.4s ease-out;
49 }
50
51 /* =============================================
52 Modern CSS Reset
53 ============================================= */
54 *,
55 *::before,
56 *::after {
57 box-sizing: border-box;
58 }
59
60 html {
61 -webkit-text-size-adjust: 100%;
62 scroll-behavior: smooth;
63 }
64
65 body {
66 margin: 0;
67 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
68 font-size: var(--font-size-base);
69 line-height: 1.6;
70 color: var(--color-text);
71 background-color: var(--color-bg);
72 overflow-x: hidden;
73 }
74
75 img, picture, video, canvas, svg {
76 display: block;
77 max-width: 100%;
78 }
79
80 input, button, textarea, select {
81 font: inherit;
82 }
83
84 /* =============================================
85 Layout Components
86 ============================================= */
87
88 /* Skip Navigation */
89 .skip-link {
90 position: absolute;
91 top: -3rem;
92 left: var(--space-sm);
93 background: var(--color-primary);
94 color: white;
95 padding: var(--space-xs) var(--space-sm);
96 border-radius: 0.25rem;
97 text-decoration: none;
98 z-index: 1000;
99 transition: var(--transition-fast);
100 }
101
102 .skip-link:focus {
103 top: var(--space-sm);
104 }
105
106 /* Container System */
107 .container {
108 width: min(var(--container-max-width), 100% - var(--container-padding) * 2);
109 margin-inline: auto;
110 }
111
112 /* Page Grid Layout */
113 .page {
114 display: grid;
115 grid-template-rows: auto 1fr auto;
116 min-height: 100vh;
117 grid-template-areas:
118 "header"
119 "main"
120 "footer";
121 }
122
123 /* =============================================
124 Header & Navigation
125 ============================================= */
126 .header {
127 grid-area: header;
128 position: sticky;
129 top: 0;
130 background: rgba(255, 255, 255, 0.95);
131 backdrop-filter: blur(10px);
132 border-bottom: 1px solid var(--color-border);
133 z-index: 100;
134 }
135
136 .header-content {
137 display: flex;
138 justify-content: space-between;
139 align-items: center;
140 padding: var(--space-md) 0;
141 }
142
143 .logo {
144 font-size: var(--font-size-xl);
145 font-weight: 700;
146 color: var(--color-primary);
147 text-decoration: none;
148 }
149
150 .navigation {
151 display: flex;
152 list-style: none;
153 margin: 0;
154 padding: 0;
155 gap: var(--space-lg);
156 }
157
158 .navigation a {
159 color: var(--color-text);
160 text-decoration: none;
161 font-weight: 500;
162 transition: var(--transition-base);
163 position: relative;
164 }
165
166 .navigation a::after {
167 content: '';
168 position: absolute;
169 bottom: -0.25rem;
170 left: 0;
171 width: 0;
172 height: 2px;
173 background: var(--color-primary);
174 transition: var(--transition-base);
175 }
176
177 .navigation a:hover::after {
178 width: 100%;
179 }
180
181 /* Mobile Navigation */
182 .nav-toggle {
183 display: none;
184 background: none;
185 border: none;
186 font-size: 1.5rem;
187 cursor: pointer;
188 }
189
190 /* =============================================
191 Main Content Area
192 ============================================= */
193 .main {
194 grid-area: main;
195 }
196
197 /* Hero Section */
198 .hero {
199 padding: var(--space-xl) 0;
200 background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
201 }
202
203 .hero-grid {
204 display: grid;
205 grid-template-columns: 1fr 1fr;
206 gap: var(--grid-gap);
207 align-items: center;
208 min-height: 60vh;
209 }
210
211 .hero-content h1 {
212 font-size: var(--font-size-3xl);
213 font-weight: 800;
214 line-height: 1.2;
215 margin: 0 0 var(--space-md);
216 background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
217 -webkit-background-clip: text;
218 -webkit-text-fill-color: transparent;
219 background-clip: text;
220 }
221
222 .hero-content p {
223 font-size: var(--font-size-lg);
224 color: var(--color-text-light);
225 margin-bottom: var(--space-lg);
226 }
227
228 .hero-actions {
229 display: flex;
230 gap: var(--space-md);
231 flex-wrap: wrap;
232 }
233
234 .hero-visual {
235 position: relative;
236 display: flex;
237 justify-content: center;
238 align-items: center;
239 }
240
241 .hero-graphic {
242 width: 100%;
243 max-width: 500px;
244 aspect-ratio: 1;
245 background: linear-gradient(45deg, var(--color-primary), var(--color-secondary), var(--color-accent));
246 border-radius: 2rem;
247 display: flex;
248 align-items: center;
249 justify-content: center;
250 color: white;
251 font-size: 2rem;
252 font-weight: 700;
253 animation: float 6s ease-in-out infinite;
254 }
255
256 @keyframes float {
257 0%, 100% { transform: translateY(0px); }
258 50% { transform: translateY(-20px); }
259 }
260
261 /* Stats Section */
262 .stats {
263 padding: var(--space-xl) 0;
264 background: var(--color-bg);
265 }
266
267 .stats-grid {
268 display: grid;
269 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
270 gap: var(--space-lg);
271 }
272
273 .stat-item {
274 text-align: center;
275 padding: var(--space-lg);
276 }
277
278 .stat-number {
279 font-size: var(--font-size-3xl);
280 font-weight: 800;
281 color: var(--color-primary);
282 display: block;
283 margin-bottom: var(--space-xs);
284 }
285
286 .stat-label {
287 color: var(--color-text-light);
288 font-weight: 500;
289 }
290
291 /* Portfolio Section */
292 .portfolio {
293 padding: var(--space-xl) 0;
294 background: var(--color-bg-alt);
295 }
296
297 .section-title {
298 text-align: center;
299 font-size: var(--font-size-2xl);
300 font-weight: 700;
301 margin-bottom: var(--space-xl);
302 color: var(--color-text);
303 }
304
305 .portfolio-grid {
306 display: grid;
307 grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
308 gap: var(--space-lg);
309 grid-auto-rows: min-content;
310 }
311
312 .portfolio-item {
313 background: var(--color-bg);
314 border-radius: var(--card-border-radius);
315 overflow: hidden;
316 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
317 transition: var(--transition-base);
318 }
319
320 .portfolio-item:hover {
321 transform: translateY(-4px);
322 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
323 }
324
325 /* Staggered heights for masonry effect */
326 .portfolio-item:nth-child(6n+1) { grid-row-end: span 2; }
327 .portfolio-item:nth-child(6n+3) { grid-row-end: span 3; }
328 .portfolio-item:nth-child(6n+5) { grid-row-end: span 2; }
329
330 .portfolio-image {
331 aspect-ratio: 16 / 10;
332 background: linear-gradient(45deg, var(--color-primary), var(--color-secondary));
333 display: flex;
334 align-items: center;
335 justify-content: center;
336 color: white;
337 font-size: var(--font-size-xl);
338 font-weight: 600;
339 }
340
341 .portfolio-content {
342 padding: var(--space-lg);
343 }
344
345 .portfolio-title {
346 font-size: var(--font-size-lg);
347 font-weight: 600;
348 margin-bottom: var(--space-sm);
349 }
350
351 .portfolio-description {
352 color: var(--color-text-light);
353 line-height: 1.6;
354 }
355
356 /* Services Section */
357 .services {
358 padding: var(--space-xl) 0;
359 background: var(--color-bg);
360 }
361
362 .services-grid {
363 display: grid;
364 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
365 gap: var(--space-lg);
366 }
367
368 .service-card {
369 display: flex;
370 flex-direction: column;
371 background: var(--color-bg-alt);
372 padding: var(--space-xl);
373 border-radius: var(--card-border-radius);
374 text-align: center;
375 transition: var(--transition-base);
376 }
377
378 .service-card:hover {
379 background: var(--color-bg);
380 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
381 }
382
383 .service-icon {
384 font-size: 3rem;
385 margin-bottom: var(--space-md);
386 }
387
388 .service-title {
389 font-size: var(--font-size-xl);
390 font-weight: 600;
391 margin-bottom: var(--space-md);
392 }
393
394 .service-description {
395 color: var(--color-text-light);
396 flex: 1;
397 }
398
399 /* =============================================
400 Buttons & Interactive Elements
401 ============================================= */
402 .button {
403 display: inline-flex;
404 align-items: center;
405 justify-content: center;
406 padding: var(--space-sm) var(--space-lg);
407 border: none;
408 border-radius: 0.5rem;
409 font-weight: 600;
410 text-decoration: none;
411 transition: var(--transition-base);
412 cursor: pointer;
413 gap: var(--space-xs);
414 }
415
416 .button-primary {
417 background: var(--color-primary);
418 color: white;
419 }
420
421 .button-primary:hover {
422 background: var(--color-primary-dark);
423 transform: translateY(-1px);
424 }
425
426 .button-secondary {
427 background: transparent;
428 color: var(--color-primary);
429 border: 2px solid var(--color-primary);
430 }
431
432 .button-secondary:hover {
433 background: var(--color-primary);
434 color: white;
435 }
436
437 /* =============================================
438 Footer
439 ============================================= */
440 .footer {
441 grid-area: footer;
442 background: var(--color-text);
443 color: var(--color-bg-alt);
444 padding: var(--space-xl) 0;
445 text-align: center;
446 }
447
448 /* =============================================
449 Responsive Design
450 ============================================= */
451 @media (max-width: 1024px) {
452 .hero-grid {
453 grid-template-columns: 1fr;
454 gap: var(--space-lg);
455 text-align: center;
456 }
457
458 .portfolio-grid {
459 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
460 }
461
462 /* Reset masonry effect on tablets */
463 .portfolio-item:nth-child(6n+1) { grid-row-end: auto; }
464 .portfolio-item:nth-child(6n+3) { grid-row-end: auto; }
465 .portfolio-item:nth-child(6n+5) { grid-row-end: auto; }
466 }
467
468 @media (max-width: 768px) {
469 .nav-toggle {
470 display: block;
471 }
472
473 .navigation {
474 position: absolute;
475 top: 100%;
476 left: 0;
477 right: 0;
478 background: white;
479 flex-direction: column;
480 padding: var(--space-md);
481 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
482 transform: translateY(-100%);
483 opacity: 0;
484 visibility: hidden;
485 transition: var(--transition-base);
486 }
487
488 .navigation.open {
489 transform: translateY(0);
490 opacity: 1;
491 visibility: visible;
492 }
493
494 .stats-grid {
495 grid-template-columns: repeat(2, 1fr);
496 }
497
498 .portfolio-grid,
499 .services-grid {
500 grid-template-columns: 1fr;
501 }
502 }
503
504 @media (max-width: 480px) {
505 .hero-actions {
506 flex-direction: column;
507 }
508
509 .stats-grid {
510 grid-template-columns: 1fr;
511 }
512
513 .button {
514 width: 100%;
515 }
516 }
517
518 /* =============================================
519 Accessibility & Performance
520 ============================================= */
521 @media (prefers-reduced-motion: reduce) {
522 *,
523 *::before,
524 *::after {
525 animation-duration: 0.01ms !important;
526 animation-iteration-count: 1 !important;
527 transition-duration: 0.01ms !important;
528 }
529 }
530
531 @media (prefers-contrast: high) {
532 .portfolio-item,
533 .service-card {
534 border: 2px solid var(--color-text);
535 }
536 }
537
538 /* Focus styles */
539 :focus-visible {
540 outline: 2px solid var(--color-primary);
541 outline-offset: 2px;
542 }
543 </style>
544</head>
545<body>
546 <a href="#main-content" class="skip-link">Skip to main content</a>
547
548 <div class="page">
549 <!-- Header -->
550 <header class="header">
551 <div class="container">
552 <div class="header-content">
553 <a href="#" class="logo">ModernLayout</a>
554 <button class="nav-toggle" aria-label="Toggle navigation">☰</button>
555 <nav class="navigation" id="navigation">
556 <a href="#home">Home</a>
557 <a href="#portfolio">Portfolio</a>
558 <a href="#services">Services</a>
559 <a href="#about">About</a>
560 <a href="#contact">Contact</a>
561 </nav>
562 </div>
563 </div>
564 </header>
565
566 <!-- Main Content -->
567 <main class="main" id="main-content">
568 <!-- Hero Section -->
569 <section class="hero" id="home">
570 <div class="container">
571 <div class="hero-grid">
572 <div class="hero-content">
573 <h1>Modern CSS Layout Mastery</h1>
574 <p>Showcasing advanced Grid and Flexbox techniques for professional web development. Experience the future of CSS layout design.</p>
575 <div class="hero-actions">
576 <a href="#portfolio" class="button button-primary">View Portfolio</a>
577 <a href="#services" class="button button-secondary">Learn More</a>
578 </div>
579 </div>
580 <div class="hero-visual">
581 <div class="hero-graphic">
582 CSS Grid + Flexbox
583 </div>
584 </div>
585 </div>
586 </div>
587 </section>
588
589 <!-- Stats Section -->
590 <section class="stats">
591 <div class="container">
592 <div class="stats-grid">
593 <div class="stat-item">
594 <span class="stat-number">100%</span>
595 <span class="stat-label">Modern CSS</span>
596 </div>
597 <div class="stat-item">
598 <span class="stat-number">10+</span>
599 <span class="stat-label">Layout Techniques</span>
600 </div>
601 <div class="stat-item">
602 <span class="stat-number">95%</span>
603 <span class="stat-label">Browser Support</span>
604 </div>
605 <div class="stat-item">
606 <span class="stat-number">0</span>
607 <span class="stat-label">JavaScript Required</span>
608 </div>
609 </div>
610 </div>
611 </section>
612
613 <!-- Portfolio Section -->
614 <section class="portfolio" id="portfolio">
615 <div class="container">
616 <h2 class="section-title">Layout Showcase</h2>
617 <div class="portfolio-grid">
618 <article class="portfolio-item">
619 <div class="portfolio-image">Holy Grail Layout</div>
620 <div class="portfolio-content">
621 <h3 class="portfolio-title">Advanced Grid Layout</h3>
622 <p class="portfolio-description">Semantic, flexible three-column layout with header and footer using CSS Grid template areas.</p>
623 </div>
624 </article>
625
626 <article class="portfolio-item">
627 <div class="portfolio-image">Masonry Grid</div>
628 <div class="portfolio-content">
629 <h3 class="portfolio-title">Masonry Layout System</h3>
630 <p class="portfolio-description">Pinterest-style layout with varying heights creating organic, visually appealing arrangements.</p>
631 </div>
632 </article>
633
634 <article class="portfolio-item">
635 <div class="portfolio-image">Flex Cards</div>
636 <div class="portfolio-content">
637 <h3 class="portfolio-title">Flexible Card System</h3>
638 <p class="portfolio-description">Equal-height cards with flexible content using advanced Flexbox techniques.</p>
639 </div>
640 </article>
641
642 <article class="portfolio-item">
643 <div class="portfolio-image">Auto-Grid</div>
644 <div class="portfolio-content">
645 <h3 class="portfolio-title">Auto-Responsive Grid</h3>
646 <p class="portfolio-description">Self-adapting grid using auto-fit and minmax for perfect responsive behavior without media queries.</p>
647 </div>
648 </article>
649
650 <article class="portfolio-item">
651 <div class="portfolio-image">Complex Layout</div>
652 <div class="portfolio-content">
653 <h3 class="portfolio-title">Complex Layout Pattern</h3>
654 <p class="portfolio-description">Sophisticated multi-section layout combining Grid and Flexbox for maximum flexibility.</p>
655 </div>
656 </article>
657
658 <article class="portfolio-item">
659 <div class="portfolio-image">Mobile-First</div>
660 <div class="portfolio-content">
661 <h3 class="portfolio-title">Mobile-First Design</h3>
662 <p class="portfolio-description">Progressive enhancement approach ensuring optimal experience across all devices.</p>
663 </div>
664 </article>
665 </div>
666 </div>
667 </section>
668
669 <!-- Services Section -->
670 <section class="services" id="services">
671 <div class="container">
672 <h2 class="section-title">Layout Techniques</h2>
673 <div class="services-grid">
674 <div class="service-card">
675 <div class="service-icon">🏗️</div>
676 <h3 class="service-title">CSS Grid Mastery</h3>
677 <p class="service-description">Two-dimensional layouts with precise control over rows and columns. Perfect for complex page structures and component layouts.</p>
678 </div>
679
680 <div class="service-card">
681 <div class="service-icon">🤸</div>
682 <h3 class="service-title">Flexbox Expertise</h3>
683 <p class="service-description">One-dimensional layouts with perfect alignment capabilities. Ideal for navigation bars, card layouts, and component arrangements.</p>
684 </div>
685
686 <div class="service-card">
687 <div class="service-icon">📱</div>
688 <h3 class="service-title">Responsive Design</h3>
689 <p class="service-description">Mobile-first approach with progressive enhancement. Layouts that work beautifully across all screen sizes and devices.</p>
690 </div>
691
692 <div class="service-card">
693 <div class="service-icon">⚡</div>
694 <h3 class="service-title">Performance Optimization</h3>
695 <p class="service-description">Efficient CSS with minimal overhead. Fast-loading layouts that maintain visual appeal without sacrificing performance.</p>
696 </div>
697
698 <div class="service-card">
699 <div class="service-icon">♿</div>
700 <h3 class="service-title">Accessibility Focus</h3>
701 <p class="service-description">Inclusive design principles with proper focus management, screen reader support, and reduced motion preferences.</p>
702 </div>
703
704 <div class="service-card">
705 <div class="service-icon">🌐</div>
706 <h3 class="service-title">Cross-Browser Support</h3>
707 <p class="service-description">Progressive enhancement with fallback strategies. Ensuring consistent experiences across all browser environments.</p>
708 </div>
709 </div>
710 </div>
711 </section>
712 </main>
713
714 <!-- Footer -->
715 <footer class="footer">
716 <div class="container">
717 <p>© 2024 Modern Layout Showcase • Demonstrating advanced CSS Grid & Flexbox techniques</p>
718 <p style="margin-top: var(--space-sm); opacity: 0.8;">Built with semantic HTML, progressive enhancement, and modern CSS best practices</p>
719 </div>
720 </footer>
721 </div>
722
723 <script>
724 // Navigation toggle for mobile
725 document.addEventListener('DOMContentLoaded', function() {
726 const navToggle = document.querySelector('.nav-toggle');
727 const navigation = document.getElementById('navigation');
728
729 navToggle.addEventListener('click', function() {
730 navigation.classList.toggle('open');
731
732 // Update ARIA attributes
733 const isOpen = navigation.classList.contains('open');
734 navToggle.setAttribute('aria-expanded', isOpen);
735 navToggle.setAttribute('aria-label', isOpen ? 'Close navigation' : 'Open navigation');
736 });
737
738 // Close navigation when clicking on a link
739 navigation.addEventListener('click', function(e) {
740 if (e.target.tagName === 'A') {
741 navigation.classList.remove('open');
742 navToggle.setAttribute('aria-expanded', 'false');
743 }
744 });
745
746 // Smooth scrolling for anchor links
747 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
748 anchor.addEventListener('click', function (e) {
749 e.preventDefault();
750 const target = document.querySelector(this.getAttribute('href'));
751 if (target) {
752 target.scrollIntoView({
753 behavior: 'smooth',
754 block: 'start'
755 });
756 }
757 });
758 });
759
760 // Add scroll-based header styling
761 let lastScrollY = window.scrollY;
762 window.addEventListener('scroll', function() {
763 const header = document.querySelector('.header');
764 const currentScrollY = window.scrollY;
765
766 if (currentScrollY > 100) {
767 header.style.background = 'rgba(255, 255, 255, 0.95)';
768 header.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)';
769 } else {
770 header.style.background = 'rgba(255, 255, 255, 0.95)';
771 header.style.boxShadow = 'none';
772 }
773
774 lastScrollY = currentScrollY;
775 });
776
777 // Intersection Observer for animations
778 const observerOptions = {
779 threshold: 0.1,
780 rootMargin: '0px 0px -50px 0px'
781 };
782
783 const observer = new IntersectionObserver((entries) => {
784 entries.forEach(entry => {
785 if (entry.isIntersecting) {
786 entry.target.style.opacity = '1';
787 entry.target.style.transform = 'translateY(0)';
788 }
789 });
790 }, observerOptions);
791
792 // Observe portfolio items for scroll animations
793 document.querySelectorAll('.portfolio-item, .service-card').forEach(item => {
794 item.style.opacity = '0';
795 item.style.transform = 'translateY(20px)';
796 item.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
797 observer.observe(item);
798 });
799 });
800 </script>
801</body>
802</html>This comprehensive showcase demonstrates mastery of modern CSS layout techniques:
🏗️ Advanced Architecture:
📱 Responsive Excellence:
🎨 Modern CSS Features:
♿ Professional Standards:
⚡ Performance & Compatibility:
This project represents professional-level layout expertise ready for production use.
🎉 Congratulations! You've completed the CSS Grid & Flexbox course and built a stunning showcase website. You now have mastery over the most powerful layout systems in modern CSS and can confidently create professional, responsive layouts for any project.
What's Next?
Your showcase website demonstrates professional-level CSS skills that are highly valued in the industry. Keep building, experimenting, and pushing the boundaries of what's possible with modern CSS! 🚀
Your progress is saved in this browser, on this device only.