Skip to content

Blogpost #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Parent: [2.0] Major project update
merged 1 commit into from
Jan 30, 2023
Merged

Blogpost #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
191 changes: 191 additions & 0 deletions templates/blogpost.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Python training course - Django blog project">
<title>Blog</title>
<link rel="icon" type="image/svg+xml" href="../img/favicon.svg">
<link rel="icon" type="image/png" href="../img/favicon.png">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<link rel="stylesheet" href="../css/blog.min.css">
</head>
<body>

<div class="container">
<header class="blog-header lh-1 py-3">
<div class="row d-flex justify-content-between align-items-center">
<div class="col-4">
<img src="../img/logo.svg" alt="logo" class="logo">
</div>
<div class="col-4 text-center">
<a href="" class="blog-title text-dark">Python course</a>
</div>
<div class="col-4 d-flex justify-content-end align-items-center dropdown">
<div class="dropdown-toggle" data-bs-toggle="dropdown">
<img src="https://i.pravatar.cc/350?u=da594f2b" alt="avatar" class="avatar rounded-circle">
</div>
<ul class="dropdown-menu" role="menu">
<li><a href="" class="dropdown-item">User Profile</a></li>
<li><a href="" class="dropdown-item">Create post</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a href="" class="dropdown-item">Logout</a></li>
</ul>
</div>
</div>
</header>
<div class="nav-scroller py-1 mb-3">
<nav class="nav d-flex justify-content-between">
<div class="nav-item"><a href="" class="nav-link link-secondary">Category1</a></div>
<div class="nav-item"><a href="" class="nav-link link-secondary">Category2</a></div>
<div class="nav-item"><a href="" class="nav-link link-secondary">Category3</a></div>
<div class="nav-item"><a href="" class="nav-link link-secondary">Category4</a></div>
<div class="nav-item"><a href="" class="nav-link link-secondary">Category5</a></div>
<div class="nav-item"><a href="" class="nav-link link-secondary">Category6</a></div>
<div class="nav-item"><a href="" class="nav-link link-secondary">Category7</a></div>
<div class="nav-item"><a href="" class="nav-link link-secondary">Category8</a></div>
<div class="nav-item"><a href="" class="nav-link link-secondary">Category9</a></div>
<div class="nav-item"><a href="" class="nav-link link-secondary">Category10</a></div>
</nav>
</div>
</div>
<div id="blogPostsCarousel" class="carousel slide bg-dark" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#blogPostsCarousel" data-bs-slide-to="0" class="active" aria-current="true"
aria-label="Slide 1"></button>
<button type="button" data-bs-target="#blogPostsCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#blogPostsCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container h-100 w-100 d-flex justify-content-center">
<img src="https://loremflickr.com/320/240?random=2" alt="Blog post image" class="h-100">
</div>
<div class="container">
<div class="carousel-caption">
<p class="h1">adelphiss persuadere!</p>
<p class="fs-4">Lettuce combines greatly with sichuan-style broccoli.</p>
<p><a class="btn btn-lg btn-dark" href="#">View post</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container h-100 w-100 d-flex justify-content-center">
<img src="https://loremflickr.com/320/240?random=6" alt="Blog post image" class="h-100">
</div>
<div class="container">
<div class="carousel-caption">
<p class="h1">eras manducare!</p>
<p class="fs-4">Popcorn combines greatly with tangy lettuce.</p>
<p><a class="btn btn-lg btn-dark" href="#">View post</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container h-100 w-100 d-flex justify-content-center">
<img src="https://loremflickr.com/320/240?random=12" alt="Blog post image" class="h-100">
</div>
<div class="container">
<div class="carousel-caption">
<p class="h1">axonas peregrinationes!</p>
<p class="fs-4">Okra combines greatly with shredded ground beef.</p>
<p><a class="btn btn-lg btn-dark" href="#">View post</a></p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#blogPostsCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#blogPostsCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<main class="container">
<div class="row">
<section class="col-md-9 mb-2" role="main">
<h1 class="h1">hydras volare!</h1>
<div class="row position-relative">
<article class="col w-100">
<div class="mb-3">
<strong class="fw-light">category</strong>
<small>
<i class="bi bi-person mx-1"></i><a href="" class="fw-bolder link-secondary">Article Author</a>
<i class="bi bi-calendar mx-1"></i><span>June 10, 2022</span>
</small>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dicta, ea esse excepturi ipsa
laudantium libero molestias officiis quas quidem quisquam ratione? Dolores est, iste laborum pariatur ullam
vitae? Atque?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, cum, porro. A ab alias doloremque enim
illum impedit iure laborum maiores officia porro, provident quaerat repellendus rerum sequi tempore unde!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, dignissimos dolor dolore dolores eius ex
iusto libero necessitatibus odio praesentium sequi, voluptas voluptates! Adipisci, blanditiis eaque earum
omnis possimus rerum?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam corporis culpa deserunt enim maiores modi
nisi, possimus quaerat qui quia quis saepe sed, sequi totam ut? In qui tempore vitae.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto aspernatur, commodi dicta ipsam libero
minus quia quos saepe suscipit totam. Accusamus cum exercitationem harum id itaque, officia quos ullam
voluptatem.
</p>
</article>
</div>
</section>
<section class="col-md-3">
<div class="position-sticky">
<div class="p-4 mb-3 bg-light rounded">
<h4 class="h4">About Us</h4>
<p>
To the puréed cracker crumps add turkey, popcorn, melon sauce and sweet leek. Mackerel stew has to have a
delicious, shredded margerine component.
</p>
</div>
<div class="ps-4">
<h4>Archive</h4>
<ul class="list-unstyled">
<li class="text-capitalize"><a href="" class="link-secondary">january 2023</a></li>
<li class="text-capitalize"><a href="" class="link-secondary">december 2022</a></li>
<li class="text-capitalize"><a href="" class="link-secondary">november 2022</a></li>
<li class="text-capitalize"><a href="" class="link-secondary">october 2022</a></li>
<li class="text-capitalize"><a href="" class="link-secondary">september 2022</a></li>
<li class="text-capitalize"><a href="" class="link-secondary">august 2022</a></li>
<li class="text-capitalize"><a href="" class="link-secondary">july 2022</a></li>
<li class="text-capitalize"><a href="" class="link-secondary">june 2022</a></li>
<li class="text-capitalize"><a href="" class="link-secondary">may 2022</a></li>
<li class="text-capitalize"><a href="" class="link-secondary">april 2022</a></li>
<li class="text-capitalize"><a href="" class="link-secondary">march 2022</a></li>
<li class="text-capitalize"><a href="" class="link-secondary">february 2022</a></li>
</ul>
</div>
<div class="ps-4">
<h4>Out social media</h4>
<ul class="nav">
<li class="nav-item"><a href="" class="nav-link"><i class="social bi bi-facebook"></i></a></li>
<li class="nav-item"><a href="" class="nav-link"><i class="social bi bi-instagram"></i></a></li>
<li class="nav-item"><a href="" class="nav-link"><i class="social bi bi-github"></i></a></li>
</ul>
</div>
</div>
</section>
</div>
</main>

<script src="../js/bootstrap.bundle.js"></script>
</body>
</html>