-
Notifications
You must be signed in to change notification settings - Fork 64
/
Copy pathpost-detail.html
155 lines (134 loc) · 5.25 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!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"
/>
<!-- 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
class="nav__logo"
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>
<img
class="post-image"
src="https://picsum.photos/1368/800"
alt="Picsum photos"
/>
<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>
<img
class="post-image"
src="https://picsum.photos/1368/1000"
alt="Picsum photos"
/>
<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 type="module" src="js/post-detail.mjs"></script>
</body>
</html>