Created
August 10, 2019 16:52
-
-
Save tjkhara/5c7836b011ecaf852f840888ee1a418e to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| // if($_SERVER["REQUEST_METHOD"] == "POST"){ | |
| // var_dump($_POST); | |
| // } | |
| $num1 = $_POST['num1']; | |
| $num2 = $_POST['num2']; | |
| $total = $num1 + $num2; | |
| echo $num1; | |
| echo $num2; | |
| ?> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
| <title>Form Styling</title> | |
| <link | |
| href="https://fonts.googleapis.com/css?family=Raleway" | |
| rel="stylesheet" | |
| /> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| margin:0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Raleway', sans-serif; | |
| background: #344a72; | |
| color: #fff; | |
| line-height: 1.8; | |
| } | |
| a { | |
| text-decoration: none; | |
| } | |
| #container { | |
| margin: 30px auto; | |
| max-width: 400px; | |
| padding: 20px; | |
| } | |
| .form-wrap { | |
| background: #fff; | |
| padding: 15px 25px; | |
| color: #333; | |
| } | |
| .form-wrap h1, | |
| .form-wrap p { | |
| text-align: center; | |
| } | |
| .form-wrap .form-group label { | |
| display: block; | |
| color: #666; | |
| } | |
| .form-wrap .form-group input { | |
| width: 100%; | |
| padding: 10px; | |
| border: #ddd 1px solid; | |
| border-radius: 5px; | |
| } | |
| .form-wrap button { | |
| display: block; | |
| width: 100%; | |
| padding: 10px; | |
| margin-top: 20px; | |
| background: #49c1a2; | |
| color: #fff; | |
| cursor: pointer; | |
| } | |
| .form-wrap button:hover { | |
| background: #37a08e | |
| } | |
| .form-wrap .bottom-text { | |
| font-size: 13px; | |
| margin-top: 20px; | |
| } | |
| footer { | |
| text-align: center; | |
| margin-top: 10px; | |
| } | |
| footer a { | |
| color:#49c1a2 | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div class="form-wrap"> | |
| <h1>Sign Up</h1> | |
| <p>It's free and only takes a minute</p> | |
| <form method="post"> | |
| <div class="form-group"> | |
| <label for="num1">Number 1</label> | |
| <input type="text" name="num1" id="num1" /> | |
| </div> | |
| <div class="form-group"> | |
| <label for="num2">Number 2</label> | |
| <input type="text" name="num2" id="num2" /> | |
| </div> | |
| <button type="submit" class="btn">Sign Up</button> | |
| <p class="bottom-text"> | |
| By clicking the Sign Up button, you agree to our | |
| <a href="#">Terms & Conditions</a> and | |
| <a href="#">Privacy Policy</a> | |
| </p> | |
| </form> | |
| </div> | |
| <footer> | |
| <p>Already have an account? <a href="#">Login Here</a></p> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment