Skip to content

Commit 264f544

Browse files
livebloggerofficiallivebloggerofficial
authored
Add files via upload
0 parents  commit 264f544

18 files changed

+891
-0
lines changed

‎images/close-icon.png

195 Bytes
Loading

‎images/facebook-logo.png

412 Bytes
Loading

‎images/hero-image.png

410 KB
Loading

‎images/instagram-logo.png

851 Bytes
Loading

‎images/label-icon.png

242 Bytes
Loading

‎images/logo.png

350 Bytes
Loading

‎images/menu-icon.png

154 Bytes
Loading

‎images/popular-post1.jpg

421 KB
Loading

‎images/popular-post2.jpg

327 KB
Loading

‎images/popular-post3.jpg

170 KB
Loading

‎images/post-thumbnail1.jpg

217 KB
Loading

‎images/post-thumbnail2.jpg

490 KB
Loading

‎images/post-thumbnail3.jpg

361 KB
Loading

‎images/search-icon.png

305 Bytes
Loading

‎images/twitter-logo.png

628 Bytes
Loading

‎index.html

+334
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,334 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Document</title>
7+
<link
8+
href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Roboto:wght@400;900&display=swap"
9+
rel="stylesheet"
10+
/>
11+
<link rel="stylesheet" href="style.css" />
12+
</head>
13+
<body>
14+
<div class="top-nav">
15+
<div class="wrapper">
16+
<div class="logo-icon">
17+
<a href="#">
18+
<img src="images/logo.png" alt="" />
19+
</a>
20+
</div>
21+
22+
<nav>
23+
<ul>
24+
<li>
25+
<a href="#">Home</a>
26+
</li>
27+
28+
<li>
29+
<a href="#">About</a>
30+
</li>
31+
32+
<li>
33+
<a href="#">Contact</a>
34+
</li>
35+
36+
<li>
37+
<a href="#">Privacy Policy</a>
38+
</li>
39+
</ul>
40+
</nav>
41+
42+
<div class="search-icon">
43+
<img src="images/search-icon.png" alt="" />
44+
</div>
45+
46+
<div class="mobile-menu-icon">
47+
<img src="images/menu-icon.png" alt="" />
48+
</div>
49+
50+
<div class="mobile-menu-container">
51+
<ul>
52+
<li>
53+
<a href="#">Home</a>
54+
</li>
55+
56+
<li>
57+
<a href="#">About</a>
58+
</li>
59+
60+
<li>
61+
<a href="#">Contact</a>
62+
</li>
63+
64+
<li>
65+
<a href="#">Privacy Policy</a>
66+
</li>
67+
</ul>
68+
</div>
69+
70+
<div class="menu-close-icon">
71+
<img src="images/close-icon.png" alt="" />
72+
</div>
73+
74+
<div class="search-container">
75+
<div class="blog-search">
76+
<input type="text" />
77+
<input type="submit" value="Search" />
78+
</div>
79+
</div>
80+
</div>
81+
</div>
82+
83+
<header>
84+
<div class="header-wrapper">
85+
<div class="hero">
86+
<div class="hero-left">
87+
<h1 class="main-heading">Live Blogger</h1>
88+
<p class="main-subheading">Learn to design websites</p>
89+
<a href="#" class="btn">Learn More</a>
90+
</div>
91+
<div class="hero-right">
92+
<img src="images/hero-image.png" alt="" />
93+
</div>
94+
</div>
95+
</div>
96+
</header>
97+
98+
<!-- End of the header -->
99+
100+
<div class="wrapper">
101+
<section class="posts-wrapper">
102+
<h2>Latest Blog Posts</h2>
103+
104+
<div class="blogpost-card">
105+
<div class="thumbnail-image">
106+
<div class="post-labels">
107+
<img src="images/label-icon.png" alt="" />
108+
<a href="#">Technology, </a>
109+
<a href="#">Blogging</a>
110+
</div>
111+
112+
<img src="images/post-thumbnail1.jpg" alt="" />
113+
</div>
114+
115+
<h3 class="post-title">Title of The Post</h3>
116+
<div class="post-meta">Posted on 10th Oct, 2020</div>
117+
118+
<div class="post-body">
119+
<p>
120+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo hic
121+
non unde reiciendis ipsa! Nesciunt officiis voluptatem, sunt
122+
labore quo praesentium repellendus earum eaque ducimus maiores
123+
illum, delectus excepturi voluptatibus.
124+
</p>
125+
126+
<p>
127+
Lorem ipsum dolor sit amet consectetur adipisicing elit. In est
128+
eos odit cupiditate tempora voluptates non distinctio
129+
reprehenderit laboriosam totam?
130+
</p>
131+
132+
<p>
133+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo hic
134+
non unde reiciendis ipsa! Nesciunt officiis voluptatem, sunt
135+
labore quo praesentium repellendus earum eaque ducimus maiores
136+
illum, delectus excepturi voluptatibus.
137+
</p>
138+
139+
<div class="read-more-container">
140+
<a href="#" class="read-more">Read More</a>
141+
</div>
142+
</div>
143+
</div>
144+
145+
<div class="blogpost-card">
146+
<div class="thumbnail-image">
147+
<div class="post-labels">
148+
<img src="images/label-icon.png" alt="" />
149+
<a href="#">Technology, </a>
150+
<a href="#">Blogging</a>
151+
</div>
152+
153+
<img src="images/post-thumbnail2.jpg" alt="" />
154+
</div>
155+
156+
<h3 class="post-title">Title of The Post</h3>
157+
<div class="post-meta">Posted on 10th Oct, 2020</div>
158+
159+
<div class="post-body">
160+
<p>
161+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo hic
162+
non unde reiciendis ipsa! Nesciunt officiis voluptatem, sunt
163+
labore quo praesentium repellendus earum eaque ducimus maiores
164+
illum, delectus excepturi voluptatibus.
165+
</p>
166+
167+
<p>
168+
Lorem ipsum dolor sit amet consectetur adipisicing elit. In est
169+
eos odit cupiditate tempora voluptates non distinctio
170+
reprehenderit laboriosam totam?
171+
</p>
172+
173+
<p>
174+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo hic
175+
non unde reiciendis ipsa! Nesciunt officiis voluptatem, sunt
176+
labore quo praesentium repellendus earum eaque ducimus maiores
177+
illum, delectus excepturi voluptatibus.
178+
</p>
179+
180+
<div class="read-more-container">
181+
<a href="#" class="read-more">Read More</a>
182+
</div>
183+
</div>
184+
</div>
185+
186+
<div class="blogpost-card">
187+
<div class="thumbnail-image">
188+
<div class="post-labels">
189+
<img src="images/label-icon.png" alt="" />
190+
<a href="#">Technology, </a>
191+
<a href="#">Blogging</a>
192+
</div>
193+
194+
<img src="images/post-thumbnail3.jpg" alt="" />
195+
</div>
196+
197+
<h3 class="post-title">Title of The Post</h3>
198+
<div class="post-meta">Posted on 10th Oct, 2020</div>
199+
200+
<div class="post-body">
201+
<p>
202+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo hic
203+
non unde reiciendis ipsa! Nesciunt officiis voluptatem, sunt
204+
labore quo praesentium repellendus earum eaque ducimus maiores
205+
illum, delectus excepturi voluptatibus.
206+
</p>
207+
208+
<p>
209+
Lorem ipsum dolor sit amet consectetur adipisicing elit. In est
210+
eos odit cupiditate tempora voluptates non distinctio
211+
reprehenderit laboriosam totam?
212+
</p>
213+
214+
<p>
215+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo hic
216+
non unde reiciendis ipsa! Nesciunt officiis voluptatem, sunt
217+
labore quo praesentium repellendus earum eaque ducimus maiores
218+
illum, delectus excepturi voluptatibus.
219+
</p>
220+
221+
<div class="read-more-container">
222+
<a href="#" class="read-more">Read More</a>
223+
</div>
224+
</div>
225+
</div>
226+
</section>
227+
228+
<!-- End of Blogs Section -->
229+
230+
<div class="popular-posts-container">
231+
<h2>Popular Posts</h2>
232+
233+
<div class="popular-posts">
234+
<div class="popular-post">
235+
<div class="thumbnail">
236+
<img src="images/popular-post1.jpg" alt="" />
237+
<h3 class="title">The Post Title</h3>
238+
</div>
239+
</div>
240+
241+
<div class="popular-post">
242+
<div class="thumbnail">
243+
<img src="images/popular-post2.jpg" alt="" />
244+
<h3 class="title">The Post Title</h3>
245+
</div>
246+
</div>
247+
248+
<div class="popular-post">
249+
<div class="thumbnail">
250+
<img src="images/popular-post3.jpg" alt="" />
251+
<h3 class="title">The Post Title</h3>
252+
</div>
253+
</div>
254+
</div>
255+
</div>
256+
257+
<!-- End of popular posts section -->
258+
259+
<div class="contact-container">
260+
<h2>Contact Us</h2>
261+
262+
<form action="">
263+
<input type="text" placeholder="Full Name" />
264+
<input type="text" placeholder="Email" />
265+
<textarea
266+
name=""
267+
id=""
268+
cols="30"
269+
rows="10"
270+
placeholder="Your Message"
271+
></textarea>
272+
273+
<input type="submit" value="Send" />
274+
</form>
275+
</div>
276+
</div>
277+
278+
<!-- End of Contact Section -->
279+
280+
<footer>
281+
<div class="wrapper">
282+
<div class="footer-container">
283+
<div class="footer-left">
284+
<img src="images/logo.png" alt="" />
285+
</div>
286+
287+
<div class="footer-center">
288+
<h4 class="list-title">Quick Links</h4>
289+
290+
<ul>
291+
<li>
292+
<a href="#">Home</a>
293+
</li>
294+
295+
<li>
296+
<a href="#">About</a>
297+
</li>
298+
299+
<li>
300+
<a href="#">Contact</a>
301+
</li>
302+
303+
<li>
304+
<a href="#">Privacy Policy</a>
305+
</li>
306+
</ul>
307+
</div>
308+
309+
<div class="footer-right">
310+
<h4 class="list-title">Follow us on</h4>
311+
312+
<div class="social-icons">
313+
<a href="#">
314+
<img src="images/instagram-logo.png" alt="" />
315+
</a>
316+
317+
<a href="#">
318+
<img src="images/facebook-logo.png" alt="" />
319+
</a>
320+
321+
<a href="#">
322+
<img src="images/twitter-logo.png" alt="" />
323+
</a>
324+
</div>
325+
326+
<p>This website is developed by Live Blogger &copy; 2020</p>
327+
</div>
328+
</div>
329+
</div>
330+
</footer>
331+
332+
<script src="main.js"></script>
333+
</body>
334+
</html>

‎main.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const searchIcon = document.querySelector(".search-icon");
2+
const searchContainer = document.querySelector(".search-container");
3+
const mobileMenuContainer = document.querySelector(".mobile-menu-container");
4+
const mobileMenuIcon = document.querySelector(".mobile-menu-icon");
5+
const menuCloseIcon = document.querySelector(".menu-close-icon");
6+
7+
searchIcon.addEventListener("click", function () {
8+
searchContainer.classList.toggle("active");
9+
});
10+
11+
mobileMenuIcon.addEventListener("click", function () {
12+
mobileMenuContainer.classList.add("active");
13+
});
14+
15+
menuCloseIcon.addEventListener("click", function () {
16+
mobileMenuContainer.classList.remove("active");
17+
});

0 commit comments

Comments
 (0)