<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.0">

        <!-- linking for bootstrap4 in cdn  -->
        
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    
        <!-- <link href="css/bootstrap.css" rel="stylesheet"/>
        <script src="js/jquery-slim.min.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="js/wow.js"> </script> -->
        <title>Document</title>


    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            background: linear-gradient(60deg, rgb(26, 26, 146), rgb(36, 153, 189), rgb(136, 27, 136), rgb(201, 10, 83)) ;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .container
        {
            position: relative;
            max-width: 600px;
            width: 100%;
            padding: 10px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 0 25px rgb(227, 227, 228);
        
        }
        .container .wrapper
        {
            /* padding: 20px; */
            display: flex;
            column-gap: 20px;

        }
        .wrapper .wrapper-name
        {
            width: 100%;
            margin-top: 15px;
        }
        .wrapper-name input
        {
            /* column-gap: 10px; */
            width: 100%;
            height: 35px;
            padding: 10px;
            margin-top: 10px;  
            outline: none;
            font-size: 1rem; 
            color: #707070;
            border: 1px solid black;
            border-radius: 5px;
        }
        .container label {
            font-size: 1.2rem;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            
        }

        .email, .password
        {
            margin-top: 10px;
            font-size: 1.2rem;

        }
        .container input{
            width: 100%;
            height: 35px;
            border: 1px solid black;
            border-radius: 5px;
            font-size: 1rem;
            margin-top: 10px;
            padding: 10px;
            color: #707070;
            outline: none;
        }
        .gnd-box header{
            font-size: 1.3rem;
            margin-top: 10px;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

        }
        
        .container :where(.gender-box, .gnd-option)
        {
            display: flex;
            margin-top: 5px;
            column-gap: 20px;
        }
        .gnd-box .gnd-option input{
            height: 15px;
            margin-top: 5px;
        }

        .address{
            margin-top: 10px;
        }
        .address textarea
        {
            width: 100%;
            height: 60px;
            margin-top: 10px;
            font-size: 1.2rem;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
                
        }
        
        .button
        {
            text-align: center;
            
        }

        .button button{
            font-size: larger;            
            font-family: cursive;
            height: 3rem;
            width: 8rem;
        }
        
        button:hover
        {
            background: linear-gradient(45deg, rgb(204, 44, 204), rgb(51, 147, 236))
        }


        
        @media screen and (max-width: 500px) {
            .container .wrapper
            {
                flex-wrap: wrap;
            }
            
            
        }


    </style>
</head>

<body>
        
        <section class="container">
            <form action="newformcode.php" method="post">
                <header style="font-family: cursive; font-size: 1.5rem; font-weight: bold; text-align: center;">Registration Form</header>
                <div class="wrapper">
                    <div class="wrapper-name">
                        <label for="name">First Name</label>
                        <input type="text" name="fname" placeholder="First Name" required/>
                    </div>
                    <div class="wrapper-name">
                        <label for="name">Last Name</label>
                        <input type="text" name="lname" placeholder="Last Name" required/>
                    </div>
                </div>

                <div class="email">
                    <label for="mail">Email Address</label>
                    <input type="email" name="email" placeholder="Enter Your Email"/>
                </div>

                <div class="password">
                    <label for="pass">Password</label>
                    <input type="text" name="password" placeholder="Enter Your Password"/>
                </div>
                <div class="wrapper">
                    <div class="wrapper-name">
                        <label for="num">Phone Number</label>
                        <input type="number" name="number" placeholder="Enter Mobile No."/>
                    </div>
                    <div class="wrapper-name">
                        <label for="">Date of Birth</label>
                        <input type="date" name="dob"/>
                    </div>
                </div>

                <div class="gnd-box">
                    <header>Gender</header>
                    <div class="gender-box">
                        <div class="gnd-option">
                            <input type="radio" name="gnd" id="check-male">
                            <label for="Male">Male</label>
                        </div>
                        <div class="gnd-option">
                            <input type="radio" name="gnd" id="check-female">
                            <label for="female">Female</label>
                        </div>
                        <div class="gnd-option">
                            <input type="radio" name="gnd" id="check-other">
                            <label for="female">Other</label>
                        </div>
                    </div>
                </div>

                <div class="address">
                    <label for="add">Address</label>
                    <textarea name="address" cols="" rows="2" placeholder="Enter your Address"></textarea>    
                </div>
                <div class="button">
                    <button  class="btn btn-primary btn-md mt-4"><a href="newform.php" style="text-decoration:none; color:white;">Submit</a></button>
                    <button  class="btn btn-primary btn-md mt-4"><a href="formshowcode.php" style="text-decoration:none; color:white;">Show Data</a></button>
                    

                </div>    
            </form>    
        </section>
    
</body>

</html>