-
Notifications
You must be signed in to change notification settings - Fork 1
/
post-detail.html
134 lines (109 loc) · 5.16 KB
/
post-detail.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Post detail page</title>
<link rel="shortcut icon" href="images/favicon.png" type="image/png">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Light box -->
<link rel="stylesheet" href="lightbox/css/lightbox.min.css">
<!-- Font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<!-- Use font Rubik -->
<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
<!-- Internal CSS -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/post-detail.css">
</head>
<body>
<header>
<!-- Navigation
- Please note that we use an empty item to make sure that we always have 3 flex-items
so logo is at centered, and the left and the right item can be optional by leaving it empty
-->
<nav class="top-nav shadow-sm py-3">
<div class="container">
<ul class="nav justify-content-between align-items-center">
<li class="nav-item">
<a class="nav-link" href=".">
<img src="images/logo.svg" alt="Logo Nordic Coder">
</a>
</li>
<li class="nav-item">
<a id="goToEditPageLink" class="nav-link" href="#"></a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<section id="postHeroImage" class="hero"></section>
<section class="post-detail">
<div class="container">
<div class="post-detail-main shadow-sm">
<div class="post-title-wrapper">
<h1 id="postDetailTitle"> </h1>
<p>
<small class="text-muted">by</small>
<small id="postDetailAuthor" class="text-muted font-weight-bold"> </small>
<small id="postDetailTimeSpan" class="text-muted"> </small>
</p>
</div>
<div class="post-content-wrapper">
<p id="postDetailDescription"></p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non totam pariatur quibusdam tenetur nemo
tempora incidunt ex doloremque exercitationem dicta. Corporis fuga totam nulla voluptatibus possimus
similique aliquid nobis illo.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci suscipit inventore hic tenetur, dolor
iusto dolorum rem, non error, saepe quia dignissimos quas ducimus aliquid. Praesentium ea aspernatur vero
deserunt.
</p>
<a href="https://picsum.photos/1368/800" data-lightbox="image-1" data-title="Picsum photos">
<img class="post-image" src="https://picsum.photos/1368/800" alt="Picsum photos">
</a>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci suscipit inventore hic tenetur, dolor
iusto dolorum rem, non error, saepe quia dignissimos quas ducimus aliquid. Praesentium ea aspernatur vero
deserunt.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci suscipit inventore hic tenetur, dolor
iusto dolorum rem, non error, saepe quia dignissimos quas ducimus aliquid. Praesentium ea aspernatur vero
deserunt.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci suscipit inventore hic tenetur, dolor
iusto dolorum rem, non error, saepe quia dignissimos quas ducimus aliquid. Praesentium ea aspernatur vero
deserunt.
</p>
<a href="https://picsum.photos/1368/1000" data-lightbox="image-2" data-title="Picsum photos">
<img class="post-image" src="https://picsum.photos/1368/1000" alt="Picsum photos">
</a>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci suscipit inventore hic tenetur, dolor
iusto dolorum rem, non error, saepe quia dignissimos quas ducimus aliquid. Praesentium ea aspernatur vero
deserunt.
</p>
</div>
</div>
</div>
</section>
</main>
<footer class="text-center text-muted py-3">
<small>Created by Po with <i class="fas fa-heart"></i></small>
</footer>
<!-- Scripts should be placed here to prevent blocking render UI -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.7.0/qs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fetch-polyfill@0.8.2/fetch.min.js"></script>
<script src="lightbox/js/lightbox-plus-jquery.min.js"></script>
<script async type="module" src="js/post-detail.mjs"></script>
</body>
</html>