Added mockups
This commit is contained in:
114
mockups/course.html
Normal file
114
mockups/course.html
Normal file
@@ -0,0 +1,114 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="course-header">
|
||||
<div class="course-type">course</div>
|
||||
<h1>{{title}}</h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-9 col-md-12">
|
||||
<div class="course-details">
|
||||
|
||||
<h2>Course Description</h2>
|
||||
|
||||
<div class="course-description">
|
||||
{{ description }}
|
||||
</div>
|
||||
|
||||
<div class="preview-video">
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="{{youtube_embed_url}}"
|
||||
title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<h2>Upcoming Batches</h2>
|
||||
|
||||
<div class="row">
|
||||
{% for batch in batches %}
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="batch">
|
||||
<div class="batch-details">
|
||||
<div>Session every {{batch.weekdays}}</div>
|
||||
<div>{{batch.timeslot}}</div>
|
||||
<div>Starting from {{batch.start_date}}</div>
|
||||
|
||||
<div class="course-type" style="color: #888; padding: 10px 0px;">mentors</div>
|
||||
|
||||
{% for m in batch.mentors %}
|
||||
<div>
|
||||
<img class="profile-photo" src="{{m.photo_url}}">
|
||||
<span class="instructor-title">{{m.name}}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="cta">
|
||||
<div class="">
|
||||
<button type="button">Join this Batch</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Course Outline</h2>
|
||||
|
||||
{% for chapter in chapters %}
|
||||
<div class="chapter-plan">
|
||||
<h3><span class="chapter-number">{{loop.index}}</span> {{chapter.title}}</h3>
|
||||
<div class="chapter-description">
|
||||
{{chapter.description}}
|
||||
</div>
|
||||
|
||||
<div class="lessons">
|
||||
{% for lesson in chapter.lessons %}
|
||||
<div class="lesson">
|
||||
<span class="lesson-type"><i class="{{lesson.icon}}"></i></span>
|
||||
<span class="lesson-title">{{lesson.title}}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-12">
|
||||
<div class="sidebar">
|
||||
<h3>Instructor</h3>
|
||||
<div class="instructor">
|
||||
<div class="instructor-title">{{instructor.name}}</div>
|
||||
<div class="instructor-subtitle">Created {{instructor.num_courses}} courses</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<h3>Mentors</h3>
|
||||
{% for m in mentors %}
|
||||
<div class="instructor">
|
||||
<div class="instructor-title">{{m.name}}</div>
|
||||
<div class="instructor-subtitle">Mentored {{m.num_courses}} batches</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<div class="notice">
|
||||
Interested to become a mentor?
|
||||
|
||||
<div><a href="#">Apply Now!</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user