-
Notifications
You must be signed in to change notification settings - Fork 0
/
movies.html
150 lines (125 loc) · 4.85 KB
/
movies.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
<!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="stylesheet" href="style.css">
<title>Movies</title>
</head>
<style>
* {
margin: 0;
padding: 2px;
}
.container {
display: flex;
align-items: center;
justify-content: center;
padding-top: 80px;
}
h1{
background-color: rgba(255, 255, 0, 0.63);
text-align: center;
border-radius: 30px;
}
.container img {
height: 300px;
width: 270px;
}
.container img:hover{
transform: scale(0.8) rotate(-15deg);
border-radius: 20px;
}
.text {
font-size: 20px;
padding-left: 20px;
}
p {
font-size: 20px;
padding-top: 10px;
}
body{
background-image:url("./media/moviesbg.jpg");
background-repeat: no-repeat;
background-size: cover;
}
</style>
<body >
<nav class="topnav">
<ul>
<li><img src="./media/nav.png" heigth="30px" width="30px"></li>
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About us</a></li>
<li><a href="movies.html">Minion Movies</a></li>
<li><a href="gallery.html">Minion Gallery</a></li>
<li><a href="characters.html">Minion characters</a></li>
<li><a href="index.html">Logout</a></li>
</ul>
</nav>
<body>
<div class="container">
<div class="image">
<img src="./media/movie1.jpg">
</div>
<div class="text">
<h1 style="font-size: 30px;">Despicable Me</h1>
<p>In a happy suburban neighbourhood sits a black house with a dead lawn! This is the secret hideout of
Gru, who plans to TAKE OVER THE WORLD. Armed with his arsenal of rays, guns and battle-ready
vehicles, Gru is accustomed to defeating all who stand in his way.</p>
</div>
</div>
<div class="container">
<div class="text">
<h1 style="font-size: 30px;">Despicable Me 2</h1>
<p>Gru, his adorable girls, and the Minions are back in this comedy blockbuster where this super-dad
finds himself balancing fatherhood with his secret agent role in the Anti-Villain League.</p>
</div>
<div class="image">
<img src="./media/movie2.jpg">
</div>
</div>
<div class="container">
<div class="image">
<img src="./media/movie3.jpg">
</div>
<div class="text">
<h1 style="font-size: 30px;">Despicable Me3</h1>
<p>Gru, Lucy, their adorable daughters, and the Minions are back in the comedy blockbuster where one
former super-villain will rediscover just how good it feels to be bad.</p>
</div>
</div>
<div class="container">
<div class="text">
<h1 style="font-size: 30px;">Minions</h1>
<p>Since the dawn of time, Minions have served (and accidentally eliminated) history’s most despicable
villians. After their latest explosive mistake leaves them without an evil leader, the Minions fall
deep into a deep depression. With the tribe on teh brink of collapse, three unlikely heroes – Kevin,
Stuart, and Bob – embark on a journey to find a new big boss.</p>
</div>
<div class="image">
<img src="./media/movie4.jpg">
</div>
</div>
<div class="container">
<div class="image">
<img src="./media/yellowisthenew.jpg">
</div>
<div class="text">
<h1 style="font-size: 30px;">Yellow is the new black</h1>
<p>An adventure about two minions which try to escape from jail.</p>
</div>
</div>
<div class="container">
<div class="text">
<h1 style="font-size: 30px;">Rise of Gru</h1>
<p>In the 1970s, young Gru tries to join a group of supervillains called the Vicious 6 after they oust
their leader — the legendary fighter Wild Knuckles. When the interview turns disastrous, Gru and his
Minions go on the run with the Vicious 6 hot on their tails. </p>
</div>
<div class="image">
<img src="./media/riseofgru.jpg">
</div>
</div>
</body>
</html>