-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
120 lines (105 loc) · 4.21 KB
/
index.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
<!DOCTYPE html>
<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>Newspaper Web App</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.tailwindcss.com"></script>
<style>
.views {
bottom: 0;
color: #fff;
background: #000000d1;
right: 0;
padding: 0px 6px;
border-radius: 5px;
}
</style>
</head>
<body>
<!-- Navigation Bar -->
<header>
<div class="container px-4 mx-auto pb-4 border-b">
<nav class="
flex flex-wrap
items-center
justify-between
w-full
py-4
md:py-0
px-4
text-lg text-gray-700
bg-white
">
<div>
<a href="#" class="font-semibold text-4xl">
Daily News
</a>
</div>
<svg xmlns="http://www.w3.org/2000/svg" id="menu-button" class="h-6 w-6 cursor-pointer md:hidden block"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<div class="hidden w-full md:flex md:items-center md:w-auto" id="menu">
<ul class="
pt-4
text-base text-gray-700
md:flex
md:justify-between
md:pt-0">
<li>
<a class="md:p-4 py-2 block hover:text-purple-400 text-purple-500 font-medium"
href="#">News</a>
</li>
<li>
<a class="md:p-4 py-2 block hover:text-purple-400 font-medium" href="#">Blog</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- Categories -->
<div id="categories" class="container px-4 mx-auto px-4 py-4 flex flex-row justify-between flex-wrap">
</div>
</header>
<!-- Blogs -->
<section class="py-20">
<div class="container px-4 mx-auto">
<h4 class="text-lg font-medium"><span id="category-item">26</span> Items found for category <span
id="category-name">All News</span></h4>
<div class="mt-8 flex flex-row justify-between">
<div>
<span class="text-base font-medium mr-8">Sort By View:</span>
<select name="sort" class="px-2" id="sortId">
<option value="Default text-gray-300">Default</option>
<option value="View text-gray-300">View</option>
</select>
</div>
<div class="flex flex-row justify-between">
<button id="button"
class="bg-indigo-600 shadow-xl hover:bg-indigo-500 text-white font-normal rounded p-2 px-4 mr-4">Today's
Pick</button>
<button class="rounded px-4 py-2 border-2 border-indigo-500 text-blue-500 hover:bg-indigo-500
hover:text-white hover:text-white duration-300">Trending</button>
</div>
</div>
<div id="articles" class="mt-8">
</div>
</div>
</div>
</section>
<footer class="mt-8 py-8">
<p class="text-center text-xl font-semibold">© Copyright 2022 Daily News</p>
</footer>
<!-- Single Blog -->
<div class="fixed z-10 overflow-y-auto top-0 w-full left-0 hidden" id="modal">
</div>
<!-- Single Blog -->
<script src="./navbar.js"></script>
<script src="./app.js"></script>
</body>
</html>