-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplate.html
135 lines (128 loc) · 6.32 KB
/
template.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
<!doctype html>
<html lang="en">
<head>
<title>MoonRise Kingdom</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
custom_card_text {
font-family: "Roboto", sans-serif;
word-wrap: break-word;
}
.checked {
color: deepskyblue;
}
span.tab-space {
padding-left: 5em;
}
.card {
box-shadow: inset 0px 0px 181px -74px rgba(49, 207, 224, 0.74);
}
.carousel {
border: 1px solid deepskyblue;
box-shadow: 0px 0px 19px 6px rgba(31, 192, 237, 0.6);
border-radius: 7px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row bg-transparent">
<div class="col-md-6 offset-3">
<div class="card border-info mb-3 mt-4">
<div class="row">
<div class="col-md-4">
<img class="img-thumbnail"
src="http://image.tmdb.org/t/p/w600_and_h900_bestv2/wOgmhrSUwOuZJsQXf2GsI923N0f.jpg">
</div>
<div class="card-body text-dark col-8">
<h4 class="card-title"><u>Moonrise Kingdom (2012)</u></h4>
<p class="card-text"><span class="lead"><strong>Director: </strong></span>
<custom_card_text>Wes Anderson</custom_card_text>
</p>
<p class="card-text"><span class="lead"><strong>Cast: </strong></span>
<custom_card_text>Bruce Willis, Edward Norton, Bill Murray, Frances McDormand, Tilda
Swinton
</custom_card_text>
</p>
<p class="card-text"><span class="lead"><strong>My Rating: </strong></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</p>
<p><span class="lead"><strong>Genres: </strong></span>
<custom_card_text>Comedy, Drama, Romance</custom_card_text>
</p>
<p><span class="lead"><strong>Runtime: </strong></span>
<custom_card_text>94 mins</custom_card_text>
</p>
<p><span class="lead"><strong>IMDB Rating: </strong></span>
<custom_card_text>7.8</custom_card_text>
</p>
<p><span class="lead"><strong>Trailer Link: </strong></span>
<custom_card_text><a href="https://youtu.be/_eOI3AamSm8">https://youtu.be/_eOI3AamSm8</a>
</custom_card_text>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="row bg-transparent">
<div class="col-md-6 offset-3 mb-3 mt-4">
<div id="carouselId" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselId" data-slide-to="0" class="active"></li>
<li data-target="#carouselId" data-slide-to="1"></li>
<li data-target="#carouselId" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="img-thumbnail"
src="http://image.tmdb.org/t/p/original/9lARefvwwjSvHai0ruqwKNqA9Jz.jpg"
alt="First slide">
</div>
<div class="carousel-item">
<img class="img-fluid"
src="http://image.tmdb.org/t/p/original/bsYv9IFIGfpAV0oUbe7YTiyxhox.jpg"
alt="Second slide">
</div>
<div class="carousel-item">
<img class="img-fluid"
src="http://image.tmdb.org/t/p/original/o2zQ43bgtYuVNOzVCG2mGiW5D0m.jpg"
alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselId" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselId" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>