-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (116 loc) · 5.95 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
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Sofia+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');
</style>
</head>
<body class="bg-gray-100">
<!-- Promotional Banner -->
<div class="promo-banner text-center p-5 font-bold bg-gray-800 text-white">
Super Sale Up to 40% off
</div>
<!-- Navbar -->
<header class="bg-white shadow-md">
<div class="container mx-auto flex justify-between items-center p-4">
<!-- Left side (Shop and Community) -->
<div class="hidden md:flex space-x-6">
<a href="#" class="hover:text-gray-700">Shop</a>
<a href="#" class="hover:text-gray-700">Community</a>
</div>
<!-- Logo (centered in desktop mode) -->
<div class="flex justify-center flex-grow md:flex-none">
<img src="img/logo.png" alt="Logo" class="w-20 mx-auto md:mx-0">
</div>
<!-- Right side (icons) -->
<div class="hidden md:flex space-x-4">
<a href="#"><i class="fas fa-search"></i></a>
<a href="#"><i class="fas fa-user"></i></a>
<a href="#"><i class="fas fa-shopping-cart"></i></a>
</div>
<!-- Hamburger menu (visible on mobile) -->
<div class="md:hidden hamburger cursor-pointer">
<i class="fas fa-bars text-xl"></i>
</div>
</div>
</header>
<!-- Slide-in Menu (Mobile Only) -->
<div class="menu-active fixed right-0 bg-black w-64 h-full shadow-lg p-6 z-50 md:hidden">
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-white">Menu</span>
<div class="close-menu cursor-pointer">
<i class="fas fa-times text-xl text-white"></i>
</div>
</div>
<nav class="flex flex-col space-y-4 mt-4">
<a href="#" class="hover:text-gray-300 text-white">Shop</a>
<a href="#" class="hover:text-gray-300 text-white">Community</a>
<div class="flex space-x-4 mt-6 text-white">
<a href="#" class="hover:text-gray-300"><i class="fas fa-search"></i></a>
<a href="#" class="hover:text-gray-300"><i class="fas fa-user"></i></a>
<a href="#" class="hover:text-gray-300"><i class="fas fa-shopping-cart"></i></a>
</div>
</nav>
</div>
<!-- Hero Section -->
<section class="relative">
<img src="img/Poster.png" alt="Hero Background" class="w-full h-[500px] object-cover">
<div class="absolute top-0 left-0 w-full h-full flex flex-col justify-center items-start p-8">
<h1 class="text-4xl text-white font-bold">Stock photos</h1>
<p class="text-white mt-4">John Wick is on the run after killing a member of the international assassins' guild, and with a $14 million price tag on his head, he is the target of hit men and women everywhere.</p>
<a href="#" class="mt-6 bg-red-500 text-white px-6 py-2 rounded-full">Explore</a>
</div>
</section>
<!-- Search Section -->
<div class="container mx-auto py-8 px-4 md:px-12">
<!-- Search Bar -->
<div class="flex justify-center mb-8">
<input type="text" id="searchBar" placeholder="Search..." class="w-1/2 md:w-1/3 p-4 border border-gray-300 rounded shadow-md">
</div>
<!-- First Result -->
<div id="firstResultCard" class="bg-white p-6 shadow-md mb-8 flex items-center hidden min-h-[150px] rounded-lg">
<img id="firstResultImage" src="" alt="Photographer" class="w-1/3 h-48 object-cover rounded-lg">
<div class="ml-6 flex flex-col justify-between">
<div>
<h2 id="firstResultAlt" class="text-2xl font-bold mb-2"></h2>
<p id="firstResultPhotographer" class="text-gray-600 mb-4"></p>
</div>
<a id="firstResultButton" href="#" class="bg-red-500 text-white px-6 py-2 rounded shadow-md">Explore More</a>
</div>
</div>
<!-- Similar Results -->
<h2 class="text-2xl font-bold mb-4">Similar Results</h2>
<div class="splide" id="resultsSlider">
<div class="splide__track">
<ul class="splide__list" id="sliderResults">
<!-- Slider cards will be appended here -->
</ul>
</div>
</div>
</div>
<!-- Favorites List -->
<div class="container mx-auto py-8 px-4 md:px-12">
<h2 class="text-2xl font-bold mb-4">Favorites</h2>
<div class="splide" id="favoritesSlider">
<div class="splide__track">
<ul class="splide__list" id="favoritesResults">
<!-- Favorites cards will be appended here -->
</ul>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<script src="script.js"></script>
</body>
</html>