Responsive "Coming Soon" Page

Recently, I took on a challenge from Frontend Mentor to build a responsive "Coming Soon" page for a fashion store. The challenge involved creating a landing page with an email subscription form, a background image, and a design that should work well on both desktop and mobile devices. In this blog post, I’ll walk you through how I approached this challenge, the key decisions I made, and how I solved problems along the way.

Step 1: Understanding the Project

Before I dove into the coding, I took some time to understand the requirements of the project. The challenge involved creating the following:

• A hero section with a logo and a “coming soon” message.
• A form that allows users to subscribe via email.
• A responsive layout with a background image that changes according to the screen size.
• Basic email validation to ensure users input a valid email.

Step 2: Structuring the HTML

The first step was to structure the HTML. I wanted to create a clean, semantic layout with minimal divs. The overall layout would consist of two main parts:

1. The details section that includes the logo, heading, description, and the email input form.
2. The image section that contains the background image.

Here's how I structured the HTML:

<div class="coming-soon-container">
  <div class="details-container">
    <div class="logo-container">
      <img src="./images/logo.svg" alt="fashion-store-logo" />
    </div>
    <div class="details">
      <h1>
        <span class="josefin-sans-thin">We're</span><br />
        coming <br />soon
      </h1>
      <p>
        Hello fellow shoppers! We're currently building our new fashion store.
        Add your email below to stay up-to-date with announcements and our launch deals.
      </p>
      <div class="input-container">
        <input type="email" id="email-input" placeholder="Enter your email" />
        <span class="icon-span" onclick="validateEmail()">
          <img src="./images/icon-arrow.svg" alt="arrow-icon" />
        </span>
      </div>
    </div>
  </div>
  <div class="image-container">
    <img src="./images/hero-desktop.jpg" alt="fashion-store-hero-image" />
  </div>
</div>

Step 3: Styling the Layout with CSS

Now it was time to make the layout look good and responsive. For this, I relied heavily on Flexbox to control the layout of the two main sections. Flexbox helps arrange elements in both horizontal and vertical directions without having to worry about floats or positioning.

I started by styling the container to create a side-by-side layout for desktop views. On mobile, I used a media query to stack the elements vertically.

The Flexbox Layout:

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

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

Explanation

• The .coming-soon-container class uses display: flex to create a row-based layout.
• justify-content: space-between ensures that the details and image sections are spaced apart.
• On smaller screens (below 768px), I used a media query to change the direction of the layout to column, so the image section appears below the details section.

Step 4: Designing the Email Input and Arrow Icon

One of the key interactive elements of this page was the email subscription form. I wanted it to look clean and modern, so I focused on making the input field and the submit button (the arrow icon) visually appealing.

Here’s the CSS for the email input and the arrow icon:

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

.input-container input {
  width: 100%;
  padding: 10px 50px 10px 15px;
  border: 1px solid var(--desaturated-Red);
  border-radius: 25px;
  font-size: 16px;
  outline: none;
}

.input-container input::placeholder {
  color: var(--desaturated-Red);
  opacity: 0.6;
  font-size: 12px;
}

.input-container span {
  position: absolute;
  top: 50%;
  right: 1px;
  transform: translateY(-50%);
  width: 70px;
  height: 40px;
  border-radius: 28px;
  background-image: linear-gradient(135deg, hsl(0, 80%, 86%), hsl(0, 74%, 74%));
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 1;
}

Explanation:

• The .input-container class uses position: relative to position the arrow icon within the input field.
• The input field has a nice rounded border with padding and a placeholder style.
• The span tag, which wraps the arrow icon, is absolutely positioned inside the input field, centered vertically. The background uses a gradient to give it a more modern look.

Step 5: Adding a Responsive Hero Image

The hero image needed to be responsive, so I used the object-fit property to make sure it covered the container properly without distorting the image.

Here’s the CSS for the image container:

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

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

Explanation:

• The .image-container is set to a fixed width (40%), and it fills the full viewport height (100vh).
• The image inside the container uses object-fit: cover to ensure it covers the entire area while maintaining the aspect ratio.
• object-position: top ensures the top part of the image is visible, which is important for maintaining focus on the key part of the image.

Step 6: Email Validation with JavaScript

Finally, I needed to add email validation to ensure that users entered a valid email address. For this, I used a simple JavaScript function that checks if the email input matches the standard email pattern.

function validateEmail() {
  const emailInput = document.querySelector("#email-input");
  const errorMessage = document.querySelector("#error-message");

  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  if (emailRegex.test(emailInput.value)) {
    errorMessage.style.display = "none";
    alert("Email is valid!");
  } else {
    errorMessage.textContent = "Please enter a valid email address.";
    errorMessage.style.display = "block";
    emailInput.style.borderColor = "var(--soft-red)";
  }
}

document
  .getElementById("email-input")
  .addEventListener("keypress", function (e) {
    if (e.key === "Enter") {
      validateEmail();
    }
  });

Explanation:

• I used a simple regular expression to validate the email format. If the input is valid, a success message is shown; otherwise, an error message is displayed.
• The keypress event listener triggers the validation when the user presses Enter.

Conclusion

This "Coming Soon" page project was a great exercise in building a responsive, modern landing page. By using Flexbox for layout, custom styles for the email input, and ensuring the page was mobile-friendly, I was able to create a clean and functional design. The challenge was especially helpful in reinforcing my understanding of responsive design and how to implement basic form validation.

If you’re looking for a similar challenge to improve your frontend skills, I highly recommend checking out Frontend Mentor’s Coming Soon page challenge. You can visit it here.https://www.frontendmentor.io/

You can view the full code here. https://github.com/drishti1920/Frontend-Mentor-Challenges/tree/main/coming-soon-page

Happy coding!