-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
144 lines (128 loc) · 6.57 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
<!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="./styles/style.css">
<title>Document</title>
</head>
<body>
<main class="main">
<h1 class="title">Gallery</h1>
<div class="gallery">
<div class="gallery__item">
<a class="card" href="./img/backToTheFuture.jpg" data-title="Back To The Future" data-description="Robert Zemeckis">
<div class="card__content">
<h2 class="card__title">Back To The Future</h2>
<p class="card__description">Robert Zemeckis</p>
</div>
<div class="card__hover"></div>
<img class="card__image" src="./img/backToTheFuture.jpg">
</a>
</div>
<div class="gallery__item">
<a class="card" href="./img/batman.jpg" data-title="Dark Knigth" data-description="Christopher Nolan">
<div class="card__content">
<h2 class="card__title">Dark Knigth</h2>
<p class="card__description">Christopher Nolan</p>
</div>
<div class="card__hover"></div>
<img class="card__image" src="./img/batman.jpg">
</a>
</div>
<div class="gallery__item">
<a class="card" href="./img/bladeRunner.jpg" data-title="Blade Runner" data-description="Ridley Scott">
<div class="card__content">
<h2 class="card__title">Blade Runner</h2>
<p class="card__description">Ridley Scott</p>
</div>
<div class="card__hover"></div>
<img class="card__image" src="./img/bladeRunner.jpg">
</a>
</div>
<div class="gallery__item">
<a class="card" href="./img/casablanca.jpg" data-title="Casablanca" data-description="Michael Curtis">
<div class="card__content">
<h2 class="card__title">Casablanca</h2>
<p class="card__description">Michael Curtis</p>
</div>
<div class="card__hover"></div>
<img class="card__image" src="./img/casablanca.jpg">
</a>
</div>
<div class="gallery__item">
<a class="card" href="./img/druk.jpg" data-title="Another Round" data-description="Thomas Winterberg">
<div class="card__content">
<h2 class="card__title">Another Round</h2>
<p class="card__description">Thomas Winterberg</p>
</div>
<div class="card__hover"></div>
<img class="card__image" src="./img/druk.jpg">
</a>
</div>
<div class="gallery__item">
<a class="card" href="./img/joker.jpg" data-title="Joker" data-description="Todd Phillips">
<div class="card__content">
<h2 class="card__title">Joker</h2>
<p class="card__description">Todd Phillips</p>
</div>
<div class="card__hover"></div>
<img class="card__image" src="./img/joker.jpg">
</a>
</div>
<div class="gallery__item">
<a class="card" href="./img/killBill.jpg" data-title="Kill Bill" data-description="Quentin Tarantino">
<div class="card__content">
<h2 class="card__title">Kill Bill</h2>
<p class="card__description">Quentin Tarantino</p>
</div>
<div class="card__hover"></div>
<img class="card__image" src="./img/killBill.jpg">
</a>
</div>
<div class="gallery__item">
<a class="card" href="./img/lalaLand.jpg" data-title="La-la Land" data-description="Damien Chazelle">
<div class="card__content">
<h2 class="card__title">La-la Land</h2>
<p class="card__description">Damien Chazelle</p>
</div>
<div class="card__hover"></div>
<img class="card__image" src="./img/lalaLand.jpg">
</a>
</div>
<div class="gallery__item">
<a class="card" href="./img/matrix.jpg" data-title="Matrix" data-description="Lana and Lilly Wachowski">
<div class="card__content">
<h2 class="card__title">Matrix</h2>
<p class="card__description">Lana and Lilly Wachowski</p>
</div>
<div class="card__hover"></div>
<img class="card__image" src="./img/matrix.jpg">
</a>
</div>
<div class="gallery__item">
<a class="card" href="./img/midsommar.jpg" data-title="Midsommar" data-description="Ari Aster">
<div class="card__content">
<h2 class="card__title">Midsommar</h2>
<p class="card__description">Ari Aster</p>
</div>
<div class="card__hover"></div>
<img class="card__image" src="./img/midsommar.jpg">
</a>
</div>
<div class="gallery__item">
<a class="card" href="./img/taxiDriver.jpg" data-title="Taxi Driver" data-description="Martin Scorsese">
<div class="card__content">
<h2 class="card__title">Taxi Driver</h2>
<p class="card__description">Martin Scorsese</p>
</div>
<div class="card__hover"></div>
<img class="card__image" src="./img/taxiDriver.jpg">
</a>
</div>
</div>
</main>
<script src="./index.js"></script>
</body>
</html>