How to create a simple under construction page with notify me form

Features Implemented:

Responsive 4-Column Layout:

Uses CSS Grid for desktop view (4 columns)
Switches to 2 columns on medium screens (tablets)
Stacks to 1 column on mobile devices

Profile Column:

Circular profile image with border
Centered with caption
Soft shadow and hover effect

Basic Details Column:

Student name as heading
Field of study as subheading
Short bio paragraph

Portfolio Column:

List of 5 projects with clickable links
Hover effects for better interactivity

Contact Column:

Contact form with name, email, and message fields
JavaScript alert on form submission
Download CV button with distinct styling

Design Elements:

Clean, minimal aesthetic
Soft shadows and rounded corners
Hover animations for interactivity
Professional color scheme
Legible typography

Technical Implementation:

Pure HTML, CSS, and JavaScript (no external libraries)
CSS Grid for layout
Media queries for responsiveness
Simple form validation and feedback

The placeholder image can be replaced with an actual student photo by changing the src attribute in the profile image tag. Similarly, the download CV link can be updated to point to an actual PDF file.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Under Construction</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet"> </head> <body> <header> <h1>UNDER CONSTRUCTION</h1> </header> <main> <img src="https://cdn.pixabay.com/photo/2025/01/25/08/44/excavator-9358337_1280.png" alt="Construction zone" class="construction-image"> <div class="description"> <p>Our website is under construction, but we are ready to go!</p> <p>Special surprise for our subscribers only</p> </div> <div class="email-form"> <form id="notificationForm"> <div class="form-group"> <input type="email" id="email" placeholder="Enter a valid email address" required> <button type="submit">NOTIFY ME</button> </div> <p class="form-note">Sign up now to get early notification of our launch date!</p> </form> </div> </main> <footer> <p>Image from <a href="https://pixabay.com/" target="_blank" rel="noopener noreferrer">Pixabay</a></p> </footer> </body> </html>

CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension.


 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        body {
            background-color: #f9f9f9;
            color: #333;
            line-height: 1.6;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
            min-height: 100vh;
            overflow: hidden;
        }

        header {
            margin: 40px 0;
        }

        h1 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .construction-image {
            max-width: 100%;
            height: 250px;
            margin: 10px 0;
        }

        .description {
            margin: 30px auto;
            max-width: 600px;
            font-size: 1.1rem;
        }

        .email-form {
            margin: 40px auto;
            max-width: 500px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        input[type="email"] {
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
            width: 100%;
        }

        input[type="email"]:focus {
            outline: none;
            border-color: #555;
        }

        button {
            background-color: #000;
            color: white;
            border: none;
            padding: 12px 25px;
            font-size: 1rem;
            font-weight: 600;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #333;
        }

        .form-note {
            margin-top: 15px;
            font-size: 0.9rem;
            color: #666;
        }

        footer {
            margin: 50px 0 20px;
            font-size: 0.8rem;
            color: #777;
        }

        footer a {
            color: #555;
            text-decoration: none;
        }

        footer a:hover {
            text-decoration: underline;
        }

        @media (max-width: 768px) {
            h1 {
                font-size: 2rem;
            }
            
            .description {
                font-size: 1rem;
                padding: 0 15px;
            }
            
            .email-form {
                padding: 0 15px;
            }
            
            .form-group {
                flex-direction: column;
            }
        }

JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension.


 document.getElementById('notificationForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const email = document.getElementById('email').value;
            
            // Simple email validation
            if (validateEmail(email)) {
                alert('Thank you for subscribing! We will notify you when we launch.');
                document.getElementById('email').value = '';
            } else {
                alert('Please enter a valid email address.');
            }
        });

        function validateEmail(email) {
            const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return re.test(email);
        }

We hope you Like this Post Thanks for coming Here

How to create a simple under construction page with notify me form

Features Implemented:

Post a Comment

tools grid

Responsive About Us Page using HTML, CSS & JavaScript

Getting Started with Flexbox: Easy Layouts with HTML and CSS - 09

How to create Modern Responsive Get in Touch Contact Form with JavaScript

Contact Form

How to create a simple under construction page with notify me form

Features Implemented:

You might like

Post a Comment

tools grid

Contact Form