-
Notifications
You must be signed in to change notification settings - Fork 0
/
signup.html
124 lines (119 loc) · 6.02 KB
/
signup.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
<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="content">
<div class="uk-container uk-container-center uk-width-large-1-2 uk-width-medium-1-1">
<div class="uk-grid">
<div class="uk-width-1-1">
<p>Get unlimited access to English learning guides for all your favorite Hollywood films!</p>
<p>Sign up and get a 1-week trial for just $1</p>
<p><strong>After 1-week trial is over, membership is only US$8 a month</strong></p>
<div class="uk-grid">
<div class="uk-container uk-container-center uk-width-medium-4-5 uk-width-1-1">
<form class="uk-form sign-up-form">
<fieldset>
<div class="uk-form-row">
<input type="email" placeholder="Email-address" name="email" class="uk-width-1-1 uk-form-large" id="email">
</div>
<div class="uk-form-row">
<input type="email" placeholder="Confirm e-mail address" name="email-confirm" class="uk-width-1-1 uk-form-large" id="email-confirm">
</div>
<div class="uk-form-row">
<input type="password" placeholder="Password" name="password" class="uk-width-1-1 uk-form-large" id="password">
</div>
<a href="#" class="link-red">Forgot password?</a>
<div class="uk-form-row">
<button type="submit" class="button-red">Continue</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</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>