forked from ZEDIUM-Off/NO-ADDICTION
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
201 lines (188 loc) · 9.24 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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE HTML>
<!DOCTYPE HTML>
<!--
Hyperspace by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>NO ADDICTIONS.</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<link rel="icon" type="image/png" href="images/LOGO_noBackground.png" />
</head>
<body class="is-preload">
<!-- Sidebar -->
<section id="sidebar">
<div class="inner">
<nav>
<ul>
<li><a href="#intro">Welcome.</a></li>
<li><a href="#one">Who we are.</a></li>
<li><a href="#two">What we do.</a></li>
<li><a href="#three">Start today !</a></li>
</ul>
</nav>
</div>
</section>
<!-- Wrapper -->
<div id="wrapper">
<!-- Intro -->
<section id="intro" class="wrapper style1 fullscreen fade-up">
<div class="inner">
<img src="images/LOGO_noBackground.png" />
<!-- <h1>NO ADDICTION</h1> -->
<p>Talk to us. <a href="#three">Start today !</a></p>
<ul class="actions">
<li><a href="#two" class="button scrolly">Learn more</a></li>
</ul>
</div>
</section>
<!-- One -->
<section id="one" class="wrapper style2 spotlights">
<section>
<a href="#" class="image"><img src="images/Matisse.jpg" alt="" data-position="top center" /></a>
<div class="content">
<div class="inner">
<h2>Matisse CHENAVAS</h2>
<p>Former addict : Alcohol, cannabis, nicotine. Today young entrepreneur active in computer development. Convinced by a healthy life, he understands you and wants to help!</p>
<ul class="actions">
<!-- <li><a href="generic.html" class="button">Learn more</a></li> -->
</ul>
</div>
</div>
</section>
<section>
<a href="#" class="image"><img src="images/Erwann.jpg" alt="" data-position="25% 25%" /></a>
<div class="content">
<div class="inner">
<h2>Erwann LAGOUCHE</h2>
<p>Video games addict since young. Talking to people helped him move on. He decided to help other in need, and to live of what he loves.</p>
<ul class="actions">
<!-- <li><a href="generic.html" class="button">Learn more</a></li> -->
</ul>
</div>
</div>
</section>
</section>
<!-- Two -->
<section id="two" class="wrapper style3 fade-up">
<div class="inner">
<h2>What we do.</h2>
<p>We are a duo of two computer science students, Erwann and Matisse. We want to help people affected by addiction to get out of it. Let's help us !</p>
<div class="features">
<section>
<span class="icon solid major fa-comments"></span>
<h3>Talk about it !</h3>
<p>We organize anonymous meetings to talk freely about our addictions and how each of us experiences them.</p>
</section>
<section>
<span class="icon solid major fa-info"></span>
<h3>Find out more !</h3>
<p>We are convinced that there is a lack of information about addiction and we want everyone to really understand what an addiction is, both addict and non-addicts.</p>
</section>
<section>
<span class="icon solid major fa-suitcase"></span>
<h3>Professional reinsertion !</h3>
<p>We propose to help the most affected people return to an active life by helping them find work.</p>
</section>
<section>
<span class="icon solid major fa-calendar"></span>
<h3>Take part !</h3>
<p>We regularly organize events to meet former addicts and discuss with them.</p>
</section>
</div>
<ul class="actions">
<li><a href="informations.html" class="button">Learn more about addictions</a></li>
</ul>
</div>
</section>
<!-- Three -->
<section id="three" class="wrapper style1 fade-up">
<div class="inner">
<h2>Start today !</h2>
<p>Participating is the best way to get out of addiction or to help do so. Get started!</p>
<div class="split style1">
<section>
<form method="post" action="#">
<div class="col-4 col-12-small">
<input type="radio" id="demo-priority-low" name="demo-priority" checked>
<label for="demo-priority-low">I am an addict.</label>
</div>
<div class="col-4 col-12-small">
<input type="radio" id="demo-priority-normal" name="demo-priority">
<label for="demo-priority-normal">I want to help an addict.</label>
</div>
<div class="fields">
<div class="field half">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</div>
<div class="field half">
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message" rows="5"></textarea>
</div>
</div>
<ul class="actions">
<li><a href="" class="button submit">Seek help</a></li>
</ul>
</form>
</section>
<section>
<ul class="contact">
<li>
<h3>Address</h3>
<span>25 rue Feuillat<br />
69003, Lyon<br />
France</span>
</li>
<li>
<h3>Email</h3>
<a href="#">contact@noaddiction.fr</a>
</li>
<li>
<h3>Phone</h3>
<span>(+33) 4 68 28 41 92</span>
</li>
<li>
<h3>Social</h3>
<ul class="icons">
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a href="https://github.com/ZEDIUM-Off/NO-ADDICTION" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
<li><a href="https://www.instagram.com/ig.noaddiction/?hl=fr" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
<!-- <li><a href="#" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li> -->
</ul>
</li>
</ul>
</section>
</div>
</div>
</section>
</div>
<!-- Footer -->
<footer id="footer" class="wrapper style1-alt">
<div class="inner">
<ul class="menu">
<li>© RetroChadsDev'ingClub. All rights reserved.</li>
<li>Credit - Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>