512 lines
23 KiB
HTML
512 lines
23 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% load static %}
|
|
|
|
{% block title %}Page with Mixed Menu{% endblock %}
|
|
|
|
{% block css %}
|
|
<link href="{% static 'plugins/lity/dist/lity.min.css' %}" rel="stylesheet" />
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
|
|
<script src="{% static 'plugins/lity/dist/lity.min.js' %}"></script>
|
|
<script src="{% static 'js/demo/timeline.demo.js' %}"></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- BEGIN breadcrumb -->
|
|
<ol class="breadcrumb float-xl-end">
|
|
<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="javascript:;">Extra</a></li>
|
|
<li class="breadcrumb-item active">Timeline</li>
|
|
</ol>
|
|
<!-- END breadcrumb -->
|
|
<!-- BEGIN page-header -->
|
|
<h1 class="page-header">Timeline <small>header small text goes here...</small></h1>
|
|
<!-- END page-header -->
|
|
<!-- BEGIN timeline -->
|
|
<div class="timeline">
|
|
<!-- BEGIN timeline-item -->
|
|
<div class="timeline-item">
|
|
<!-- BEGIN timeline-time -->
|
|
<div class="timeline-time">
|
|
<span class="date">today</span>
|
|
<span class="time">04:20</span>
|
|
</div>
|
|
<!-- END timeline-time -->
|
|
<!-- BEGIN timeline-icon -->
|
|
<div class="timeline-icon">
|
|
<a href="javascript:;"> </a>
|
|
</div>
|
|
<!-- END timeline-icon -->
|
|
<!-- BEGIN timeline-content -->
|
|
<div class="timeline-content">
|
|
<!-- BEGIN timeline-header -->
|
|
<div class="timeline-header">
|
|
<div class="userimage"><img src="{% static 'img/user/user-1.jpg' %}" alt="" /></div>
|
|
<div class="username">
|
|
<a href="javascript:;">John Smith <i class="fa fa-check-circle text-blue ms-1"></i></a>
|
|
<div class="text-muted fs-12px">8 mins <i class="fa fa-globe-americas opacity-5 ms-1"></i></div>
|
|
</div>
|
|
<div>
|
|
<a href="#" class="btn btn-lg border-0 rounded-pill w-40px h-40px p-0 d-flex align-items-center justify-content-center" data-bs-toggle="dropdown">
|
|
<i class="fa fa-ellipsis-h text-gray-600"></i>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-end">
|
|
<a href="#" class="dropdown-item d-flex align-items-center">
|
|
<i class="fa fa-fw fa-bookmark fa-lg"></i>
|
|
<div class="flex-1 ps-1">
|
|
<div>Save Post</div>
|
|
<div class="mt-n1 text-gray-500"><small>Add this to your saved items</small></div>
|
|
</div>
|
|
</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-edit fa-lg me-1"></i> Edit post</a>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-user fa-lg me-1"></i> Edit audience</a>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-bell fa-lg me-1"></i> Turn off notifications for this post</a>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-language fa-lg me-1"></i> Turn off translations</a>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-calendar-alt fa-lg me-1"></i> Turn date</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-archive fa-lg me-1"></i> Move to archive</a>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-trash-alt fa-lg me-1"></i> Move to Recycle bin</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END timeline-header -->
|
|
|
|
<!-- BEGIN timeline-body -->
|
|
<div class="timeline-body">
|
|
<!-- timeline-post -->
|
|
<div class="mb-3">
|
|
<div class="mb-2">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc faucibus turpis quis tincidunt luctus.
|
|
Nam sagittis dui in nunc consequat, in imperdiet nunc sagittis.
|
|
</div>
|
|
<div class="row gx-1">
|
|
<div class="col-6">
|
|
<div class="ratio ratio-4x3">
|
|
<a href="{% static 'img/gallery/gallery-14.jpg' %}" data-lity class="bg-size-cover bg-position-center" style="background-image: url({% static 'img/gallery/gallery-14.jpg' %})"></a>
|
|
</div>
|
|
</div>
|
|
<div class="col-3">
|
|
<div class="ratio ratio-4x3 mb-3px">
|
|
<a href="{% static 'img/gallery/gallery-12.jpg' %}" data-lity class="bg-size-cover bg-position-center" style="background-image: url({% static 'img/gallery/gallery-12.jpg' %})"></a>
|
|
</div>
|
|
<div class="ratio ratio-4x3">
|
|
<a href="{% static 'img/gallery/gallery-16.jpg' %}" data-lity class="bg-size-cover bg-position-center" style="background-image: url({% static 'img/gallery/gallery-16.jpg' %})"></a>
|
|
</div>
|
|
</div>
|
|
<div class="col-3">
|
|
<div class="ratio ratio-4x3 mb-3px">
|
|
<a href="{% static 'img/gallery/gallery-15.jpg' %}" data-lity class="bg-size-cover bg-position-center" style="background-image: url({% static 'img/gallery/gallery-15.jpg' %})"></a>
|
|
</div>
|
|
<div class="ratio ratio-4x3">
|
|
<a href="{% static 'img/gallery/gallery-11.jpg' %}" data-lity class="bg-size-cover bg-position-center" style="background-image: url({% static 'img/gallery/gallery-11.jpg' %})"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- timeline-stats -->
|
|
<div class="d-flex align-items-center text-dark mb-2">
|
|
<div class="d-flex align-items-center">
|
|
<span class="fa-stack fs-10px">
|
|
<i class="fa fa-circle fa-stack-2x text-danger"></i>
|
|
<i class="fa fa-heart fa-stack-1x fa-inverse fs-11px"></i>
|
|
</span>
|
|
<span class="fa-stack fs-10px">
|
|
<i class="fa fa-circle fa-stack-2x text-blue"></i>
|
|
<i class="fa fa-thumbs-up fa-stack-1x fa-inverse fs-11px bottom-0 mb-1px"></i>
|
|
</span>
|
|
<span class="ms-1">4.3k</span>
|
|
</div>
|
|
<div class="d-flex align-items-center ms-auto">
|
|
<div>259 Shares</div>
|
|
<div class="ms-3">21 Comments</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- timeline-action -->
|
|
<hr class="my-10px" />
|
|
<div class="d-flex align-items-center fw-bold">
|
|
<a href="javascript:;" class="flex-fill text-decoration-none text-center text-gray-600">
|
|
<i class="fa fa-thumbs-up fa-fw me-3px"></i> Like
|
|
</a>
|
|
<a href="javascript:;" class="flex-fill text-decoration-none text-center text-gray-600">
|
|
<i class="fa fa-comments fa-fw me-3px"></i> Comment
|
|
</a>
|
|
<a href="javascript:;" class="flex-fill text-decoration-none text-center text-gray-600">
|
|
<i class="fa fa-share fa-fw me-3px"></i> Share
|
|
</a>
|
|
</div>
|
|
<hr class="mt-10px mb-3" />
|
|
|
|
<!-- timeline-input -->
|
|
<form action="" class="d-flex align-items-center">
|
|
<div><img src="{% static 'img/user/user-13.jpg' %}" height="35" class="rounded-pill" /></div>
|
|
<div class="ps-2 flex-1">
|
|
<div class="position-relative">
|
|
<input type="text" class="form-control rounded-pill ps-3 py-2 fs-13px bg-light" placeholder="Write a comment..." />
|
|
<div class="position-absolute end-0 top-0 bottom-0 d-flex align-items-center px-2">
|
|
<a href="#" class="btn bg-none text-gray-600 shadow-none px-1"><i class="far fa-smile fa-fw fa-lg d-block"></i></a>
|
|
<a href="#" class="btn bg-none text-gray-600 shadow-none px-1"><i class="fa fa-camera fa-fw fa-lg d-block"></i></a>
|
|
<a href="#" class="btn bg-none text-gray-600 shadow-none px-1"><i class="fa fa-film fa-fw fa-lg d-block"></i></a>
|
|
<a href="#" class="btn bg-none text-gray-600 shadow-none px-1"><i class="far fa-sticky-note fa-fw fa-lg d-block"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- END timeline-body -->
|
|
</div>
|
|
<!-- END timeline-content -->
|
|
</div>
|
|
<!-- END timeline-item -->
|
|
<!-- BEGIN timeline-item -->
|
|
<div class="timeline-item">
|
|
<!-- BEGIN timeline-time -->
|
|
<div class="timeline-time">
|
|
<span class="date">yesterday</span>
|
|
<span class="time">20:17</span>
|
|
</div>
|
|
<!-- END timeline-time -->
|
|
<!-- BEGIN timeline-icon -->
|
|
<div class="timeline-icon">
|
|
<a href="javascript:;"> </a>
|
|
</div>
|
|
<!-- END timeline-icon -->
|
|
<!-- BEGIN timeline-content -->
|
|
<div class="timeline-content">
|
|
<!-- BEGIN timeline-header -->
|
|
<div class="timeline-header">
|
|
<div class="userimage"><img src="{% static 'img/user/user-2.jpg' %}" alt="" /></div>
|
|
<div class="username">
|
|
<a href="javascript:;">Darren Parrase</a>
|
|
<div class="text-muted fs-12px">24 mins <i class="fa fa-globe-americas opacity-5 ms-1"></i></div>
|
|
</div>
|
|
<div>
|
|
<a href="#" class="btn btn-lg border-0 rounded-pill w-40px h-40px p-0 d-flex align-items-center justify-content-center" data-bs-toggle="dropdown">
|
|
<i class="fa fa-ellipsis-h text-gray-600"></i>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-end">
|
|
<a href="#" class="dropdown-item d-flex align-items-center">
|
|
<i class="fa fa-fw fa-bookmark fa-lg"></i>
|
|
<div class="flex-1 ps-1">
|
|
<div>Save Post</div>
|
|
<div class="mt-n1 text-gray-500"><small>Add this to your saved items</small></div>
|
|
</div>
|
|
</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-edit fa-lg me-1"></i> Edit post</a>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-user fa-lg me-1"></i> Edit audience</a>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-bell fa-lg me-1"></i> Turn off notifications for this post</a>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-language fa-lg me-1"></i> Turn off translations</a>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-calendar-alt fa-lg me-1"></i> Turn date</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-archive fa-lg me-1"></i> Move to archive</a>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-trash-alt fa-lg me-1"></i> Move to Recycle bin</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END timeline-header -->
|
|
|
|
<!-- BEGIN timeline-body -->
|
|
<div class="timeline-body">
|
|
<!-- timeline-post -->
|
|
<div class="mb-3">
|
|
<div class="mb-2">Location: United States</div>
|
|
<div id="google-map" class="h-250px"></div>
|
|
</div>
|
|
|
|
<!-- timeline-stats -->
|
|
<div class="d-flex align-items-center text-dark mb-2">
|
|
<div class="d-flex align-items-center">
|
|
<span class="fa-stack fs-10px">
|
|
<i class="fa fa-circle fa-stack-2x text-danger"></i>
|
|
<i class="fa fa-heart fa-stack-1x fa-inverse fs-11px"></i>
|
|
</span>
|
|
<span class="fa-stack fs-10px">
|
|
<i class="fa fa-circle fa-stack-2x text-blue"></i>
|
|
<i class="fa fa-thumbs-up fa-stack-1x fa-inverse fs-11px bottom-0 mb-1px"></i>
|
|
</span>
|
|
<span class="ms-1">269</span>
|
|
</div>
|
|
<div class="d-flex align-items-center ms-auto">
|
|
<div>2 Shares</div>
|
|
<div class="ms-3">9 Comments</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- timeline-action -->
|
|
<hr class="my-10px" />
|
|
<div class="d-flex align-items-center fw-bold">
|
|
<a href="javascript:;" class="flex-fill text-decoration-none text-center text-gray-600">
|
|
<i class="fa fa-thumbs-up fa-fw me-3px"></i> Like
|
|
</a>
|
|
<a href="javascript:;" class="flex-fill text-decoration-none text-center text-gray-600">
|
|
<i class="fa fa-comments fa-fw me-3px"></i> Comment</a>
|
|
<a href="javascript:;" class="flex-fill text-decoration-none text-center text-gray-600">
|
|
<i class="fa fa-share fa-fw me-3px"></i> Share
|
|
</a>
|
|
</div>
|
|
<hr class="mt-10px mb-3" />
|
|
|
|
<!-- timeline-input -->
|
|
<form action="" class="d-flex align-items-center">
|
|
<div><img src="{% static 'img/user/user-13.jpg' %}" height="35" class="rounded-pill" /></div>
|
|
<div class="ps-2 flex-1">
|
|
<div class="position-relative">
|
|
<input type="text" class="form-control rounded-pill ps-3 py-2 fs-13px bg-light" placeholder="Write a comment..." />
|
|
<div class="position-absolute end-0 top-0 bottom-0 d-flex align-items-center px-2">
|
|
<a href="#" class="btn bg-none text-gray-600 shadow-none px-1"><i class="far fa-smile fa-fw fa-lg d-block"></i></a>
|
|
<a href="#" class="btn bg-none text-gray-600 shadow-none px-1"><i class="fa fa-camera fa-fw fa-lg d-block"></i></a>
|
|
<a href="#" class="btn bg-none text-gray-600 shadow-none px-1"><i class="fa fa-film fa-fw fa-lg d-block"></i></a>
|
|
<a href="#" class="btn bg-none text-gray-600 shadow-none px-1"><i class="far fa-sticky-note fa-fw fa-lg d-block"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- END timeline-body -->
|
|
</div>
|
|
<!-- END timeline-content -->
|
|
</div>
|
|
<!-- END timeline-item -->
|
|
<!-- BEGIN timeline-item -->
|
|
<div class="timeline-item">
|
|
<!-- BEGIN timeline-time -->
|
|
<div class="timeline-time">
|
|
<span class="date">24 February 2025</span>
|
|
<span class="time">08:17</span>
|
|
</div>
|
|
<!-- END timeline-time -->
|
|
<!-- BEGIN timeline-icon -->
|
|
<div class="timeline-icon">
|
|
<a href="javascript:;"> </a>
|
|
</div>
|
|
<!-- END timeline-icon -->
|
|
<!-- BEGIN timeline-content -->
|
|
<div class="timeline-content">
|
|
<!-- BEGIN timeline-header -->
|
|
<div class="timeline-header">
|
|
<div class="userimage"><img src="{% static 'img/user/user-3.jpg' %}" alt="" /></div>
|
|
<div class="username">
|
|
<a href="javascript:;">Richard Leong <i class="fa fa-check-circle text-blue ms-1"></i></a>
|
|
<div class="text-muted fs-12px">12 hours <i class="fa fa-globe-americas opacity-5 ms-1"></i></div>
|
|
</div>
|
|
<div>
|
|
<a href="#" class="btn btn-lg border-0 rounded-pill w-40px h-40px p-0 d-flex align-items-center justify-content-center" data-bs-toggle="dropdown">
|
|
<i class="fa fa-ellipsis-h text-gray-600"></i>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-end">
|
|
<a href="#" class="dropdown-item d-flex align-items-center">
|
|
<i class="fa fa-fw fa-bookmark fa-lg"></i>
|
|
<div class="flex-1 ps-1">
|
|
<div>Save Post</div>
|
|
<div class="mt-n1 text-gray-500"><small>Add this to your saved items</small></div>
|
|
</div>
|
|
</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-edit fa-lg me-1"></i> Edit post</a>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-user fa-lg me-1"></i> Edit audience</a>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-bell fa-lg me-1"></i> Turn off notifications for this post</a>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-language fa-lg me-1"></i> Turn off translations</a>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-calendar-alt fa-lg me-1"></i> Turn date</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-archive fa-lg me-1"></i> Move to archive</a>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-trash-alt fa-lg me-1"></i> Move to Recycle bin</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END timeline-header -->
|
|
<!-- BEGIN timeline-body -->
|
|
<div class="timeline-body">
|
|
<!-- timeline-post -->
|
|
<div class="lead mb-3">
|
|
<i class="fa fa-quote-left fa-fw float-start opacity-5 me-3 mb-3 mt-3 fa-lg"></i>
|
|
Quisque sed varius nisl. Nulla facilisi. Phasellus consequat sapien sit amet nibh molestie placerat. Donec nulla quam, ullamcorper ut velit vitae, lobortis condimentum magna. Suspendisse mollis in sem vel mollis.
|
|
<i class="fa fa-quote-right fa-fw float-end opacity-5 ms-3 mt-n3 fa-lg"></i>
|
|
</div>
|
|
|
|
<!-- timeline-stats -->
|
|
<div class="d-flex align-items-center text-dark mb-2">
|
|
<div class="d-flex align-items-center">
|
|
<span class="fa-stack fs-10px">
|
|
<i class="fa fa-circle fa-stack-2x text-danger"></i>
|
|
<i class="fa fa-heart fa-stack-1x fa-inverse fs-11px"></i>
|
|
</span>
|
|
<span class="fa-stack fs-10px">
|
|
<i class="fa fa-circle fa-stack-2x text-blue"></i>
|
|
<i class="fa fa-thumbs-up fa-stack-1x fa-inverse fs-11px bottom-0 mb-1px"></i>
|
|
</span>
|
|
<span class="ms-1">550</span>
|
|
</div>
|
|
<div class="d-flex align-items-center ms-auto">
|
|
<div>121 Shares</div>
|
|
<div class="ms-3">40 Comments</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- timeline-action -->
|
|
<hr class="my-10px" />
|
|
<div class="d-flex align-items-center fw-bold">
|
|
<a href="javascript:;" class="flex-fill text-decoration-none text-center text-gray-600">
|
|
<i class="fa fa-thumbs-up fa-fw me-3px"></i> Like
|
|
</a>
|
|
<a href="javascript:;" class="flex-fill text-decoration-none text-center text-gray-600">
|
|
<i class="fa fa-comments fa-fw me-3px"></i> Comment
|
|
</a>
|
|
<a href="javascript:;" class="flex-fill text-decoration-none text-center text-gray-600">
|
|
<i class="fa fa-share fa-fw me-3px"></i> Share
|
|
</a>
|
|
</div>
|
|
<hr class="mt-10px mb-3" />
|
|
|
|
<!-- timeline-input -->
|
|
<form action="" class="d-flex align-items-center">
|
|
<div><img src="{% static 'img/user/user-13.jpg' %}" height="35" class="rounded-pill" /></div>
|
|
<div class="ps-2 flex-1">
|
|
<div class="position-relative">
|
|
<input type="text" class="form-control rounded-pill ps-3 py-2 fs-13px bg-light" placeholder="Write a comment..." />
|
|
<div class="position-absolute end-0 top-0 bottom-0 d-flex align-items-center px-2">
|
|
<a href="#" class="btn bg-none text-gray-600 shadow-none px-1"><i class="far fa-smile fa-fw fa-lg d-block"></i></a>
|
|
<a href="#" class="btn bg-none text-gray-600 shadow-none px-1"><i class="fa fa-camera fa-fw fa-lg d-block"></i></a>
|
|
<a href="#" class="btn bg-none text-gray-600 shadow-none px-1"><i class="fa fa-film fa-fw fa-lg d-block"></i></a>
|
|
<a href="#" class="btn bg-none text-gray-600 shadow-none px-1"><i class="far fa-sticky-note fa-fw fa-lg d-block"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- END timeline-body -->
|
|
</div>
|
|
<!-- END timeline-content -->
|
|
</div>
|
|
<!-- END timeline-item -->
|
|
<!-- BEGIN timeline-item -->
|
|
<div class="timeline-item">
|
|
<!-- BEGIN timeline-time -->
|
|
<div class="timeline-time">
|
|
<span class="date">10 January 2025</span>
|
|
<span class="time">20:43</span>
|
|
</div>
|
|
<!-- END timeline-time -->
|
|
<!-- BEGIN timeline-icon -->
|
|
<div class="timeline-icon">
|
|
<a href="javascript:;"> </a>
|
|
</div>
|
|
<!-- END timeline-icon -->
|
|
<!-- BEGIN timeline-content -->
|
|
<div class="timeline-content">
|
|
<!-- BEGIN timeline-header -->
|
|
<div class="timeline-header">
|
|
<div class="userimage"><img src="{% static 'img/user/user-4.jpg' %}" alt="" /></div>
|
|
<div class="username">
|
|
<a href="javascript:;">Lelouch Wong <i class="fa fa-check-circle text-blue ms-1"></i></a>
|
|
<div class="text-muted fs-12px">1 days ago <i class="fa fa-globe-americas opacity-5 ms-1"></i></div>
|
|
</div>
|
|
<div>
|
|
<a href="#" class="btn btn-lg border-0 rounded-pill w-40px h-40px p-0 d-flex align-items-center justify-content-center" data-bs-toggle="dropdown">
|
|
<i class="fa fa-ellipsis-h text-gray-600"></i>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-end">
|
|
<a href="#" class="dropdown-item d-flex align-items-center">
|
|
<i class="fa fa-fw fa-bookmark fa-lg"></i>
|
|
<div class="flex-1 ps-1">
|
|
<div>Save Post</div>
|
|
<div class="mt-n1 text-gray-500"><small>Add this to your saved items</small></div>
|
|
</div>
|
|
</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-edit fa-lg me-1"></i> Edit post</a>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-user fa-lg me-1"></i> Edit audience</a>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-bell fa-lg me-1"></i> Turn off notifications for this post</a>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-language fa-lg me-1"></i> Turn off translations</a>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-calendar-alt fa-lg me-1"></i> Turn date</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-archive fa-lg me-1"></i> Move to archive</a>
|
|
<a href="#" class="dropdown-item"><i class="fa fa-fw fa-trash-alt fa-lg me-1"></i> Move to Recycle bin</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END timeline-header -->
|
|
<!-- BEGIN timeline-body -->
|
|
<div class="timeline-body">
|
|
<!-- timeline-post -->
|
|
<div class="mb-3">
|
|
<h4 class="mb-1">
|
|
795 Folsom Ave, Suite 600 San Francisco, CA 94107
|
|
</h4>
|
|
<div class="mb-2">In hac habitasse platea dictumst. Pellentesque bibendum id sem nec faucibus. Maecenas molestie, augue vel accumsan rutrum, massa mi rutrum odio, id luctus mauris nibh ut leo.</div>
|
|
<div class="row gx-1">
|
|
<div class="col-6">
|
|
<a href="{% static 'img/gallery/gallery-4.jpg' %}" data-lity><img src="{% static 'img/gallery/gallery-4.jpg' %}" alt="" class="mw-100 d-block" /></a>
|
|
</div>
|
|
<div class="col-6">
|
|
<a href="{% static 'img/gallery/gallery-5.jpg' %}" data-lity><img src="{% static 'img/gallery/gallery-5.jpg' %}" alt="" class="mw-100 d-block" /></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- timeline-action -->
|
|
<hr class="my-10px" />
|
|
<div class="d-flex align-items-center fw-bold">
|
|
<a href="javascript:;" class="flex-fill text-decoration-none text-center text-gray-600">
|
|
<i class="fa fa-thumbs-up fa-fw me-3px"></i> Like
|
|
</a>
|
|
<a href="javascript:;" class="flex-fill text-decoration-none text-center text-gray-600">
|
|
<i class="fa fa-comments fa-fw me-3px"></i> Comment</a>
|
|
<a href="javascript:;" class="flex-fill text-decoration-none text-center text-gray-600">
|
|
<i class="fa fa-share fa-fw me-3px"></i> Share
|
|
</a>
|
|
</div>
|
|
<hr class="mt-10px mb-3" />
|
|
|
|
<!-- timeline-input -->
|
|
<form action="" class="d-flex align-items-center">
|
|
<div><img src="{% static 'img/user/user-13.jpg' %}" height="35" class="rounded-pill" /></div>
|
|
<div class="ps-2 flex-1">
|
|
<div class="position-relative">
|
|
<input type="text" class="form-control rounded-pill ps-3 py-2 fs-13px bg-light" placeholder="Write a comment..." />
|
|
<div class="position-absolute end-0 top-0 bottom-0 d-flex align-items-center px-2">
|
|
<a href="#" class="btn bg-none text-gray-600 shadow-none px-1"><i class="far fa-smile fa-fw fa-lg d-block"></i></a>
|
|
<a href="#" class="btn bg-none text-gray-600 shadow-none px-1"><i class="fa fa-camera fa-fw fa-lg d-block"></i></a>
|
|
<a href="#" class="btn bg-none text-gray-600 shadow-none px-1"><i class="fa fa-film fa-fw fa-lg d-block"></i></a>
|
|
<a href="#" class="btn bg-none text-gray-600 shadow-none px-1"><i class="far fa-sticky-note fa-fw fa-lg d-block"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- END timeline-body -->
|
|
</div>
|
|
<!-- END timeline-content -->
|
|
</div>
|
|
<!-- END timeline-item -->
|
|
<!-- BEGIN timeline-item -->
|
|
<div class="timeline-item">
|
|
<!-- BEGIN timeline-icon -->
|
|
<div class="timeline-icon">
|
|
<a href="javascript:;"> </a>
|
|
</div>
|
|
<!-- END timeline-icon -->
|
|
<!-- BEGIN timeline-content -->
|
|
<div class="timeline-content">
|
|
<!-- BEGIN timeline-body -->
|
|
<div class="timeline-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="spinner-border spinner-border-sm me-3" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
Loading...
|
|
</div>
|
|
</div>
|
|
<!-- END timeline-body -->
|
|
</div>
|
|
<!-- BEGIN timeline-content -->
|
|
</div>
|
|
<!-- END timeline-item -->
|
|
</div>
|
|
<!-- END timeline -->
|
|
{% endblock %} |