User Tools

Site Tools

Trace:
playground:appliances_html_test

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
playground:appliances_html_test [2014/07/15 08:50] – nborboenplayground:appliances_html_test [2023/11/16 15:21] (current) – external edit 127.0.0.1
Line 1: Line 1:
 +<html>
 +<style>
 +.dokuwiki div.page { padding: 5px; }
 +#wrapper #content h1 {
 +  margin-top: 0;
 +  padding-top: 0;
 +}
 +#wrapper #content.padded,
 +#wrapper #content .padded {
 +  padding: 0 0px;
 +}
 +
 +#wrapper #content .blocWrapper {
 +  margin: 0 5px 0 5px;
 +}
 +#wrapper #content .blocGroupWrapper {
 +  margin: 0;
 +  width: 940px;
 +  float: left;
 +}
 +#wrapper #content .bloc {
 +  float: left;
 +  margin: 0px 10px 10px 0px;
 +}
 +#wrapper #content .bloc header {
 +  padding: 1px 5px;
 +}
 +#wrapper #content .bloc header.lined {
 +  border-bottom: 1px solid #c2c2c2;
 +}
 +#wrapper #content .bloc h2 {
 +  font-size: 20px;
 +  font-family: 'ProximaNovaCond-Light';
 +  color: #535559;
 +  font-weight: normal;
 +  text-transform: uppercase;
 +  margin: 0;
 +}
 +#wrapper #content .bloc.single {
 +  width: 300px;
 +}
 +#wrapper #content .bloc.double {
 +  width: 610px;
 +}
 +#wrapper #content .bloc.triple {
 +  width: 920px;
 +}
 +#wrapper #content .bloc.bgWhite {
 +  background: #fff;
 +}
 +#wrapper #content .bloc header.bgOrange h2 {
 +  color: #fff;
 +  font-weight: normal;
 +}
 +#wrapper #content .bloc header.bgOrange .blocLink {
 +  border-left: 1px solid #fe984d;
 +  color: #fff;
 +}
 +#wrapper #content .bloc .blocLink {
 +  float: right;
 +  line-height: 17px;
 +  border-left: 1px solid #c2c2c2;
 +  padding-left: 20px;
 +  font-size: 14px;
 +  text-transform: uppercase;
 +  padding-top: 3px;
 +  color: #535559;
 +  font-family: 'ProximaNovaCond-Regular';
 +}
 +#wrapper #content .bloc .newsBloc {
 +  border-bottom: 1px solid #c2c2c2;
 +  padding: 0px 0px 20px 0px;
 +  /*padding-bottom: 20px;*/
 +  margin-bottom: 20px;
 +}
 +#wrapper #content .bloc .newsBloc h3 {
 +  font-size: 14px;
 +  margin-bottom: 10px;
 +}
 +#wrapper #content .bloc .newsBloc p {
 +  font-size: 13px;
 +  line-height: 17px;
 +  margin-bottom: 10px;
 +}
 +#wrapper #content .bloc a {
 +  color: #00a9e0;
 +  text-decoration: none;
 +  font-size: 14px;
 +}
 +#wrapper #content .half {
 +  width: 50%;
 +  float: left;
 +}
 +#wrapper #content .larged {
 +  width: 33%;
 +  float: left;
 +}
 +#wrapper #content .questionAnswer h4 {
 +  color: #fe6b00;
 +  margin-bottom: 10px;
 +  font-size: 14px;
 +  line-height: 17px;
 +}
 +#wrapper #content .questionAnswer h4 img {
 +  float: left;
 +  margin-right: 4px;
 +}
 +#wrapper #content .questionAnswer p {
 +  font-size: 13px;
 +  line-height: 17px;
 +  margin-bottom: 10px;
 +}
 +#wrapper #content .questionAnswer p img {
 +  float: left;
 +  margin-right: 4px;
 +}
 +#wrapper #content .questionAnswer .bg {
 +  float: left;
 +  color: #fff;
 +  border-radius: 8px;
 +  width: 15px;
 +  height: 15px;
 +  text-align: center;
 +  font-size: 11px;
 +  font-weight: normal;
 +}
 +#wrapper #content .questionAnswer .bg.question {
 +  background: #fe6b00;
 +}
 +#wrapper #content .questionAnswer .bg.answer {
 +  background: #535559;
 +}
 +#wrapper #content .intro {
 +  margin-bottom: 60px;
 +}
 +#wrapper #content .intro .img {
 +  float: left;
 +  width: 460px;
 +}
 +#wrapper #content .intro .txt {
 +  float: left;
 +  width: 480px;
 +}
 +#wrapper #content .intro .txt h1 {
 +  font-family: 'ProximaNovaCond-Semibold';
 +  font-size: 44px;
 +  color: #1d1d1b;
 +  text-transform: uppercase;
 +  margin-bottom: 6px;
 +}
 +#wrapper #content .intro .txt h2 {
 +  font-family: 'ProximaNovaCond-Light';
 +  font-size: 32px;
 +  color: #535559;
 +  text-transform: uppercase;
 +  margin-bottom: 6px;
 +}
 +#wrapper #content .intro .txt p {
 +  color: #1d1d1b;
 +  font-size: 16px;
 +  line-height: 20px;
 +  margin-bottom: 20px;
 +}
 +#wrapper #content #newsWrapper {
 +  background: #fff;
 +}
 +#wrapper #content #newsWrapper .news {
 +  padding: 20px;
 +}
 +#wrapper #content #newsWrapper .news .img {
 +  float: left;
 +  /*width: 280px;*/
 +  width: 220px;
 +}
 +#wrapper #content #newsWrapper .news .txt {
 +  float: left;
 +  width: 100px;
 +  padding-left: 10px;
 +}
 +#wrapper #content #newsWrapper .news h3 {
 +  font-family: 'ProximaNovaCond-Light';
 +  font-size: 16px;
 +  text-transform: uppercase;
 +  margin-bottom: 8px;
 +}
 +#wrapper #content #newsWrapper .news h2 {
 +  font-family: 'ProximaNovaCond-Regular';
 +  font-size: 28px;
 +  margin-bottom: 15px;
 +}
 +#wrapper #content #newsWrapper .news p {
 +  font-size: 16px;
 +  margin-bottom: 20px;
 +}
 +#wrapper #content #newsWrapper.detail {
 +  margin-bottom: 20px;
 +}
 +#wrapper #content #newsWrapper.detail img {
 +  width: 440px;
 +  float: left;
 +  margin: 0 20px 20px 0;
 +}
 +#wrapper #content #faqWrapper h2 {
 +  text-align: center;
 +  font-family: 'ProximaNovaCond-Semibold';
 +  font-size: 26px;
 +  text-transform: uppercase;
 +  color: #1d1d1b;
 +  margin-bottom: 20px;
 +}
 +#wrapper #content #faqWrapper .blocWrapper .bloc {
 +  height: 200px;
 +  position: relative;
 +}
 +#wrapper #content #faqWrapper .blocWrapper .bloc .content {
 +  padding: 20px;
 +}
 +#wrapper #content #faqWrapper .blocWrapper .bloc h3 {
 +  font-family: 'ProximaNovaCond-Semibold';
 +  font-size: 26px;
 +  text-transform: uppercase;
 +  color: #1d1d1b;
 +  text-align: left;
 +}
 +#wrapper #content #faqWrapper .blocWrapper .bloc h4 {
 +  font-family: 'ProximaNovaCond-Light';
 +  font-size: 19px;
 +  text-transform: uppercase;
 +  color: #1d1d1b;
 +  margin-bottom: 20px;
 +}
 +#wrapper #content #faqWrapper .blocWrapper .bloc .bluecornerlink {
 +  position: absolute;
 +  bottom: 20px;
 +}
 +#wrapper #content #faqWrapper .blocWrapper .bloc .bluecornerlink a {
 +  color: #fff;
 +}
 +#wrapper #content #faqWrapper.detail {
 +  margin-bottom: 40px;
 +}
 +#wrapper #content #faqWrapper.detail li {
 +  background: #fff;
 +  padding-top: 20px;
 +  border-bottom: 1px solid #c2c2c2;
 +  cursor: pointer;
 +}
 +#wrapper #content #faqWrapper.detail li .number {
 +  float: left;
 +  width: 30px;
 +  height: 30px;
 +  margin: 0 35px 15px 15px;
 +  text-align: center;
 +  background: #fe6b00;
 +  border-radius: 15px;
 +  line-height: 30px;
 +  color: #fff;
 +}
 +#wrapper #content #faqWrapper.detail li .question {
 +  float: left;
 +  font-family: 'ProximaNovaCond-Regular';
 +  font-size: 28px;
 +  line-height: 30px;
 +  width: 840px;
 +  padding-bottom: 20px;
 +  padding-right: 20px;
 +}
 +#wrapper #content #faqWrapper.detail li .question p {
 +  font-size: 28px;
 +  line-height: 30px;
 +}
 +#wrapper #content #faqWrapper.detail li .answer {
 +  display: none;
 +  background: #fff;
 +  padding: 20px 20px 20px 80px;
 +  font-size: 16px;
 +  line-height: 20px;
 +}
 +#wrapper #content #faqWrapper.detail li .answer p {
 +  margin-bottom: 20px;
 +}
 +#wrapper #content #faqWrapper.detail li.active {
 +  background: #fe6b00;
 +}
 +#wrapper #content #faqWrapper.detail li.active .number {
 +  background: #fff;
 +  color: #fe6b00;
 +}
 +#wrapper #content #faqWrapper.detail li.active .question {
 +  color: #fff;
 +}
 +#wrapper #content #faqWrapper.detail li.noborder {
 +  border-bottom: none;
 +}
 +#wrapper #content #lexiqueWrapper .ulWrapper {
 +  text-align: center;
 +}
 +#wrapper #content #lexiqueWrapper .ulWrapper ul li {
 +  display: inline-block;
 +  *display: inline;
 +  zoom: 1;
 +  border-right: 1px solid #c2c2c2;
 +  padding: 0 11px;
 +}
 +#wrapper #content #lexiqueWrapper .ulWrapper ul li.noborder {
 +  border: none;
 +}
 +#wrapper #content #lexiqueWrapper .ulWrapper ul li a {
 +  color: #535559;
 +  font-family: 'ProximaNovaCond-Light';
 +  font-size: 18px;
 +}
 +#wrapper #content #lexiqueWrapper .ulWrapper ul li a.active {
 +  color: #000;
 +}
 +#wrapper #content #lexiqueWrapper #listWrapper {
 +  margin: 20px 0;
 +}
 +#wrapper #content #lexiqueWrapper #listWrapper ul li {
 +  background: #fff;
 +  padding: 20px;
 +  border-bottom: 1px solid #c2c2c2;
 +}
 +#wrapper #content #lexiqueWrapper #listWrapper ul li h4 {
 +  font-family: 'ProximaNovaCond-Regular';
 +  font-size: 24px;
 +  margin-bottom: 6px;
 +}
 +#wrapper #content #lexiqueWrapper #listWrapper ul li p {
 +  margin-bottom: 20px;
 +}
 +#wrapper #content #map {
 +  width: 100%;
 +  height: 550px;
 +  background: #e8e8e8;
 +}
 +/* TEXTE PAGES ET ADMION */
 +#content.text,
 +.redactor_box {
 +  font-family: Arial, Helvetica, Sans Serif;
 +  font-size: 16px;
 +  color: #333333;
 +  padding: 20px;
 +}
 +#content.text body,
 +.redactor_box body {
 +  background: none;
 +}
 +#content.text h1,
 +.redactor_box h1,
 +#content.text h3,
 +.redactor_box h3 {
 +  font-family: 'ProximaNovaCond-Light';
 +  color: #535559;
 +  font-size: 32px;
 +  text-transform: uppercase;
 +}
 +#content.text h3,
 +.redactor_box h3 {
 +  font-size: 20px;
 +}
 +#content.text h2,
 +.redactor_box h2,
 +#content.text h4,
 +.redactor_box h4 {
 +  font-family: 'ProximaNovaCond-Semibold';
 +  font-size: 44px;
 +  color: #000;
 +  text-transform: uppercase;
 +  margin-bottom: 10px;
 +}
 +#content.text h4,
 +.redactor_box h4 {
 +  font-size: 26px;
 +}
 +#content.text p,
 +.redactor_box p {
 +  color: #333333;
 +  margin-bottom: 20px;
 +}
 +#content.text #wysiwyg,
 +.redactor_box #wysiwyg {
 +  margin-bottom: 80px;
 +}
 +#content.text ul li,
 +.redactor_box ul li {
 +  margin-bottom: 10px;
 +  line-height: 20px;
 +  display: block;
 +  padding-left: 20px;
 +  background: url(lib/tpl/ses/images/bg_bullet-text.png) top left no-repeat;
 +  background-position: 0 8px;
 +}
 +#content.text table,
 +.redactor_box table {
 +  margin-top: 50px;
 +}
 +#content.text table td,
 +.redactor_box table td {
 +  vertical-align: top;
 +}
 +#content.text table td p,
 +.redactor_box table td p,
 +#content.text table td li,
 +.redactor_box table td li {
 +  font-family: Arial, Helvetica, Sans Serif;
 +  font-size: 16px;
 +  color: #535559;
 +}
 +#content.text table td.w50,
 +.redactor_box table td.w50 {
 +  width: 460px;
 +  padding-right: 20px;
 +}
 +#content.text table td.w50.right,
 +.redactor_box table td.w50.right {
 +  width: 460px;
 +  padding-right: 0;
 +}
 +hr {
 +  background: none;
 +  border: none;
 +  border-top: 1px solid #c2c2c2;
 +}
 +hr.marged {
 +  margin: 40px 0;
 +}
 +.pagination {
 +  margin: 20px auto 40px auto;
 +  height: 20px;
 +}
 +.pagination ul li {
 +  float: left;
 +  padding: 0 10px;
 +  border-left: 1px solid #c2c2c2;
 +}
 +.pagination ul li a {
 +  font-family: 'ProximaNovaCond-Light';
 +  font-size: 20px;
 +  line-height: 23px;
 +  color: #797a7f;
 +}
 +.pagination ul li a.active {
 +  color: #000;
 +}
 +.pagination ul li.prev,
 +.pagination ul li.next {
 +  width: 11px;
 +  height: 20px;
 +}
 +.pagination ul li.prev,
 +.pagination ul li.nobl,
 +.pagination ul li.next {
 +  border-left: 0;
 +}
 +.paddedContent {
 +  padding: 20px;
 +}
 +#sponsorsWrapper {
 +  margin: 40px 0 30px 20px;
 +}
 +#sponsorsWrapper h2 {
 +  font-family: 'ProximaNovaCond-Regular';
 +  font-size: 14px;
 +  text-transform: uppercase;
 +}
 +#sponsorsWrapper .sponsor {
 +  float: left;
 +  margin-right: 60px;
 +}
 +</style>
 +<div id="wrapper">
 +  <div id="content">
 +    <div class="blocWrapper">
 +        <div class="blocGroupWrapper">
 +            <div class="bloc single bgWhite">
 +                <header>
 +                    <h2>Saviez-vous que</h2>
 +                </header>
 +                <img src="lib/tpl/ses/images/img1.jpg" alt="image"/>
 +            </div>
 +            <div class="bloc single bgWhite">
 +                <header>
 +                    <h2>Calculateur d'énergie</h2>
 +                </header>
 +                <img src="lib/tpl/ses/images/img2.jpg" alt="image"/>
 +            </div>
 +            <div class="bloc single bgWhite">
 +                <header>
 +                    <h2>Calculateur d'énergie</h2>
 +                </header>
 +                <img src="lib/tpl/ses/images/img2.jpg" alt="image"/>
 +            </div>
 +            <div class="clear"></div>
 +
 +            <div class="bloc triple bgWhite">
 +                <header class="lined">
 +                    <h2 class="fl">100 question / réponses</h2>
 +                    <div class="clear"></div>
 +                </header>
 +                    <div class="half">
 +                        <div class="paddedContent">
 +                            <div class="questionAnswer">
 +                                <h4><img src="lib/tpl/ses/images/bg_icon-question.png"><p>Faut-il favoriser le chauffage &agrave; distance ou le chauffage individuel ?</p></h4>
 +                                <div class="clear"></div>
 +
 +                                <p><img src="lib/tpl/ses/images/bg_icon-answer.png"><p>Utiliser de l'&eacute;lectricit&eacute; pour le chauffage direct des b&acirc;timents ou la production d'eau chaude est une aberration &eacute;nerg&eacute;tique et devrait&hellip;</p>
 +
 +                                <a href="/100-questions/efficacite-energetique/">Lire la suite</a>
 +                                <div class="clear"></div>
 +                            </div>
 +                        </div>
 +                    </div>
 +
 +                    <div class="half">
 +                        <div class="paddedContent">
 +                            <div class="questionAnswer">
 +                                <h4><img src="lib/tpl/ses/images/bg_icon-question.png">Pour quelle application utilise-t-on chacun des agents énergétiques ? [Sankey diagram]</h4>
 +                                <div class="clear"></div>
 +
 +                                <p><img src="lib/tpl/ses/images/bg_icon-answer.png"><p>Il est faux de croire que la Suisse pollue moins que les autres en termes d'émissions de gaz à effet&hellip;</p>
 +
 +                                <a href="/100-questions/approvisionnement-sur-aujourd-hui-incertain-demain/">Lire la suite</a>
 +                                <div class="clear"></div>
 +                            </div>
 +                        </div>
 +                    </div>
 +                <div class="clear"></div>
 +            </div>
 +            <div class="clear"></div>
 +
 +            <div class="bloc single bgWhite">
 +                <header>
 +                    <h2>Saviez-vous que</h2>
 +                </header>
 +                <img src="lib/tpl/ses/images/img1.jpg" alt="image"/>
 +            </div>
 +            <div class="bloc single bgWhite">
 +                <header>
 +                    <h2>Calculateur d'énergie</h2>
 +                </header>
 +                <img src="lib/tpl/ses/images/img2.jpg" alt="image"/>
 +            </div>
 +            <div class="bloc single bgWhite">
 +                <header>
 +                    <h2>Calculateur d'énergie</h2>
 +                </header>
 +                <img src="lib/tpl/ses/images/img2.jpg" alt="image"/>
 +            </div>
 +            <div class="clear"></div>
 +
 +
 +
 +
 +            <div class="bloc triple bgWhite">
 +                <header class="lined">
 +                    <h2 class="fl">TEST</h2>
 +                    <div class="clear"></div>
 +                </header>
 +                    <div class="larged">
 +                        <div class="paddedContent">
 +                            <div class="questionAnswer">
 +                                <h4><img src="lib/tpl/ses/images/bg_icon-question.png"><p>Faut-il favoriser le chauffage &agrave; distance ou le chauffage individuel ?</p></h4>
 +                                <div class="clear"></div>
 +
 +                                <p><img src="lib/tpl/ses/images/bg_icon-answer.png"><p>Utiliser de l'&eacute;lectricit&eacute; pour le chauffage direct des b&acirc;timents ou la production d'eau chaude est une aberration &eacute;nerg&eacute;tique et devrait&hellip;</p>
 +
 +                                <a href="/100-questions/efficacite-energetique/">Lire la suite</a>
 +                                <div class="clear"></div>
 +                            </div>
 +                        </div>
 +                    </div>
 +
 +                    <div class="larged">
 +                        <div class="paddedContent">
 +                            <div class="questionAnswer">
 +                                <h4><img src="lib/tpl/ses/images/bg_icon-question.png">Pour quelle application utilise-t-on chacun des agents énergétiques ? [Sankey diagram]</h4>
 +                                <div class="clear"></div>
 +
 +                                <p><img src="lib/tpl/ses/images/bg_icon-answer.png"><p>Il est faux de croire que la Suisse pollue moins que les autres en termes d'émissions de gaz à effet&hellip;</p>
 +
 +                                <a href="/100-questions/approvisionnement-sur-aujourd-hui-incertain-demain/">Lire la suite</a>
 +                                <div class="clear"></div>
 +                            </div>
 +                        </div>
 +                    </div>
 +                <div class="clear"></div>
 +
 +                    <div class="larged">
 +                        <div class="paddedContent">
 +                            <div class="questionAnswer">
 +                                <h4><img src="lib/tpl/ses/images/bg_icon-question.png">Pour quelle application utilise-t-on chacun des agents énergétiques ? [Sankey diagram]</h4>
 +                                <div class="clear"></div>
 +
 +                                <p><img src="lib/tpl/ses/images/bg_icon-answer.png"><p>Il est faux de croire que la Suisse pollue moins que les autres en termes d'émissions de gaz à effet&hellip;</p>
 +
 +                                <a href="/100-questions/approvisionnement-sur-aujourd-hui-incertain-demain/">Lire la suite</a>
 +                                <div class="clear"></div>
 +                            </div>
 +                        </div>
 +                    </div>
 +                <div class="clear"></div>
 +
 +            </div>
 +            <div class="clear"></div>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +            <div class="bloc double bgWhite">
 +                <header class="lined">
 +                    <h2 class="fl">100 question / réponses</h2>
 +                    <div class="clear"></div>
 +                </header>
 +                    <div class="half">
 +                        <div class="paddedContent">
 +                            <div class="questionAnswer">
 +                                <h4><img src="lib/tpl/ses/images/bg_icon-question.png"><p>Faut-il favoriser le chauffage &agrave; distance ou le chauffage individuel ?</p></h4>
 +                                <div class="clear"></div>
 +
 +                                <p><img src="lib/tpl/ses/images/bg_icon-answer.png"><p>Utiliser de l'&eacute;lectricit&eacute; pour le chauffage direct des b&acirc;timents ou la production d'eau chaude est une aberration &eacute;nerg&eacute;tique et devrait&hellip;</p>
 +
 +                                <a href="/100-questions/efficacite-energetique/">Lire la suite</a>
 +                                <div class="clear"></div>
 +                            </div>
 +                        </div>
 +                    </div>
 +
 +                    <div class="half">
 +                        <div class="paddedContent">
 +                            <div class="questionAnswer">
 +                                <h4><img src="lib/tpl/ses/images/bg_icon-question.png">Pour quelle application utilise-t-on chacun des agents énergétiques ? [Sankey diagram]</h4>
 +                                <div class="clear"></div>
 +
 +                                <p><img src="lib/tpl/ses/images/bg_icon-answer.png"><p>Il est faux de croire que la Suisse pollue moins que les autres en termes d'émissions de gaz à effet&hellip;</p>
 +
 +                                <a href="/100-questions/approvisionnement-sur-aujourd-hui-incertain-demain/">Lire la suite</a>
 +                                <div class="clear"></div>
 +                            </div>
 +                        </div>
 +                    </div>
 +
 +                <div class="clear"></div>
 +            </div>
 +            <div class="clear"></div>
 +                       <div class="clear"></div>
 +            <div class="bloc single bgWhite">
 +                <header>
 +                    <h2>Saviez-vous que</h2>
 +                </header>
 +                <img src="lib/tpl/ses/images/img1.jpg" alt="image"/>
 +            </div>
 +
 +
 +
 +
 +
 +        </div><!-- /.blocGroupWrapper -->
 +
 +
 +        <div class="clear"></div>
 +    </div>
 +  </div> <!-- /content -->
 +</div>
 +</html>
  
playground/appliances_html_test.txt · Last modified: 2023/11/16 15:21 by 127.0.0.1

Page Tools

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki