-
Notifications
You must be signed in to change notification settings - Fork 0
/
post.html
181 lines (179 loc) · 11.7 KB
/
post.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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>One post</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/index-responsive.css">
<link rel="stylesheet" href="./css/post.css">
</head>
<body>
<div class="container">
<section class="top-section">
<div class="top-post"><p>Lorem ipsum dolor sit amet... <a href="#">Read more</a></p></div>
<div class="brand-section">
<div class="brands">
<div class="brand-logo">
<img src="./assets/images/Mind In Middle.jpg" alt="blog logo" class="brand-logo-img">
<h1>Blog</h1>
</div>
<div class="brand-right">
<div class="brand-social">
<a href="#"><img src="./assets/icons/facebook-xxl.png" alt="Facebook for blog"></a>
<a href="#"><img src="./assets/icons/instagram-xxl copy.png" alt="Instagram for blog"></a>
</div>
</div>
</div>
</div>
</section>
<section class="navbar-section" id="navbar_top">
<div class="navbar">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="brand-search">
<input type="search" placeholder="Search blog..."/>
</div>
</div>
</section>
<section class="content-section">
< class="post-body">
<article>
<h2>Post title</h2>
<img src="./assets/images/Advantages-and-Disadvantages-of-Technology-wearandcheer.com_.jpg" class="cover-img">
<p class="metadata">Published on <span>12 July 2021</span> by <span><a href="#">Admin</a></span> | <a href="#">News</a>, <a href="#">Business</a></p>
<div class="p-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum, corrupti! Culpa, debitis iure magnam obcaecati quos, in, mollitia impedit optio dolore inventore id architecto vero accusamus quo cum ducimus excepturi delectus pariatur sint temporibus facere! Accusantium, minima illum nobis adipisci reiciendis nesciunt obcaecati eveniet quasi maiores eaque beatae excepturi impedit vel itaque odio minus optio omnis, ratione voluptate esse! Minima asperiores dicta in perferendis nam fugit et tempora ad rem odit mollitia provident omnis, rerum eum maxime pariatur sit officiis dolorum quia iste voluptatum vero? Velit, cumque consequuntur nesciunt aut vero soluta voluptas deleniti, ullam fugit pariatur quo consequatur sapiente!</p>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure odit magni, labore commodi eveniet, id dolore recusandae blanditiis, ad aut aliquid quasi corporis voluptate corrupti odio facere placeat eligendi. Quod possimus fuga, laboriosam cumque, officia, beatae quas est culpa reiciendis facere corrupti nobis nesciunt accusantium odio officiis asperiores. Numquam eaque, quam ipsa atque illum suscipit tempora dicta ratione reiciendis nihil laudantium quas nisi est corrupti minima asperiores natus ex soluta architecto. Quo labore officia quis quibusdam minus eveniet earum ab quas repudiandae. Itaque quod praesentium dolorum quas, soluta repellat, tenetur eligendi consequatur molestiae eum cupiditate ducimus ratione eos! Earum eos explicabo deleniti cupiditate voluptatibus. Quidem a fuga ipsa vero ratione maxime tenetur placeat modi iste repellat quas, iusto unde reprehenderit?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam officia tempora, fugit cumque vero natus fugiat veniam praesentium alias saepe aperiam accusamus, rerum dignissimos earum doloribus qui impedit numquam laborum magni ut animi unde? Ratione maiores iure sapiente quae placeat veritatis molestias vitae quam beatae deserunt. Quia quaerat doloremque cum minus ex id. Accusamus dicta perspiciatis consequuntur repellat similique nostrum laudantium quam pariatur? Aut laboriosam impedit illo dolor reiciendis sit odit rerum officia iste, eius, perferendis, eligendi tenetur. Soluta, eos optio. Laudantium odit praesentium alias quia cumque, officia voluptatibus omnis maxime asperiores quod! Sint iusto cupiditate assumenda porro unde voluptates.</p>
</div>
<div class="comments">
<div class="comment-list">
<h4>Comments</h4>
<div class="comment">
<p style="display: flex;">Name - 12 July 2021</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ab voluptatum velit nihil quam maiores nulla modi neque quo amet. Eaque.</p>
</div>
<div class="comment">
<p style="display: flex;">Name - 12 July 2021</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ab voluptatum velit nihil quam maiores nulla modi neque quo amet. Eaque.</p>
</div>
<div class="comment">
<p style="display: flex;">Name - 12 July 2021</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ab voluptatum velit nihil quam maiores nulla modi neque quo amet. Eaque.</p>
</div>
</div>
<div class="comment-form">
<h4>Add a comment</h4>
<form>
<input type="text" placeholder="Your name"/>
<input type="email" placeholder="Your email"/>
<textarea placeholder="Your comment"></textarea>
<button>Add</button>
</form>
</div>
</div>
<div class="suggested-class">
<h4>Suggested for you</h4>
<div class="suggested">
<div class="post">
<img src="./assets/images/Advantages-and-Disadvantages-of-Technology-wearandcheer.com_.jpg" alt="post" />
<div class="post-details">
<a href="#">
<h2>Post title</h2>
</a>
<p>3, July 2021 | <span><a href="#">Category</a></span></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi rerum error in cupiditate?</p>
</div>
</div>
<div class="post">
<img src="./assets/images/Advantages-and-Disadvantages-of-Technology-wearandcheer.com_.jpg" alt="post" />
<div class="post-details">
<a href="#">
<h2>Post title</h2>
</a>
<p>3, July 2021 | <span><a href="#">Category</a></span></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi rerum error in cupiditate?</p>
</div>
</div>
<div class="post">
<img src="./assets/images/Advantages-and-Disadvantages-of-Technology-wearandcheer.com_.jpg" alt="post" />
<div class="post-details">
<a href="#">
<h2>Post title</h2>
</a>
<p>3, July 2021 | <span><a href="#">Category</a></span></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi rerum error in cupiditate?</p>
</div>
</div>
</div>
</div>
</article>
<div class="widgets">
<form>
<h2>Subscribe to our newsletter.</h2>
<input type="email" placeholder="Enter your email address">
<button>Subscribe</button>
</form>
<img src="./assets/images/9c9debf1ec47ce6c28ffa672344a1da0.jpg">
<img src="./assets/images/bestintown.png">
</div>
</article>
</section>
<section class="footer-section">
<div class="footer-contents">
<div class="footer-address">
<div class="footer-item">
<h1>About Blog</h1>
<hr>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat dolorem, beatae incidunt soluta reiciendis ipsam odio tenetur maxime saepe? Totam?</p>
</div>
<div class="footer-item">
<h1>Address</h1>
<hr>
<ul>
<li style="display: flex;align-items:center;">
<p>Email:
<span><p>[email protected]</p></span></p>
</li>
<li style="display: flex;align-items:center;">
<p>Phone:
<span><p>+250780630465</p></span></p>
</li>
<li style="display: flex;align-items:center;">
<p>Location:
<span><p>Kigali -Rwanda</p></span></p>
</li>
</ul>
</div>
<div class="footer-item">
<h1>Recent posts</h1>
<hr>
<ul style="list-style: circle;">
<li>Hello World!</li>
<li>How are you</li>
<li>Hello World!</li>
<li>How are you</li>
<li>Hello World!</li>
<li>How are you</li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="credits">
<p>© Blog 2021</p>
<p style="margin-left: auto;">Created by <a href="#">Achille Songa</a></p>
</div>
</div>
</section>
</div>
<script src="./js/nav-scroll.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>