Robotics Club Web Designer Registration form
I've recreated the robotics club website registration form here. Please check it outunknown
html
3 years ago
5.2 kB
9
Indexable
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; box-sizing: border-box; } body{ font-family: sans-serif; } /* create a box for registration */ .reg-form{ height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; flex-direction: row; } /* this div contents registration form contents */ .reg-content{ width: 60vw; height: 50vh; box-shadow: 0 1px 20px 0px #ebebeb; padding: 47px; display: flex; overflow: hidden; } /* col-1 designing for first column contents */ .col-1{ width: 40%; } .col-1 h3{ font-weight: normal; font-size: 24px; color: black; text-align: center; } .col-1 .p1, .p2{ font-weight: normal; font-size: 18px; color: black; text-align: center; padding: 30px 40px; line-height: 1.8rem; } .col-1 .p2{ padding: 20px 40px; } .col-1 img{ display: block; margin: auto; } /* vertical Lign Design */ .vl { border-left: 3px solid #56baff; height: auto; } /*registraion form coloumn-3 Design */ .col-3{ width: 55%; } .col-3 .content{ padding: 0 30px; } .col-3 .row{ width: 100%; display: flex; padding: 10px 0px; justify-content: space-between; } .col-3 .row div{ display: flex; flex-direction: column; width: 100%; } .col-3 .content h3{ text-transform: uppercase; font-size: 24px; font-weight: 600; } .col-3 .form{ padding-top: 20px; } /* Set a style input fields & labels*/ .col-3 .form label{ font-size: 14px; font-weight:600; margin-bottom: 7px; } .col-3 .form input[type=text]{ padding: 15px 10px; margin-right: 30px; border: 1px solid lightgray; display: inline-block; font-size: 18px; } .col-3 .form input[type=text]:focus{ outline: none; border: 1px solid #56baff; } /* Set a style for buttons */ .col-3 .form .btn{ background-color: #3b60c9; color: #fff; display: block; line-height: 1; padding: 13px 40px; font-size: 18px; border: none; } .modal { display: none; position: fixed; z-index: 1; left: 30%; top: 35%; width: 40%; height: 300px; overflow: auto; background-color: #6290f1; padding-top: 50px; } .modal-content { background-color: #6290f1; margin: 5% auto 15% auto; width: 80%; text-align: center; } .modal-content h1, p{ color: white; } .close { position: absolute; right: 35px; top: 15px; font-size: 40px; font-weight: bold; color: #f1f1f1; } .close:hover, .close:focus { color: #f44336; cursor: pointer; } </style> </head> <body> <div class="reg-form"> <div class="reg-content"> <div class="col-1"> <h3>Assignment Link</h3> <p class="p1">Please follow this google doc link to find the assignment, and attach the doc/drive link in the form. <a href="https://cutt.ly/pOCNLRp">https://cutt.ly/pOCNLRp</a> </p> <p class="p2">Opportunity to work with UIU Robotics<br> Web Team<br> Hosted By</p> <img src="https://robotics.uiu.ac.bd/assets/img/logo_club.png" height="90px" width="100px"> </div> <div class="vl"> <div></div> </div> <div class="col-3"> <div class="content"> <h3>Registration Form</h3> <div class="form"> <form method="post" action="#"> <div class="row"> <div> <label>Name</label> <input type="text" name="name" required> </div> <div> <label>Phone No.</label> <input type="text" name="name" required> </div> </div> <div class="row"> <div> <label>Student ID</label> <input type="text" name="name" required> </div> <div> <label>Email</label> <input type="text" name="name" required> </div> </div> <div class="row"> <div> <label>Department</label> <input type="text" name="name" required> </div> <div> <label>Drive Link</label> <input type="text" name="name" required> </div> </div> <button onclick="document.getElementById('id01').style.display='block'" class="btn">Sign Up</button> </form> </div> </div> </div> </div> </div> <div id="id01" class="modal"> <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span> <div class="modal-content"> <h1>Congratulation</h1> <p>You've successfully Registeed for this contest</p> </div> </form> </div> <script> // Get the modal var modal = document.getElementById('id01'); // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> </body> </html>
Editor is loading...