-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmovie.html
183 lines (181 loc) · 10 KB
/
movie.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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<script src="app.js" type="module" defer></script>
<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=Poppins:ital,wght@0,300;0,400;0,500;1,200;1,300;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<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=Playfair+Display:ital@0;1&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,400;0,500;0,600;0,700;1,400;1,500&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Kanit:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Rubik+Doodle+Shadow&family=Rubik+Scribble&family=Sevillana&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="appName">
<span class="textApp">movie</span>Search<span class="textApp">App</span>
</div>
<nav id="nav">
<ul>
<li><a href="movie.html">Movie</a>
<ul class="submenu">
<li><a href="#" id="topRated">Top Rated</a></li>
<li><a href="#" id="trending">Trending</a></li>
<li><a href="#" id="upcoming">Upcoming</a></li>
</ul>
</li>
<li><a href="tv.html" id="TV">TV</a>
<ul class="submenu">
<li><a href="#" id="topRatedTv">Top Rated</a></li>
<li><a href="#" id="trendingTv">Trending</a></li>
<li><a href="#" id="airingToday">Airing today</a></li>
<li><a href="#" id="onTheAir">On the air</a></li>
</ul>
</li>
<li><a href="#">Person</a></li>
</ul>
</nav>
<ion-icon name="search-outline" class="icon"></ion-icon>
<form id="form">
<input type="text" name="search" id="search" placeholder="search..."><button type="submit" id="submit"><ion-icon name="search-sharp"></ion-icon></button>
</form>
<div id="close"><ion-icon name="close-outline"></ion-icon></div>
</header>
<div id="filter">
<button type="button" class="filterB">action</button>
<button type="button" class="filterB">horror</button>
<button type="button" class="filterB">adventure</button>
</div>
<section class="movieSection">
<div class="movieBloc">
<a href="#"><img src="img/istockphoto-1449244963-1024x1024.jpg" alt="image"></a>
<div class="movieInfo">
<h1 id="movieName">movie name</h1><span class="movieNote">9</span>
</div>
<div class="overview">
<h3>Overview</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim et repellat corporis ad. Deserunt aliquid sapiente rem! Tempora voluptatibus ipsum culpa aliquam ea rerum dolores velit. Assumenda illo ipsa rem?
</div>
</div>
<div class="movieBloc">
<a href="#"><img src="img/istockphoto-1449244963-1024x1024.jpg" alt="image"></a>
<div class="movieInfo">
<h1 id="movieName">movie name</h1><span class="movieNote">9</span>
</div>
<div class="overview">
<h3>Overview</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim et repellat corporis ad. Deserunt aliquid sapiente rem! Tempora voluptatibus ipsum culpa aliquam ea rerum dolores velit. Assumenda illo ipsa rem?
</div>
</div>
<div class="movieBloc">
<a href="#"><img src="img/istockphoto-1449244963-1024x1024.jpg" alt="image"></a>
<div class="movieInfo">
<h1 id="movieName">movie name</h1><span class="movieNote">9</span>
</div>
<div class="overview">
<h3>Overview</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim et repellat corporis ad. Deserunt aliquid sapiente rem! Tempora voluptatibus ipsum culpa aliquam ea rerum dolores velit. Assumenda illo ipsa rem?
</div>
</div>
<div class="movieBloc">
<a href="#"><img src="img/istockphoto-1449244963-1024x1024.jpg" alt="image"></a>
<div class="movieInfo">
<h1 id="movieName">movie name</h1><span class="movieNote">9</span>
</div>
<div class="overview">
<h3>Overview</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim et repellat corporis ad. Deserunt aliquid sapiente rem! Tempora voluptatibus ipsum culpa aliquam ea rerum dolores velit. Assumenda illo ipsa rem?
</div>
</div>
</section>
<div id="pagination">
<div class="page" id="prev">previous page</div>
<div id="current">1</div>
<div class="page" id="next">next page</div>
</div>
<div class="overlay">
<div id="other">
<div id="headOverlay"><ion-icon name="close-outline" id="closeOverlay"></ion-icon></div>
<img src="img/marc-sendra-martorell--Vqn2WrfxTQ-unsplash.jpg" alt="image">
<div id="moviePlus">
<div id="first">
<h1>title</h1>
<ul>
<li>20/11/2023</li>
<li>action</li>
<li>1h 20m</li>
</ul>
</div>
<div id="second">
<p><em>tagline</em></p>
<div>
<h3>overview</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur beatae molestiae eaque porro amet vero, reprehenderit nisi accusamus inventore voluptatibus, asperiores voluptates velit ea sunt, illo alias? In, itaque obcaecati.
Autem, dolores fuga, iure magnam repellendus eius libero numquam nihil sunt a delectus esse recusandae, sint nemo tempora expedita debitis laboriosam. Amet molestiae reprehenderit suscipit quae harum unde perspiciatis consequatur!
Placeat possimus qui at voluptatibus doloremque explicabo! Commodi ea praesentium tempora aliquam amet sequi iste molestias eaque. Veniam exercitationem ex officiis tempore animi? Eligendi, consequatur in mollitia possimus pariatur velit.
Nostrum inventore rerum iure delectus dolores porro consequatur tenetur autem labore officia nam quas, quos officiis deleniti amet rem id. Odio, beatae? Magnam, architecto eligendi. Tempore, ratione assumenda? Animi, aut.
Sequi, dolorem consequatur molestias facilis assumenda delectus, quasi, voluptatum fugiat possimus soluta tempore. Quidem eaque aliquam perspiciatis sed ullam tenetur doloremque ex itaque sit! Ad eveniet ab molestias minus? Placeat.
</p>
</div>
</div>
<div id="third">
<div class="thirdDet">
<h4>status</h4>
<div>relesead</div>
</div>
<div class="thirdDet">
<h4>original language</h4>
<div>english</div>
</div>
<div class="thirdDet">
<h4>budget</h4>
<div>200000</div>
</div>
<div class="thirdDet">
<h4>revenue</h4>
<div>345456</div>
</div>
</div>
</div>
</div>
<h1>Actors</h1>
<div class="galery">
<ion-icon name="caret-back-outline" id="left"></ion-icon>
<div id="movieActor">
<div class="actorBloc">
<img src="img/istockphoto-1449244963-1024x1024.jpg" alt="actorImage">
<div><h1>name</h1><span><i>charactere</i></span></div>
</div>
<div class="actorBloc"><img src="" alt=""></div>
<div class="actorBloc"><img src="" alt=""></div>
<div class="actorBloc"><img src="" alt=""></div>
<div class="actorBloc"><img src="" alt=""></div>
<div class="actorBloc"><img src="" alt=""></div>
<div class="actorBloc"><img src="" alt=""></div>
<div class="actorBloc"><img src="" alt=""></div>
<div class="actorBloc"><img src="" alt=""></div>
</div>
<ion-icon name="caret-forward-outline" id="rigth"></ion-icon>
</div>
<h1>trailer</h1>
<div id="videoBloc">
<ion-icon name="chevron-back-outline"></ion-icon>
<div id="vBloc">
</div>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
</div>
</body>
</html>