Coming Soon | UI Design To HTML, CSS | Blur Filter | Linear Gradient

Sep 22, 2024 | 0 comments

In this tutorial, we’ll walk through building a “Coming Soon” page using HTML and CSS step by step. This is perfect for beginners looking to understand how HTML and CSS work together to create beautiful designs.

Here’s a preview of what we will be creating: a coming soon page for theuicode.com with a modern design and a notification sign-up form.

Table of Contents

  1. HTML Structure
  2. Styling with CSS
  3. Container Layout
  4. Background and Box Styling
  5. Adding Text and Titles
  6. Circle and Glow Effect
  7. Notification Section
  8. Input and Button Styling
  9. Final Thoughts

1. HTML Structure

HTML (HyperText Markup Language) forms the backbone of any webpage. Let’s first break down the structure.

Code:

<!DOCTYPE html>
<html lang=“en”>
<head>
  <meta charset=“UTF-8”>
  <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
  <title>Coming Soon | theuicode.com</title>
  <link rel=“stylesheet” href=“style.css”>
</head>
<body>
  <div class=“container”>
    <div class=“bg”>
      <h3 class=“six-caps-regular small-title”>SINGULARITY</h3>
      <div class=“circle-row”>
        <div class=“circle-glow”></div>
        <div class=“circle”></div>
        <h1 class=“nuto-sans-regular title”>COMING SOON</h1>
      </div>
      <div class=“notify-section”>
        <h1 class=“nuto-sans-regular notify-label”>GET NOTIFIED WHEN IT’S READY</h1>
        <div class=“notify-action”>
          <input type=“text” class=“email” placeholder=“ENTER YOUR EMAIL”>
          <button class=“notify-btn”>NOTIFY ME</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Explanation:

  • DOCTYPE: Declares the document type, in this case, HTML5.
  • <html lang="en">: The opening tag of the HTML document, specifying that the language is English.
  • <meta charset="UTF-8">: Ensures the page uses the UTF-8 character encoding.
  • <meta name="viewport">: Makes the page responsive, adjusting its size to fit different devices.
  • <link rel="stylesheet" href="style.css">: Links to an external CSS file named style.css, where all our styling will reside.
  • <div class="container">: A container div that will hold all the content.
  • <div class="bg">: Another div, which acts as the background for the “Coming Soon” section.
  • <h3 class="six-caps-regular small-title">SINGULARITY</h3>: This is the small title in uppercase letters.
  • <div class="circle-row">: This div contains the glowing circle and the text “COMING SOON”.
  • <div class="notify-section">: This div contains the notification sign-up section with an email input and button.

2. Styling with CSS

The next step is to style the page using CSS (Cascading Style Sheets). Here’s the linked CSS code:

@import url(‘https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap’);
@import url(‘https://fonts.googleapis.com/css2?family=Six+Caps&display=swap’);

We import two fonts: Nunito Sans for a modern sans-serif look and Six Caps for a bold, uppercase title font.

3. Container Layout

Now, we define the layout for the page. We’ll center the content both vertically and horizontally.

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
   background: linear-gradient(to bottom right, #F0E9F3, #C9BED0);
   width: 100vw;
   height: 100vh;
   display: flex;
   justify-content: center; 
   align-items: center;
}

Explanation:

  • html, body: We reset the default margin and padding of the page.
  • box-sizing: Ensures that padding and border are included in the element’s total width and height.
  • .container: This creates a full-page background with a gradient and uses Flexbox to center its content.

4. Background and Box Styling

We add a box where all the content will be displayed.

.bg {
  position: relative;
  width: 1024px;
  height: 600px;
  background: #1B181F;
  box-shadow: 20px 20px 35px 1px rgba(0, 0, 0,0.5);
}

Explanation:

  • .bg: This is a fixed-size box with a dark background and shadow, adding depth to the design.

5. Adding Text and Titles

Next, we add the titles: “SINGULARITY” and “COMING SOON.”

.small-title {
  letter-spacing: 5px;
  font-size: 20px;
  color: #F2F2F3;
  padding-left: 20px;
}

.title {
  color: #F2F2F3;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 35px;
  position: absolute;
  bottom: 240px;
}

Explanation:

  • .small-title: This styles the “SINGULARITY” text, spacing out the letters for a more modern look.
  • .title: This styles the “COMING SOON” text with bold, large letters and added spacing.

6. Circle and Glow Effect

We create a circular background with a glowing effect using CSS gradients.

 

.circle-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  position: relative;
}

.circle {
  width: 400px;
  height: 400px;
  background: linear-gradient(to bottom, #262234 0%, #1B181F 40%);
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-glow {
  width: 350px;
  height: 300px;
  border-radius: 50%;
  background: linear-gradient(to right, #5d035c, #922346, #f1647e,#922346,#5d035c);
  position: absolute;
  bottom: 135px;
  filter: blur(30px);
}

Explanation:

  • .circle: A solid circle with a gradient background.
  • .circle-glow: A glowing circle behind the main circle, adding visual interest with a gradient and blur effect.

7. Notification Section

This section allows users to sign up for notifications.

.notify-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  margin-top: -150px;
  width: 100%;
}

.notify-label {
  color: #B16573;
  font-size: 14px;
  letter-spacing: 2px;
}

Explanation:

  • .notify-section: Centers the notification section and positions it below the main circle.
  • .notify-label: Styles the “GET NOTIFIED” text.

8. Input and Button Styling

Finally, we style the input field and notification button.

input.email {
  background: #121113;
  border: none;
  outline: none;
  border-radius: 20px;
  height: 35px;
  width: 50%;
  padding-left: 20px;
  color: #F2F2F3;
}

.notify-btn {
  background: linear-gradient(to right, #2F2C40 0%, #2F2C40 50%, #5d035c 50%, #f1647e);
  border: none;
  border-radius: 20px;
  padding: 13px;
  color: #9689B1;
  font-weight: bold;
  font-size: 10px;
  letter-spacing: 2px;
  margin-left: -30px;
  cursor: pointer;
  background-size: 200%;
  background-position: 0% 100%;
  transition: background-position 0.3s ease-out, color 0.3s ease-out;
}

.notify-btn:hover {
  background-position: 100% 100%;
  color: #F2F2F3;
}

Explanation:

  • input.email: Styles the email input field with a dark background and curved borders.
  • .notify-btn: Creates a gradient button with a hover effect.

9. Final Thoughts

With this tutorial, you’ve learned how to create a beautiful “Coming Soon” page using HTML and CSS. By combining layout techniques with CSS gradients and Flexbox, you can design attractive and functional landing pages.

Related Posts

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *