Analysis of static pages
Static vs dynamic
| entry |
Static page |
Dynamic page |
| Website content |
Fixed |
Constant change |
| Browser loading speed |
Faster (no requests to the server) |
More slowly |
| Change website content |
Difficult (modifying or creating new HTML pages) |
Simple (add data to the database) |
| URL File Extension |
.htm,.html |
.php,.asp,.jsp,.py |
| Create language |
HTML |
php,java,python |
Page analysis of this project
- The project consists of five modules: nwes, course, doc, users, admin.
- Create templates folder under the project root directory to store template files, and create news, course, doc and users folders under templates folder to store template files for each application module.
- Drag the provided static file into the corresponding directory
- Create a static directory in the project root directory to save static files (js,css,image, etc.)
- Drag the provided static files (css, js, images directory) into the static directory
Template extraction
- Create a base directory under the templates folder to store common code in each static file
base.html in the base directory
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="{% static 'css/base/reset.css' %}">
<link rel="stylesheet" href="{% static 'css/base/common.css' %}">
<link rel="stylesheet" href="{% static 'css/base/side.css' %}">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_684044_un7umbuwwfp.css">
{% block link %}
{% endblock %}
</head>
<body>
<!-- header start -->
<header id="header">
<div class="mw1200 header-contain clearfix">
<!-- logo start -->
<h1 class="logo">
<a href="javascript:void(0);" class="logo-title">Python</a>
</h1>
<!-- logo end -->
<!-- nav start -->
<nav class="nav">
<ul class="menu">
<li><a href="../index.html">home page</a></li>
<li><a href="../course/course.html">Online classroom</a></li>
<li><a href="../doc/docDownload.html">Download documents</a></li>
<li><a href="../search.html">search</a></li>
</ul>
</nav>
<!-- nav end -->
<!-- login start -->
<div class="login-box">
<div>
<i class="PyWhich py-user"></i>
<span>
<a href="../user/login.html" class="login">Sign in</a> / <a href="../users/register.html"
class="reg">register</a>
</span>
</div>
<div class="author hide">
<i class="PyWhich py-user"></i>
<span>qwertyui</span>
<ul class="author-menu">
<li><a href="javascript:void(0);">Back-stage management</a></li>
<li><a href="javascript:void(0);">Logout</a></li>
</ul>
</div>
</div>
<!-- login end -->
</div>
</header>
<!-- header end -->
<!-- main start -->
{% block main-start %}
<main id="main">
<div class="w1200 clearfix">
<!-- main-contain start -->
{% block contain %}
{% endblock %}
<!-- main-contain end -->
<!-- side start -->
{% block side %}
<aside class="side">
<div class="side-activities">
<h3 class="activities-title">Online classroom<a href="javascript:void(0)">More</a></h3>
<div class="activities-img">
<a href="javascript:void(0);" target="_blank">
<img src="../images/english.jpg" alt="title">
</a>
<p class="activities-tips">Dialogue with Miss and Sister Abroad</p>
</div>
<ul class="activities-list">
<li>
<a href="javascript:void(0);" target="_blank">
<span class="active-status active-start">Enrolment</span>
<span class="active-title"><a
href="https://Www.shiguangkey.com/course/2432"> Django Project Class</a></span>
</a>
</li>
<li>
<a href="javascript:void(0);" target="_blank">
<span class="active-status active-end">Has ended</span>
<span class="active-title"><a
href="https://Www.shiguangkey.com/course/2321">Python Introduction Basic Course</a></span>
</a>
</li>
</ul>
</div>
<div class="side-attention clearfix">
<h3 class="attention-title">Pay attention to me</h3>
<ul class="side-attention-address">
<li>
<a href="javascript:void(0);" target="_blank"><i class="PyWhich py-GitHub"></i>Taka</a>
</li>
<li>
<a href="javascript:void(0);" target="_blank"><i class="PyWhich py-zhihu"
style="color:rgb(0, 108, 226);"></i>Taka</a>
</li>
<li>
<a href="javascript:void(0);" target="_blank"><i class="PyWhich py-weibo"
style="color:rgb(245,92,110);"></i>Taka</a>
</li>
</ul>
<div class="side-attention-qr">
<p>Scan code concern</p>
</div>
</div>
<div class="side-hot-recommend">
<h3 class="hot-recommend">Popular recommendation</h3>
<ul class="hot-news-list">
<li>
<a href="javascript:void(0)" class="hot-news-contain clearfix">
<div class="hot-news-thumbnail">
<img src="../images/python_web.jpg"
alt="">
</div>
<div class="hot-news-content">
<p class="hot-news-title">Django Debugging tools django-debug-toolbar Installation and Use Tutorial</p>
<div class="hot-news-other clearfix">
<span class="news-type">python frame</span>
<!-- Self contained -->
<time class="news-pub-time">11 11 June</time>
<span class="news-author">python</span>
</div>
</div>
</a>
</li>
</ul>
</div>
</aside>
{% endblock %}
<!-- side end -->
</div>
</main>
{% endblock %}
<!-- footer start -->
<footer id="footer">
<div class="footer-box">
<div class="footer-content">
<p class="top-content">
<span class="link">
<a href="javascript:void(0)">about Python</a> |
<a href="javascript:void(0)">I am me</a> |
<a href="javascript:void(0)">Life is short.</a> |
<a href="javascript:void(0)">I use Python</a>
</span>
<span class="about-me">About me: <i class="PyWhich py-wechat"></i> Taka</span>
</p>
<p class="bottom-content">
<span>Address: xxxx</span>
<span>Contact information: <a href="tel:400-1567-315">400-1567-315</a> (24 Hour online)</span>
</p>
</div>
<p class="copyright-desc">
Copyright © 2008 - 2019 xxx Limited company. All Rights Reserved
</p>
</div>
</footer>
<!-- footer end -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
{% block domready %}
{% endblock %}
</body>
</html>
news
Home page index.html under news
{% extends 'base/base.html' %}
{% block title %}IndexPage{% endblock %}
{% block link %}<link rel="stylesheet" href="{% static 'css/news/index.css' %}">{% endblock %}
{% block contain %}
{# <!-- main-contain start -->#}
<div class="main-contain">
<!-- banner start -->
<div class="banner">
<ul class="pic">
<!--Fade in and fade out banner-->
<li><a href="javascript:void(0);"><img src="../images/ui.png" alt="test"></a></li>
<li><a href="javascript:void(0);"><img src="../images/youxi.png" alt="test"></a></li>
<li><a href="javascript:void(0);"><img src="../images/dianshang.png" alt="test"></a></li>
<li><a href="javascript:void(0);"><img src="../images/zimeiti.png" alt="test"></a></li>
<li><a href="javascript:void(0);"><img src="../images/python_gui.jpg" alt="test"></a></li>
<li><a href="javascript:void(0);"><img src="../images/linux.jpg" alt="test"></a></li>
</ul>
<a href="javascript:void(0);" class="btn prev">
<i class="PyWhich py-arrow-left"></i></a>
<a href="javascript:void(0);" class="btn next">
<i class="PyWhich py-arrow-right"></i></a>
<ul class="tab">
<!-- The number of buttons must be the same as the picture. -->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- banner end -->
<!-- content start -->
<div class="content">
<!-- recommend-news start -->
<ul class="recommend-news">
<li>
<a href="https://www.shiguangkey.com/course/2432" target="_blank">
<div class="recommend-thumbnail">
<img src="../images/python_gui.jpg" alt="title">
</div>
<p class="info">Python GUI Twenty-five lines of code to write a small alarm clock</p>
</a>
</li>
<li>
<a href="https://www.shiguangkey.com/course/2432" target="_blank">
<div class="recommend-thumbnail">
<img src="../images/python_advanced.jpg" alt="title">
</div>
<p class="info">python High Performance Programming Method 1</p>
</a>
</li>
<li>
<a href="https://www.shiguangkey.com/course/2432" target="_blank">
<div class="recommend-thumbnail">
<img src="../images/jichujiaochen.jpeg" alt="title">
</div>
<p class="info">python Basics split and join Function comparison</p>
</a>
</li>
</ul>
<!-- recommend-news end -->
<!-- news-nav start-->
<nav class="news-nav">
<ul class="clearfix">
<li class="active"><a href="javascript:void(0)">Latest information</a></li>
<li><a href="javascript:void(0)" data-id="1">python frame</a>
</li>
<li><a href="javascript:void(0)" data-id="2">Python Basics</a>
</li>
<li><a href="javascript:void(0)" data-id="3">Python senior</a>
</li>
<li><a href="javascript:void(0)" data-id="4">Python function</a>
</li>
<li><a href="javascript:void(0)" data-id="5">PythonGUI</a>
</li>
<li><a href="javascript:void(0)" data-id="6">Linux Course</a>
</li>
</ul>
</nav>
<!-- news-nav end -->
<!-- news-contain start -->
<div class="news-contain">
<ul class="news-list">
<li class="news-item">
<a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
target="_blank">
<img src="../images/linux.jpg" alt="linux Find file or directory commands"
title="linux Find file or directory commands">
</a>
<div class="news-content">
<h4 class="news-title"><a
href="#">Linux Find File or Directory Command</a>
</h4>
<p class="news-details">linux Find a file or directory command if you know the specific name of the file or directory, such as: sphinx.conffind lookup find / -name
dirname find directory find -name...</p>
<div class="news-other">
<span class="news-type">Linux Course</span>
<span class="news-time">11/11 18:24</span>
<span class="news-author">python</span>
</div>
</div>
</li>
<li class="news-item">
<a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
target="_blank">
<img src="../images/linux.jpg" alt="linux lower svn Use of commands"
title="linux lower svn Use of commands">
</a>
<div class="news-content">
<h4 class="news-title"><a
href="https://Www.shiguangkey.com/course/2432/887">Use of svn command under linux</a>
</h4>
<p class="news-details">1,Will file checkout To local directory svn checkout path(path It's the directory on the server, for example: svn checkout
svn://192.168.1.1/pro/domain abbreviation: svn co2, add new file svn addfile to version library, for example: SVN addte....</p>
<div class="news-other">
<span class="news-type">Linux Course</span>
<span class="news-time">11/11 18:24</span>
<span class="news-author">python</span>
</div>
</div>
</li>
<li class="news-item">
<a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
target="_blank">
<img src="../images/linux.jpg" alt="Realization linux and windows file transfer"
title="Realization linux and windows file transfer">
</a>
<div class="news-content">
<h4 class="news-title"><a
href="https://Www.shiguangkey.com/course/2432/886">Implementing linux and windows File Transfer</a>
</h4>
<p class="news-details">
//In fact, this topic is a bit big. Here we introduce only one of linux and windows file transfer, but this method is very practical. That is: ZModem protocol is specifically the linux command is: RZ...</p>
<div class="news-other">
<span class="news-type">Linux Course</span>
<span class="news-time">11/11 18:24</span>
<span class="news-author">python</span>
</div>
</div>
</li>
<li class="news-item">
<a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
target="_blank">
<img src="../images/linux.jpg" alt=".htaccess Configuration details"
title=".htaccess Configuration details">
</a>
<div class="news-content">
<h4 class="news-title"><a
href="https://Detailed configuration of www.shiguangkey.com/course/2432">.htaccess</a>
</h4>
<p class="news-details"> .htaccess File Settings Basic Tutorial If you have set up such as the commonly used 404 pages 301 redirection page and 500 pages will be set up
//It's just very helpful for your seo technology, so how to set up the. htaccess file in the end - - htaccess file (or & quot; distributed...)</p>
<div class="news-other">
<span class="news-type">Linux Course</span>
<span class="news-time">11/11 18:24</span>
<span class="news-author">python</span>
</div>
</div>
</li>
<li class="news-item">
<a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
target="_blank">
<img src="../images/linux.jpg" alt="Use nohup Command enable linux Background running of program"
title="Use nohup Command enable linux Background running of program">
</a>
<div class="news-content">
<h4 class="news-title"><a
href="https://Www.shiguangkey.com/course/2432">Use nohup command to make linux program run in the background</a>
</h4>
<p class="news-details">Use nohup Let the program run forever in the background Unix/Linux Next, for example, if you want a program to run in the background, a lot of it is used. &
//Let the program run automatically at the end of the program. For example, we want to run mysql in the background: / usr / local / mysql / bin / mysqld_safe -- user = mysql & amp; but...</p>
<div class="news-other">
<span class="news-type">Linux Course</span>
<span class="news-time">11/11 18:24</span>
<span class="news-author">python</span>
</div>
</div>
</li>
</ul>
</div>
<!-- news-contain end -->
<!-- btn-more start -->
<a href="javascript:void(0);" class="btn-more">Load more</a>
<!-- btn-more end -->
</div>
<!-- content end -->
</div>
{% endblock %}
<!-- main-contain end -->
{% block domready %}
<script src="{% static 'js/commons.js' %}"></script>
<script src="{% static 'js/index.js' %}"></script>
{% endblock %}
new_detail.html under news
{% extends 'base/base.html' %}
{% block title %}news-detail{% endblock %}
{% block link %}<link rel="stylesheet" href="{% static 'css/news/news-detail.css' %}">{% endblock %}
{% block contain %}
<div class="news-contain">
<h1 class="news-title">I'll just talk about me.</h1>
<div class="news-info">
<div class="news-info-left">
<span class="news-author">author</span>
<span class="news-pub-time">1 Hours ago</span>
<span class="news-type">type</span>
</div>
</div>
<article class="news-content">
Article content
</article>
<div class="comment-contain">
<div class="comment-pub clearfix">
<div class="new-comment">
Article review(<span class="comment-count">0</span>)
</div>
<div class="comment-control please-login-comment" style="display:none;">
<input type="text" placeholder="Please login for comments">
</div>
<div class="comment-control logged-comment">
<input type="text" placeholder="Please fill in the comments.">
</div>
<button class="comment-btn">Comment</button>
</div>
<ul class="comment-list">
<li class="comment-item">
<div class="comment-info clearfix">
<img src="../images/avatar.jpeg" alt="avatar" class="comment-avatar">
<span class="comment-user">Commentator</span>
<span class="comment-pub-time">1 Hours ago</span>
</div>
<div class="comment-content">This is a comment.</div>
</li>
<li class="comment-item">
<div class="comment-info clearfix">
<img src="../images/avatar.jpeg" alt="avatar" class="comment-avatar">
<span class="comment-user">Commentator</span>
<span class="comment-pub-time">1 Hours ago</span>
</div>
<div class="comment-content">This is a comment.</div>
</li>
</ul>
</div>
</div>
{% endblock %}
search.html under news
{% extends 'base/base.html' %}
{% block link %}
<link rel="stylesheet" href="{% static 'css/news/search.css' %}">
{% endblock %}
{% block contain %}
<div class="main-contain ">
<!-- search-box start -->
<div class="search-box">
<form action="" style="display: inline-flex;">
<input type="search" placeholder="Please enter what you want to search for" name="q" class="search-control">
<input type="submit" value="search" class="search-btn">
</form>
<!-- Floating vertical alignment and flex -->
</div>
<!-- search-box end -->
<!-- content start -->
<div class="content">
<!-- search-list start -->
<!-- search-list end -->
<!-- news-contain start -->
<div class="news-contain">
<div class="hot-recommend-list">
<h2 class="hot-recommend-title">Popular recommendation</h2>
<ul class="news-list">
<li class="news-item clearfix">
<a href="#" class="news-thumbnail">
<img src="../images/python_gui.jpg">
</a>
<div class="news-content">
<h4 class="news-title">
<a href="#">Python GUI tutorial 25 lines of code to write a small alarm clock</a>
</h4>
<p class="news-details">
</p>
<div class="news-other">
<span class="news-type">PythonGUI</span>
<span class="news-time">11/11 18:22</span>
<span class="news-author">python</span>
</div>
</div>
</li>
<li class="news-item clearfix">
<a href="#" class="news-thumbnail">
<img src="../images/python_advanced.jpg">
</a>
<div class="news-content">
<h4 class="news-title">
<a href="#">python High Performance Programming Method 1</a>
</h4>
<p class="news-details">
</p>
<div class="news-other">
<span class="news-type">Python senior</span>
<span class="news-time">11/11 17:13</span>
<span class="news-author">python</span>
</div>
</div>
</li>
<li class="news-item clearfix">
<a href="#" class="news-thumbnail">
<img src="../images/jichujiaochen.jpeg">
</a>
<div class="news-content">
<h4 class="news-title">
<a href="#">python-based split and join functions comparison</a>
</h4>
<p class="news-details">
</p>
<div class="news-other">
<span class="news-type">Python Basics</span>
<span class="news-time">11/11 16:09</span>
<span class="news-author">python</span>
</div>
</div>
</li>
<li class="news-item clearfix">
<a href="#" class="news-thumbnail">
<img src="../images/python_web.jpg">
</a>
<div class="news-content">
<h4 class="news-title">
<a href="#">Django Debugging Tool django-debug-toolbar Installation and Use Tutorial</a>
</h4>
<p class="news-details">
</p>
<div class="news-other">
<span class="news-type">python frame</span>
<span class="news-time">11/11 15:28</span>
<span class="news-author">python</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- content end -->
</div>
{% endblock %}
<!-- main-contain end -->
{% block domready %}
<script src="../js/commons.js"></script>
<script src="../js/index.js"></script>
{% endblock %}
doc
docDownload.html under doc
{% extends 'base/base.html' %}
{% block title %}payInfo{% endblock %}
{% block link %}<link rel="stylesheet" href="{% static 'css/doc/docDownload.css' %}">{% endblock %}
<!-- main start -->
{% block contain %}
<div class="main-contain ">
<div class="banner">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1802845035,3786939119&fm=26&gp=0.jpg"
alt="">
</div>
<div class="pay-doc-contain">
<ul class="pay-list">
<li class="pay-item">
<div class="pay-img doc"></div>
<div class="d-contain">
<p class="doc-title">python cookbook 3.0 Course</p>
<p class="doc-desc">Strongly recommended python Course.</p>
<!-- /www/?xxx -->
<a href="#"Class=" pay-price "> download</a>
</div>
</li>
<li class="pay-item">
<div class="pay-img doc"></div>
<div class="pay-contain">
<p class="pay-title">Fluent Python</p>
<p class="pay-desc">[Features of the book)
The book is written by the struggling Python Developing Front Line for Nearly 20 Years Luciano Ramalho Write, Victor Stinner,Alex
Martelli etc. Python The technical reviewer of Dacai takes the lead in analyzing the programming details from the level of language design, giving consideration to both Python 3 and Python
2，Tell you Python Understanding the causes and solutions of language traps without hands-on practice teaches you to write authentic style Python Code.</p>
<!-- /www/?xxx -->
<a href="#"Class=" pay-price "> download</a>
</div>
</li>
<li class="pay-item">
<div class="pay-img doc"></div>
<div class="pay-contain">
<p class="pay-title">thorough Flask</p>
<p class="pay-desc">thorough Flask，Strongly recommended!</p>
<!-- /www/?xxx -->
<a href="#"Class=" pay-price "> download</a>
</div>
</li>
</ul>
</div>
</div>
{% endblock %}
<!-- main-contain end -->
<!-- side start -->
{% block domready %}
<script src="../js/commons.js"></script>
{% endblock %}
users
login.html under users
{% extends 'base/base.html' %}
{% block title %}LoginPage{% endblock %}
{% block link %}<link rel="stylesheet" href="{% static 'css/authPro/auth.css' %}">{% endblock %}
<!-- header end -->
<!-- container start -->
{% block main-start %}
<main id="container">
<div class="login-contain">
<div class="top-contain">
<h4 class="please-login">Please login</h4>
<a href="javascript:void(0);" class="register">Immediate registration ></a>
</div>
<form action="" method="post" class="form-contain">
<div class="form-item">
<input type="tel" placeholder="Please enter your cell phone number." name="telephone" class="form-control" autocomplete="off">
</div>
<div class="form-item">
<input type="password" placeholder="Please input a password" name="password" class="form-control">
</div>
<div class="form-item clearfix">
<label>
<input type="checkbox" name="remember">
<span>Remember me</span>
</label>
<a href="javascript:void(0);" class="forget-password">Forget password?</a>
</div>
<div class="form-login">
<input type="submit" value="Sign in" class="login-btn">
</div>
</form>
</div>
</main>
{% endblock %}
<!-- container end -->
register under users
{% extends 'base/base.html' %}
{% block title %}RegisterPage{% endblock %}
{% block link %}<link rel="stylesheet" href="{% static 'css/authPro/auth.css' %}">{% endblock %}
<!-- container start -->
{% block main-start %}
<main id="container">
<div class="register-contain">
<div class="top-contain">
<h4 class="please-register">Please register</h4>
<a href="javascript:void(0);" class="login">Login immediately ></a>
</div>
<form action="" method="post" class="form-contain">
<div class="form-item">
<input type="text" placeholder="enter one user name" id="user_name" name="username" class="form-control" autocomplete="off">
</div>
<div class="form-item">
<input type="password" placeholder="Please input a password" id="pwd" name="password" class="form-control">
</div>
<div class="form-item">
<input type="password" placeholder="Please enter a confirmation password." name="password_repeat" class="form-control">
</div>
<div class="form-item">
<input type="tel" placeholder="Please enter your cell phone number." id="mobile" name="telephone" class="form-control" autocomplete="off" autofocus>
</div>
<div class="form-item">
<input type="text" placeholder="Please enter the Graphic Verification Code" id="input_captcha" name="captcha_graph" class="form-captcha">
<a href="javascript:void(0);" class="captcha-graph-img">
<img src="../images/captcha.png" alt="Verification Code" title="Click refresh">
</a>
</div>
<div class="form-item">
<input type="text" placeholder="Please enter SMS Verification Code" name="sms_captcha" class="form-captcha" id="input_smscode" autocomplete="off">
<a href="javascript:void(0);" class="sms-captcha" title="Send Verification Code">Getting Short Message Verification Code</a>
</div>
<div class="form-item">
<input type="submit" value="Immediate registration" class="register-btn">
</div>
</form>
</div>
</main>
{% endblock %}
<!-- container end -->
course
course.html under course
{% extends 'base/base.html' %}
{% block title %}coursePage{% endblock %}
{% block link %}<link rel="stylesheet" href="{% static 'css/course/course.css' %}">{% endblock %}
{% block main-start %}
<main id="course-container">
<div class="w1200">
<ul class="course-list">
<li class="course-item">
<a href="https://www.shiguangkey.com/course/2432">
<img class="course-img" src="../images/python_advanced.jpg"
alt="Tan Zhou English">
<div class="course-content">
<p class="course-info">python Full stack development</p>
<p class="course-author">Immobility(python Gold medal lecturer)</p>
<p class="course-price free">Free Admission</p>
</div>
</a>
</li>
<li class="course-item">
<a href="https://www.shiguangkey.com/course/2432">
<img class="course-img" src="../images/python_web.jpg"
alt="Tan Zhou English">
<div class="course-content">
<p class="course-info">django project</p>
<p class="course-author">Taka(python lecturer)</p>
<p class="course-price free">Free Admission</p>
</div>
</a>
</li>
</ul>
</div>
</main>
{% endblock %}
{% block domready %}
<script src="../js/commons.js"></script>
{% endblock %}
course_detail.html
{% extends 'base/base.html' %}
{% block title %}Course Details Page{% endblock %}
{% block link %}<link rel="stylesheet" href="{% static 'css/course/course-detail.css' %}">{% endblock %}
<!-- main start -->
{% block main-start %}
<main id="main">
<div class="w1200">
<div class="course-contain">
<div class="course-top-contain">
<h4 class="course-title">Course title</h4>
<div class="course-other clearfix">
<div class="share-list">
<span>Share to:</span>
<i class="PyWhich py-weibo"></i>
<i class="PyWhich py-weibo2"></i>
</div>
<div class="buy-list">
<span class="price">Free Admission</span>
</div>
</div>
</div>
<div class="course-video" id="course-video">
</div>
<div class="course-bottom-contain">
<div class="course-detail-list">
<div class="course-item clearfix">
<h5 class="course-title">Course lecturer</h5>
<div class="teacher-box clearfix">
<img src="../images/avatar.jpeg" alt="Which"
title="Which" class="teacher-avatar">
<div class="teacher-info">
<p class="teacher-name">Tuple</p>
<p class="teacher-identify"> Life is short.</p>
</div>
</div>
<div class="item-content">
Life is short, life is short, life is short, life is short.
</div>
</div>
<div class="course-item clearfix">
<h5 class="course-title">Course introduction</h5>
<div class="item-content">
Life is short, life is short, life is short, life is short.Life is short.
</div>
</div>
<div class="course-item clearfix">
<h5 class="course-title">Syllabus</h5>
<div class="item-content">
<p>Life is short, life is short, life is short, life is short.</p>
</div>
</div>
<div class="course-item clearfix">
<h5 class="course-title">Help center</h5>
<div class="item-content">
<p>1. After purchasing the course online, you can watch and learn repeatedly. The validity period of the video is based on the specific course information. </p>
<p>2. For the time being, the course does not support downloading and watching, all of which are online watching videos. </p>
<p>3. Once the course is purchased, it is non-transferable and non-refundable; only the purchase account is allowed to watch.</p>
<p>4. If you have any questions, please consult customer service.: 400-1567-315 </p>
</div>
</div>
<div class="course-item clearfix">
<h5 class="course-title">On Tanzhou Classroom</h5>
<div class="item-content">
Hunan Tanzhou Educational Network Technology Co., Ltd. has more than 1000 excellent teachers, is an online training company with abundant teachers and a wide range of educational products. The company's headquarters is located in the beautiful Star City of Changsha. In September 2015, it was formally stationed in the Science Park of Xincheng, which currently has nearly 20,000 square meters of office space.
The number of students studying in Tanzhou has exceeded 10 million, covering the whole world, including China, Canada, Japan, the United States, South Korea and many other countries.
</div>
</div>
<div class="course-item clearfix">
<div class="item-content">
<div class="item-course-title">123</div>
<div class="item-buy-list">
<span class="price">Free Admission</span>
</div>
</div>
</div>
</div>
<div class="course-side">
<h4 class="side-title">Recommended courses</h4>
</div>
</div>
</div>
</div>
</main>
{% endblock %}
<!-- main end -->