---
title: Instructor Lesson Add
slug: instructor-lesson-add
---
{% extends "layouts/instructor-fluid.html" %}

{% block page %}
<ol class="breadcrumb m-b-0">
	<li><a href="index.html">Home</a></li>
	<li class="active">Courses</li>
</ol>
<h1 class="page-heading h2">Add Lesson</h1>
<div class="card">
	<div class="p-a-1">
		<form action="#">
			<div class="form-group row">
				<label for="avatar" class="col-sm-3 form-control-label">Preview</label>
				<div class="col-sm-9">
					<div class="media">
						<div class="media-left">
							<img src="assets/images/vuejs.png" alt="" width="100" class="img-rounded">
						</div>
						<div class="media-body media-middle">
							<label class="file">
								<input type="file" id="file">
								<span class="file-custom"></span>
							</label>
						</div>
					</div>
				</div>
			</div>
			<div class="form-group row">
				<label for="" class="form-control-label col-md-3">Title</label>
				<div class="col-md-6">
					<input type="text" class="form-control" placeholder="Write an awesome title">
				</div>
			</div>
			<div class="form-group row">
					<label for="select" class="col-md-3  form-control-label">Course</label>
					<div class="col-md-4">
						<select class="c-select form-control">
						<option value="#">HTML</option>
						<option value="#">Angular JS</option>
						<option value="#" selected>Vue.js</option>
						<option value="#">CSS / LESS</option>
						<option value="#">Design / Concept</option>
						</select>
					</div>
				</div>
			<div class="form-group row">
				<label for="video" class="form-control-label col-md-3">Upload Video</label>
				<div class="col-md-9">
					<div class="row">
						<div class="col-md-6">
							<div class="form-group">
								<textarea name="video" class="form-control" rows="6" style="font-size:12px">&lt;iframe class=&quot;embed-responsive-item&quot; src=&quot;https://player.vimeo.com/video/97243285?title=0&amp;byline=0&amp;portrait=0&quot;  frameborder=&quot;0&quot; webkitallowfullscreen mozallowfullscreen allowfullscreen width=&quot;100%&quot;&gt;&lt;/iframe&gt;</textarea>
								<small class="help-block text-muted-light"><i class="material-icons md-18">ondemand_video</i> <span class="icon-text">Paste Video</span></small>
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<div style="overflow:hidden; height:150px">
									<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/97243285?title=0&amp;byline=0&amp;portrait=0"  frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" width="100%" height="150"></iframe>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>
<div class="card">
	<div class="card-header">
		<h4 class="card-title">Files</h4>
	</div>
	<div class="card-block">
		<div class="row">
			
		
			<div class="col-md-6">
					<form id="my-awesome-dropzone" action="/target" class="dropzone"></form>	
			</div>
			<div class="col-md-6">				
				<div data-toggle="tree">
					<ul style="display: none;">
						<li class="folder expanded">
							lesson files
							<ul>
								<li> lesson-1-install.zip</li>
								<li> lesson-1-steps.zip</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
{% endblock %}


{% block vendor_styling %}
	<!-- Vendor Dropzone CSS -->
	<link rel="stylesheet" href="assets/vendor/dropzone.min.css">
	<link rel="stylesheet" href="examples/css/dropzone.min.css">

	<!-- Vendor FancyTree CSS -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.5.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="examples/css/fancytree.min.css">
{% endblock %}

{% block vendor_scripts %}
	<!-- Required by Calendar (fullcalendar) -->
	<script src="assets/vendor/dropzone.min.js"></script>

	<!-- TREE JS -->
	<script src="https://cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.js"></script>
	<script src="assets/vendor/jquery.fancytree-all.min.js"></script>
{% endblock%}

{% block example_scripts %}
	<!-- Init -->
	<script src="examples/js/fancytree.js"></script>
{% endblock %}