-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
59 lines (59 loc) · 3.72 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
<!DOCTYPE html>
<html lang="en" data-theme="corporate">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="MAKE SIMPLE VIDEO SHARING PLATFORM THROUGH API"/>
<meta name="keywords"content="AI REVIEW, API INTEGRATE WITH HTML, NEWS PLATFORM, Ashaduzzaman,Sazid,Ashaduzzaman (Sazid)"/>
<meta name="author" content="Ashaduzzaman Sazid"/>
<title>PH TUBE</title>
<link rel="shortcut icon" href="img/favicon-ph-tube.png" type="image/x-icon">
<!----- DaisyUI & Tailwind-Link ----->
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts - Work Sans -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
<!-- Bootstrap Icon Link -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<!-- Custom Styles -->
<style>
body {
font-family: "Inter", sans-serif;
}
</style>
</head>
<body class="px-2 md:px-12 lg:px-12 py-6 pb-8">
<header class="grid grid-cols-2 md:flex lg:flex md:justify-between lg:justify-between">
<div class="flex items-center col-span-2 justify-center mb-5 lg:mb-0">
<img src="img/Logo.png" alt="">
</div>
<div class="w-64">
<button class="btn px-5 bg-[#25252536] font-medium text-[#252525] text-lg rounded-lg hover:bg-[#25252538] active:opacity-20">Sort by view</button>
</div>
<div class="ml-auto md:ml-0 lg:ml-0">
<button class="btn px-5 bg-[#FF1F3D] font-medium text-white text-lg rounded-lg hover:bg-[#ec112f] active:opacity-20">Blog</button>
</div>
</header>
<div class="h-[2px] bg-[#1717171f] my-7 rounded-lg"></div>
<main>
<section class="flex justify-center gap-2 md:gap-5 lg:gap-5 mb-8">
<button data-category="all" class="category-btn px-4 md:px-5 lg:px-5 py-2 bg-[#2525251f] font-medium text-[#252525d2] rounded-md hover:bg-[#25252538] focus:bg-[#FF1F3D] focus:text-white active">All</button>
<button data-category="music" class="category-btn px-4 md:px-5 lg:px-5 py-2 bg-[#2525251f] font-medium text-[#252525d2] rounded-md hover:bg-[#25252538] focus:bg-[#FF1F3D] focus:text-white">Music</button>
<button data-category="comedy" class="category-btn px-4 md:px-5 lg:px-5 py-2 bg-[#2525251f] font-medium text-[#252525d2] rounded-md hover:bg-[#25252538] focus:bg-[#FF1F3D] focus:text-white">Comedy</button>
<button data-category="drawing" class="category-btn px-4 md:px-5 lg:px-5 py-2 bg-[#2525251f] font-medium text-[#252525d2] rounded-md hover:bg-[#25252538] focus:bg-[#FF1F3D] focus:text-white">Drawing</button>
</section>
<section id="videos-container" class="flex flex-col justify-center items-center md:grid lg:grid md:grid-cols-2 lg:grid-cols-4 gap-5 lg:gap-5 md:gap-x-[72px]">
<!-- This container isn't empty. Element Input throw API with DOM manipulation -->
<div id="not-found-video" class="w-[400px] col-span-4 mx-auto mt-8 hidden">
<div class="flex justify-center">
<img src="img/Icon.png" alt="">
</div>
<h1 class="mt-6 text-center font-bold text-[32px] text-[#171717]">Oops!! Sorry, There is no content here</h1>
</div>
</section>
</main>
<script src="js/ph-tube.js"></script>
</body>
</html>