Skip to content

Instantly share code, notes, and snippets.

@stuartelimu

stuartelimu/base.html

Last active March 28, 2020 19:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stuartelimu/9cf36579b9a04668ade10c50ad6f1072 to your computer and use it in GitHub Desktop.
Save stuartelimu/9cf36579b9a04668ade10c50ad6f1072 to your computer and use it in GitHub Desktop.
Download ZIP
Readit Blog
Raw
base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Readit - Free Bootstrap 4 Template by Colorlib</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/open-iconic-bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/animate.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.theme.default.min.css' %}">
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}">
<link rel="stylesheet" href="{% static 'css/aos.css' %}">
<link rel="stylesheet" href="{% static 'css/ionicons.min.css' %}">
<link rel="stylesheet" href="{% static 'css/flaticon.css' %}">
<link rel="stylesheet" href="{% static 'css/icomoon.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<nav class="navbar px-md-0 navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
<div class="container">
<a class="navbar-brand" href="index.html">Read<i>it</i>.</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="oi oi-menu"></span> Menu
</button>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><a href="index.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="blog.html" class="nav-link">Articles</a></li>
<li class="nav-item"><a href="about.html" class="nav-link">Team</a></li>
<li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- END nav -->
<div class="hero-wrap js-fullheight" style="background-image: url('{% static 'images/bg_1.jpg' %}');" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="container">
<div class="row no-gutters slider-text js-fullheight align-items-center justify-content-start" data-scrollax-parent="true">
<div class="col-md-12 ftco-animate">
<h2 class="subheading">Hello! Welcome to</h2>
<h1 class="mb-4 mb-md-0">Readit blog</h1>
<div class="row">
<div class="col-md-7">
<div class="text">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<div class="mouse">
<a href="#" class="mouse-icon">
<div class="mouse-wheel"><span class="ion-ios-arrow-round-down"></span></div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% block content %}
{% endblock content %}
<footer class="ftco-footer ftco-bg-dark ftco-section">
<div class="container">
<div class="row mb-5">
<div class="col-md">
<div class="ftco-footer-widget mb-4">
<h2 class="logo"><a href="#">Read<span>it</span>.</a></h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<ul class="ftco-footer-social list-unstyled float-md-left float-lft mt-5">
<li class="ftco-animate"><a href="#"><span class="icon-twitter"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-facebook"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-instagram"></span></a></li>
</ul>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4">
<h2 class="ftco-heading-2">latest News</h2>
<div class="block-21 mb-4 d-flex">
<a class="img mr-4 rounded" style="background-image: url({% static 'images/image_1.jpg'%});"></a>
<div class="text">
<h3 class="heading"><a href="#">Even the all-powerful Pointing has no control about</a></h3>
<div class="meta">
<div><a href="#"></span> Oct. 16, 2019</a></div>
<div><a href="#"></span> Admin</a></div>
<div><a href="#"></span> 19</a></div>
</div>
</div>
</div>
<div class="block-21 mb-4 d-flex">
<a class="img mr-4 rounded" style="background-image: url({% static 'images/image_2.jpg'%});"></a>
<div class="text">
<h3 class="heading"><a href="#">Even the all-powerful Pointing has no control about</a></h3>
<div class="meta">
<div><a href="#"></span> Oct. 16, 2019</a></div>
<div><a href="#"></span> Admin</a></div>
<div><a href="#"></span> 19</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4 ml-md-5">
<h2 class="ftco-heading-2">Information</h2>
<ul class="list-unstyled">
<li><a href="#" class="py-1 d-block"><span class="ion-ios-arrow-forward mr-3"></span>Home</a></li>
<li><a href="#" class="py-1 d-block"><span class="ion-ios-arrow-forward mr-3"></span>About</a></li>
<li><a href="#" class="py-1 d-block"><span class="ion-ios-arrow-forward mr-3"></span>Articles</a></li>
<li><a href="#" class="py-1 d-block"><span class="ion-ios-arrow-forward mr-3"></span>Contact</a></li>
</ul>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4">
<h2 class="ftco-heading-2">Have a Questions?</h2>
<div class="block-23 mb-3">
<ul>
<li><span class="icon icon-map-marker"></span><span class="text">203 Fake St. Mountain View, San Francisco, California, USA</span></li>
<li><a href="#"><span class="icon icon-phone"></span><span class="text">+2 392 3929 210</span></a></li>
<li><a href="#"><span class="icon icon-envelope"></span><span class="text">info@yourdomain.com</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="icon-heart color-danger" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
</div>
</div>
</div>
</footer>
<!-- loader -->
<div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"/></svg></div>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/jquery-migrate-3.0.1.min.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/jquery.easing.1.3.js' %}"></script>
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/jquery.stellar.min.js' %}"></script>
<script src="{% static 'js/owl.carousel.min.js' %}"></script>
<script src="{% static 'js/jquery.magnific-popup.min.js' %}"></script>
<script src="{% static 'js/aos.js' %}"></script>
<script src="{% static 'js/jquery.animateNumber.min.js' %}"></script>
<script src="{% static 'js/scrollax.min.js' %}"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="{% static 'js/google-map.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
</body>
</html>
Raw
blog-single.html
{% extends 'base.html' %}
{% load static %}
{% block hero %}
<section class="hero-wrap hero-wrap-2 js-fullheight" style="background-image: url('images/bg_1.jpg');" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="container">
<div class="row no-gutters slider-text js-fullheight align-items-end justify-content-center">
<div class="col-md-9 ftco-animate pb-5 text-center">
<h1 class="mb-3 bread">Blog Single</h1>
<p class="breadcrumbs"><span class="mr-2"><a href="/">Home <i class="ion-ios-arrow-forward"></i></a></span> <span class="mr-2"><a href="/blog">Blog <i class="ion-ios-arrow-forward"></i></a></span> <span>Blog Single <i class="ion-ios-arrow-forward"></i></span></p>
</div>
</div>
</div>
</section>
{% endblock hero %}
{% block content %}
<section class="ftco-section ftco-degree-bg">
<div class="container">
<div class="row">
<div class="col-lg-8 ftco-animate">
<p class="mb-5">
<img src="{{article.image.url}}" alt="" class="img-fluid">
</p>
<h2 class="mb-3">{{article.title}}</h2>
<p>{{article.body}}</p>
<div class="tag-widget post-tag-container mb-5 mt-5">
<div class="tagcloud">
{% for tag in article.tags.all %}
<a href="#" class="tag-cloud-link">{{tag}}</a>
{% endfor %}
</div>
</div>
<div class="about-author d-flex p-4 bg-light">
<div class="bio mr-5">
<img src="{{article.author.avator.url}}" alt="Image placeholder" class="img-fluid mb-4">
</div>
<div class="desc">
<h3>{{article.author.user.username}}</h3>
<p>{{article.author.bio}}</p>
</div>
</div>
<div class="pt-5 mt-5">
<h3 class="mb-5">6 Comments</h3>
<ul class="comment-list">
<li class="comment">
<div class="vcard bio">
<img src="{% static 'images/person_1.jpg' %}" alt="Image placeholder">
</div>
<div class="comment-body">
<h3>John Doe</h3>
<div class="meta mb-3">November 13, 2019 at 2:21pm</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur quidem laborum necessitatibus, ipsam impedit vitae autem, eum officia, fugiat saepe enim sapiente iste iure! Quam voluptas earum impedit necessitatibus, nihil?</p>
<p><a href="#" class="reply">Reply</a></p>
</div>
</li>
<li class="comment">
<div class="vcard bio">
<img src="{% static 'images/person_1.jpg' %}" alt="Image placeholder">
</div>
<div class="comment-body">
<h3>John Doe</h3>
<div class="meta mb-3">November 13, 2019 at 2:21pm</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur quidem laborum necessitatibus, ipsam impedit vitae autem, eum officia, fugiat saepe enim sapiente iste iure! Quam voluptas earum impedit necessitatibus, nihil?</p>
<p><a href="#" class="reply">Reply</a></p>
</div>
<ul class="children">
<li class="comment">
<div class="vcard bio">
<img src="{% static 'images/person_1.jpg' %}" alt="Image placeholder">
</div>
<div class="comment-body">
<h3>John Doe</h3>
<div class="meta mb-3">November 13, 2019 at 2:21pm</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur quidem laborum necessitatibus, ipsam impedit vitae autem, eum officia, fugiat saepe enim sapiente iste iure! Quam voluptas earum impedit necessitatibus, nihil?</p>
<p><a href="#" class="reply">Reply</a></p>
</div>
<ul class="children">
<li class="comment">
<div class="vcard bio">
<img src="{% static 'images/person_1.jpg' %}" alt="Image placeholder">
</div>
<div class="comment-body">
<h3>John Doe</h3>
<div class="meta mb-3">November 13, 2019 at 2:21pm</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur quidem laborum necessitatibus, ipsam impedit vitae autem, eum officia, fugiat saepe enim sapiente iste iure! Quam voluptas earum impedit necessitatibus, nihil?</p>
<p><a href="#" class="reply">Reply</a></p>
</div>
<ul class="children">
<li class="comment">
<div class="vcard bio">
<img src="{% static 'images/person_1.jpg' %}" alt="Image placeholder">
</div>
<div class="comment-body">
<h3>John Doe</h3>
<div class="meta mb-3">November 13, 2019 at 2:21pm</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur quidem laborum necessitatibus, ipsam impedit vitae autem, eum officia, fugiat saepe enim sapiente iste iure! Quam voluptas earum impedit necessitatibus, nihil?</p>
<p><a href="#" class="reply">Reply</a></p>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="comment">
<div class="vcard bio">
<img src="{% static 'images/person_1.jpg' %}" alt="Image placeholder">
</div>
<div class="comment-body">
<h3>John Doe</h3>
<div class="meta mb-3">November 13, 2019 at 2:21pm</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur quidem laborum necessitatibus, ipsam impedit vitae autem, eum officia, fugiat saepe enim sapiente iste iure! Quam voluptas earum impedit necessitatibus, nihil?</p>
<p><a href="#" class="reply">Reply</a></p>
</div>
</li>
</ul>
<!-- END comment-list -->
<div class="comment-form-wrap pt-5">
<h3 class="mb-5">Leave a comment</h3>
<form action="#" class="p-5 bg-light">
<div class="form-group">
<label for="name">Name *</label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label for="email">Email *</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="website">Website</label>
<input type="url" class="form-control" id="website">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea name="" id="message" cols="30" rows="10" class="form-control"></textarea>
</div>
<div class="form-group">
<input type="submit" value="Post Comment" class="btn py-3 px-4 btn-primary">
</div>
</form>
</div>
</div>
</div> <!-- .col-md-8 -->
<div class="col-lg-4 sidebar pl-lg-5 ftco-animate">
<div class="sidebar-box">
<form action="#" class="search-form">
<div class="form-group">
<span class="icon icon-search"></span>
<input type="text" class="form-control" placeholder="Type a keyword and hit enter">
</div>
</form>
</div>
<div class="sidebar-box ftco-animate">
<div class="categories">
<h3>Categories</h3>
{% for tag in tags %}
<li><a href="#">{{tag}} <span class="ion-ios-arrow-forward"></span></a></li>
{% endfor %}
</div>
</div>
<div class="sidebar-box ftco-animate">
<h3>Recent Blog</h3>
{% for article in latest_articles %}
<div class="block-21 mb-4 d-flex">
<a class="blog-img mr-4" style="background-image: url({{article.image.url}});"></a>
<div class="text">
<h3 class="heading"><a href="{{article.get_absolute_url}}">{{article.title}}</a></h3>
<div class="meta">
<div><a href="#"><span class="icon-calendar"></span>{{article.created_at | date:"M d Y"}}</a></div>
<div><a href="#"><span class="icon-person"></span> {{article.author.user.username}}</a></div>
<div><a href="#"><span class="icon-chat"></span> 19</a></div>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="sidebar-box ftco-animate">
<h3>Tag Cloud</h3>
<div class="tagcloud">
{% for tag in tags %}
<a href="#" class="tag-cloud-link">{{tag}}</a>
{% endfor %}
</div>
</div>
<div class="sidebar-box ftco-animate">
<h3>Paragraph</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus itaque, autem necessitatibus voluptate quod mollitia delectus aut, sunt placeat nam vero culpa sapiente consectetur similique, inventore eos fugit cupiditate numquam!</p>
</div>
</div>
</div>
</div>
</section> <!-- .section -->
{% endblock content %}
Raw
blog.html
{% extends 'base.html' %}
{% load static %}
{% block hero %}
<div class="hero-wrap js-fullheight" style="background-image: url('images/bg_1.jpg');" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="container">
<div class="row no-gutters slider-text js-fullheight align-items-center justify-content-start" data-scrollax-parent="true">
<div class="col-md-12 ftco-animate">
<h2 class="subheading">Hello! Welcome to</h2>
<h1 class="mb-4 mb-md-0">Readit blog</h1>
<div class="row">
<div class="col-md-7">
<div class="text">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<div class="mouse">
<a href="#" class="mouse-icon">
<div class="mouse-wheel"><span class="ion-ios-arrow-round-down"></span></div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock hero %}
{% block content %}
<section class="ftco-section bg-light">
<div class="container">
<div class="row d-flex">
{% for article in articles %}
<div class="col-md-4 d-flex ftco-animate">
<div class="blog-entry justify-content-end">
<a href="{{article.get_absolute_url}}" class="block-20" style="background-image: url('{{article.image.url}}');">
</a>
<div class="text p-4 float-right d-block">
<div class="topper d-flex align-items-center">
<div class="one py-2 pl-3 pr-1 align-self-stretch">
<span class="day">{{article.created_at|date:"d"}}</span>
</div>
<div class="two pl-0 pr-3 py-2 align-self-stretch">
<span class="yr">{{article.created_at|date:"Y"}}</span>
<span class="mos">{{article.created_at|date:"F"}}</span>
</div>
</div>
<h3 class="heading mb-3"><a href="{{article.get_absolute_url}}">{{article.title}}</a></h3>
<p>{{article.body|truncatewords:12}}</p>
<p><a href="{{article.get_absolute_url}}" class="btn-custom"><span class="ion-ios-arrow-round-forward mr-3"></span>Read more</a></p>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="row mt-5">
<div class="col text-center">
<div class="block-27">
<ul>
{% if page_obj.has_previous %}
<li><a href="?page={{ page_obj.previous_page_number }}">&lt;</a></li>
{% endif %}
<li class="active"><span>{{ page_obj.number }}</span></li>
{% if page_obj.has_next %}
<li><a href="?page={{ page_obj.next_page_number }}">&gt;</a></li>
{% endif %}
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock content %}
Raw
index.html
{% extends 'base.html' %}
{% load static %}
{% block content %}
<section class="ftco-section">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="case">
<div class="row">
<div class="col-md-6 col-lg-6 col-xl-8 d-flex">
<a href="blog-single.html" class="img w-100 mb-3 mb-md-0" style="background-image: url({% static 'images/image_1.jpg'%});"></a>
</div>
<div class="col-md-6 col-lg-6 col-xl-4 d-flex">
<div class="text w-100 pl-md-3">
<span class="subheading">Illustration</span>
<h2><a href="blog-single.html">Build a website in minutes with Adobe Templates</a></h2>
<ul class="media-social list-unstyled">
<li class="ftco-animate"><a href="#"><span class="icon-twitter"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-facebook"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-instagram"></span></a></li>
</ul>
<div class="meta">
<p class="mb-0"><a href="#">11/13/2019</a> | <a href="#">12 min read</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="case">
<div class="row">
<div class="col-md-6 col-lg-6 col-xl-8 d-flex">
<a href="blog-single.html" class="img w-100 mb-3 mb-md-0" style="background-image: url({% static 'images/image_2.jpg' %});"></a>
</div>
<div class="col-md-6 col-lg-6 col-xl-4 d-flex">
<div class="text w-100 pl-md-3">
<span class="subheading">Application</span>
<h2><a href="blog-single.html">Build a website in minutes with Adobe Templates</a></h2>
<ul class="media-social list-unstyled">
<li class="ftco-animate"><a href="#"><span class="icon-twitter"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-facebook"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-instagram"></span></a></li>
</ul>
<div class="meta">
<p class="mb-0"><a href="#">11/13/2019</a> | <a href="#">12 min read</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="case">
<div class="row">
<div class="col-md-6 col-lg-6 col-xl-8 d-flex">
<a href="blog-single.html" class="img w-100 mb-3 mb-md-0" style="background-image: url({% static 'images/image_3.jpg' %});"></a>
</div>
<div class="col-md-6 col-lg-6 col-xl-4 d-flex">
<div class="text w-100 pl-md-3">
<span class="subheading">Design</span>
<h2><a href="blog-single.html">Build a website in minutes with Adobe Templates</a></h2>
<ul class="media-social list-unstyled">
<li class="ftco-animate"><a href="#"><span class="icon-twitter"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-facebook"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-instagram"></span></a></li>
</ul>
<div class="meta">
<p class="mb-0"><a href="#">11/13/2019</a> | <a href="#">12 min read</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="case">
<div class="row">
<div class="col-md-6 col-lg-6 col-xl-8 d-flex">
<a href="blog-single.html" class="img w-100 mb-3 mb-md-0" style="background-image: url({% static 'images/image_4.jpg' %});"></a>
</div>
<div class="col-md-6 col-lg-6 col-xl-4 d-flex">
<div class="text w-100 pl-md-3">
<span class="subheading">Illustration</span>
<h2><a href="blog-single.html">Build a website in minutes with Adobe Templates</a></h2>
<ul class="media-social list-unstyled">
<li class="ftco-animate"><a href="#"><span class="icon-twitter"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-facebook"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-instagram"></span></a></li>
</ul>
<div class="meta">
<p class="mb-0"><a href="#">11/13/2019</a> | <a href="#">12 min read</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="case">
<div class="row">
<div class="col-md-6 col-lg-6 col-xl-8 d-flex">
<a href="blog-single.html" class="img w-100 mb-3 mb-md-0" style="background-image: url({% static 'images/image_5.jpg' %});"></a>
</div>
<div class="col-md-6 col-lg-6 col-xl-4 d-flex">
<div class="text w-100 pl-md-3">
<span class="subheading">Illustration</span>
<h2><a href="blog-single.html">Build a website in minutes with Adobe Templates</a></h2>
<ul class="media-social list-unstyled">
<li class="ftco-animate"><a href="#"><span class="icon-twitter"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-facebook"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-instagram"></span></a></li>
</ul>
<div class="meta">
<p class="mb-0"><a href="#">11/13/2019</a> | <a href="#">12 min read</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="case">
<div class="row">
<div class="col-md-6 col-lg-6 col-xl-8 d-flex">
<a href="blog-single.html" class="img w-100 mb-3 mb-md-0" style="background-image: url({% static 'images/image_6.jpg' %});"></a>
</div>
<div class="col-md-6 col-lg-6 col-xl-4 d-flex">
<div class="text w-100 pl-md-3">
<span class="subheading">Illustration</span>
<h2><a href="blog-single.html">Build a website in minutes with Adobe Templates</a></h2>
<ul class="media-social list-unstyled">
<li class="ftco-animate"><a href="#"><span class="icon-twitter"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-facebook"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-instagram"></span></a></li>
</ul>
<div class="meta">
<p class="mb-0"><a href="#">11/13/2019</a> | <a href="#">12 min read</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="case">
<div class="row">
<div class="col-md-6 col-lg-6 col-xl-8 d-flex">
<a href="blog-single.html" class="img w-100 mb-3 mb-md-0" style="background-image: url({% static 'images/image_7.jpg' %});"></a>
</div>
<div class="col-md-6 col-lg-6 col-xl-4 d-flex">
<div class="text w-100 pl-md-3">
<span class="subheading">Illustration</span>
<h2><a href="blog-single.html">Build a website in minutes with Adobe Templates</a></h2>
<ul class="media-social list-unstyled">
<li class="ftco-animate"><a href="#"><span class="icon-twitter"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-facebook"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-instagram"></span></a></li>
</ul>
<div class="meta">
<p class="mb-0"><a href="#">11/13/2019</a> | <a href="#">12 min read</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="case">
<div class="row">
<div class="col-md-6 col-lg-6 col-xl-8 d-flex">
<a href="blog-single.html" class="img w-100 mb-3 mb-md-0" style="background-image: url({% static 'images/image_8.jpg' %});"></a>
</div>
<div class="col-md-6 col-lg-6 col-xl-4 d-flex">
<div class="text w-100 pl-md-3">
<span class="subheading">Illustration</span>
<h2><a href="blog-single.html">Build a website in minutes with Adobe Templates</a></h2>
<ul class="media-social list-unstyled">
<li class="ftco-animate"><a href="#"><span class="icon-twitter"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-facebook"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-instagram"></span></a></li>
</ul>
<div class="meta">
<p class="mb-0"><a href="#">11/13/2019</a> | <a href="#">12 min read</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="case">
<div class="row">
<div class="col-md-6 col-lg-6 col-xl-8 d-flex">
<a href="blog-single.html" class="img w-100 mb-3 mb-md-0" style="background-image: url({% static 'images/image_9.jpg' %});"></a>
</div>
<div class="col-md-6 col-lg-6 col-xl-4 d-flex">
<div class="text w-100 pl-md-3">
<span class="subheading">Illustration</span>
<h2><a href="blog-single.html">Build a website in minutes with Adobe Templates</a></h2>
<ul class="media-social list-unstyled">
<li class="ftco-animate"><a href="#"><span class="icon-twitter"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-facebook"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-instagram"></span></a></li>
</ul>
<div class="meta">
<p class="mb-0"><a href="#">11/13/2019</a> | <a href="#">12 min read</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col text-center">
<div class="block-27">
<ul>
<li><a href="#">&lt;</a></li>
<li class="active"><span>1</span></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&gt;</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock content %}
Raw
updated-base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Readit - Free Bootstrap 4 Template by Colorlib</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/open-iconic-bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/animate.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.theme.default.min.css' %}">
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}">
<link rel="stylesheet" href="{% static 'css/aos.css' %}">
<link rel="stylesheet" href="{% static 'css/ionicons.min.css' %}">
<link rel="stylesheet" href="{% static 'css/flaticon.css' %}">
<link rel="stylesheet" href="{% static 'css/icomoon.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<nav class="navbar px-md-0 navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
<div class="container">
<a class="navbar-brand" href="index.html">Read<i>it</i>.</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="oi oi-menu"></span> Menu
</button>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><a href="index.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="blog.html" class="nav-link">Articles</a></li>
<li class="nav-item"><a href="about.html" class="nav-link">Team</a></li>
<li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- END nav -->
{% block hero %}
<div class="hero-wrap js-fullheight" style="background-image: url('{% static 'images/bg_1.jpg' %}');" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="container">
<div class="row no-gutters slider-text js-fullheight align-items-center justify-content-start" data-scrollax-parent="true">
<div class="col-md-12 ftco-animate">
<h2 class="subheading">Hello! Welcome to</h2>
<h1 class="mb-4 mb-md-0">Readit blog</h1>
<div class="row">
<div class="col-md-7">
<div class="text">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<div class="mouse">
<a href="#" class="mouse-icon">
<div class="mouse-wheel"><span class="ion-ios-arrow-round-down"></span></div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock hero %}
{% block content %}
{% endblock content %}
<footer class="ftco-footer ftco-bg-dark ftco-section">
<div class="container">
<div class="row mb-5">
<div class="col-md">
<div class="ftco-footer-widget mb-4">
<h2 class="logo"><a href="#">Read<span>it</span>.</a></h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<ul class="ftco-footer-social list-unstyled float-md-left float-lft mt-5">
<li class="ftco-animate"><a href="#"><span class="icon-twitter"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-facebook"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-instagram"></span></a></li>
</ul>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4">
<h2 class="ftco-heading-2">latest News</h2>
<div class="block-21 mb-4 d-flex">
<a class="img mr-4 rounded" style="background-image: url({% static 'images/image_1.jpg'%});"></a>
<div class="text">
<h3 class="heading"><a href="#">Even the all-powerful Pointing has no control about</a></h3>
<div class="meta">
<div><a href="#"></span> Oct. 16, 2019</a></div>
<div><a href="#"></span> Admin</a></div>
<div><a href="#"></span> 19</a></div>
</div>
</div>
</div>
<div class="block-21 mb-4 d-flex">
<a class="img mr-4 rounded" style="background-image: url({% static 'images/image_2.jpg'%});"></a>
<div class="text">
<h3 class="heading"><a href="#">Even the all-powerful Pointing has no control about</a></h3>
<div class="meta">
<div><a href="#"></span> Oct. 16, 2019</a></div>
<div><a href="#"></span> Admin</a></div>
<div><a href="#"></span> 19</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4 ml-md-5">
<h2 class="ftco-heading-2">Information</h2>
<ul class="list-unstyled">
<li><a href="#" class="py-1 d-block"><span class="ion-ios-arrow-forward mr-3"></span>Home</a></li>
<li><a href="#" class="py-1 d-block"><span class="ion-ios-arrow-forward mr-3"></span>About</a></li>
<li><a href="#" class="py-1 d-block"><span class="ion-ios-arrow-forward mr-3"></span>Articles</a></li>
<li><a href="#" class="py-1 d-block"><span class="ion-ios-arrow-forward mr-3"></span>Contact</a></li>
</ul>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4">
<h2 class="ftco-heading-2">Have a Questions?</h2>
<div class="block-23 mb-3">
<ul>
<li><span class="icon icon-map-marker"></span><span class="text">203 Fake St. Mountain View, San Francisco, California, USA</span></li>
<li><a href="#"><span class="icon icon-phone"></span><span class="text">+2 392 3929 210</span></a></li>
<li><a href="#"><span class="icon icon-envelope"></span><span class="text">info@yourdomain.com</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="icon-heart color-danger" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
</div>
</div>
</div>
</footer>
<!-- loader -->
<div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"/></svg></div>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/jquery-migrate-3.0.1.min.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/jquery.easing.1.3.js' %}"></script>
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/jquery.stellar.min.js' %}"></script>
<script src="{% static 'js/owl.carousel.min.js' %}"></script>
<script src="{% static 'js/jquery.magnific-popup.min.js' %}"></script>
<script src="{% static 'js/aos.js' %}"></script>
<script src="{% static 'js/jquery.animateNumber.min.js' %}"></script>
<script src="{% static 'js/scrollax.min.js' %}"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="{% static 'js/google-map.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
</body>
</html>
Raw
updated-index.html
{% extends 'base.html' %}
{% load static %}
{% block content %}
<section class="ftco-section">
<div class="container">
<div class="row">
<div class="col-md-12">
{% for article in articles %}
<div class="case">
<div class="row">
<div class="col-md-6 col-lg-6 col-xl-8 d-flex">
<a href="{{article.get_absolute_url}}" class="img w-100 mb-3 mb-md-0" style="background-image: url({{ article.image.url }});"></a>
</div>
<div class="col-md-6 col-lg-6 col-xl-4 d-flex">
<div class="text w-100 pl-md-3">
{% for tag in article.tags.all %}
{% if forloop.first %}
<span class="subheading">{{tag}}</span>
{% endif %}
{% endfor %}
<h2><a href="{{article.get_absolute_url}}">{{article.title}}</a></h2>
<ul class="media-social list-unstyled">
<li class="ftco-animate"><a href="#"><span class="icon-twitter"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-facebook"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-instagram"></span></a></li>
</ul>
<div class="meta">
<p class="mb-0"><a href="#">{{article.updated_at|date:"SHORT_DATE_FORMAT"}}</a> | <a href="#">12 min read</a></p>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="row mt-5">
<div class="col text-center">
<div class="block-27">
<ul>
{% if page_obj.has_previous %}
<li><a href="?page={{ page_obj.previous_page_number }}">&lt;</a></li>
{% endif %}
<li class="active"><span>{{ page_obj.number }}</span></li>
{% if page_obj.has_next %}
<li><a href="?page={{ page_obj.next_page_number }}">&gt;</a></li>
{% endif %}
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock content %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment