Problem 1: Themed Hero Landing Page

Objective:

Create a landing page featuring a full-width hero section that uses a background image with a gradient overlay, prominent typography, and a call-to-action (CTA) button. Use proper box model techniques and positioning to center and emphasize key elements.

Requirements:

Background & Colors:
- Set a full-screen background image for the hero section.
- Overlay it with a semi-transparent linear gradient (e.g., from rgba(0, 0, 0, 0.5) to rgba(0, 0, 0, 0.5)).
Typography:
- Import a Google Font for your headings and body text.
- Display a centered, bold heading (e.g., “Welcome to Our Site”) using a contrasting color.
Call-to-Action Button:
- Place a prominent button (e.g., “Get Started”) that uses a gradient background and changes on hover.
- Use absolute positioning (or flexbox) to center the button within the hero.
Box Model:
- Ensure proper padding and margin on the hero content to maintain spacing and visual balance.
Responsive Design:
- Adjust the layout to remain visually appealing on different screen sizes.

Expected Outcome:

A modern, visually engaging hero section that combines a background image with gradient overlay, well-styled typography, and a centered CTA button that uses a mix of absolute positioning and box model properties.

Problem 2: Responsive Card Component with Badge

Objective:

Develop a card component that showcases a product or service. This card should use multiple color formats, custom typography, and advanced box model techniques. Add an absolutely positioned badge to emphasize “New” or “Featured.”

Requirements:

Card Layout & Box Model:
- Create a card <div> with a fixed width and padding, a border, and a subtle box-shadow.
Background & Colors:
- Use a background image combined with a radial gradient overlay on the card.
- Apply different color formats (named, hex, RGB, or HSL) for the heading, text, and badge.
Typography:
- Import two Google Fonts: one for headings (e.g., bold, uppercase) and one for body text.
Badge:
- Add a “New” badge as a child element and position it absolutely at the top-right corner of the card.
Responsive Behavior:
- Use media queries to adjust card width and font sizes on smaller screens.

Expected Outcome:

A clean, responsive card that displays a background image with a gradient overlay, uses well-paired typography, and includes a badge positioned using absolute positioning—all while correctly managing margins, padding, and borders.

Problem 3: Fixed Navigation Bar with Dropdown Menu

Objective:

Create a top navigation bar that stays fixed on the page while the content scrolls. Include a dropdown menu that appears when hovering over a menu item. Apply custom typography and color styling to ensure good contrast and readability.

Requirements:

Fixed Navigation:
- Use position: fixed; to anchor the navigation bar at the top of the viewport.
- Ensure a high z-index so it stays above the main content.
Menu & Dropdown:
- Create a horizontal list of navigation links using <nav> and <ul>.
- Implement a dropdown submenu (using a nested <ul>) that appears on hover.
- Use relative positioning for the menu container and absolute positioning for the dropdown.
Typography & Colors:
- Use a Google Font for menu text, set different font weights (bold for main items), and use contrasting colors (apply named colors, hex, or RGB values).
Box Model:
- Use padding and margins to space out the menu items and dropdown entries properly.

Expected Outcome:

A fixed top navigation bar that remains in place as the user scrolls, featuring a dropdown menu that is styled with clear typography and color contrasts, and uses both relative and absolute positioning to display submenu items.

Problem 4: Modal Popup with Contact Form

Objective:

Design a modal popup that overlays the page content. The modal should contain a contact form styled with custom typography and a gradient background. Utilize proper box model settings and positioning to center the modal and its overlay.

Requirements:

Overlay & Modal Box:
- Create a full-screen overlay <div> using position: fixed; with a semi-transparent background (e.g., rgba(0, 0, 0, 0.7)).
- Center the modal box using absolute positioning (e.g., top: 50%; left: 50%; transform: translate(-50%, -50%)) or flexbox.
Contact Form:
- Include form fields (e.g., name, email, message) with proper <label> elements.
- Add basic HTML5 validation attributes.
Typography & Colors:
- Import a Google Font for the modal text.
- Use a gradient background for the modal (e.g., linear-gradient with two complementary colors).
- Apply different color formats to headings, form labels, and input fields.
Box Model:
- Ensure the modal has proper padding and margins so that the content is not cramped.
Close Button:
- Optionally include a close button in the top-right corner of the modal, styled with a contrasting color.

Expected Outcome:

A fully functional modal popup overlaying the page, complete with a styled contact form, gradient background, and centered content that demonstrates a mix of positioning, box model management, and typography.

Problem 5: Multi-Column Layout with Fixed Sidebar

Objective:

Build a multi-column webpage layout featuring a fixed sidebar and a main content area. Use a combination of CSS positioning, box model properties, and custom typography to create a balanced and responsive design.

Requirements:

Layout Structure:
- Create a sidebar <div> that is fixed on the left side of the viewport using position: fixed; and a main content <div> that sits next to it.
- Ensure that the main content is appropriately offset to avoid overlapping with the fixed sidebar.
Box Model & Spacing:
- Apply margins, padding, and borders to both the sidebar and the main content to maintain clear separation.
Typography & Colors:
- Use different color schemes (background colors and text colors using hex, RGB, or HSL) for the sidebar and content.
- Import a Google Font for headings and body text, and adjust font sizes and weights.
Responsive Behavior:
- Ensure that on smaller screens the fixed sidebar either collapses or becomes repositioned, with media queries adjusting the layout.

Expected Outcome:

A well-organized multi-column layout with a fixed sidebar and a flowing main content area, styled using a blend of positioning, box model techniques, and custom typography that adapts responsively.

Problem 6: Interactive Gallery with Hover Effects

Objective:

Create an interactive image gallery where each gallery item is presented as a box with a background image and a hidden text overlay. When hovered, the box reveals a gradient overlay and caption using smooth CSS transitions.

Requirements:

Gallery Layout:
- Arrange several gallery item <div> elements in a grid layout using inline-block or flexbox.
Background & Hover Effects:
- Set each gallery item’s background to an image (use background-image with background-size: cover;).
- On hover, transition to display a linear gradient overlay with semi-transparent colors.
Overlay & Caption:
- Add a caption <div> inside each gallery item that is initially hidden (or with opacity 0) and then fades in on hover.
- Use absolute positioning to center the caption over the image.
Typography:
- Style the caption text with a custom font (imported from Google Fonts), ensuring good contrast with the overlay.
Box Model & Transitions:
- Ensure each item has consistent padding, margin, and borders.
- Use CSS transitions for smooth effects when hovering.

Expected Outcome:

An engaging, interactive gallery where each image box reveals an overlay and caption on hover. The design should combine background images, gradients, typography, transitions, absolute positioning, and box model styling for a dynamic user experience.

CSS Review Problems