93 <div class="profil-wrap"> |
102 <div class="profil-wrap"> |
94 |
103 |
95 <a href="#user" class="my-profil open-popin">Mon profil</a> |
104 <a href="#user" class="my-profil open-popin">Mon profil</a> |
96 </div> |
105 </div> |
97 </div><!-- header --> |
106 </div><!-- header --> |
98 |
107 </div><!-- wrap-header --> |
99 <div class="content"> |
108 |
100 <div class="left-content"> |
109 <div class="wrapper"> |
101 <h2>Hashcuts à la Une</h2> |
110 <div class="wrap"> |
102 <div class="hashcut-video-wrap news"> |
111 <div class="content"> |
103 <div class="video-item"> |
112 <div class="left-content"> |
104 <a href="#" class="screenshot"><img src="img/visuel-home-news.jpg" alt=""/></a> |
113 <h2>Hashcuts à la Une</h2> |
105 <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3> |
114 <div class="hashcut-video-wrap news"> |
106 </div> |
115 <div class="video-item"> |
107 <div class="video-item"> |
116 <a href="#" class="screenshot"><img src="img/visuel-home-news.jpg" alt=""/></a> |
108 <a href="#" class="screenshot"><img src="img/visuel-home-news.jpg" alt=""/></a> |
117 <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3> |
109 <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3> |
118 </div> |
110 </div> |
119 <div class="video-item"> |
111 </div> |
120 <a href="#" class="screenshot"><img src="img/visuel-home-news.jpg" alt=""/></a> |
112 |
121 <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3> |
113 <h2>Derniers Hashcuts</h2> |
122 </div> |
114 <div class="hashcut-video-wrap last"> |
123 </div> |
115 <div class="video-item"> |
124 |
116 <a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a> |
125 <h2>Derniers Hashcuts</h2> |
117 <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3> |
126 <div class="hashcut-video-wrap last"> |
118 </div> |
127 <div class="video-item"> |
119 <div class="video-item"> |
128 <a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a> |
120 <a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a> |
129 <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3> |
121 <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3> |
130 </div> |
122 </div> |
131 <div class="video-item"> |
123 <div class="video-item"> |
132 <a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a> |
124 <a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a> |
133 <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3> |
125 <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3> |
134 </div> |
126 </div> |
135 <div class="video-item"> |
127 <div class="video-item"> |
136 <a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a> |
128 <a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a> |
137 <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3> |
129 <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3> |
138 </div> |
130 </div> |
139 <div class="video-item"> |
131 <div class="video-item"> |
140 <a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a> |
132 <a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a> |
141 <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3> |
133 <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3> |
142 </div> |
134 </div> |
143 <div class="video-item"> |
135 <div class="video-item"> |
144 <a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a> |
136 <a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a> |
145 <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3> |
137 <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3> |
146 </div> |
138 </div> |
147 <div class="video-item"> |
139 <div class="video-item"> |
148 <a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a> |
140 <a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a> |
149 <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3> |
141 <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3> |
150 </div> |
142 </div> |
151 <div class="video-item"> |
143 <div class="video-item"> |
152 <a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a> |
144 <a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a> |
153 <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3> |
145 <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3> |
154 </div> |
146 </div> |
155 <div class="video-item"> |
147 </div> |
156 <a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a> |
148 |
157 <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3> |
149 <div class="pagination"> |
158 </div> |
150 <a href="#" class="active">1</a> |
159 </div> |
151 <a href="#">2</a> |
160 |
152 <a href="#">3</a> |
161 <div class="pagination"> |
153 <a href="#">4</a> |
162 <a href="#" class="active">1</a> |
154 <a href="#">5</a> |
163 <a href="#">2</a> |
155 <a href="#">6</a> |
164 <a href="#">3</a> |
156 <a href="#">Suivant</a> |
165 <a href="#">4</a> |
157 </div> |
166 <a href="#">5</a> |
158 |
167 <a href="#">6</a> |
159 </div><!-- left-content --> |
168 <a href="#">Suivant</a> |
160 <div class="right-content"> |
169 </div> |
161 <div class="definition"> |
170 |
162 <h2>Hashcuts ?</h2> |
171 </div><!-- left-content --> |
163 <p>Un <strong>Hashcut</strong> est à la fois une <a href="#">Hypervidéo</a> (ensemble de vidéos cliquable, permettant une navigation entre vidéos) et un <a href="#">Mashup</a> (mélange de médias, de l’anglais mash, «purée»).</p> |
172 <div class="right-content"> |
164 <p>Un <strong>Hashcut</strong> est un assemblage de citations de vidéos, mises bout à bout, sans altération des médias d’origine, et permet à chacun de proposer un nouveau regard, une porte d’entrée éditorialisée sur ces médias.</p> |
173 <div class="definition"> |
165 </div> |
174 <h2>Hashcuts ?</h2> |
166 <div class="how-to"> |
175 <p>Un <strong>Hashcut</strong> est à la fois une <a href="#">Hypervidéo</a> (ensemble de vidéos cliquable, permettant une navigation entre vidéos) et un <a href="#">Mashup</a> (mélange de médias, de l’anglais mash, «purée»).</p> |
167 <h2>Comment faire ?</h2> |
176 <p>Un <strong>Hashcut</strong> est un assemblage de citations de vidéos, mises bout à bout, sans altération des médias d’origine, et permet à chacun de proposer un nouveau regard, une porte d’entrée éditorialisée sur ces médias.</p> |
168 <ul> |
177 </div> |
169 <li class="inscription"> |
178 <div class="how-to"> |
170 <h3>1. S’inscrire</h3> |
179 <h2>Comment faire ?</h2> |
171 <p>Commencez par créer votre espace personnel sur cette plateforme !</p> |
180 <ul> |
172 </li> |
181 <li class="inscription"> |
173 <li class="next-step"></li> |
182 <h3>1. S’inscrire</h3> |
174 <li class="creation"> |
183 <p>Commencez par créer votre espace personnel sur cette plateforme !</p> |
175 <h3>2. Créer un hashcut</h3> |
184 </li> |
176 <p>Choisissez des médias, segmentez les, assemblez les segments et rajoutez des commentaires sur le Hashcut.</p> |
185 <li class="next-step"></li> |
177 </li> |
186 <li class="creation"> |
178 <li class="next-step"></li> |
187 <h3>2. Créer un hashcut</h3> |
179 <li class="publier"> |
188 <p>Choisissez des médias, segmentez les, assemblez les segments et rajoutez des commentaires sur le Hashcut.</p> |
180 <h3>3. Publier et partager</h3> |
189 </li> |
181 <p>Une fois le hashcut terminé, publiez-le sur cette plateforme etpartagez votre création sur les réseaux sociaux</p> |
190 <li class="next-step"></li> |
182 </li> |
191 <li class="publier"> |
183 </ul> |
192 <h3>3. Publier et partager</h3> |
184 </div> |
193 <p>Une fois le hashcut terminé, publiez-le sur cette plateforme etpartagez votre création sur les réseaux sociaux</p> |
185 |
194 </li> |
186 </div><!-- left-content --> |
195 </ul> |
187 </div><!-- content --> |
196 </div> |
188 |
197 |
189 <div class="footer clearfix"> |
198 </div><!-- left-content --> |
190 <ul class="links-left"> |
199 </div><!-- content --> |
191 <li><a href="#">Mentions légales</a></li> |
200 |
192 <li><a href="#">Contacts</a></li> |
201 <div class="footer clearfix"> |
193 </ul> |
202 <ul class="links-left"> |
194 <ul class="links-right"> |
203 <li><a href="#">Mentions légales</a></li> |
195 <li><a title="IRI" href="http://www.iri.centrepompidou.fr/"> <img src="img/logo-iri.png" alt="iri" /></a></li> |
204 <li><a href="#">Contacts</a></li> |
196 <li><a title="cinecast" href="http://cinecast.fr/"><img src="img/logo-cinecast.png" alt="cinecast" /></a></li> |
205 </ul> |
197 <li>© 2012</li> |
206 <ul class="links-right"> |
198 </ul> |
207 <li><a title="IRI" href="http://www.iri.centrepompidou.fr/"> <img src="img/logo-iri.png" alt="iri" /></a></li> |
199 </div><!-- footer --> |
208 <li><a title="cinecast" href="http://cinecast.fr/"><img src="img/logo-cinecast.png" alt="cinecast" /></a></li> |
200 </div><!-- wrap --> |
209 <li>© 2012</li> |
|
210 </ul> |
|
211 </div><!-- footer --> |
|
212 </div><!-- wrap --> |
|
213 </div><!-- wrapper --> |
201 <!-- JavaScript --> |
214 <!-- JavaScript --> |
202 <script type="text/javascript" src="lib/jquery.min.js"></script> |
215 <script type="text/javascript" src="lib/jquery.min.js"></script> |
203 <script type="text/javascript" src="lib/jquery-ui.min.js"></script> |
216 <script type="text/javascript" src="lib/jquery-ui.min.js"></script> |
204 <script type="text/javascript" src="js/common.js"></script> |
217 <script type="text/javascript" src="js/common.js"></script> |
205 </body> |
218 </body> |