-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
159 lines (138 loc) · 6.66 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!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>IMDb clone</title>
<!-- style css link for index page -->
<link rel="stylesheet" href="./Styles/style.css">
<!-- here we use font awsome script toolkit -->
<script
src="https://kit.fontawesome.com/74894dafb2.js"
crossorigin="anonymous"
></script>
<!-- google font link for awsome text -->
<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=Didact+Gothic&family=Montserrat&display=swap" rel="stylesheet">
</head>
<!-- body section begins here -->
<body>
<!-- this is the main container of website -->
<section class="main">
<!-- navigation section html code which include logo(Menu) , searchBox , watchList(favorite movie list) , imbdPro(popup) section & signIn Imdb Functionality -->
<nav class="nav-menu">
<!-- nav 1st child -->
<!-- show menu Functionality is used for pull side menu -->
<div class="logo-menu" onclick=showMenu()>
<div class="imdb-logo" id="i-logo">
<img src="./assets/IMDB.png" alt="imdb-logo">
</div>
<div class="bar-menu hover">
<i class="fa-solid fa-bars"></i> <span>Menu</span>
</div>
</div>
<!-- nav second child -->
<div class="search-box">
<input type="text" name="searchMovie" id="searchMovie" placeholder="Search IMDb"
autocomplete="off">
<div id="search-icon"> <i class="fa-solid fa-magnifying-glass"></i></div>
</div>
<!-- nav 3rd child -->
<div class="fabs-login">
<h1 class="hover imdbpro" id="im-pro">IMDb<span id="diff-color">Pro</span> |</h1>
<!-- this small page pop page will be shown when you hover IMDbPro option -->
<!-- ----------- -->
<div class="pop-up">
<div class="popup-img">
<img src="./assets/popup.png" alt="popup-img-">
</div>
<div class="pop-up-desc">
<h2 style="font-size: 20px;">The essential resource for entertainment professionals</h2>
<ul class="popup-list">
<li>Find industry contacts & talent represantation</li>
<li>Acess in development titles not available on IMDb</li>
<li>Get latest news from leading industry trades</li>
<li>Claim your pagr and control brand across IMDb & Amazon</li>
</ul>
<button class="popup-btn">Try IMDbPro Free</button>
</div>
</div>
<!-- --------------- -->
<!-- 4th child -->
<h3 class="hover"><a href="./WatchList/myfav.html"><i class="fa-solid fa-folder-plus"></i> Watchlist</a></h3>
<h3 class="hover" id="signin"><a href="https://www.imdb.com/registration/signin?ref=nv_generic_lgin&u=%2F" target="_blank">Sign In</a></h3>
</div>
</nav>
<!-- side menu of imdb web -->
<!-- when you click menu option and logo then
side option will appear and when you click cross icon then
side option goes back -->
<div class="side-option" id="side">
<i class="fa fa-times" onclick="hideMenu()"></i>
<br>
<br>
<ul class="side-list">
<li>
<!-- here class containing fa-solid all are icons which i takes from font awsome website -->
<div> <i class="fa-solid fa-film"></i> <span>Movies</span></div>
<div><i class="fa-solid fa-chevron-down"></i></div>
</li>
<li>
<div> <i class="fa-solid fa-tv"></i> <span>Tv Shows</span></div>
<div><i class="fa-solid fa-chevron-down"></i></div>
</li>
<li>
<div><i class="fa-solid fa-video"></i> <span>Watch</span></div>
<div><i class="fa-solid fa-chevron-down"></i></div>
</li>
<li>
<div> <i class="fa-solid fa-award"></i> <span>Awards & Events</span></div>
<div><i class="fa-solid fa-chevron-down"></i></div>
</li>
<li>
<div><i class="fa-solid fa-person"></i> <span>Celebs</span></div>
<div><i class="fa-solid fa-chevron-down"></i></div>
</li>
<li>
<div><i class="fa-solid fa-globe"></i> <span>Community</span></div>
<div><i class="fa-solid fa-chevron-down"></i></div>
</li>
<br>
<br>
<li>
<div>
<h4>IMDbPro</h4>
<p style="font-size: 15px;">For Industrial Professionals</p>
</div>
<div><i class="fa-solid fa-arrow-up-right-from-square"></i></div>
</li>
</ul>
</div>
<!-- container for movie list coming from IMDB API here i access Api proprty and functionality and form dynamic Html Element that append here-->
<div id="movies">
<!-- <div class="movie-element">
<img src="https://upload.wikimedia.org/wikipedia/en/0/0d/Avengers_Endgame_poster.jpg" alt="image-h">
<div class="movie-info">
<h3>Movie Title</h3>
<div class="star-fab">
<span class="yellow"><i class="fa-solid fa-plus"></i></span>
<span class="yellow"><i class="fa-solid fa-star"> </i>9.8</span>
</div>
</div>
<div class="overview">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit laborum eos nobis nam, cupiditate ducimus optio? Nobis possimus debitis suscipit? Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, reprehenderit?
</div>
</div> -->
</div>
<!-- button for next page and prev page -->
<div class="page-navigate">
<button id="prev-page">Prev</button>
<button id="next-page">Next</button>
</div>
</section>
<!-- external javascript for home page -->
<script type="text/javascript" src="./JavaScript/script1.js"></script>
</body>
</html>