Project 2: Simple School Club Landing Page

In Project 1, we built an individual component: a student profile card. 📱

Now, we are taking the next leap: building an entire Full-Page Website Layout!

In this project, you will design and code a complete School Coding & Robotics Club Landing Page featuring:

1. 1
   A clean brand header with navigational links
2. 2
   An eye-catching Hero Banner with primary and secondary call-to-action buttons
3. 3
   An urgent announcement alert strip with an accent border
4. 4
   A 3-Column Feature Cards Section powered by Flexbox
5. 5
   A dark, modern website footer

Page Architecture & Wireframe 📐

Here is the blueprint of our landing page:

+-------------------------------------------------------------------------+
| [HEADER & NAVBAR]                                                       |
| Logo: DPS Coding Club                 Links: [ About ] [ Projects ] [ Join ]
+-------------------------------------------------------------------------+
| [HERO SECTION (Navy Gradient)]                                          |
|                                                                         |
|            Ignite Your Passion for Code & Robotics 🤖                   |
|      Learn Python, build smart Arduino robots, and compete              |
|              in national inter-school hackathons!                       |
|                                                                         |
|           [ Join the Club (CTA) ]     [ View Projects ]                 |
+-------------------------------------------------------------------------+
| [ALERT STRIP: Upcoming Hackathon Announcement (Left Accent Border)]     |
+-------------------------------------------------------------------------+
| [3-COLUMN FEATURE CARDS (Flexbox with Gap)]                             |
| +---------------------+  +---------------------+  +-------------------+ |
| | 🐍 Python & Web     |  | 🤖 Robotics & IoT   |  | 🏆 Olympiads      | |
| | Learn HTML5 & CSS3  |  | Sensors & Circuits  |  | Win State Trophies| |
| +---------------------+  +---------------------+  +-------------------+ |
+-------------------------------------------------------------------------+
| [FOOTER: Copyright & Social Links]                                      |
+-------------------------------------------------------------------------+

Key CSS Concepts Applied

1. 1
   The Container Pattern:

This prevents content from stretching awkwardly to the extreme edges on wide desktop monitors!

1. 1
   Hero Section Styling: Deep linear gradient (linear-gradient(135deg, #0f172a, #1e3a8a)), white contrasting text, and spacious vertical padding.
2. 2
   Accent Left Border Alert: border-left: 6px solid #2563eb; with a soft tinted background.
3. 3
   Flexbox 3-Card Grid: display: flex; gap: 24px; with flex: 1; so all 3 cards match heights and share width equally.
4. 4
   Interactive Card Hover: Smooth lift with transform: translateY(-5px); and elevation shadow.

Complete Project Code

Create a file named school-club-landing-page.html in your editor and paste the following complete code:

Architecture Breakdown: What Makes It Professional?

1. 1
   The Container Pattern: Notice how .container is reused inside the header, hero, alert strip, features, and footer. It enforces consistent alignment across the entire page.
2. 2
   The Floating Alert Box: Setting margin-top: -25px; and position: relative; z-index: 10; pulls the white alert strip partially over the bottom of the navy hero banner, giving depth and layering!
3. 3
   Flexbox 3-Card Grid: .features-grid { display: flex; gap: 24px; } guarantees equal gutters between the cards without requiring fragile column percentages or floats.

Multiple Choice Questions

1. What is the main purpose of the .container { max-width: 1100px; margin: 0 auto; } pattern?

A. To prevent web content from stretching uncontrollably across ultra-wide monitors and center it neatly on the screen B. To delete all HTML headings C. To force the browser into full-screen mode D. To download Google Fonts automatically Answer: A Explanation: The container pattern restricts content to a maximum comfortable reading width (e.g. 1100px) and centers the layout using margin: 0 auto;.

2. How is the announcement alert box given a stylish colored stripe on its left side?

A. Using border-left: 6px solid #2563eb; B. By adding a blue image C. By typing a blue pipe symbol | D. Using text-decoration: left-stripe; Answer: A Explanation: The single-sided border property border-left creates a solid accent stripe on the left edge of alert boxes and callouts.

3. Which Flexbox property and value applied to .features-grid creates equal 24px spaces between the three feature cards?

A. space: 24px; B. gap: 24px; C. margin-between: 24px; D. padding-all: 24px; Answer: B Explanation: The gap property cleanly defines gutters between flex items along both main and cross axes.

4. What CSS technique pulls the alert box upward so that it partially overlaps the bottom edge of the hero banner?

A. position: fixed; B. A negative margin (margin-top: -25px;) combined with position: relative; C. padding-top: -25px; D. border-top: -25px; Answer: B Explanation: Negative margins pull an element in the specified direction. Combining margin-top: -25px with position: relative creates a visually appealing overlap.

5. Why do all three feature cards have equal height in this layout?

A. Because they each have a fixed height: 300px; B. Because flex items default to align-items: stretch;, stretching all sibling cards to match the height of the tallest card in the row C. Because all cards have the exact same number of letters D. Because HTML tables were used Answer: B Explanation: In Flexbox, the default value of align-items is stretch, ensuring that all flex items in a row automatically match heights.

Practice Challenge (Try It Yourself)

1. 1
   Open school-club-landing-page.html in your browser and resize the window to see how it responds.
2. 2
   Customize the hero heading and subtitle for your own school or sports club.
3. 3
   Add a fourth card to the .features-grid (for example, "Game Design & Unity") and observe how Flexbox automatically adapts the layout! 🎯