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.

1. HTML Structure

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

Code:

<!DOCTYPE html>

<head>

<title>Coming Soon | theuicode.com</title>

</head>

<body>

<h3 class=“six-caps-regular small-title”>SINGULARITY</h3>

<h1 class=“nuto-sans-regular title”>COMING SOON</h1>

</div>

<h1 class=“nuto-sans-regular notify-label”>GET NOTIFIED WHEN IT’S READY</h1>

<button class=“notify-btn”>NOTIFY ME</button>

</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.

Getting Started with HTML and CSS: Creating a Stylish Landing Page

Aug 16, 2024 | Blog

In this tutorial, we’ll walk through the process of creating a stylish landing page using HTML and CSS. We’ll break down each portion of the code to help you understand how it all comes together. Let’s get started! HTML Structure First, let’s look at the HTML...

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

Table of Contents

1. HTML Structure

Explanation:

2. Styling with CSS

3. Container Layout

Explanation:

4. Background and Box Styling

Explanation:

5. Adding Text and Titles

Explanation:

6. Circle and Glow Effect

Explanation:

7. Notification Section

Explanation:

8. Input and Button Styling

Explanation:

9. Final Thoughts

Related Posts

Getting Started with HTML and CSS: Creating a Stylish Landing Page

0 Comments

Submit a Comment Cancel reply

Learn with UI Code

Connect with Us

Resources

Support