Building a Responsive 'Coming Soon' Page

I recently tackled a Frontend Mentor challenge: crafting a responsive "Coming Soon" landing page for a fashion retailer. The brief called for an email subscription form, a captivating background image, and seamless responsiveness across desktop and mobile. This post details my approach, key decisions, and problem-solving strategies.

Phase 1: Project Deconstruction

Before coding, I meticulously analyzed the project requirements:

• A hero section showcasing the logo and "Coming Soon" message.
• An email subscription form for user sign-ups.
• A responsive layout with a background image dynamically adapting to screen size.
• Basic email validation to ensure accurate email input.

Phase 2: HTML Structure

I prioritized a clean, semantic HTML structure with minimal divs. The layout comprised two key sections:

1. Details Section: Housing the logo, headline, description, and email input form.
2. Image Section: Displaying the background image.

My HTML structure:

<div class="coming-soon-container">
  <!-- Details Section -->
  <div class="details">
    <!-- Logo, Heading, Description, Form -->
  </div>
  <!-- Image Section -->
  <div class="image-container">
    <img src="/static/imghwm/default1.png"  data-src="..."  class="lazy" alt="Coming Soon Image">
  </div>
</div>

Phase 3: CSS Styling and Responsiveness

Flexbox was instrumental in achieving a visually appealing and responsive layout. It streamlined the arrangement of elements both horizontally (desktop) and vertically (mobile).

Initially, the .coming-soon-container used display: flex for a side-by-side desktop layout. A media query (@media (max-width: 768px)) switched the flex-direction to column-reverse for mobile, placing the image below the details.

Flexbox CSS:

.coming-soon-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 768px) {
  .coming-soon-container {
    flex-direction: column-reverse;
  }
}

Phase 4: Email Input and Arrow Icon Design

The email form was designed for a clean, modern aesthetic. The input field and submit button (an arrow icon) were styled for visual appeal.

CSS for Input and Icon:

.input-container {
  position: relative;
  width: 385px;
}

/* ... (input and span styles) ... */

Phase 5: Responsive Hero Image

The object-fit property ensured the hero image scaled responsively without distortion.

CSS for Image Container:

.image-container {
  width: 40%;
  height: 100vh;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

Phase 6: JavaScript Email Validation

Client-side email validation was implemented using JavaScript to verify email format. A regular expression checked the input against a standard email pattern.

JavaScript Validation Function:

function validateEmail() {
  // ... (validation logic) ...
}

Conclusion

This "Coming Soon" page project honed my responsive design and form validation skills. Utilizing Flexbox for layout, custom styling, and mobile-first principles resulted in a clean and functional design. I highly recommend Frontend Mentor's challenges for sharpening frontend development skills. The complete code is available on GitHub: GitHub Link

The above is the detailed content of Building a Responsive 'Coming Soon' Page. For more information, please follow other related articles on the PHP Chinese website!