-Style the following form and make sure it is responsive on all type of devices .
-Note the form should be beautiful and attractive
<!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">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.5.0/remixicon.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.css" integrity="sha512-
5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/
+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link href="../photos/sopecam.png" rel="icon">
<link rel="stylesheet" href="../css/regform21.css">
<title>SOPECAM Intervention Users Registration Page </title>
</head>
<body>
<?php
include 'menu2/nav.php';
?>
<div class="contain">
<div class="form">
<h2 style ="color:rgb(40, 39, 41);">SOPECAM USER SIGN UP</h2>
<p>It's free and always will be.</p>
<form action="" enctype="multipart/form-data">
<div class="error-text">Error</div>
<div class="grid-details">
<div class="input">
<label>First name</label>
<input type="text" name="fname" placeholder="First Name"
required pattern="[a-zA-Z'-'\s]*">
</div>
<div class="input">
<label>Last Name</label>
<input type="text" name="lname" placeholder="Last Name"
required pattern="[a-zA-Z'-'\s]*">
</div>
</div>
<div class="input">
<label>Email</label>
<input type="email" name="email" placeholder="enter your
email" required >
</div>
<div class="input">
<label>phone</label>
<input type="phone" name="phone" placeholder="phone number"
required pattern="[0-9]{12}" oninvalid="this.setCustomValidity('Enter 12 Digits
Number')" oninput="this.setCustomValidity('')">
</div>
<div class="grid-details">
<div class="input">
<label>Password</label>
<input type="password" name="pass" placeholder="Password"
required >
</div>
<div class="input">
<label>Confirm Password</label>
<input type="password" name="cpass" placeholder="Confirm
Password" required >
</div>
</div>
<div class="profile-img">
<div class="file-upload">
<input type="file" id="image-preview" name="image"
class="file-input">
<i class="fas fa-user-edit"></i>
</div>
</div>
<div class="submit">
<input type="submit" value="signup Now" class="button" >
</div>
</form>
<div class="link1">Already signed up? <a href="userslogin.php">login
Now</a></div>
</div>
</div>
<?php
include 'footer.php';
?>
<script src="../javascript/register2.js"></script>
</body>
</html>
