spip-contrib-squelettes
/
html5up_escape_velocity
500
1
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity
Browse Source

Compositions avec sidebar

master
jeanmarie 3 years ago
parent
f650e259cc
commit
13ebc0dce6
2 changed files with 61 additions and 516 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 290
      content/article-left.html
  2. 287
      content/article-right.html

290
content/article-left.html
Unescape View File

@ -1,273 +1,45 @@
<!-- Main -->
<BOUCLE_principale(ARTICLES) {id_article}>
<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 class="col-4 col-12-medium">
<INCLURE{fond=inclure/sidebar} />
</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 id="content">
<article class="box post">
<header class="entente style1">
<h1 [class="(#EDIT{titre})"]>#TITRE</h1>
[<p [class="(#EDIT{soustitre})"]>(#SOUSTITRE)</p>]
</header>
[<div class="image featured">
(#LOGO_ARTICLE_RUBRIQUE|extraire_attribut{src}
|balise_img
|image_recadre{1270:320,-,focus}
|adaptive_images{360/768/980/1270})
</div>]
[<div class="chapo #EDIT{chapo}">(#CHAPO)</div>]
[<div class="texte #EDIT{texte}">(#TEXTE)</div>]
<aside>
[(#REM) Gestion du portfolio et des documents ]
[(#INCLURE{fond=inclure/portfolio,id_article,id_rubrique=#EVAL{null}})]
[(#INCLURE{fond=inclure/documents,id_article})]
</aside>
</article>
</div>
</div>
</div>
</div>
</section>
</BOUCLE_principale>
<!-- 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>&copy; Untitled.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</div>
</section>
<INCLURE{fond=inclure/accueil-focus} />

287
content/article-right.html
Unescape View File

@ -1,273 +1,46 @@
<!-- Main -->
<BOUCLE_principale(ARTICLES) {id_article}>
<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 id="content">
<article class="box post">
<header class="entente style1">
<h1 [class="(#EDIT{titre})"]>#TITRE</h1>
[<p [class="(#EDIT{soustitre})"]>(#SOUSTITRE)</p>]
</header>
[<div class="image featured">
(#LOGO_ARTICLE_RUBRIQUE|extraire_attribut{src}
|balise_img
|image_recadre{1270:320,-,focus}
|adaptive_images{360/768/980/1270})
</div>]
[<div class="chapo #EDIT{chapo}">(#CHAPO)</div>]
[<div class="texte #EDIT{texte}">(#TEXTE)</div>]
<aside>
[(#REM) Gestion du portfolio et des documents ]
[(#INCLURE{fond=inclure/portfolio,id_article,id_rubrique=#EVAL{null}})]
[(#INCLURE{fond=inclure/documents,id_article})]
</aside>
</article>
</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>
<INCLURE{fond=inclure/sidebar} />
</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>&copy; Untitled.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</div>
</section>
</BOUCLE_principale>
<INCLURE{fond=inclure/accueil-focus} />
Write Preview
Loading…
Cancel
Save