21 changed files with 944 additions and 0 deletions
@ -0,0 +1,18 @@
|
||||
<body class="homepage is-preload"> |
||||
<div id="page-wrapper"> |
||||
|
||||
<INCLURE{fond=header/#ENV{type-page},env}> |
||||
<INCLURE{fond=content/#ENV{type-page},env}> |
||||
<INCLURE{fond=footer/#ENV{type-page},env}> |
||||
|
||||
|
||||
</div> |
||||
|
||||
<!-- Scripts --> |
||||
<script src="assets/js/jquery.dropotron.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> |
||||
@ -0,0 +1,273 @@
|
||||
<!-- Main --> |
||||
<section id="main" class="wrapper style2"> |
||||
<div class="title">Left Sidebar</div> |
||||
<div class="container"> |
||||
<div class="row gtr-150"> |
||||
<div class="col-4 col-12-medium"> |
||||
|
||||
<!-- Sidebar --> |
||||
<div id="sidebar"> |
||||
<section class="box"> |
||||
<header> |
||||
<h2>Ipsum nullam luctus</h2> |
||||
</header> |
||||
<p>Malesuada quis eget eros. Nullam sodales cursus sapien, id consequat |
||||
leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit |
||||
amet risus elit.</p> |
||||
<a href="#" class="button style1">Learn More</a> |
||||
</section> |
||||
<section class="box"> |
||||
<header> |
||||
<h2>Vitae turpis consequat</h2> |
||||
</header> |
||||
<ul class="style2"> |
||||
<li> |
||||
<article class="box post-excerpt"> |
||||
<a href="#" class="image left"><img src="images/pic08.jpg" alt="" /></a> |
||||
<h3><a href="#">Diam odio lorem</a></h3> |
||||
<p>Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. Pellentesque at urna eget tellus sed etiam.</p> |
||||
</article> |
||||
</li> |
||||
<li> |
||||
<article class="box post-excerpt"> |
||||
<a href="#" class="image left"><img src="images/pic09.jpg" alt="" /></a> |
||||
<h3><a href="#">Sed duis consequat</a></h3> |
||||
<p>Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. Pellentesque at urna eget tellus sed etiam.</p> |
||||
</article> |
||||
</li> |
||||
<li> |
||||
<article class="box post-excerpt"> |
||||
<a href="#" class="image left"><img src="images/pic10.jpg" alt="" /></a> |
||||
<h3><a href="#">Tellus nulla volutpat</a></h3> |
||||
<p>Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. Pellentesque at urna eget tellus sed etiam.</p> |
||||
</article> |
||||
</li> |
||||
</ul> |
||||
<a href="#" class="button style1">Archives</a> |
||||
</section> |
||||
<section class="box"> |
||||
<header> |
||||
<h2>Magna diam vehicula</h2> |
||||
</header> |
||||
<ul class="style3"> |
||||
<li><a href="#">Nulla iaculis egestas varius</a></li> |
||||
<li><a href="#">Augue massa feugiat quam pretium</a></li> |
||||
<li><a href="#">Orci sem vel libero cras nisi odio</a></li> |
||||
<li><a href="#">Sed hendrerit massa nam mattis</a></li> |
||||
<li><a href="#">Turpis vel leo accumsan aliquet</a></li> |
||||
<li><a href="#">Dapibus mi fermentum fusce non</a></li> |
||||
<li><a href="#">Arcu laoreet sapien tempus</a></li> |
||||
<li><a href="#">Nulla iaculis egestas varius</a></li> |
||||
<li><a href="#">Augue massa feugiat quam pretium</a></li> |
||||
<li><a href="#">Orci sem vel libero cras nisi odio</a></li> |
||||
<li><a href="#">Sed hendrerit massa nam mattis</a></li> |
||||
</ul> |
||||
</section> |
||||
</div> |
||||
|
||||
</div> |
||||
<div class="col-8 col-12-medium imp-medium"> |
||||
|
||||
<!-- Content --> |
||||
<div id="content"> |
||||
<article class="box post"> |
||||
<header class="style1"> |
||||
<h2>Lorem ipsum dolor sit amet magna egestas morbi bibendum sed malesuada</h2> |
||||
<p>Tempus feugiat veroeros sed nullam dolore</p> |
||||
</header> |
||||
<a href="#" class="image featured"> |
||||
<img src="images/pic01.jpg" alt="" /> |
||||
</a> |
||||
<p>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. |
||||
odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum |
||||
facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam |
||||
tempus euismod. Vestibulum ante ipsum primis in faucibus.</p> |
||||
<p>Phasellus nisl nisl, varius id porttitor sed, pellentesque ac orci. Pellentesque |
||||
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi |
||||
bibendum justo sed mauris vehicula malesuada aliquam elit imperdiet. Aliquam eu nibh |
||||
lorem, eget gravida mi. Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. |
||||
Pellentesque at urna eget tellus lobortis ultrices sed non erat. Donec eget erat non |
||||
magna volutpat malesuada quis eget eros. Nullam sodales cursus sapien, id consequat |
||||
leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit |
||||
amet risus elit.</p> |
||||
<p>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra |
||||
ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel. Praesent nec orci |
||||
eget quam rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus |
||||
eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis |
||||
tincidunt felis sagittis eget. Donec elementum ligula dignissim sem pulvinar non semper |
||||
odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum |
||||
facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam |
||||
tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices |
||||
posuere cubilia.</p> |
||||
<p>Phasellus nisl nisl, varius id porttitor sed, pellentesque ac orci. Pellentesque |
||||
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi |
||||
bibendum justo sed mauris vehicula malesuada aliquam elit imperdiet. Aliquam eu nibh |
||||
lorem, eget gravida mi. Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. |
||||
Pellentesque at urna eget tellus lobortis ultrices sed non erat. Donec eget erat non |
||||
magna volutpat malesuada quis eget eros. Nullam sodales cursus sapien, id consequat |
||||
leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit |
||||
amet risus elit.</p> |
||||
</article> |
||||
<div class="row gtr-150"> |
||||
<div class="col-6 col-12-small"> |
||||
<section class="box"> |
||||
<header> |
||||
<h2>Magna pulvinar tempus</h2> |
||||
</header> |
||||
<a href="#" class="image featured"><img src="images/pic05.jpg" alt="" /></a> |
||||
<p>Rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus |
||||
eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis |
||||
tempus.</p> |
||||
<a href="#" class="button style1">More</a> |
||||
</section> |
||||
</div> |
||||
<div class="col-6 col-12-small"> |
||||
<section class="box"> |
||||
<header> |
||||
<h2>Magna pulvinar tempus</h2> |
||||
</header> |
||||
<a href="#" class="image featured"><img src="images/pic06.jpg" alt="" /></a> |
||||
<p>Rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus |
||||
eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis |
||||
tempus.</p> |
||||
<a href="#" class="button style1">More</a> |
||||
</section> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
<!-- Highlights --> |
||||
<section id="highlights" class="wrapper style3"> |
||||
<div class="title">The Endorsements</div> |
||||
<div class="container"> |
||||
<div class="row aln-center"> |
||||
<div class="col-4 col-12-medium"> |
||||
<section class="highlight"> |
||||
<a href="#" class="image featured"><img src="images/pic02.jpg" alt="" /></a> |
||||
<h3><a href="#">Aliquam diam consequat</a></h3> |
||||
<p>Eget mattis at, laoreet vel amet sed velit aliquam diam ante, dolor aliquet sit amet vulputate mattis amet laoreet lorem.</p> |
||||
<ul class="actions"> |
||||
<li><a href="#" class="button style1">Learn More</a></li> |
||||
</ul> |
||||
</section> |
||||
</div> |
||||
<div class="col-4 col-12-medium"> |
||||
<section class="highlight"> |
||||
<a href="#" class="image featured"><img src="images/pic03.jpg" alt="" /></a> |
||||
<h3><a href="#">Nisl adipiscing sed lorem</a></h3> |
||||
<p>Eget mattis at, laoreet vel amet sed velit aliquam diam ante, dolor aliquet sit amet vulputate mattis amet laoreet lorem.</p> |
||||
<ul class="actions"> |
||||
<li><a href="#" class="button style1">Learn More</a></li> |
||||
</ul> |
||||
</section> |
||||
</div> |
||||
<div class="col-4 col-12-medium"> |
||||
<section class="highlight"> |
||||
<a href="#" class="image featured"><img src="images/pic04.jpg" alt="" /></a> |
||||
<h3><a href="#">Mattis tempus lorem</a></h3> |
||||
<p>Eget mattis at, laoreet vel amet sed velit aliquam diam ante, dolor aliquet sit amet vulputate mattis amet laoreet lorem.</p> |
||||
<ul class="actions"> |
||||
<li><a href="#" class="button style1">Learn More</a></li> |
||||
</ul> |
||||
</section> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
<!-- Footer --> |
||||
<section id="footer" class="wrapper"> |
||||
<div class="title">The Rest Of It</div> |
||||
<div class="container"> |
||||
<header class="style1"> |
||||
<h2>Ipsum sapien elementum portitor?</h2> |
||||
<p> |
||||
Sed turpis tortor, tincidunt sed ornare in metus porttitor mollis nunc in aliquet.<br /> |
||||
Nam pharetra laoreet imperdiet volutpat etiam feugiat. |
||||
</p> |
||||
</header> |
||||
<div class="row"> |
||||
<div class="col-6 col-12-medium"> |
||||
|
||||
<!-- Contact Form --> |
||||
<section> |
||||
<form method="post" action="#"> |
||||
<div class="row gtr-50"> |
||||
<div class="col-6 col-12-small"> |
||||
<input type="text" name="name" id="contact-name" placeholder="Name" /> |
||||
</div> |
||||
<div class="col-6 col-12-small"> |
||||
<input type="text" name="email" id="contact-email" placeholder="Email" /> |
||||
</div> |
||||
<div class="col-12"> |
||||
<textarea name="message" id="contact-message" placeholder="Message" rows="4"></textarea> |
||||
</div> |
||||
<div class="col-12"> |
||||
<ul class="actions"> |
||||
<li><input type="submit" class="style1" value="Send" /></li> |
||||
<li><input type="reset" class="style2" value="Reset" /></li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</form> |
||||
</section> |
||||
|
||||
</div> |
||||
<div class="col-6 col-12-medium"> |
||||
|
||||
<!-- Contact --> |
||||
<section class="feature-list small"> |
||||
<div class="row"> |
||||
<div class="col-6 col-12-small"> |
||||
<section> |
||||
<h3 class="icon fa-home">Mailing Address</h3> |
||||
<p> |
||||
Untitled Corp<br /> |
||||
1234 Somewhere Rd<br /> |
||||
Nashville, TN 00000 |
||||
</p> |
||||
</section> |
||||
</div> |
||||
<div class="col-6 col-12-small"> |
||||
<section> |
||||
<h3 class="icon fa-comment">Social</h3> |
||||
<p> |
||||
<a href="#">@untitled-corp</a><br /> |
||||
<a href="#">linkedin.com/untitled</a><br /> |
||||
<a href="#">facebook.com/untitled</a> |
||||
</p> |
||||
</section> |
||||
</div> |
||||
<div class="col-6 col-12-small"> |
||||
<section> |
||||
<h3 class="icon fa-envelope">Email</h3> |
||||
<p> |
||||
<a href="#">info@untitled.tld</a> |
||||
</p> |
||||
</section> |
||||
</div> |
||||
<div class="col-6 col-12-small"> |
||||
<section> |
||||
<h3 class="icon fa-phone">Phone</h3> |
||||
<p> |
||||
(000) 555-0000 |
||||
</p> |
||||
</section> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
</div> |
||||
</div> |
||||
<div id="copyright"> |
||||
<ul> |
||||
<li>© Untitled.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
@ -0,0 +1,5 @@
|
||||
<composition> |
||||
<nom>Article avec sidebar à gauche</nom> |
||||
<description>Affiche un menu à gauche</description> |
||||
<icon>images/objet-liste-contenus.png</icon> |
||||
</composition> |
||||
@ -0,0 +1,273 @@
|
||||
<!-- Main --> |
||||
<section id="main" class="wrapper style2"> |
||||
<div class="title">Left Sidebar</div> |
||||
<div class="container"> |
||||
<div class="row gtr-150"> |
||||
<div class="col-4 col-12-medium"> |
||||
|
||||
<!-- Sidebar --> |
||||
<div id="sidebar"> |
||||
<section class="box"> |
||||
<header> |
||||
<h2>Ipsum nullam luctus</h2> |
||||
</header> |
||||
<p>Malesuada quis eget eros. Nullam sodales cursus sapien, id consequat |
||||
leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit |
||||
amet risus elit.</p> |
||||
<a href="#" class="button style1">Learn More</a> |
||||
</section> |
||||
<section class="box"> |
||||
<header> |
||||
<h2>Vitae turpis consequat</h2> |
||||
</header> |
||||
<ul class="style2"> |
||||
<li> |
||||
<article class="box post-excerpt"> |
||||
<a href="#" class="image left"><img src="images/pic08.jpg" alt="" /></a> |
||||
<h3><a href="#">Diam odio lorem</a></h3> |
||||
<p>Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. Pellentesque at urna eget tellus sed etiam.</p> |
||||
</article> |
||||
</li> |
||||
<li> |
||||
<article class="box post-excerpt"> |
||||
<a href="#" class="image left"><img src="images/pic09.jpg" alt="" /></a> |
||||
<h3><a href="#">Sed duis consequat</a></h3> |
||||
<p>Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. Pellentesque at urna eget tellus sed etiam.</p> |
||||
</article> |
||||
</li> |
||||
<li> |
||||
<article class="box post-excerpt"> |
||||
<a href="#" class="image left"><img src="images/pic10.jpg" alt="" /></a> |
||||
<h3><a href="#">Tellus nulla volutpat</a></h3> |
||||
<p>Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. Pellentesque at urna eget tellus sed etiam.</p> |
||||
</article> |
||||
</li> |
||||
</ul> |
||||
<a href="#" class="button style1">Archives</a> |
||||
</section> |
||||
<section class="box"> |
||||
<header> |
||||
<h2>Magna diam vehicula</h2> |
||||
</header> |
||||
<ul class="style3"> |
||||
<li><a href="#">Nulla iaculis egestas varius</a></li> |
||||
<li><a href="#">Augue massa feugiat quam pretium</a></li> |
||||
<li><a href="#">Orci sem vel libero cras nisi odio</a></li> |
||||
<li><a href="#">Sed hendrerit massa nam mattis</a></li> |
||||
<li><a href="#">Turpis vel leo accumsan aliquet</a></li> |
||||
<li><a href="#">Dapibus mi fermentum fusce non</a></li> |
||||
<li><a href="#">Arcu laoreet sapien tempus</a></li> |
||||
<li><a href="#">Nulla iaculis egestas varius</a></li> |
||||
<li><a href="#">Augue massa feugiat quam pretium</a></li> |
||||
<li><a href="#">Orci sem vel libero cras nisi odio</a></li> |
||||
<li><a href="#">Sed hendrerit massa nam mattis</a></li> |
||||
</ul> |
||||
</section> |
||||
</div> |
||||
|
||||
</div> |
||||
<div class="col-8 col-12-medium imp-medium"> |
||||
|
||||
<!-- Content --> |
||||
<div id="content"> |
||||
<article class="box post"> |
||||
<header class="style1"> |
||||
<h2>Lorem ipsum dolor sit amet magna egestas morbi bibendum sed malesuada</h2> |
||||
<p>Tempus feugiat veroeros sed nullam dolore</p> |
||||
</header> |
||||
<a href="#" class="image featured"> |
||||
<img src="images/pic01.jpg" alt="" /> |
||||
</a> |
||||
<p>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. |
||||
odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum |
||||
facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam |
||||
tempus euismod. Vestibulum ante ipsum primis in faucibus.</p> |
||||
<p>Phasellus nisl nisl, varius id porttitor sed, pellentesque ac orci. Pellentesque |
||||
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi |
||||
bibendum justo sed mauris vehicula malesuada aliquam elit imperdiet. Aliquam eu nibh |
||||
lorem, eget gravida mi. Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. |
||||
Pellentesque at urna eget tellus lobortis ultrices sed non erat. Donec eget erat non |
||||
magna volutpat malesuada quis eget eros. Nullam sodales cursus sapien, id consequat |
||||
leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit |
||||
amet risus elit.</p> |
||||
<p>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra |
||||
ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel. Praesent nec orci |
||||
eget quam rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus |
||||
eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis |
||||
tincidunt felis sagittis eget. Donec elementum ligula dignissim sem pulvinar non semper |
||||
odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum |
||||
facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam |
||||
tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices |
||||
posuere cubilia.</p> |
||||
<p>Phasellus nisl nisl, varius id porttitor sed, pellentesque ac orci. Pellentesque |
||||
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi |
||||
bibendum justo sed mauris vehicula malesuada aliquam elit imperdiet. Aliquam eu nibh |
||||
lorem, eget gravida mi. Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. |
||||
Pellentesque at urna eget tellus lobortis ultrices sed non erat. Donec eget erat non |
||||
magna volutpat malesuada quis eget eros. Nullam sodales cursus sapien, id consequat |
||||
leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit |
||||
amet risus elit.</p> |
||||
</article> |
||||
<div class="row gtr-150"> |
||||
<div class="col-6 col-12-small"> |
||||
<section class="box"> |
||||
<header> |
||||
<h2>Magna pulvinar tempus</h2> |
||||
</header> |
||||
<a href="#" class="image featured"><img src="images/pic05.jpg" alt="" /></a> |
||||
<p>Rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus |
||||
eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis |
||||
tempus.</p> |
||||
<a href="#" class="button style1">More</a> |
||||
</section> |
||||
</div> |
||||
<div class="col-6 col-12-small"> |
||||
<section class="box"> |
||||
<header> |
||||
<h2>Magna pulvinar tempus</h2> |
||||
</header> |
||||
<a href="#" class="image featured"><img src="images/pic06.jpg" alt="" /></a> |
||||
<p>Rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus |
||||
eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis |
||||
tempus.</p> |
||||
<a href="#" class="button style1">More</a> |
||||
</section> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
<!-- Highlights --> |
||||
<section id="highlights" class="wrapper style3"> |
||||
<div class="title">The Endorsements</div> |
||||
<div class="container"> |
||||
<div class="row aln-center"> |
||||
<div class="col-4 col-12-medium"> |
||||
<section class="highlight"> |
||||
<a href="#" class="image featured"><img src="images/pic02.jpg" alt="" /></a> |
||||
<h3><a href="#">Aliquam diam consequat</a></h3> |
||||
<p>Eget mattis at, laoreet vel amet sed velit aliquam diam ante, dolor aliquet sit amet vulputate mattis amet laoreet lorem.</p> |
||||
<ul class="actions"> |
||||
<li><a href="#" class="button style1">Learn More</a></li> |
||||
</ul> |
||||
</section> |
||||
</div> |
||||
<div class="col-4 col-12-medium"> |
||||
<section class="highlight"> |
||||
<a href="#" class="image featured"><img src="images/pic03.jpg" alt="" /></a> |
||||
<h3><a href="#">Nisl adipiscing sed lorem</a></h3> |
||||
<p>Eget mattis at, laoreet vel amet sed velit aliquam diam ante, dolor aliquet sit amet vulputate mattis amet laoreet lorem.</p> |
||||
<ul class="actions"> |
||||
<li><a href="#" class="button style1">Learn More</a></li> |
||||
</ul> |
||||
</section> |
||||
</div> |
||||
<div class="col-4 col-12-medium"> |
||||
<section class="highlight"> |
||||
<a href="#" class="image featured"><img src="images/pic04.jpg" alt="" /></a> |
||||
<h3><a href="#">Mattis tempus lorem</a></h3> |
||||
<p>Eget mattis at, laoreet vel amet sed velit aliquam diam ante, dolor aliquet sit amet vulputate mattis amet laoreet lorem.</p> |
||||
<ul class="actions"> |
||||
<li><a href="#" class="button style1">Learn More</a></li> |
||||
</ul> |
||||
</section> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
<!-- Footer --> |
||||
<section id="footer" class="wrapper"> |
||||
<div class="title">The Rest Of It</div> |
||||
<div class="container"> |
||||
<header class="style1"> |
||||
<h2>Ipsum sapien elementum portitor?</h2> |
||||
<p> |
||||
Sed turpis tortor, tincidunt sed ornare in metus porttitor mollis nunc in aliquet.<br /> |
||||
Nam pharetra laoreet imperdiet volutpat etiam feugiat. |
||||
</p> |
||||
</header> |
||||
<div class="row"> |
||||
<div class="col-6 col-12-medium"> |
||||
|
||||
<!-- Contact Form --> |
||||
<section> |
||||
<form method="post" action="#"> |
||||
<div class="row gtr-50"> |
||||
<div class="col-6 col-12-small"> |
||||
<input type="text" name="name" id="contact-name" placeholder="Name" /> |
||||
</div> |
||||
<div class="col-6 col-12-small"> |
||||
<input type="text" name="email" id="contact-email" placeholder="Email" /> |
||||
</div> |
||||
<div class="col-12"> |
||||
<textarea name="message" id="contact-message" placeholder="Message" rows="4"></textarea> |
||||
</div> |
||||
<div class="col-12"> |
||||
<ul class="actions"> |
||||
<li><input type="submit" class="style1" value="Send" /></li> |
||||
<li><input type="reset" class="style2" value="Reset" /></li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</form> |
||||
</section> |
||||
|
||||
</div> |
||||
<div class="col-6 col-12-medium"> |
||||
|
||||
<!-- Contact --> |
||||
<section class="feature-list small"> |
||||
<div class="row"> |
||||
<div class="col-6 col-12-small"> |
||||
<section> |
||||
<h3 class="icon fa-home">Mailing Address</h3> |
||||
<p> |
||||
Untitled Corp<br /> |
||||
1234 Somewhere Rd<br /> |
||||
Nashville, TN 00000 |
||||
</p> |
||||
</section> |
||||
</div> |
||||
<div class="col-6 col-12-small"> |
||||
<section> |
||||
<h3 class="icon fa-comment">Social</h3> |
||||
<p> |
||||
<a href="#">@untitled-corp</a><br /> |
||||
<a href="#">linkedin.com/untitled</a><br /> |
||||
<a href="#">facebook.com/untitled</a> |
||||
</p> |
||||
</section> |
||||
</div> |
||||
<div class="col-6 col-12-small"> |
||||
<section> |
||||
<h3 class="icon fa-envelope">Email</h3> |
||||
<p> |
||||
<a href="#">info@untitled.tld</a> |
||||
</p> |
||||
</section> |
||||
</div> |
||||
<div class="col-6 col-12-small"> |
||||
<section> |
||||
<h3 class="icon fa-phone">Phone</h3> |
||||
<p> |
||||
(000) 555-0000 |
||||
</p> |
||||
</section> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
</div> |
||||
</div> |
||||
<div id="copyright"> |
||||
<ul> |
||||
<li>© Untitled.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
@ -0,0 +1,5 @@
|
||||
<composition> |
||||
<nom>Article avec sidebar à droite</nom> |
||||
<description>Affiche un menu à droite</description> |
||||
<icon>images/objet-liste-contenus.png</icon> |
||||
</composition> |
||||
@ -0,0 +1,90 @@
|
||||
|
||||
<!-- Main --> |
||||
<div id="main" class="wrapper style2"> |
||||
<div class="title">No Sidebar</div> |
||||
<div class="container"> |
||||
|
||||
<!-- Content --> |
||||
<div id="content"> |
||||
<article class="box post"> |
||||
<header class="style1"> |
||||
<h2>Lorem ipsum dolor sit amet magna egestas<br class="mobile-hide" /> |
||||
morbi bibendum sed malesuada</h2> |
||||
<p>Tempus feugiat veroeros sed nullam dolore</p> |
||||
</header> |
||||
<a href="#" class="image featured"> |
||||
<img src="images/pic01.jpg" alt="" /> |
||||
</a> |
||||
<p>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. |
||||
odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum |
||||
facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam |
||||
tempus euismod. Vestibulum ante ipsum primis in faucibus.</p> |
||||
<p>Phasellus nisl nisl, varius id porttitor sed, pellentesque ac orci. Pellentesque |
||||
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi |
||||
bibendum justo sed mauris vehicula malesuada aliquam elit imperdiet. Aliquam eu nibh |
||||
lorem, eget gravida mi. Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. |
||||
Pellentesque at urna eget tellus lobortis ultrices sed non erat. Donec eget erat non |
||||
magna volutpat malesuada quis eget eros. Nullam sodales cursus sapien, id consequat |
||||
leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit |
||||
amet risus elit.</p> |
||||
<p>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra |
||||
ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel. Praesent nec orci |
||||
eget quam rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus |
||||
eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis |
||||
tincidunt felis sagittis eget. Donec elementum ligula dignissim sem pulvinar non semper |
||||
odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum |
||||
facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam |
||||
tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices |
||||
posuere cubilia.</p> |
||||
<p>Phasellus nisl nisl, varius id porttitor sed, pellentesque ac orci. Pellentesque |
||||
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi |
||||
bibendum justo sed mauris vehicula malesuada aliquam elit imperdiet. Aliquam eu nibh |
||||
lorem, eget gravida mi. Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. |
||||
Pellentesque at urna eget tellus lobortis ultrices sed non erat. Donec eget erat non |
||||
magna volutpat malesuada quis eget eros. Nullam sodales cursus sapien, id consequat |
||||
leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit |
||||
amet risus elit.</p> |
||||
</article> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
<!-- Highlights --> |
||||
<section id="highlights" class="wrapper style3"> |
||||
<div class="title">The Endorsements</div> |
||||
<div class="container"> |
||||
<div class="row aln-center"> |
||||
<div class="col-4 col-12-medium"> |
||||
<section class="highlight"> |
||||
<a href="#" class="image featured"><img src="images/pic02.jpg" alt="" /></a> |
||||
<h3><a href="#">Aliquam diam consequat</a></h3> |
||||
<p>Eget mattis at, laoreet vel amet sed velit aliquam diam ante, dolor aliquet sit amet vulputate mattis amet laoreet lorem.</p> |
||||
<ul class="actions"> |
||||
<li><a href="#" class="button style1">Learn More</a></li> |
||||
</ul> |
||||
</section> |
||||
</div> |
||||
<div class="col-4 col-12-medium"> |
||||
<section class="highlight"> |
||||
<a href="#" class="image featured"><img src="images/pic03.jpg" alt="" /></a> |
||||
<h3><a href="#">Nisl adipiscing sed lorem</a></h3> |
||||
<p>Eget mattis at, laoreet vel amet sed velit aliquam diam ante, dolor aliquet sit amet vulputate mattis amet laoreet lorem.</p> |
||||
<ul class="actions"> |
||||
<li><a href="#" class="button style1">Learn More</a></li> |
||||
</ul> |
||||
</section> |
||||
</div> |
||||
<div class="col-4 col-12-medium"> |
||||
<section class="highlight"> |
||||
<a href="#" class="image featured"><img src="images/pic04.jpg" alt="" /></a> |
||||
<h3><a href="#">Mattis tempus lorem</a></h3> |
||||
<p>Eget mattis at, laoreet vel amet sed velit aliquam diam ante, dolor aliquet sit amet vulputate mattis amet laoreet lorem.</p> |
||||
<ul class="actions"> |
||||
<li><a href="#" class="button style1">Learn More</a></li> |
||||
</ul> |
||||
</section> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
@ -0,0 +1,105 @@
|
||||
<INCLURE{fond=inclure/intro} /> |
||||
|
||||
<!-- Main --> |
||||
<section id="main" class="wrapper style2"> |
||||
<div class="title">The Details</div> |
||||
<div class="container"> |
||||
|
||||
<!-- Image --> |
||||
<a href="#" class="image featured"> |
||||
<img src="images/pic01.jpg" alt="" /> |
||||
</a> |
||||
|
||||
<!-- Features --> |
||||
<section id="features"> |
||||
<header class="style1"> |
||||
<h2>Dolor consequat feugiat amet veroeros</h2> |
||||
<p>Feugiat dolor nullam orci pretium phasellus justo</p> |
||||
</header> |
||||
<div class="feature-list"> |
||||
<div class="row"> |
||||
<div class="col-6 col-12-medium"> |
||||
<section> |
||||
<h3 class="icon fa-comment">Mattis velit diam vulputate</h3> |
||||
<p>Eget mattis at, laoreet vel et velit aliquam diam ante, aliquet sit amet vulputate et magna feugiat laoreet vel velit lorem.</p> |
||||
</section> |
||||
</div> |
||||
<div class="col-6 col-12-medium"> |
||||
<section> |
||||
<h3 class="icon fa-refresh">Lorem ipsum dolor sit veroeros</h3> |
||||
<p>Eget mattis at, laoreet vel et velit aliquam diam ante, aliquet sit amet vulputate et magna feugiat laoreet vel velit lorem.</p> |
||||
</section> |
||||
</div> |
||||
<div class="col-6 col-12-medium"> |
||||
<section> |
||||
<h3 class="icon fa-picture-o">Pretium phasellus justo lorem</h3> |
||||
<p>Eget mattis at, laoreet vel et velit aliquam diam ante, aliquet sit amet vulputate et magna feugiat laoreet vel velit lorem.</p> |
||||
</section> |
||||
</div> |
||||
<div class="col-6 col-12-medium"> |
||||
<section> |
||||
<h3 class="icon fa-cog">Tempus sed pretium orci</h3> |
||||
<p>Eget mattis at, laoreet vel et velit aliquam diam ante, aliquet sit amet vulputate et magna feugiat laoreet vel velit lorem.</p> |
||||
</section> |
||||
</div> |
||||
<div class="col-6 col-12-medium"> |
||||
<section> |
||||
<h3 class="icon fa-wrench">Aliquam consequat et feugiat</h3> |
||||
<p>Eget mattis at, laoreet vel et velit aliquam diam ante, aliquet sit amet vulputate et magna feugiat laoreet vel velit lorem.</p> |
||||
</section> |
||||
</div> |
||||
<div class="col-6 col-12-medium"> |
||||
<section> |
||||
<h3 class="icon fa-check">Dolore laoreet aliquam mattis</h3> |
||||
<p>Eget mattis at, laoreet vel et velit aliquam diam ante, aliquet sit amet vulputate et magna feugiat laoreet vel velit lorem.</p> |
||||
</section> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<ul class="actions special"> |
||||
<li><a href="#" class="button style1 large">Get Started</a></li> |
||||
<li><a href="#" class="button style2 large">More Info</a></li> |
||||
</ul> |
||||
</section> |
||||
|
||||
</div> |
||||
</section> |
||||
|
||||
<!-- Highlights --> |
||||
<section id="highlights" class="wrapper style3"> |
||||
<div class="title">The Endorsements</div> |
||||
<div class="container"> |
||||
<div class="row aln-center"> |
||||
<div class="col-4 col-12-medium"> |
||||
<section class="highlight"> |
||||
<a href="#" class="image featured"><img src="images/pic02.jpg" alt="" /></a> |
||||
<h3><a href="#">Aliquam diam consequat</a></h3> |
||||
<p>Eget mattis at, laoreet vel amet sed velit aliquam diam ante, dolor aliquet sit amet vulputate mattis amet laoreet lorem.</p> |
||||
<ul class="actions"> |
||||
<li><a href="#" class="button style1">Learn More</a></li> |
||||
</ul> |
||||
</section> |
||||
</div> |
||||
<div class="col-4 col-12-medium"> |
||||
<section class="highlight"> |
||||
<a href="#" class="image featured"><img src="images/pic03.jpg" alt="" /></a> |
||||
<h3><a href="#">Nisl adipiscing sed lorem</a></h3> |
||||
<p>Eget mattis at, laoreet vel amet sed velit aliquam diam ante, dolor aliquet sit amet vulputate mattis amet laoreet lorem.</p> |
||||
<ul class="actions"> |
||||
<li><a href="#" class="button style1">Learn More</a></li> |
||||
</ul> |
||||
</section> |
||||
</div> |
||||
<div class="col-4 col-12-medium"> |
||||
<section class="highlight"> |
||||
<a href="#" class="image featured"><img src="images/pic04.jpg" alt="" /></a> |
||||
<h3><a href="#">Mattis tempus lorem</a></h3> |
||||
<p>Eget mattis at, laoreet vel amet sed velit aliquam diam ante, dolor aliquet sit amet vulputate mattis amet laoreet lorem.</p> |
||||
<ul class="actions"> |
||||
<li><a href="#" class="button style1">Learn More</a></li> |
||||
</ul> |
||||
</section> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 490 B After Width: | Height: | Size: 490 B |
@ -0,0 +1,91 @@
|
||||
<!-- Footer --> |
||||
<section id="footer" class="wrapper"> |
||||
<div class="title">The Rest Of It</div> |
||||
<div class="container"> |
||||
<header class="style1"> |
||||
<h2>Ipsum sapien elementum portitor?</h2> |
||||
<p> |
||||
Sed turpis tortor, tincidunt sed ornare in metus porttitor mollis nunc in aliquet.<br /> |
||||
Nam pharetra laoreet imperdiet volutpat etiam feugiat. |
||||
</p> |
||||
</header> |
||||
<div class="row"> |
||||
<div class="col-6 col-12-medium"> |
||||
|
||||
<!-- Contact Form --> |
||||
<section> |
||||
<form method="post" action="#"> |
||||
<div class="row gtr-50"> |
||||
<div class="col-6 col-12-small"> |
||||
<input type="text" name="name" id="contact-name" placeholder="Name" /> |
||||
</div> |
||||
<div class="col-6 col-12-small"> |
||||
<input type="text" name="email" id="contact-email" placeholder="Email" /> |
||||
</div> |
||||
<div class="col-12"> |
||||
<textarea name="message" id="contact-message" placeholder="Message" rows="4"></textarea> |
||||
</div> |
||||
<div class="col-12"> |
||||
<ul class="actions"> |
||||
<li><input type="submit" class="style1" value="Send" /></li> |
||||
<li><input type="reset" class="style2" value="Reset" /></li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</form> |
||||
</section> |
||||
|
||||
</div> |
||||
<div class="col-6 col-12-medium"> |
||||
|
||||
<!-- Contact --> |
||||
<section class="feature-list small"> |
||||
<div class="row"> |
||||
<div class="col-6 col-12-small"> |
||||
<section> |
||||
<h3 class="icon fa-home">Mailing Address</h3> |
||||
<p> |
||||
Untitled Corp<br /> |
||||
1234 Somewhere Rd<br /> |
||||
Nashville, TN 00000 |
||||
</p> |
||||
</section> |
||||
</div> |
||||
<div class="col-6 col-12-small"> |
||||
<section> |
||||
<h3 class="icon fa-comment">Social</h3> |
||||
<p> |
||||
<a href="#">@untitled-corp</a><br /> |
||||
<a href="#">linkedin.com/untitled</a><br /> |
||||
<a href="#">facebook.com/untitled</a> |
||||
</p> |
||||
</section> |
||||
</div> |
||||
<div class="col-6 col-12-small"> |
||||
<section> |
||||
<h3 class="icon fa-envelope">Email</h3> |
||||
<p> |
||||
<a href="#">info@untitled.tld</a> |
||||
</p> |
||||
</section> |
||||
</div> |
||||
<div class="col-6 col-12-small"> |
||||
<section> |
||||
<h3 class="icon fa-phone">Phone</h3> |
||||
<p> |
||||
(000) 555-0000 |
||||
</p> |
||||
</section> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
</div> |
||||
</div> |
||||
<div id="copyright"> |
||||
<ul> |
||||
<li>© Untitled.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
@ -0,0 +1,39 @@
|
||||
<!-- Header --> |
||||
<section id="header" class="wrapper"> |
||||
|
||||
<!-- Logo --> |
||||
<div id="logo"> |
||||
<h1><a href="#URL_SITE_SPIP">#NOM_SITE_SPIP</a></h1> |
||||
[<p>(#SLOGAN_SITE_SPIP)</p>] |
||||
</div> |
||||
|
||||
<!-- Nav --> |
||||
<nav id="nav"> |
||||
<ul> |
||||
<li class="current"><a href="index.html">Home</a></li> |
||||
<li> |
||||
<a href="#">Dropdown</a> |
||||
<ul> |
||||
<li><a href="#">Lorem ipsum</a></li> |
||||
<li><a href="#">Magna veroeros</a></li> |
||||
<li><a href="#">Etiam nisl</a></li> |
||||
<li> |
||||
<a href="#">Sed consequat</a> |
||||
<ul> |
||||
<li><a href="#">Lorem dolor</a></li> |
||||
<li><a href="#">Amet consequat</a></li> |
||||
<li><a href="#">Magna phasellus</a></li> |
||||
<li><a href="#">Etiam nisl</a></li> |
||||
<li><a href="#">Sed feugiat</a></li> |
||||
</ul> |
||||
</li> |
||||
<li><a href="#">Nisl tempus</a></li> |
||||
</ul> |
||||
</li> |
||||
<li><a href="left-sidebar.html">Left Sidebar</a></li> |
||||
<li><a href="right-sidebar.html">Right Sidebar</a></li> |
||||
<li><a href="no-sidebar.html">No Sidebar</a></li> |
||||
</ul> |
||||
</nav> |
||||
|
||||
</section> |
||||
@ -0,0 +1,3 @@
|
||||
<?php |
||||
|
||||
$GLOBALS['z_blocs'] = array('content', 'head', 'head_js', 'header', 'footer'); |
||||
@ -0,0 +1,25 @@
|
||||
[(#REM) |
||||
Head standard de toutes les pages ; |
||||
les elements specifiques (title, description) figurent dans chaque squelette |
||||
|
||||
] |
||||
<meta http-equiv="Content-Type" content="text/html; charset=#CHARSET" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
||||
|
||||
[(#REM) Lien vers le flux RSS du site ] |
||||
[<link rel="alternate" type="application/rss+xml" title="<:syndiquer_site:>" href="(#URL_PAGE{backend})" />] |
||||
|
||||
#INSERT_HEAD_CSS |
||||
|
||||
#INSERT_HEAD |
||||
|
||||
|
||||
[(#REM) Fierement fabrique avec SPIP ] |
||||
<meta name="generator" content="SPIP[ (#SPIP_VERSION)]" /> |
||||
|
||||
[(#REM) Favicon ] |
||||
[<link rel="icon" type="image/x-icon" href="(#CHEMIN{favicon.ico})" /> |
||||
[<link rel="shortcut icon" type="image/x-icon" href="(#CHEMIN{favicon.ico})" />]] |
||||
|
||||
[(#REM) meta robots ] |
||||
[<meta name="robots" content="(#ENV{robots})" />] |
||||
@ -0,0 +1,17 @@
|
||||
<!-- Intro --> |
||||
<section id="intro" class="wrapper style1"> |
||||
<div class="title">inclure/intro</div> |
||||
<div class="container"> |
||||
<p class="style1">So in case you were wondering what this is all about ...</p> |
||||
<p class="style2"> |
||||
Escape Velocity is a free responsive<br class="mobile-hide" /> |
||||
site template by <a href="http://html5up.net" class="nobr">HTML5 UP</a> |
||||
</p> |
||||
<p class="style3">It's <strong>responsive</strong>, built on <strong>HTML5</strong> and <strong>CSS3</strong>, and released for |
||||
free under the <a href="http://html5up.net/license">Creative Commons Attribution 3.0 license</a>, so use it for any of |
||||
your personal or commercial projects – just be sure to credit us!</p> |
||||
<ul class="actions"> |
||||
<li><a href="#" class="button style3 large">Proceed</a></li> |
||||
</ul> |
||||
</div> |
||||
</section> |
||||
Loading…
Reference in new issue