<?php ?> <!DOCTYPE html> <html lang="en"> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&family=Marcellus&family=Playfair:wght@600&display=swap" rel="stylesheet"> <link rel="stylesheet" href="index.css"> <title>Log~In</title> <style> @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&family=Marcellus&family=Playfair:wght@600&display=swap'); *{ margin:0; padding:0; font-family: 'Marcellus', serif; } section{ display: flex; justify-content: center; align-items: center; min-height: 100vh; width: 100%; background: #00ff00; .form-box{ position: relative; width: 400px; height: 450px; background: #3E2C51; display: flex; justify-content: center; align-items: center; } h2{ font-size: 2em; color: #FCFBFC; text-align: center; } .inputbox{ position: relative; margin:30px; width:310px; border-bottom: 2px solid #FCFBFC; } .inputbox label { position: absolute; top: 50%; left: 5px; transform: translateY(-50%); color: #FCFBFC; font-size:1em; pointer-events: none; } </style> </head> <body> <section> <div class="form-box"> <div class="form-value"> <div id="box"> <form method="post"> <h2>Log~in</h2> <div class="inputbox"> <ion-icon name="person-outline"></ion-icon> <input id="text" type="text" name="lastname" required> <label for="">Last Name:</label> </div> <div class="inputbox"> <ion-icon name="person"></ion-icon> <input id="text" type="text" name="firstname" required> <label for="">First Name:</label> </div> <div class="inputbox"> <ion-icon name="mail-outline"></ion-icon> <input type="email" id="email" name="email" required> <label for="email">Email:</label> </div> <div class="inputbox"> <ion-icon name="lock-closed-outline"></ion-icon> <input id="password" type="password" name="password" required> <label for="">Password:</label> </div> <div class="inputbox"> <ion-icon name="transgender-outline"></ion-icon> <select id="gender" name="gender" required> <option value="">Select Gender</option> <option value="male">Male</option> <option value="female">Female</option> <option value="other">Other</option> </select> <label for="gender">Gender:</label> </div> <div class="inputbox"> <ion-icon name="call-outline"></ion-icon> <input id="contact" type="number" id="contact" name="contact" required> <label for="">Contact Number:</label> </div> <div class="inputbox"> <ion-icon name="home-outline"></ion-icon> <input d="address" type="text" id="address" name="address" required> <label for="address">Address:</label> </div> <div class="inputbox"> <ion-icon name="paper-plane-outline"></ion-icon> <select id="country" name="country" required> <option value ="country"> Select Country</option> <option value ="country"> Philippines</option> <option value ="country"> Japan</option> <option value ="country"> Korea</option> <option value ="country"> China</option> <option value ="country"> Malaysia</option> <option value ="country"> Singapore</option> </select> <label for="">Country:</label> </div> <div class="register"> <a href="signup.php">Create account</a> </div> <input id="button" type="submit" value="Sign in"> </form> </div> </div> </div> </section> <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> </body> </html>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)