Enviar arquivos para "/"
This commit is contained in:
commit
5cb069576d
|
|
@ -0,0 +1,384 @@
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<!--
|
||||||
|
Spectral by HTML5 UP
|
||||||
|
html5up.net | @ajlkn
|
||||||
|
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||||
|
-->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>CineClube</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>
|
||||||
|
</head>
|
||||||
|
<body class="is-preload">
|
||||||
|
|
||||||
|
<!-- Page Wrapper -->
|
||||||
|
<div id="page-wrapper">
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<header id="header">
|
||||||
|
<h1><a href="index.html">CineClube</a></h1>
|
||||||
|
<nav id="nav">
|
||||||
|
<ul>
|
||||||
|
<li class="special">
|
||||||
|
<a href="#menu" class="menuToggle"><span>Menu</span></a>
|
||||||
|
<div id="menu">
|
||||||
|
<ul>
|
||||||
|
<li><a href="index.html">Home</a></li>
|
||||||
|
<li><a href="descricao.html">Descrição</a></li>
|
||||||
|
<li><a href="artigos.html">Artigos</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Main -->
|
||||||
|
<article id="main">
|
||||||
|
<header>
|
||||||
|
<h2>Elements</h2>
|
||||||
|
<p>Aliquam ut ex ut interdum donec amet imperdiet eleifend</p>
|
||||||
|
</header>
|
||||||
|
<section class="wrapper style5">
|
||||||
|
<div class="inner">
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h4>Text</h4>
|
||||||
|
<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
|
||||||
|
This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
|
||||||
|
This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>
|
||||||
|
<hr />
|
||||||
|
<header>
|
||||||
|
<h4>Heading with a Subtitle</h4>
|
||||||
|
<p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
|
||||||
|
</header>
|
||||||
|
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
|
||||||
|
<header>
|
||||||
|
<h5>Heading with a Subtitle</h5>
|
||||||
|
<p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
|
||||||
|
</header>
|
||||||
|
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
|
||||||
|
<hr />
|
||||||
|
<h2>Heading Level 2</h2>
|
||||||
|
<h3>Heading Level 3</h3>
|
||||||
|
<h4>Heading Level 4</h4>
|
||||||
|
<h5>Heading Level 5</h5>
|
||||||
|
<h6>Heading Level 6</h6>
|
||||||
|
<hr />
|
||||||
|
<h5>Blockquote</h5>
|
||||||
|
<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
|
||||||
|
<h5>Preformatted</h5>
|
||||||
|
<pre><code>i = 0;
|
||||||
|
|
||||||
|
while (!deck.isInOrder()) {
|
||||||
|
print 'Iteration ' + i;
|
||||||
|
deck.shuffle();
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
|
||||||
|
print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h4>Lists</h4>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6 col-12-medium">
|
||||||
|
<h5>Unordered</h5>
|
||||||
|
<ul>
|
||||||
|
<li>Dolor pulvinar etiam.</li>
|
||||||
|
<li>Sagittis adipiscing.</li>
|
||||||
|
<li>Felis enim feugiat.</li>
|
||||||
|
</ul>
|
||||||
|
<h5>Alternate</h5>
|
||||||
|
<ul class="alt">
|
||||||
|
<li>Dolor pulvinar etiam.</li>
|
||||||
|
<li>Sagittis adipiscing.</li>
|
||||||
|
<li>Felis enim feugiat.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-12-medium">
|
||||||
|
<h5>Ordered</h5>
|
||||||
|
<ol>
|
||||||
|
<li>Dolor pulvinar etiam.</li>
|
||||||
|
<li>Etiam vel felis viverra.</li>
|
||||||
|
<li>Felis enim feugiat.</li>
|
||||||
|
<li>Dolor pulvinar etiam.</li>
|
||||||
|
<li>Etiam vel felis lorem.</li>
|
||||||
|
<li>Felis enim et feugiat.</li>
|
||||||
|
</ol>
|
||||||
|
<h5>Icons</h5>
|
||||||
|
<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="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
|
||||||
|
<li><a href="#" class="icon brands fa-github"><span class="label">Github</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h5>Actions</h5>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6 col-12-medium">
|
||||||
|
<ul class="actions">
|
||||||
|
<li><a href="#" class="button primary">Default</a></li>
|
||||||
|
<li><a href="#" class="button">Default</a></li>
|
||||||
|
</ul>
|
||||||
|
<ul class="actions small">
|
||||||
|
<li><a href="#" class="button primary small">Small</a></li>
|
||||||
|
<li><a href="#" class="button small">Small</a></li>
|
||||||
|
</ul>
|
||||||
|
<ul class="actions stacked">
|
||||||
|
<li><a href="#" class="button primary">Default</a></li>
|
||||||
|
<li><a href="#" class="button">Default</a></li>
|
||||||
|
</ul>
|
||||||
|
<ul class="actions stacked">
|
||||||
|
<li><a href="#" class="button primary small">Small</a></li>
|
||||||
|
<li><a href="#" class="button small">Small</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-12-medium">
|
||||||
|
<ul class="actions stacked">
|
||||||
|
<li><a href="#" class="button primary fit">Default</a></li>
|
||||||
|
<li><a href="#" class="button fit">Default</a></li>
|
||||||
|
</ul>
|
||||||
|
<ul class="actions stacked">
|
||||||
|
<li><a href="#" class="button primary small fit">Small</a></li>
|
||||||
|
<li><a href="#" class="button small fit">Small</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h4>Table</h4>
|
||||||
|
<h5>Default</h5>
|
||||||
|
<div class="table-wrapper">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Description</th>
|
||||||
|
<th>Price</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Item One</td>
|
||||||
|
<td>Ante turpis integer aliquet porttitor.</td>
|
||||||
|
<td>29.99</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Item Two</td>
|
||||||
|
<td>Vis ac commodo adipiscing arcu aliquet.</td>
|
||||||
|
<td>19.99</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Item Three</td>
|
||||||
|
<td> Morbi faucibus arcu accumsan lorem.</td>
|
||||||
|
<td>29.99</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Item Four</td>
|
||||||
|
<td>Vitae integer tempus condimentum.</td>
|
||||||
|
<td>19.99</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Item Five</td>
|
||||||
|
<td>Ante turpis integer aliquet porttitor.</td>
|
||||||
|
<td>29.99</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2"></td>
|
||||||
|
<td>100.00</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Alternate</h5>
|
||||||
|
<div class="table-wrapper">
|
||||||
|
<table class="alt">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Description</th>
|
||||||
|
<th>Price</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Item One</td>
|
||||||
|
<td>Ante turpis integer aliquet porttitor.</td>
|
||||||
|
<td>29.99</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Item Two</td>
|
||||||
|
<td>Vis ac commodo adipiscing arcu aliquet.</td>
|
||||||
|
<td>19.99</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Item Three</td>
|
||||||
|
<td> Morbi faucibus arcu accumsan lorem.</td>
|
||||||
|
<td>29.99</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Item Four</td>
|
||||||
|
<td>Vitae integer tempus condimentum.</td>
|
||||||
|
<td>19.99</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Item Five</td>
|
||||||
|
<td>Ante turpis integer aliquet porttitor.</td>
|
||||||
|
<td>29.99</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2"></td>
|
||||||
|
<td>100.00</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h4>Buttons</h4>
|
||||||
|
<ul class="actions">
|
||||||
|
<li><a href="#" class="button primary">Primary</a></li>
|
||||||
|
<li><a href="#" class="button">Default</a></li>
|
||||||
|
</ul>
|
||||||
|
<ul class="actions">
|
||||||
|
<li><a href="#" class="button large">Large</a></li>
|
||||||
|
<li><a href="#" class="button">Default</a></li>
|
||||||
|
<li><a href="#" class="button small">Small</a></li>
|
||||||
|
</ul>
|
||||||
|
<ul class="actions fit">
|
||||||
|
<li><a href="#" class="button fit">Fit</a></li>
|
||||||
|
<li><a href="#" class="button primary fit">Fit</a></li>
|
||||||
|
<li><a href="#" class="button fit">Fit</a></li>
|
||||||
|
</ul>
|
||||||
|
<ul class="actions fit small">
|
||||||
|
<li><a href="#" class="button primary fit small">Fit + Small</a></li>
|
||||||
|
<li><a href="#" class="button fit small">Fit + Small</a></li>
|
||||||
|
<li><a href="#" class="button primary fit small">Fit + Small</a></li>
|
||||||
|
</ul>
|
||||||
|
<ul class="actions">
|
||||||
|
<li><a href="#" class="button primary icon solid fa-download">Icon</a></li>
|
||||||
|
<li><a href="#" class="button icon solid fa-download">Icon</a></li>
|
||||||
|
</ul>
|
||||||
|
<ul class="actions">
|
||||||
|
<li><span class="button primary disabled">Disabled</span></li>
|
||||||
|
<li><span class="button disabled">Disabled</span></li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h4>Form</h4>
|
||||||
|
<form method="post" action="#">
|
||||||
|
<div class="row gtr-uniform">
|
||||||
|
<div class="col-6 col-12-xsmall">
|
||||||
|
<input type="text" name="demo-name" id="demo-name" value="" placeholder="Name" />
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-12-xsmall">
|
||||||
|
<input type="email" name="demo-email" id="demo-email" value="" placeholder="Email" />
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<select name="demo-category" id="demo-category">
|
||||||
|
<option value="">- Category -</option>
|
||||||
|
<option value="1">Manufacturing</option>
|
||||||
|
<option value="1">Shipping</option>
|
||||||
|
<option value="1">Administration</option>
|
||||||
|
<option value="1">Human Resources</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-4 col-12-small">
|
||||||
|
<input type="radio" id="demo-priority-low" name="demo-priority" checked>
|
||||||
|
<label for="demo-priority-low">Low</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-4 col-12-small">
|
||||||
|
<input type="radio" id="demo-priority-normal" name="demo-priority">
|
||||||
|
<label for="demo-priority-normal">Normal</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-4 col-12-small">
|
||||||
|
<input type="radio" id="demo-priority-high" name="demo-priority">
|
||||||
|
<label for="demo-priority-high">High</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-12-small">
|
||||||
|
<input type="checkbox" id="demo-copy" name="demo-copy">
|
||||||
|
<label for="demo-copy">Email me a copy</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-12-small">
|
||||||
|
<input type="checkbox" id="demo-human" name="demo-human" checked>
|
||||||
|
<label for="demo-human">Not a robot</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<ul class="actions">
|
||||||
|
<li><input type="submit" value="Send Message" class="primary" /></li>
|
||||||
|
<li><input type="reset" value="Reset" /></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h4>Image</h4>
|
||||||
|
<h5>Fit</h5>
|
||||||
|
<div class="box alt">
|
||||||
|
<div class="row gtr-50 gtr-uniform">
|
||||||
|
<div class="col-12"><span class="image fit"><img src="images/banner.jpg" alt="" /></span></div>
|
||||||
|
<div class="col-4"><span class="image fit"><img src="images/pic01.jpg" alt="" /></span></div>
|
||||||
|
<div class="col-4"><span class="image fit"><img src="images/pic02.jpg" alt="" /></span></div>
|
||||||
|
<div class="col-4"><span class="image fit"><img src="images/pic03.jpg" alt="" /></span></div>
|
||||||
|
<div class="col-4"><span class="image fit"><img src="images/pic03.jpg" alt="" /></span></div>
|
||||||
|
<div class="col-4"><span class="image fit"><img src="images/pic02.jpg" alt="" /></span></div>
|
||||||
|
<div class="col-4"><span class="image fit"><img src="images/pic01.jpg" alt="" /></span></div>
|
||||||
|
<div class="col-4"><span class="image fit"><img src="images/pic02.jpg" alt="" /></span></div>
|
||||||
|
<div class="col-4"><span class="image fit"><img src="images/pic01.jpg" alt="" /></span></div>
|
||||||
|
<div class="col-4"><span class="image fit"><img src="images/pic03.jpg" alt="" /></span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h5>Left & Right</h5>
|
||||||
|
<p><span class="image left"><img src="images/pic04.jpg" alt="" /></span>Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien. Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien.</p>
|
||||||
|
<p><span class="image right"><img src="images/pic05.jpg" alt="" /></span>Vestibulum ultrices risus velit, sit amet blandit massa auctor sit amet. Sed eu lectus sem. Phasellus in odio at ipsum porttitor mollis id vel diam. Praesent sit amet posuere risus, eu faucibus lectus. Vivamus ex ligula, tempus pulvinar ipsum in, auctor porta quam. Proin nec dui cursus, posuere dui eget interdum. Fusce lectus magna, sagittis at facilisis vitae, pellentesque at etiam. Quisque posuere leo quis sem commodo, vel scelerisque nisi scelerisque. Suspendisse id quam vel tortor tincidunt suscipit. Nullam auctor orci eu dolor consectetur, interdum ullamcorper ante tincidunt. Mauris felis nec felis elementum varius. Nam sapien ante, varius in pulvinar vitae, rhoncus id massa. Donec varius ex in mauris ornare, eget euismod urna egestas. Etiam lacinia tempor ipsum, sodales porttitor justo. Aliquam dolor quam, semper in tortor eu, volutpat efficitur quam. Fusce nec fermentum nisl. Aenean erat diam, tempus aliquet erat. Etiam iaculis nulla ipsum, et pharetra libero rhoncus ut. Phasellus rutrum cursus velit, eget condimentum nunc blandit vel. In at pulvinar lectus. Morbi diam ante, vulputate et imperdiet eget, fermentum non dolor. Ut eleifend sagittis tincidunt. Sed viverra commodo mi, ac rhoncus justo. Duis neque ligula, elementum ut enim vel, posuere finibus justo. Vivamus facilisis maximus nibh quis pulvinar. Quisque hendrerit in ipsum id tellus facilisis fermentum. Proin mauris dui.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer id="footer">
|
||||||
|
<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="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
|
||||||
|
<li><a href="#" class="icon brands fa-dribbble"><span class="label">Dribbble</span></a></li>
|
||||||
|
<li><a href="#" class="icon solid fa-envelope"><span class="label">Email</span></a></li>
|
||||||
|
</ul>
|
||||||
|
<ul class="copyright">
|
||||||
|
<li>© Untitled</li><li>Design: <a href=#>Karen Muniz</a></li>
|
||||||
|
</ul>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="pt-BR">
|
||||||
|
<head>
|
||||||
|
<title>CineClube</title>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||||
|
<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>
|
||||||
|
</head>
|
||||||
|
<body class="is-preload">
|
||||||
|
<header id="header">
|
||||||
|
<h1><a href="index.html">CineClube</a></h1>
|
||||||
|
<nav id="nav">
|
||||||
|
<ul>
|
||||||
|
<li class="special">
|
||||||
|
<a href="#menu" class="menuToggle"><span>Menu</span></a>
|
||||||
|
<div id="menu">
|
||||||
|
<ul>
|
||||||
|
<li><a href="index.html">Home</a></li>
|
||||||
|
<li><a href="descricao.html">Descrição</a></li>
|
||||||
|
<li><a href="artigos.html">Artigos</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<article id="main">
|
||||||
|
<header>
|
||||||
|
<h2>CineClube</h2>
|
||||||
|
<p>O projeto transforma a escola em um espaço de experimentação artística, usando o cinema como ferramenta de reflexão, educação e criação coletiva.</p>
|
||||||
|
</header>
|
||||||
|
</article>
|
||||||
|
<div class="container">
|
||||||
|
<div id="curtas-container" class="curtas-grid">
|
||||||
|
<!-- Os curtas serão injetados aqui dinamicamente -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="assets/js/jquery.min.js"></script>
|
||||||
|
<script src="assets/js/curtas.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>
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<!--
|
||||||
|
Spectral by HTML5 UP
|
||||||
|
html5up.net | @ajlkn
|
||||||
|
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||||
|
-->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>CineClube</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>
|
||||||
|
</head>
|
||||||
|
<body class="is-preload">
|
||||||
|
|
||||||
|
<!-- Page Wrapper -->
|
||||||
|
<div id="page-wrapper">
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<header id="header">
|
||||||
|
<h1><a href="index.html">CineClube</a></h1>
|
||||||
|
<nav id="nav">
|
||||||
|
<ul>
|
||||||
|
<li class="special">
|
||||||
|
<a href="#menu" class="menuToggle"><span>Menu</span></a>
|
||||||
|
<div id="menu">
|
||||||
|
<ul>
|
||||||
|
<li><a href="index.html">Home</a></li>
|
||||||
|
<li><a href="descricao.html">Descrição</a></li>
|
||||||
|
<li><a href="artigos.html">Artigos</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Main -->
|
||||||
|
<article id="main">
|
||||||
|
<header>
|
||||||
|
<h2>CineClube</h2>
|
||||||
|
<p>O projeto transforma a escola em um espaço de experimentação artística, usando o cinema como ferramenta de reflexão, educação e criação coletiva.</p>
|
||||||
|
</header>
|
||||||
|
<section class="wrapper style5">
|
||||||
|
<div class="inner">
|
||||||
|
|
||||||
|
<h3>Cinema como experiência e criação</h3>
|
||||||
|
<p>A Oficina de Cinema da E.M. Prof.ª Jacira Medeiros de Sousa Lima, idealizada pela professora Marina Mayumi e apoiada pelo bolsista Pietro, transforma a escola em um espaço de experimentação artística. O cinema é visto não apenas como uma forma de entretenimento, mas como uma ferramenta de criação, reflexão e transformação da realidade. Em vez de apenas interpretar, os participantes exploram novas formas narrativas, descobrindo o mundo e inventando novos olhares sobre ele.</p>
|
||||||
|
|
||||||
|
<p>Mais do que ensinar técnicas cinematográficas, as oficinas incentivam a liberdade criativa, permitindo que estudantes e professores experimentem com imagens e sons. A ideia é que cada produção seja um reflexo do ambiente e da vivência escolar, valorizando a expressão individual e coletiva através do audiovisual.</p>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
|
||||||
|
<h4>Objetivos e metodologias</h4>
|
||||||
|
<p>O projeto tem como objetivo capacitar docentes para o uso do cinema na educação, incentivando produções audiovisuais experimentais e a criação de cineclubes. A iniciativa busca fortalecer laços entre escola, universidade e comunidade, promovendo a circulação das produções em plataformas digitais e espaços culturais. As oficinas são baseadas na exibição de filmes nacionais e vídeoartes como estímulo para novas criações, incentivando a produção espontânea de imagens e sons a partir do cotidiano escolar. </p>
|
||||||
|
|
||||||
|
<p>Além disso, o projeto fomenta parcerias pedagógicas e artísticas entre a escola e o Instituto Federal do Rio Grande do Norte – Campus Parnamirim, ampliando o alcance das produções e conectando diferentes espaços educativos. A proposta é que os participantes desenvolvam um olhar crítico e experimental sobre o cinema, utilizando-o como ferramenta de expressão e diálogo com a realidade que os cerca.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer id="footer">
|
||||||
|
<ul class="copyright">
|
||||||
|
<li>©</li><li>Design: <a href="#">Karen Muniz</a></li>
|
||||||
|
</ul>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
|
@ -0,0 +1,190 @@
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<!--
|
||||||
|
Spectral by HTML5 UP
|
||||||
|
html5up.net | @ajlkn
|
||||||
|
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||||
|
-->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>CineClube</title>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||||
|
<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>
|
||||||
|
</head>
|
||||||
|
<body class="landing is-preload">
|
||||||
|
|
||||||
|
<!-- Page Wrapper -->
|
||||||
|
<div id="page-wrapper">
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<header id="header" class="alt">
|
||||||
|
<h1><a href="index.html">CineClube</a></h1>
|
||||||
|
<nav id="nav">
|
||||||
|
<ul>
|
||||||
|
<li class="special">
|
||||||
|
<a href="#menu" class="menuToggle"><span>Menu</span></a>
|
||||||
|
<div id="menu">
|
||||||
|
<ul>
|
||||||
|
<li><a href="index.html">Home</a></li>
|
||||||
|
<li><a href="descricao.html">Descrição</a></li>
|
||||||
|
<li><a href="artigos.html">Artigos</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Banner -->
|
||||||
|
<section id="banner">
|
||||||
|
<div class="inner">
|
||||||
|
<h2>CineClube</h2>
|
||||||
|
<p>Projeto de Audiovisual<br />
|
||||||
|
Desenvolvidos por alunos<br />
|
||||||
|
da <a href="http://html5up.net">E.M. Prof.ª Jacira Medeiros de Sousa Lima</a>.</p>
|
||||||
|
<ul class="actions special">
|
||||||
|
<li><a href="artigos.html" class="button primary">Saiba Mais</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<a href="#one" class="more scrolly"></a>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- One -->
|
||||||
|
<section id="one" class="wrapper style1 special">
|
||||||
|
<div class="inner">
|
||||||
|
<header class="major">
|
||||||
|
<h2>Nossas Oficinas 🎬<br /></h2>
|
||||||
|
<p>
|
||||||
|
Explore os curtas produzidos em nossas oficinas práticas de cinema! Cada vídeo é o resultado de uma imersão criativa, onde participantes experimentaram técnicas de roteiro, filmagem e edição. Navegue por essa coleção de produções e descubra diferentes narrativas, estilos e olhares que surgiram ao longo das oficinas.</p>
|
||||||
|
</header>
|
||||||
|
<ul class="icons major">
|
||||||
|
<li> <i class="fa-solid fa-film major major style1"></i></li>
|
||||||
|
<li><span class="fa-solid fa-graduation-cap major style2"><span class="label"></span></span></li>
|
||||||
|
<li><span class="fa-solid fa-people-group major style3"><span class="label"></span></span></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Two -->
|
||||||
|
<section id="two" class="wrapper alt style2">
|
||||||
|
<section class="spotlight" id="">
|
||||||
|
<figure class="effect-ming tm-video-item">
|
||||||
|
<img src="images/pic01.jpg" alt="Image" class="img-fluid">
|
||||||
|
</figure>
|
||||||
|
<div class="content">
|
||||||
|
<h2>Oficina III<br />
|
||||||
|
Momento Lumiérie</h2>
|
||||||
|
<p>Na oficina "Dispositivo Minuto Lumière", os participantes exploraram a escola e seus arredores com um novo olhar, buscando transformar cenas do cotidiano em cinema. Cada um escolheu um enquadramento, definindo qual recorte do mundo queria destacar, e posicionou a câmera para captar imagens de forma criativa. As filmagens, limitadas a um minuto, incentivaram a observação atenta e a experimentação com ângulos e composições. A atividade proporcionou uma experiência prática e reflexiva sobre a construção da imagem no cinema, reforçando a ideia de que tudo ao redor pode se tornar narrativa audiovisual.</p>
|
||||||
|
<ul class="actions small">
|
||||||
|
<li><a href="curtas.html" class="button primary small" data-oficina="oficina_III" >Ver curtas</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="spotlight" id="oficina_IV">
|
||||||
|
<figure class="effect-ming tm-video-item">
|
||||||
|
<img src="images/pic01.jpg" alt="Image" class="img-fluid">
|
||||||
|
</figure>
|
||||||
|
<div class="content">
|
||||||
|
<h2>Oficina IV<br />
|
||||||
|
Planos de Cinema</h2>
|
||||||
|
<p>A oficina de planos de cinema ensina os participantes a capturar trechos de filmes sem interrupções da câmera, conhecidos como planos. Esses planos, que podem ser abertos, médios ou fechados, são essenciais para construir cenas e narrativas. Planos abertos estabelecem o ambiente, planos médios focam nas emoções e ações dos personagens, e planos fechados destacam detalhes específicos. Durante a oficina, os participantes praticam a filmagem de diferentes planos em sequência, aprendendo a criar uma montagem básica sem a necessidade de edição complexa. Essa prática ajuda a compreender a importância de cada tipo de plano na construção de uma história visual.</p>
|
||||||
|
<ul class="actions small">
|
||||||
|
<li><a href="curtas.html" class="button primary small" data-oficina="oficina_IV">Ver curtas</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<section class="spotlight" id="oficina_V>
|
||||||
|
<figure class="effect-ming tm-video-item">
|
||||||
|
<img src="images/pic01.jpg" alt="Image" class="img-fluid">
|
||||||
|
</figure>
|
||||||
|
<div class="content">
|
||||||
|
<h2>Oficina V<br />
|
||||||
|
Roteiro e cortes de cinema</h2>
|
||||||
|
<p>A oficina de cortes no cinema ensina a transição entre planos, mantendo a continuidade ou criando efeitos intencionais. Cortes podem ser diretos ou usar efeitos como fade-out e fusões. Os participantes criam roteiros com 8 a 15 planos e filmam cenas curtas, usando pausas na câmera para simular cortes, explorando a construção narrativa de forma prática.</p>
|
||||||
|
<ul class="actions small">
|
||||||
|
<li><a href="curtas.html" class="button primary small" data-oficina="oficina_V">Ver curtas</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="spotlight" id="oficina_VI">
|
||||||
|
<figure class="effect-ming tm-video-item">
|
||||||
|
<img src="images/pic01.jpg" alt="Image" class="img-fluid">
|
||||||
|
</figure>
|
||||||
|
<div class="content">
|
||||||
|
<h2>Oficina VI<br />
|
||||||
|
Dispositivo "Daqui onde estou eu vejo..."</h2>
|
||||||
|
<p>A oficina "Daqui onde estou eu vejo..." propõe um exercício de criação cinematográfica que explora memórias afetivas no ambiente escolar. Em duplas, os participantes alternam entre operar a câmera e compartilhar memórias enquanto estão sentados em uma cadeira em locais significativos. A partir dessas experiências, os grupos elaboram narrativas e filmam cenas inspiradas em técnicas cinematográficas, como planos detalhados, cortes secos e variações de ângulos, para criar um curta-metragem coletivo que conecta memórias pessoais ao espaço escolar.</p>
|
||||||
|
<ul class="actions small">
|
||||||
|
<li><a href="curtas.html" class="button primary small" data-oficina="oficina_VI">Ver curtas</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<section class="spotlight" id="oficina_VII">
|
||||||
|
<figure class="effect-ming tm-video-item">
|
||||||
|
<a href="https://www.youtube.com/@CineArteIFPAR/videos">
|
||||||
|
<img src="images/pic01.jpg" alt="Image" class="img-fluid">
|
||||||
|
</a>
|
||||||
|
</figure>
|
||||||
|
<div class="content">
|
||||||
|
<h2>Oficina VII<br />
|
||||||
|
Oficina dos olhares</h2>
|
||||||
|
<p>A "Oficina dos Olhares" envolveu estudantes do 9º ano na criação de vídeos de até um minuto, utilizando dispositivos como "Olhar Halloween", "Olhar ________(uma emoção)" e "Olhar natural". Os participantes experimentaram com máscaras e filtros artesanais nas lentes de celulares para produzir seus vídeos. A oficina foi conduzida pelo professor de inglês Márcio, com a colaboração da coordenadora do projeto de extensão Marina, que orientou os grupos durante o processo criativo. O relatório inclui fotos da produção e links para os vídeos finais no YouTube.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="spotlight" id="oficina_VII">
|
||||||
|
<figure class="effect-ming tm-video-item">
|
||||||
|
<img src="images/pic01.jpg" alt="Image" class="img-fluid">
|
||||||
|
</figure>
|
||||||
|
<div class="content">
|
||||||
|
<h2>Ciranda<br />
|
||||||
|
Roda de saberes</h2>
|
||||||
|
<p>A "Roda de Saberes" foi uma oficina especial realizada em colaboração com a professora Aliny Pranto da UFRN. Utilizando o dispositivo “daqui onde estou eu vejo…”, foram filmados depoimentos de docentes, gestores, familiares e ex-funcionários sobre suas memórias da E.M. Professora Jacira Medeiros. As filmagens foram feitas em parceria com o coletivo audiovisual Casa de Circe de Rosa dos Ventos, de Parnamirim.</p>
|
||||||
|
<ul class="actions small">
|
||||||
|
<li><a href="curtas.html" class="button primary small" data-oficina="oficina_VII">Ver curtas</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer id="footer">
|
||||||
|
<ul class="copyright">
|
||||||
|
<li>© </li><li>Design: <a href="#">Karen Muniz</a></li>
|
||||||
|
</ul>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const buttons = document.querySelectorAll('.button.primary.small');
|
||||||
|
|
||||||
|
buttons.forEach(button => {
|
||||||
|
button.addEventListener('click', function(event) {
|
||||||
|
event.preventDefault(); // Impede o comportamento padrão do link
|
||||||
|
const oficina = this.getAttribute('data-oficina'); // Pega o valor do atributo data-oficina
|
||||||
|
window.location.href = `curtas.html?oficina=${oficina}`; // Redireciona com o parâmetro
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue