Feature-rich Email Form - Copy this Html, Tailwind Component to your project
Io ho questo blocco di codice "<?php require_once "controllerUserData.php"; ?> <?php ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <link rel="stylesheet" href="css/head.css"> <link href="https://fonts.googleapis.com/css2?family=Bahianita&display=swap" rel="stylesheet"> <title>Document</title> </head> <style> *{ margin: 0; padding: 0; box sizing: border box; } body{ display: grid; place items: center; grid template rows: 1fr 15fr; width: 100vw; height: 100vh; background color: #FFF6F6; font family: 'poppins', sans serif; } .container{ display: grid; place items: center; grid template rows: 3fr 3fr 6fr; background color: whitesmoke; height: 50%; width: 80%; border radius: 20px; box shadow: rgba(0, 0, 0, 0.35) 0px 5px 25px; } .title code span{ font size: 32px; display: grid; place self: center; color:#0066cc; font weight: bold; } .title code{ width: 100%; height: 100%; text align: center; display:grid; place items : center; } .alert{ width: 90%; height: 100%; font size: 14px; border: 1px solid transparent; border radius: 4px; text align: center; display : grid; place items: center; padding: 0px 20px; } .alert success{ color: #155724; background color: #d4edda; border color: #c3e6cb; } .alert danger{ color: #721c24; background color: #f8d7da; border color: #f5c6cb; } .code{ border: 2px solid gray; border radius : 20px; padding left: 10px; font size: 15px; } .code::placeholder{ color: gray; font size: 20px } .otp button{ display: grid; place items: center; background color: #0066cc; width: 90%; height: 80%; border radius: 20px; border: solid 2px gray; font weight: 700; font size: 25px; color: white; } .inputs{ height: 70%; width : 100%; display : grid; place items : center; grid template rows: 1fr 1fr; } .inputs input{ height : 90%; width: 90%; } .alerts{ width: 100%; height: 100%; } @media screen and (max width: 340px){ .code::placeholder{ font size: 18px; } } @media screen and (min width: 367px){ .container{ width: 290px; height: 290px; .alert{ height: 80%; font size: 16px; } } } </style> <body> <div class="header"> <div id="second column header"> <span class="titolo"> <a href="index.php">BookCycle</a> </span> </div> </div> <form action="forgot password.php" class="container" method="POST"> <div class="title code"> <span>Forgot Password</span> </div> <?php if(count($errors) == 0){ ?> <div class="alert alert success text center"> <p>Enter your email address here</p> </div> <?php } if(count($errors) > 0){ ?> <div class="alert alert danger text center"> <?php foreach($errors as $error){ echo $error; } ?> </div> <?php } ?> <div class="inputs"> <input type="text" class="code" name="email" placeholder="Enter email address here"> <input type="submit" class= "otp button" value="Submit" name="check email"> </div> </form> </body> <! <script src="js/eye.js"></script> > </html>" rendimelo responsive
