-
Notifications
You must be signed in to change notification settings - Fork 0
/
movie-details.html
110 lines (107 loc) · 3.83 KB
/
movie-details.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
<!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" />
<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:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="lib/fontawesome.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/spinner.css" />
<script src="js/script.js" defer></script>
<title>Flixx | Movie Details</title>
</head>
<body>
<header class="main-header">
<div class="container">
<div class="logo"><a href="/">FLIXX</a></div>
<nav>
<ul>
<li>
<a class="nav-link" href="/">Movies</a>
</li>
<li>
<a class="nav-link" href="/shows.html">TV Shows</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- Movie Details -->
<section class="container">
<div class="back">
<a class="btn" href="index.html">Back To Movies</a>
</div>
<!-- Movie Details Output -->
<div id="movie-details">
<div class="details-top">
<div>
<img
src="images/no-image.jpg"
class="card-img-top"
alt="Movie Title"
/>
</div>
<div>
<h2>Movie Title</h2>
<p>
<i class="fas fa-star text-primary"></i>
8 / 10
</p>
<p class="text-muted">Release Date: XX/XX/XXXX</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
atque molestiae error debitis provident dolore hic odit, impedit
sint, voluptatum consectetur assumenda expedita perferendis
obcaecati veritatis voluptatibus. Voluptatum repellat suscipit,
quae molestiae cupiditate modi libero dolorem commodi obcaecati!
Ratione quia corporis recusandae delectus perspiciatis consequatur
ipsam. Cumque omnis ad recusandae.
</p>
<h5>Genres</h5>
<ul class="list-group">
<li>Genre 1</li>
<li>Genre 2</li>
<li>Genre 3</li>
</ul>
<a href="#" target="_blank" class="btn">Visit Movie Homepage</a>
</div>
</div>
<div class="details-bottom">
<h2>Movie Info</h2>
<ul>
<li><span class="text-secondary">Budget:</span> $1,000,000</li>
<li><span class="text-secondary">Revenue:</span> $2,000,000</li>
<li><span class="text-secondary">Runtime:</span> 90 minutes</li>
<li><span class="text-secondary">Status:</span> Released</li>
</ul>
<h4>Production Companies</h4>
<div class="list-group">Company 1, Company 2, Company 3</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="main-footer">
<div class="container">
<div class="logo"><span>FLIXX</span></div>
<div class="social-links">
<a href="https://www.facebook.com" target="_blank"
><i class="fab fa-facebook-f"></i
></a>
<a href="https://www.twitter.com" target="_blank"
><i class="fab fa-twitter"></i
></a>
<a href="https://www.instagram.com" target="_blank"
><i class="fab fa-instagram"></i
></a>
</div>
</div>
</footer>
<div class="spinner"></div>
</body>
</html>