-
Notifications
You must be signed in to change notification settings - Fork 0
/
library.html
139 lines (136 loc) · 7.79 KB
/
library.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fluent with Film</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/slidenav.css">
<link rel="stylesheet" href="css/datepicker.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery.js"></script>
<script src="js/base.js"></script>
<script src="js/dropdown.js"></script>
<script src="js/modal.js"></script>
<script src="js/tab.js"></script>
<script src="js/switcher.js"></script>
<script src="js/slideset.js"></script>
<script src="js/datepicker.js"></script>
</head>
<body>
<header>
<div class="uk-container uk-container-center">
<div class="uk-grid">
<div id="logo" class="uk-width-1-2">
<a href="#"><img src="img/logo.svg" alt="Fluent with Film"></a>
</div>
<div class="uk-width-1-2">
<button id="sign-up" class="main-button uk-float-right">Sign Up</button>
</div>
</div>
</div>
</header>
<div id="library-container">
<div class="uk-container uk-container-center">
<div class="category-row">
<p><a href="#" class="category-button">Action</a></p>
<ul class="uk-grid uk-grid-width-large-1-6 uk-grid-width-medium-1-4 uk-grid-width-1-2">
<li><a href="#my-film" data-uk-modal><img src="img/film.jpg" alt="Film"></a></li>
<li><a href="#my-film" data-uk-modal><img src="img/film.jpg" alt="Film"></a></li>
<li><a href="#my-film" data-uk-modal><img src="img/film.jpg" alt="Film"></a></li>
<li><a href="#my-film" data-uk-modal><img src="img/film.jpg" alt="Film"></a></li>
<li><a href="#my-film" data-uk-modal><img src="img/film.jpg" alt="Film"></a></li>
<li><a href="#my-film" data-uk-modal><img src="img/film.jpg" alt="Film"></a></li>
</ul>
</div>
<div class="category-row">
<p><a href="#" class="category-button">Camedy</a></p>
<ul class="uk-grid uk-grid-width-large-1-6 uk-grid-width-medium-1-4 uk-grid-width-1-2">
<li><a href="#my-film" data-uk-modal><img src="img/film.jpg" alt="Film"></a></li>
<li><a href="#my-film" data-uk-modal><img src="img/film.jpg" alt="Film"></a></li>
<li><a href="#my-film" data-uk-modal><img src="img/film.jpg" alt="Film"></a></li>
<li><a href="#my-film" data-uk-modal><img src="img/film.jpg" alt="Film"></a></li>
<li><a href="#my-film" data-uk-modal><img src="img/film.jpg" alt="Film"></a></li>
<li><a href="#my-film" data-uk-modal><img src="img/film.jpg" alt="Film"></a></li>
</ul>
</div>
<div class="category-row">
<p><a href="#" class="category-button">Drama</a></p>
<ul class="uk-grid uk-grid-width-large-1-6 uk-grid-width-medium-1-4 uk-grid-width-1-2">
<li><a href="#my-film" data-uk-modal><img src="img/film.jpg" alt="Film"></a></li>
<li><a href="#my-film" data-uk-modal><img src="img/film.jpg" alt="Film"></a></li>
<li><a href="#my-film" data-uk-modal><img src="img/film.jpg" alt="Film"></a></li>
<li><a href="#my-film" data-uk-modal><img src="img/film.jpg" alt="Film"></a></li>
<li><a href="#my-film" data-uk-modal><img src="img/film.jpg" alt="Film"></a></li>
<li><a href="#my-film" data-uk-modal><img src="img/film.jpg" alt="Film"></a></li>
</ul>
</div>
<div class="category-row">
<p><a href="#" class="category-button">Children's</a></p>
<ul class="uk-grid uk-grid-width-large-1-6 uk-grid-width-medium-1-4 uk-grid-width-1-2">
<li><a href="#my-film" data-uk-modal><img src="img/film.jpg" alt="Film"></a></li>
<li><a href="#my-film" data-uk-modal><img src="img/film.jpg" alt="Film"></a></li>
<li><a href="#my-film" data-uk-modal><img src="img/film.jpg" alt="Film"></a></li>
<li><a href="#my-film" data-uk-modal><img src="img/film.jpg" alt="Film"></a></li>
<li><a href="#my-film" data-uk-modal><img src="img/film.jpg" alt="Film"></a></li>
<li><a href="#my-film" data-uk-modal><img src="img/film.jpg" alt="Film"></a></li>
</ul>
</div>
</div>
</div>
<div id="my-film" class="uk-modal film">
<div class="uk-modal-dialog">
<a class="uk-modal-close uk-close"></a>
<div class="uk-grid uk-grid-medium">
<div class="uk-width-small-1-3 uk-width-1-1">
<a href="#" class="film-img"><img src="img/film.jpg" alt="Film"></a>
</div>
<div class="uk-width-small-2-3 uk-width-1-1">
<h2><a href="#">Movie Title</a></h2>
<p class="summary">1h 45min | Comedy, Crime, Mystery | 27 Jun 2017</p>
<div class="film-details">
<p><strong>English Difficulty</strong>: Moderate</p>
<p><strong>English Genres</strong>: Architecto id</p>
<p><strong>Starring</strong>: John Doe,Jane Doe</p>
</div>
<div class="film-description uk-margin-top">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam odio, voluptate odit est obcaecati unde voluptatem adipisci ullam nam natus.Nulla dolor non illo architecto id est, odit eius. Dignissimos odio a ex culpa inventore quia tenetur, quibusdam quaerat alias?Dicta architecto aut nesciunt doloribus eaque commodi, eius provident sunt ut veritatis. Neque, facere. Incidunt magni itaque officia delectus exercitationem.</p>
</div>
<a href="#" class="main-button">Continue</a>
<a href="#" class="add-to-list"><i class="uk-icon-plus-square"></i> Add to My Film List</a>
<a href="#" class="already-watched"><i class="uk-icon-plus-square"></i> Already Watched</a>
</div>
</div>
</div>
</div>
<footer>
<div class="uk-container uk-container-center">
<div class="uk-grid">
<div class="uk-width-medium-1-4 uk-width-large-1-6">
<nav>
<ul>
<li><a href="#" class="active">FAQ</a></li>
<li><a href="#">Terms of use</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</div>
<div class="uk-width-medium-3-4 uk-width-large-5-6">
<div class="social-links uk-float-right">
<a href="#" target="_blank"><i class="uk-icon-facebook-square"></i></a>
<a href="#" target="_blank"><i class="uk-icon-twitter-square"></i></a>
<a href="#" target="_blank"><i class="uk-icon-instagram"></i></a>
</div>
</div>
</div>
</div>
</footer>
<div id="copy">
<div class="text-center">© 2017, Fluent With Films</div>
</div>
</body>
</html>