<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta property="og:url" content="https://xpecto.tech/" />
		<meta property="og:type" content="website" />
		<meta property="og:title" content="Xpecto" />
		<meta
			name="description"
			content="Xpecto is science and technology festival of Indian
        Institute of Technology, Mandi. It has been ramped up to
        include the most electrifying events, prompting great
        discoveries, as well as enthralling brainstorming and
        grand prizes."
		/>
		<meta
			name="keywords"
			content="Event, Expect, Innovate, Achieve, IIT Mandi, TechFest 2022, Xpecto, Technical festival, Techfest IIT Mandi,
        Xpecto 2022, First Technical Festival, Techfest IIT Mandi"
		/>
		<link
			rel="icon"
			type="image/x-icon"
			href="images/xpecto-logo-header.png"
		/>
		<script
			src="https://kit.fontawesome.com/a1542a4884.js"
			crossorigin="anonymous"
		></script>
		<link rel="stylesheet" href="styles/page.css" />
		<link rel="stylesheet" href="styles/style.css" />
		<link rel="stylesheet" href="styles/profile.css" />

		<title>Event Coordi Login</title>
	</head>

	<style>
		#page .container {
			padding-top: 2.5rem;
			width: 250px;
		}

		#page .heading span {
			font-size: 2.5rem;
			padding-right: 2.5rem;
			transform: skew(0deg);
		}

		#page .heading {
			line-height: 1.5;
			padding-left: 7.5rem;
			padding-top: 25%;
			display: flex;
			align-items: baseline;
			transform: skewX(-7.5deg);
		}

		.card {
			color: white;
			font-weight: bold;
			width: 700px;
			padding: 2rem;
			backdrop-filter: blur(10px) saturate(200%);
			-webkit-backdrop-filter: blur(10px) saturate(200%);
			background-color: rgba(0, 16, 45, 0.781);
			border-radius: 12px;
			border: 2px solid rgba(255, 255, 255, 0.125);
			margin-top: 6rem;
			padding-top: 1rem;
		}

		.btn-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			align-items: center;
		}

		.btn1 {
			width: 200px;
			text-decoration: none;
			padding: 0.25rem;
			border-radius: 5px;
			transition: 0.2s;
			font-size: 1.25rem;
			display: flex;
			justify-content: center;
			margin: 0.5rem auto;
			color: white;
			border: 2px solid rgba(2, 84, 200, 1);
			background-color: rgba(2, 84, 200, 1);
			margin-top: 1.5rem;
		}

		.btn1:hover {
			background-color: grey;
			color: white;
			border-color: grey;
			transition: 0.2s;
			cursor: pointer;
		}

		@media (max-width: 480px) {
			.btn1 {
				font-size: 1rem;
			}
		}

		@media (max-width: 920px) {
			.card {
				width: 500px;
			}
		}

		@media (max-width: 480px) {
			.card {
				width: 300px;
			}

			.btn1 {
				font-size: 1rem;
			}
		}

		@media (max-width: 320px) {
			.card {
				width: 275px;
			}
		}

		.form-group {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		label {
			font-size: 1.2rem;
			margin: 0.5rem;
			display: flex;
			justify-content: center;
			text-align: center;
			align-items: center;
		}

		input[type="email"],
		input[type="password"] {
			background-color: black;
			color: white;
			border: none;
			padding: 0.5rem 1rem;
			margin-bottom: 1rem;
		}

		input[type="email"]:focus,
		input[type="password"]:focus {
			background-color: black;
			color: white;
			border: none;
			padding: 0.5rem 1rem;
		}

		.text-phone,
		.text-submit {
			font-weight: bold;
			text-align: center;
			margin: 1rem;
		}

		.text-submit {
			font-size: 1.5rem;
		}

		.text-phone {
			font: 1.25rem;
		}

		.event-heading {
			text-align: center;
			font-size: 2rem;
			font-weight: bold;
		}

		@media (max-width: 550px) {
			.event-heading {
				font-size: 2rem;
			}

			.card {
				width: 300px;
			}
		}
	</style>

	<body>
		<!-- -----HEADER INCLUDING LOGO AND NAVBAR----- -->
		<header class="header-glass active">
			<div>
				<img src="images/xpecto-logo-header.png" alt="xpecot-logo" />
				<span>XPECTO'22</span>
			</div>
			<nav>
				<a class="close" id="" href="/">Home</a>
				<a class="close" id="" href="/eventwiseteam">Events Data</a
				><a href="/regcodecount" class=""> Registrations Event Wise </a>
			</nav>
			<div class="hamburger">
				<img
					class="toggle"
					src="images/menu_open.svg"
					alt="menu_open.svg"
				/>
			</div>
		</header>

		<!-- -----HEADER END----- -->

		<div class="" id="page">
			<div class="container">
				<div class="heading" style="color: aqua">
					<span>&nbsp;C</span>
					<span>&nbsp;O</span>
					<span>&nbsp;O</span>
					<span>&nbsp;R</span>
					<span>&nbsp;D</span>
					<span>&nbsp;I</span>
				</div>
			</div>
			<div class="prof-container">
				<!-- <div class="content"></div> -->
				<div class="card">
					<form action="/eventcoordiauth" method="post">
						<div class="register-heading">EVENT COORDI LOGIN</div>
						<div class="form-group">
							<label for="exampleInputEmail1" class="form-label"
								>Email address</label
							>
							<input
								type="email"
								class="form-control"
								id="exampleInputEmail1"
								aria-describedby="emailHelp"
								name="email"
								,
								placeholder="Email Address"
								,
								required
							/>
						</div>
						<!---
        <div >
            <label for="exampleInputPassword1" class="form-label">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" name="password" />
        </div>-->
						<div class="form-group">
							<label
								for="exampleInputPassword1"
								class="form-label"
								>Password</label
							>
							<input
								type="password"
								class="form-control"
								id="exampleInputPassword1"
								aria-describedby="emailHelp"
								name="password"
								,
								placeholder="Passowrd"
								,
								required
							/>
						</div>
						<button class="btn1" type="submit">Submit</button>
					</form>
				</div>
			</div>
		</div>
		<script src="scripts/script.js"></script>
		<script src="scripts/ejs.js"></script>
	</body>
</html>
