@SudhuCodes
Category - HTML & CSS
Uploaded At - 6/13/2025
1<!DOCTYPE html>2<!-- Coding By SudhuCodes - www.sudhucodes.com -->3<html lang="en">4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>Website with Login & Signup Form - SudhuCodes</title>8 <!-- Google Fonts Link For Icons -->9 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0">10 <link rel="stylesheet" href="style.css">11 <script src="script.js" defer></script>12</head>13<body>14 <header>15 <nav class="navbar">16 <span class="hamburger-btn material-symbols-rounded">menu</span>17 <a href="#" class="logo">18 <img src="images/logo.png" alt="logo">19 </a>20 <ul class="links">21 <span class="close-btn material-symbols-rounded">close</span>22 <li><a href="#">Home</a></li>23 <li><a href="#">Portfolio</a></li>24 <li><a href="#">Courses</a></li>25 <li><a href="#">About us</a></li>26 <li><a href="#">Contact us</a></li>27 </ul>28 <button class="login-btn">LOG IN</button>29 </nav>30 </header>3132 <div class="blur-bg-overlay"></div>33 <div class="form-popup">34 <span class="close-btn material-symbols-rounded">close</span>35 <div class="form-box login">36 <div class="form-details">37 <h2>Welcome Back</h2>38 <p>Please log in using your personal information to stay connected with us.</p>39 </div>40 <div class="form-content">41 <h2>LOGIN</h2>42 <form action="#">43 <div class="input-field">44 <input type="text" required>45 <label>Email</label>46 </div>47 <div class="input-field">48 <input type="password" required>49 <label>Password</label>50 </div>51 <a href="#" class="forgot-pass-link">Forgot password?</a>52 <button type="submit">Log In</button>53 </form>54 <div class="bottom-link">55 Don't have an account?56 <a href="#" id="signup-link">Signup</a>57 </div>58 </div>59 </div>60 <div class="form-box signup">61 <div class="form-details">62 <h2>Create Account</h2>63 <p>To become a part of our community, please sign up using your personal information.</p>64 </div>65 <div class="form-content">66 <h2>SIGNUP</h2>67 <form action="#">68 <div class="input-field">69 <input type="text" required>70 <label>Enter your email</label>71 </div>72 <div class="input-field">73 <input type="password" required>74 <label>Create password</label>75 </div>76 <div class="policy-text">77 <input type="checkbox" id="policy">78 <label for="policy">79 I agree the80 <a href="#" class="option">Terms & Conditions</a>81 </label>82 </div>83 <button type="submit">Sign Up</button>84 </form>85 <div class="bottom-link">86 Already have an account?87 <a href="#" id="login-link">Login</a>88 </div>89 </div>90 </div>91 </div>92 <script src="script.js"></script>93</body>94</html>