WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sign Up Form </title> <link href="https://fivebooster.com/assets/img/favicon.ico" rel="shortcut icon"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h2><b>Create Account</b></h2> <form action="https://customer.fivebooster.com/register.php/?systpl=antler" method="post" name="orderfrm" class="comments-form"> <div class="mergecolor"><small>Personal Information</small></div> <div class="row mb-4"> <div class="col-md-6 position-relative"> <label for="firstname"><i class="fas fa-user-tie"></i> First Name</label> <input type="text" name="firstname" id="firstname" placeholder="First Name" required class="form-control"> </div> <div class="col-md-6 position-relative"> <label for="inputLastName"><i class="fas fa-user-tie"></i> Last Name</label> <input type="text" name="lastname" id="inputLastName" placeholder="Last Name" required class="form-control"> </div> </div> <div class="row mb-4"> <div class="col-md-6 position-relative"> <label for="inputEmail"><i class="fas fa-envelope"></i> Email Address</label> <input type="email" name="email" id="inputEmail" placeholder="Email Address" required class="form-control"> </div> <div class="col-md-6 position-relative"> <label for="inputPhone"><i class="fas fa-phone"></i> Phone Number</label> <input type="tel" name="phonenumber" id="inputPhone" placeholder="Phone Number" required class="form-control"> </div> </div> <div class="mergecolor"><small>Billing Address</small></div> <div class="row mb-4"> <div class="col-md-6 position-relative"> <label for="inputAddress1"><i class="far fa-building"></i> Street Address</label> <input type="text" name="address1" id="inputAddress1" placeholder="Street Address" required class="form-control"> </div> <div class="col-md-6 position-relative"> <label for="inputCity"><i class="far fa-building"></i> City</label> <input type="text" name="city" id="inputCity" placeholder="City" required class="form-control"> </div> </div> <div class="row mb-4"> <div class="col-md-4 position-relative"> <label for="inputState"><i class="fas fa-map-marker-alt"></i> State</label> <select name="state" id="inputState" class="form-control"> <option>Select State</option> <option>Egypt</option> <option>Bahrain</option> <option>Kuwait</option> <option>Saudi Arabia</option> <option>Jordan</option> <option>Algeria</option> </select> </div> <div class="col-md-4 position-relative"> <label for="inputPostcode"><i class="fas fa-certificate"></i> Postcode</label> <input type="text" name="postcode" id="inputPostcode" placeholder="Postcode" required class="form-control"> </div> <div class="col-md-4 position-relative"> <label for="inputCountry"><i class="fas fa-globe"></i> Country</label> <select name="country" id="inputCountry" class="form-control"> <option value="EG">Egypt</option> <option value="BH">Bahrain</option> <option value="KW">Kuwait</option> <option value="SA">Saudi Arabia</option> <option value="JO">Jordan</option> <option value="DZ">Algeria</option> </select> </div> </div> <div class="mergecolor"><small>Account Security</small></div> <div class="row mb-4"> <div class="col-md-6 position-relative"> <label for="inputNewPassword1"><i class="fas fa-lock"></i> Password</label> <input type="password" name="password" id="inputNewPassword1" placeholder="Password" class="form-control" required> </div> <div class="col-md-6 position-relative"> <label for="inputNewPassword2"><i class="fas fa-lock"></i> Confirm Password</label> <input type="password" name="password2" id="inputNewPassword2" placeholder="Confirm Password" class="form-control" required> </div> </div> <button type="submit" value="Submit" class="btn btn-custom mb-1 w-100">Register</button> </form> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
body { background-color: #121212; color: #ffffff; font-family: 'Open Sans', sans-serif; display: flex; align-items: center; justify-content: center; margin: 0; height: 100vh; } .container { width: 100%; max-width: 1400px; padding: 10px; background-color: #1f1f1f; border-radius: 15px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 107, 129, 0.5); margin-top: -20px; margin-bottom: -20px; } h2 { color: #ff6b81; text-align: center; margin-bottom: 10px; font-weight: bold; } .btn-custom { background-color: #ff6b81; border: none; color: #ffffff; transition: background-color 0.3s, transform 0.3s; font-weight: bold; } .btn-custom:hover { background-color: #e55b71; transform: scale(1.05); } .form-control { background-color: #2c2c2c; border: 1px solid #6c757d; color: #ffffff; border-radius: 5px; transition: border-color 0.3s; } .form-control:focus { border-color: #ff6b81; box-shadow: 0 0 5px rgba(255, 107, 129, 0.5); } .mergecolor { color: #d1d1d1; margin-bottom: 10px; } .position-relative { margin-bottom: 10px; } label { margin-bottom: 5px; }
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
Validating your code, please wait...
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sign Up Form </title> <link href="https://fivebooster.com/assets/img/favicon.ico" rel="shortcut icon"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h2><b>Create Account</b></h2> <form action="https://customer.fivebooster.com/register.php/?systpl=antler" method="post" name="orderfrm" class="comments-form"> <div class="mergecolor"><small>Personal Information</small></div> <div class="row mb-4"> <div class="col-md-6 position-relative"> <label for="firstname"><i class="fas fa-user-tie"></i> First Name</label> <input type="text" name="firstname" id="firstname" placeholder="First Name" required class="form-control"> </div> <div class="col-md-6 position-relative"> <label for="inputLastName"><i class="fas fa-user-tie"></i> Last Name</label> <input type="text" name="lastname" id="inputLastName" placeholder="Last Name" required class="form-control"> </div> </div> <div class="row mb-4"> <div class="col-md-6 position-relative"> <label for="inputEmail"><i class="fas fa-envelope"></i> Email Address</label> <input type="email" name="email" id="inputEmail" placeholder="Email Address" required class="form-control"> </div> <div class="col-md-6 position-relative"> <label for="inputPhone"><i class="fas fa-phone"></i> Phone Number</label> <input type="tel" name="phonenumber" id="inputPhone" placeholder="Phone Number" required class="form-control"> </div> </div> <div class="mergecolor"><small>Billing Address</small></div> <div class="row mb-4"> <div class="col-md-6 position-relative"> <label for="inputAddress1"><i class="far fa-building"></i> Street Address</label> <input type="text" name="address1" id="inputAddress1" placeholder="Street Address" required class="form-control"> </div> <div class="col-md-6 position-relative"> <label for="inputCity"><i class="far fa-building"></i> City</label> <input type="text" name="city" id="inputCity" placeholder="City" required class="form-control"> </div> </div> <div class="row mb-4"> <div class="col-md-4 position-relative"> <label for="inputState"><i class="fas fa-map-marker-alt"></i> State</label> <select name="state" id="inputState" class="form-control"> <option>Select State</option> <option>Egypt</option> <option>Bahrain</option> <option>Kuwait</option> <option>Saudi Arabia</option> <option>Jordan</option> <option>Algeria</option> </select> </div> <div class="col-md-4 position-relative"> <label for="inputPostcode"><i class="fas fa-certificate"></i> Postcode</label> <input type="text" name="postcode" id="inputPostcode" placeholder="Postcode" required class="form-control"> </div> <div class="col-md-4 position-relative"> <label for="inputCountry"><i class="fas fa-globe"></i> Country</label> <select name="country" id="inputCountry" class="form-control"> <option value="EG">Egypt</option> <option value="BH">Bahrain</option> <option value="KW">Kuwait</option> <option value="SA">Saudi Arabia</option> <option value="JO">Jordan</option> <option value="DZ">Algeria</option> </select> </div> </div> <div class="mergecolor"><small>Account Security</small></div> <div class="row mb-4"> <div class="col-md-6 position-relative"> <label for="inputNewPassword1"><i class="fas fa-lock"></i> Password</label> <input type="password" name="password" id="inputNewPassword1" placeholder="Password" class="form-control" required> </div> <div class="col-md-6 position-relative"> <label for="inputNewPassword2"><i class="fas fa-lock"></i> Confirm Password</label> <input type="password" name="password2" id="inputNewPassword2" placeholder="Confirm Password" class="form-control" required> </div> </div> <button type="submit" value="Submit" class="btn btn-custom mb-1 w-100">Register</button> </form> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
body { background-color: #121212; color: #ffffff; font-family: 'Open Sans', sans-serif; display: flex; align-items: center; justify-content: center; margin: 0; height: 100vh; } .container { width: 100%; max-width: 1400px; padding: 10px; background-color: #1f1f1f; border-radius: 15px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 107, 129, 0.5); margin-top: -20px; margin-bottom: -20px; } h2 { color: #ff6b81; text-align: center; margin-bottom: 10px; font-weight: bold; } .btn-custom { background-color: #ff6b81; border: none; color: #ffffff; transition: background-color 0.3s, transform 0.3s; font-weight: bold; } .btn-custom:hover { background-color: #e55b71; transform: scale(1.05); } .form-control { background-color: #2c2c2c; border: 1px solid #6c757d; color: #ffffff; border-radius: 5px; transition: border-color 0.3s; } .form-control:focus { border-color: #ff6b81; box-shadow: 0 0 5px rgba(255, 107, 129, 0.5); } .mergecolor { color: #d1d1d1; margin-bottom: 10px; } .position-relative { margin-bottom: 10px; } label { margin-bottom: 5px; }
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>