-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
116 lines (108 loc) · 5.35 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
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Phone Hunter</title>
<!-- google fonts -->
<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=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!-- tailwind and daisyui -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.22/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- custom css -->
<link rel="stylesheet" href="styles/styles.css">
</head>
<body class="font-poppins">
<header class="h-[806px] bg-[#0D6EFD0D]">
<div class="flex justify-between items-center mx-[150px]">
<h2 class="text-[25px] font-bold text-[#403F3F] mt-16 ">Hot Gadgets</h2>
<button class="btn btn-info text-white text-xl font-bold mt-16 rounded-lg">#</button>
</div>
<div class="text-center mx-[320px] mt-[164px]">
<h2 class="font-bold text-[65px] text-[#100F0F]">Apple Iphone 13 Pro Max</h2>
<p class="text-lg text-[#706F6F]">There are many variations of passages of Lorem Ipsum available, but the majority <br> have suffered alteration in some form, by injected humou.</p>
<button class="btn btn-info text-white text-xl font-bold mt-16 rounded-lg">Buy Now</button>
</div>
<div class="flex justify-center items-center gap-14 mx-[300px] ">
<img src="images/pngwing 2.png" class="w-[218px] h-[438px]" alt="">
<img src="images/pngwing 1.png" class="w-[293px] h-[585px]" alt="">
<img src="images/pngwing 3.png" class="w-[218px] h-[438px]" alt="">
</div>
</header>
<main class="container mx-auto ">
<section class="mt-96 flex flex-col gap-11 justify-center items-center">
<div class="flex flex-col gap-8 justify-center items-center">
<h3 class=" text-[#100F0F] text-4xl font-semibold text-center">Search your phone</h3>
<div class="h-16 w-[752px] rounded-lg bg-[#100F0F0D] flex justify-between items-center">
<input id="search-field" type="text" placeholder="Search" class="bg-[#100F0F0D] text-xs text-[#706F6F] input input-bordered w-full h-full" />
<button onclick="handleSearch()" class="btn bg-[#0D6EFD] text-white w-[150px] h-full">Search</button>
</div>
</div>
<div id="loading-spinner" class="text-center my-40 hidden">
<span class="loading loading-spinner loading-lg"></span>
</div>
<div id="phone-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mx-auto">
<!-- <div class="card bg-white w-96 border border-solid border-[#CFCFCF] rounded-lg">
<figure class="px-10 pt-10">
<img
src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
alt="Shoes"
class="rounded-lg" />
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title">Shoes!</h2>
<p>If a dog chews shoes whose shoes does he choose?</p>
<div class="card-actions">
<button class="btn btn-primary">Buy Now</button>
</div>
</div>
</div> -->
</div>
<div id="show-all-container" class="hidden">
<button id="show-all-btn" onclick="handleShowAll()" class="bg-[#0D6EFD] w-40 h-16 text-white font-bold text-xl rounded-lg">Show All</button>
</div>
</section>
<!-- Show Details Modal -->
<!-- Open the modal using ID.showModal() method -->
<dialog id="show_details_modal" class="modal modal-bottom sm:modal-middle">
<div id="show-details-container" class="modal-box max-h-screen overflow-y-hidden ">
</div>
</dialog>
</main>
<footer class=" bg-[#0D6EFD0D] text-black-content p-10 mt-[120px] ">
<div class="font-open-sans flex justify-between items-center mb-[50px]">
<div>
<h3 class="text-[45px] font-bold">Hot Gadgets</h3>
<p class="text-lg text-[#706F6F] font-medium">You can definitely work.</p>
</div>
<button class="btn btn-info text-white text-xl font-bold mt-16 rounded-lg">Join Premium</button>
</div>
<div class="footer flex justify-between items-center gap-40 border-t border-solid border-[#CFCFCF]">
<nav>
<h6 class="footer-title">Services</h6>
<a class="link link-hover">Branding</a>
<a class="link link-hover">Design</a>
<a class="link link-hover">Marketing</a>
<a class="link link-hover">Advertisement</a>
</nav>
<nav>
<h6 class="footer-title">Company</h6>
<a class="link link-hover">About us</a>
<a class="link link-hover">Contact</a>
<a class="link link-hover">Jobs</a>
<a class="link link-hover">Press kit</a>
</nav>
<nav>
<h6 class="footer-title">Legal</h6>
<a class="link link-hover">Terms of use</a>
<a class="link link-hover">Privacy policy</a>
<a class="link link-hover">Cookie policy</a>
</nav>
</div>
</footer>
<!-- scripts -->
<script src="js/phone.js"></script>
</body>
</html>