-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
57 lines (49 loc) · 2.52 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is a simple IMDb clone project built using HTML, CSS, Bootstrap, and Vanilla JavaScript. The app utilizes the OMDB API to search for movies and display information about them. Users can also mark movies as their favorites and view them later." />
<meta name="keywords" content="Imdbclone, movies, web app, CloneApp" />
<meta name="author" content="Mohamed Irfanullah M" />
<!-- Title and icons -->
<title>Imdb Clone</title>
<link rel="icon" href="./Images/icon.png">
<!-- Css and BootStrap and Icons-->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/49ffe5a360.js" crossorigin="anonymous"></script>
</head>
<body class="bg-secondary bg-opacity-10">
<!-- Navbar with Logo, Search and Favourites -->
<nav class="navbar bg-body-tertiary" data-bs-theme="dark">
<div class="container d-flex justify-content-around">
<!-- Logo -->
<a class="navbar-brand" href="#">
<img src="./Images/logo.png" alt="Logo" width="60" height="50">
</a>
<!-- SearchBox and Button -->
<form class="d-flex w-50" role="search">
<input class="form-control me-2 text-dark-emphasis" type="text" placeholder="Search with Movie Name..."
aria-label="Search" id="movie-search" autocomplete="off" onkeyup="findMovies()"
onclick="findMovies()">
<button class="btn btn-outline-light " type="submit"><i
class="fa-solid fa-magnifying-glass"></i></button>
</form>
<!-- Favourites -->
<a class=" text-white link-light link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover"
href="favourites.html">Favourites</a>
</div>
</nav>
<!-- End of Nav -->
<!-- SearchList Container -->
<div class="search-list" id="search-list">
</div>
<!-- End of SearchList Container -->
<h1 class="search-text">Search for movies🎬</h1>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="./Scripts/script.js"></script>
<!-- End -->
</body>
</html>