-
Notifications
You must be signed in to change notification settings - Fork 1
/
landing.html
100 lines (92 loc) · 4.4 KB
/
landing.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testbed Oricana</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<section class="container">
<h1 class="logo-landing"><img src="images/logo.svg" alt="Indie Brigadetu fini"></h1>
<h2 class="tagline"><strong>Find</strong> devs. <strong>Connect</strong> to them. <strong>Create</strong> games.</h2>
<section class="land">
<aside class="icon"><img src="images/splash_about.png" alt="About us"></aside>
<article><h1>About us</h1>Indie Brigade stands for “<strong>INDIE BRI</strong>dge for <strong>GA</strong>me <strong>DE</strong>vs”. We want to allows game devs from all over to reach out to one another and start making games of all types and sizes. Devs can contact other members and create project pages to look for one or more dev. Keep track of devs you have messaged and projects that interest you.</article>
</section>
<section class="land">
<aside class="icon"><img src="images/splash_signup.png" alt="Sign up"></aside>
<article><h1>Sign Up</h1>Signing up is quick and easy Only your email, name and role are needed. Your full profile can be completed upon a further visit. Only logged in devs are able to search for projects or see members’ profile pages.</article>
</section>
<section class="land">
<aside class="icon"><img src="images/splash_members.png" alt="Members"></aside>
<article><h1>Members</h1>Devs are divided in 4 categories that are always labelled through their colors: design, art, code and other. These colors will help you quickly identify skills and roles that members and projects are referring to.</article>
</section>
<h3 class="tagline">Reserve your account today!</h3>
<section id="sign">
<form action="">
<div class="input-field">
<input id="email" type="email" class="validate" required>
<label for="email">e-mail address</label>
</div>
<div class="input-field">
<input id="password" type="password" class="validate" required>
<label for="password">password</label>
</div>
<div class="input-field">
<input id="cpassword" type="password" class="validate" required>
<label for="cpassword">confirm password</label>
</div>
<button class="signup" type="submit" >Sign Up</button>
</form>
<div class="formdone">
<h3>Thank you!<br />
Tell us what's your speciality for our poll</h3>
<a href"#"><img src="images/ind_sign_art.png" alt="Art"></a>
<a href"#"><img src="images/ind_sign_code.png" alt="Code"></a>
<a href"#"><img src="images/ind_sign_design.png" alt="Design"></a>
<a href"#"><img src="images/ind_sign_other.png" alt="Other"></a>
<section class="poll-icon">
<a href"#"><img src="images/ind_sign_art.svg" alt="Art"><br />Art</a>
<a href"#"><img src="images/ind_sign_code.svg" alt="Code"><br />Code</a>
<a href"#"><img src="images/ind_sign_design.svg" alt="Design"><br />Design</a>
<a href"#"><img src="images/ind_sign_other.svg" alt="Other"><br />Other</a>
</section>
</div>
</section>
</section>
<footer>
<!-- <nav class="foot">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Calendar</a></li>
<li><a href="#">Devs</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">R&D</a></li>
<li><a href="#">Schools</a></li>
</ul>
</nav> -->
<aside class="social">
<ul>
<a href="#"><li><i class="fa fa-envelope"></i></li></a>
<a href="#"><li><i class="fa fa-facebook"></i></li></a>
<a href="#"><li><i class="fa fa-twitter"></i></li></a>
</ul>
</aside>
<aside class="legal">
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms and Conditions</a></li>
<li>© Indie Brigade 2015-20XX
</li>
<!-- Simon when you'll do the conversion to Ruby make the date like <? date('Y'); ?> equivalent but more like if date('Y') => 2015 then echo 2015-date('Y') else date('Y')-->
</ul>
</aside>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/unslider.min.js"></script>
<script src="js/init.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
</body>
</html>