Robotics Club Web Designer Registration form

I've recreated the robotics club website registration form here. Please check it out
<!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">&times;</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...