tabler-ui/src/_includes/cards/classroom.html

Premium and Open Source dashboard template with responsive and high quality UI. For Free!

<form class="card" action="">
	<div class="card-header">
		<h3 class="card-title">Create new classroom</h3>
	</div>
	<div class="card-body">
		<div class="row">
			<div class="col-sm-6">
				<div class="form-group">
					<label class="form-label">Name of Class</label>
					<input type="text" class="form-control" placeholder="e.g. English Class" />
				</div>
			</div>
			<div class="col-sm-6">
				<div class="form-group">
					<label class="form-label">Section</label>
					<input type="text" class="form-control" placeholder="e.g. English" />
				</div>
			</div>
			<div class="col-sm-6">
				<div class="form-group">
					<label class="form-label">Target Language (L1)</label>
					<select class="form-control custom-select">
						<option value="english">English</option>
					</select>
				</div>
			</div>
			<div class="col-sm-6">
				<div class="form-group">
					<label class="form-label">Target Language (L2)</label>
					<select class="form-control custom-select">
						<option value="french">French</option>
					</select>
				</div>
			</div>
			<div class="col-sm-6">
				<div class="form-group">
					<label class="form-label">Home Country</label>
					<select class="form-control custom-select">
						<option value="french">United States</option>
					</select>
				</div>
			</div>
			<div class="col-sm-6">
				<div class="form-group">
					<label class="form-label">School</label>
					<input type="text" class="form-control" placeholder="Where do you teach?" />
				</div>
			</div>
			<div class="col-sm-12">
				<div class="form-group">
					<label class="form-label">What kind of classroom would you like to connect with?</label>
					<input type="text" class="form-control" placeholder="Where do you teach?" />
				</div>
			</div>
			<div class="col-sm-6">
				<div class="form-group">
					<label class="form-label">Which tools would you like to use?</label>
					<select class="form-control custom-select">
						<option value="french">Blogging, Video Chat, Quizzes, +3 Others</option>
					</select>
				</div>
			</div>
			<div class="col-sm-6">
				<div class="form-group">
					<label class="form-label">What Age Group are you going to teach?</label>
					<div>
						<label class="custom-control custom-radio">
							<input type="radio" name="classroom-age" class="custom-control-input" checked>
							<span class="custom-control-indicator"></span>
							<span class="custom-control-description">K-12</span>
						</label>
						<label class="custom-control custom-radio">
							<input type="radio" name="classroom-age" class="custom-control-input">
							<span class="custom-control-indicator"></span>
							<span class="custom-control-description">Value</span>
						</label>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="card-footer">
		<div class="d-flex align-items-center">
			<a href="javascript:void(0)" class="text-muted">Cancel</a>
			<button type="submit" class="btn btn-primary ml-auto">Create classroom</button>
		</div>
	</div>
</form>