DEV Community

Cover image for Modern Responsive Sign-Up Page with Clean UI
Nivesh Bansal
Nivesh Bansal

Posted on

Modern Responsive Sign-Up Page with Clean UI

A fully responsive sign-up page designed to impress users and boost conversions. Built with HTML5 & CSS3 it’s fast, lightweight, and SEO-friendly.

folder(GitHub) : Click here
Website(Live) : Click here

Features

  • Minimal & Modern Design – Eye-catching split layout with background image.
  • Fully Responsive – Mobile, tablet, and desktop friendly.
  • User-Friendly Inputs – First name, last name, email, password, and terms checkbox.
  • SEO-Optimized – Clean, semantic HTML structure for better Google ranking.
  • Lightweight & Fast Loading – No heavy frameworks.
  • Social Login Buttons – Continue with Google or Apple.

Tech Stack

  • HTML5 → Semantic markup for SEO & accessibility.
  • CSS3 → Modern layouts with Flexbox & responsive design.

📂 Folder Structure 

project-folder/ │── index.html │── style.css │── /images │ └── background.jpg │── README.md
Enter fullscreen mode Exit fullscreen mode

index.html 

 <div class="container"> <div class="page signup-page" id="signupPage"> <div class="signup-container"> <div class="signup-left"> <div class="left-content"> <h2 class="left-title">Create your Account</h2> <p class="left-subtitle">Share your artwork and Get projects!</p> </div> </div> <div class="signup-right"> <h2 class="signup-title">Sign Up</h2> <div class="form-group"> <input type="text" placeholder="First name" class="signup-input"> </div> <div class="form-group"> <input type="text" placeholder="Last name" class="signup-input"> </div> <div class="form-group"> <input type="email" placeholder="Email address" class="signup-input"> </div> <div class="form-group"> <input type="password" placeholder="Password" class="signup-input"> </div> <div class="checkbox-group"> <label class="checkbox-label"> <input type="checkbox" class="checkbox-input"> <span class="checkmark"></span> Accept Terms & Conditions </label> </div> <button class="primary-button">Join us →</button> <div class="divider"> <span class="divider-text">or</span> </div> <button class="google-button"> <img src="https://img.icons8.com/ios-glyphs/30/google-logo--v1.png" alt="google" class="button-icon"> Continue with Google </button> <button class="apple-button"> <img width="50" height="50" src="https://img.icons8.com/ios-filled/50/FFFFFF/mac-os.png" alt="apple" class="button-icon"> Continue with Apple </button> <p class="switch-text">Already have an account? <a href="#">Log in</a></p> </div> </div> </div> </div>
Enter fullscreen mode Exit fullscreen mode

for Complete folder(GitHub) : Click here

Top comments (0)