Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>5K & 10K Registration Form</title> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> <style> html, body { min-height: 100%; } body, div, form, input, select, textarea, label { padding: 0; margin: 0; outline: none; font-family: Roboto, Arial, sans-serif; font-size: 14px; color: #666; line-height: 22px; } h1 { position: absolute; margin: 0; font-size: 40px; color: #fff; z-index: 2; line-height: 83px; } .testbox { display: flex; justify-content: center; align-items: center; height: inherit; padding: 20px; } form { width: 100%; padding: 20px; border-radius: 6px; background: #fff; box-shadow: 0 0 8px #cc7a00; } .banner { position: relative; height: 300px; background-image: url("/uploads/media/default/0001/02/234656e7acbca4625305dd37e7344af8eff32383.jpeg"); background-size: cover; display: flex; justify-content: center; align-items: center; text-align: center; } .banner::after { content: ""; background-color: rgba(0, 0, 0, 0.2); position: absolute; width: 100%; height: 100%; } input, select, textarea { margin-bottom: 10px; border: 1px solid #ccc; border-radius: 3px; } input { width: calc(100% - 10px); padding: 5px; } input[type="date"] { padding: 4px 5px; } textarea { width: calc(100% - 12px); padding: 5px; } .item:hover p, .item:hover i, .question:hover p, .question label:hover, input:hover::placeholder { color: #cc7a00; } .item input:hover, .item select:hover, .item textarea:hover { border: 1px solid transparent; box-shadow: 0 0 3px 0 #cc7a00; color: #cc7a00; } .item { position: relative; margin: 10px 0; } .item span { color: red; } input[type="date"]::-webkit-inner-spin-button { display: none; } .item i, input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; font-size: 20px; color: #cc7a00; } .item i { right: 1%; top: 30px; z-index: 1; } [type="date"]::-webkit-calendar-picker-indicator { right: 1%; z-index: 2; opacity: 0; cursor: pointer; } input[type=radio], input[type=checkbox] { display: none; } label.radio { position: relative; display: inline-block; margin: 5px 20px 15px 0; cursor: pointer; } .question span { margin-left: 30px; } .question-answer label { display: block; } label.radio:before { content: ""; position: absolute; left: 0; width: 17px; height: 17px; border-radius: 50%; border: 2px solid #ccc; } input[type=radio]:checked + label:before, label.radio:hover:before { border: 2px solid #cc7a00; } label.radio:after { content: ""; position: absolute; top: 6px; left: 5px; width: 8px; height: 4px; border: 3px solid #cc7a00; border-top: none; border-right: none; transform: rotate(-45deg); opacity: 0; } input[type=radio]:checked + label:after { opacity: 1; } .btn-block { margin-top: 10px; text-align: center; } button { width: 150px; padding: 10px; border: none; border-radius: 5px; background: #cc7a00; font-size: 16px; color: #fff; cursor: pointer; } button:hover { background: #ff9800; } @media (min-width: 568px) { .name-item, .city-item { display: flex; flex-wrap: wrap; justify-content: space-between; } .name-item input, .name-item div { width: calc(50% - 20px); } .name-item div input { width:97%;} .name-item div label { display:block; padding-bottom:5px; } } </style> </head> <body> <div class="testbox"> <form action="/"> <div class="banner"> <h1>5K & 10K Registration Form</h1> </div> <p>Runner Information</p> <div class="item"> <label for="name">Name<span>*</span></label> <input id="name" type="text" name="name" required/> </div> <div class="item"> <label for="email">Email Address<span>*</span></label> <input id="email" type="email" name="email" required/> </div> <div class="item"> <label for="address">Address<span>*</span></label> <input id="address" type="address" name="address" required/> </div> <div class="item"> <label for="city">City<span>*</span></label> <input id="city" type="text" name="city" required/> </div> <div class="item"> <label for="state">State<span>*</span></label> <input id="state" type="text" name="state" required/> </div> <div class="item"> <label for="zip">Zip<span>*</span></label> <input id="zip" type="text" name="zip" required/> </div> <div class="item"> <label for="phone">Phone<span>*</span></label> <input id="phone" type="number" name="phone" required/> </div> <div class="item"> <label for="bdate">Date of Birth<span>*</span></label> <input id="bdate" type="date" name="bdate" required/> <i class="fas fa-calendar-alt"></i> </div> <div class="question"> <label>Gender</label> <div class="question-answer"> <div> <input type="radio" value="none" id="radio_1" name="gender"/> <label for="radio_1" class="radio"><span>Male</span></label> </div> <div> <input type="radio" value="none" id="radio_2" name="gender"/> <label for="radio_2" class="radio"><span>Female</span></label> </div> </div> </div> <div class="item"> <p>T-Shirt Size</p> <select> <option selected value="" disabled selected></option> <option value="course-type" >Small</option> <option value="short-courses">Medium</option> <option value="featured-courses">Large</option> <option value="undergraduate">Extra Large</option> </select> </div> <div class="question"> <label>Choose Race</label> <div class="question-answer"> <div> <input type="radio" value="none" id="radio_3" name="race"/> <label for="radio_3" class="radio"><span>5k - $25</span></label> </div> <div> <input type="radio" value="none" id="radio_4" name="race"/> <label for="radio_4" class="radio"><span>10K - $25</span></label> </div> </div> </div> <div class="btn-block"> <button type="submit" href="/">SUBMIT</button> </div> </form> </div> </body> </html>