mirror of
https://github.com/Hopiu/djLint.git
synced 2026-05-28 14:18:16 +00:00
194 lines
9.8 KiB
HTML
194 lines
9.8 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% block title %}UI Timeline {% endblock %}
|
|
<!-- Element injected in the BODY element -->
|
|
{% block body_class %}{% endblock body_class %}
|
|
<!-- Specific Page CSS goes HERE -->
|
|
{% block stylesheets %}
|
|
<!-- Google Font: Source Sans Pro -->
|
|
<link rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
|
|
<!-- Theme style -->
|
|
<link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
|
|
{% endblock stylesheets %}
|
|
{% block content %}
|
|
<!-- Content Wrapper. Contains page content -->
|
|
<div class="content-wrapper">
|
|
<!-- Content Header (Page header) -->
|
|
<section class="content-header">
|
|
<div class="container-fluid">
|
|
<div class="row mb-2">
|
|
<div class="col-sm-6">
|
|
<h1>Timeline</h1>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<ol class="breadcrumb float-sm-right">
|
|
<li class="breadcrumb-item">
|
|
<a href="#">Home</a>
|
|
</li>
|
|
<li class="breadcrumb-item active">
|
|
Timeline
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container-fluid -->
|
|
</section>
|
|
<!-- Main content -->
|
|
<section class="content">
|
|
<div class="container-fluid">
|
|
<!-- Timelime example -->
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<!-- The time line -->
|
|
<div class="timeline">
|
|
<!-- timeline time label -->
|
|
<div class="time-label">
|
|
<span class="bg-red">10 Feb. 2014</span>
|
|
</div>
|
|
<!-- /.timeline-label -->
|
|
<!-- timeline item -->
|
|
<div>
|
|
<i class="fas fa-envelope bg-blue"></i>
|
|
<div class="timeline-item">
|
|
<span class="time">
|
|
<i class="fas fa-clock"></i>
|
|
12:05
|
|
</span>
|
|
<h3 class="timeline-header">
|
|
<a href="#">Support Team</a>
|
|
sent you an email
|
|
</h3>
|
|
<div class="timeline-body">
|
|
Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles,
|
|
weebly ning heekya handango imeem plugg dopplr jibjab, movity
|
|
jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle
|
|
quora plaxo ideeli hulu weebly balihoo...
|
|
</div>
|
|
<div class="timeline-footer">
|
|
<a class="btn btn-primary btn-sm">Read more</a>
|
|
<a class="btn btn-danger btn-sm">Delete</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END timeline item -->
|
|
<!-- timeline item -->
|
|
<div>
|
|
<i class="fas fa-user bg-green"></i>
|
|
<div class="timeline-item">
|
|
<span class="time">
|
|
<i class="fas fa-clock"></i>
|
|
5 mins ago
|
|
</span>
|
|
<h3 class="timeline-header no-border">
|
|
<a href="#">Sarah Young</a>
|
|
accepted your friend request
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<!-- END timeline item -->
|
|
<!-- timeline item -->
|
|
<div>
|
|
<i class="fas fa-comments bg-yellow"></i>
|
|
<div class="timeline-item">
|
|
<span class="time">
|
|
<i class="fas fa-clock"></i>
|
|
27 mins ago
|
|
</span>
|
|
<h3 class="timeline-header">
|
|
<a href="#">Jay White</a>
|
|
commented on your post
|
|
</h3>
|
|
<div class="timeline-body">
|
|
Take me to your leader!
|
|
Switzerland is small and neutral!
|
|
We are more like Germany, ambitious and misunderstood!
|
|
</div>
|
|
<div class="timeline-footer">
|
|
<a class="btn btn-warning btn-sm">View comment</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END timeline item -->
|
|
<!-- timeline time label -->
|
|
<div class="time-label">
|
|
<span class="bg-green">3 Jan. 2014</span>
|
|
</div>
|
|
<!-- /.timeline-label -->
|
|
<!-- timeline item -->
|
|
<div>
|
|
<i class="fa fa-camera bg-purple"></i>
|
|
<div class="timeline-item">
|
|
<span class="time">
|
|
<i class="fas fa-clock"></i>
|
|
2 days ago
|
|
</span>
|
|
<h3 class="timeline-header">
|
|
<a href="#">Mina Lee</a>
|
|
uploaded new photos
|
|
</h3>
|
|
<div class="timeline-body">
|
|
<img src="https://placehold.it/150x100" alt="...">
|
|
<img src="https://placehold.it/150x100" alt="...">
|
|
<img src="https://placehold.it/150x100" alt="...">
|
|
<img src="https://placehold.it/150x100" alt="...">
|
|
<img src="https://placehold.it/150x100" alt="...">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END timeline item -->
|
|
<!-- timeline item -->
|
|
<div>
|
|
<i class="fas fa-video bg-maroon"></i>
|
|
<div class="timeline-item">
|
|
<span class="time">
|
|
<i class="fas fa-clock"></i>
|
|
5 days ago
|
|
</span>
|
|
<h3 class="timeline-header">
|
|
<a href="#">
|
|
Mr. Doe
|
|
</a>
|
|
shared a video
|
|
</h3>
|
|
<div class="timeline-body">
|
|
<div class="embed-responsive embed-responsive-16by9">
|
|
<iframe class="embed-responsive-item"
|
|
src="https://www.youtube.com/embed/tMWkeBIohBs"></iframe>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-footer">
|
|
<a href="#" class="btn btn-sm bg-maroon">
|
|
See comments
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END timeline item -->
|
|
<div>
|
|
<i class="fas fa-clock bg-gray"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.col -->
|
|
</div>
|
|
</div>
|
|
<!-- /.timeline -->
|
|
</section>
|
|
<!-- /.content -->
|
|
</div>
|
|
<!-- /.content-wrapper -->
|
|
{% endblock content %}
|
|
<!-- Specific Page JS goes HERE -->
|
|
{% block javascripts %}
|
|
<!-- jQuery -->
|
|
<script src="/static/assets/plugins/jquery/jquery.min.js"></script>
|
|
<!-- Bootstrap 4 -->
|
|
<script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
<!-- AdminLTE App -->
|
|
<script src="/static/assets/js/adminlte.min.js"></script>
|
|
<!-- AdminLTE for demo purposes -->
|
|
<script src="/static/assets/js/demo.js"></script>
|
|
{% endblock javascripts %}
|