DECOTEXS: Modelos de listas

Modelo 1

  
  <style>.tags{margin:0 0 1.5em 0;padding:0 1em}.tags .titulo{text-align:left;margin:1em 0 1.5em 0}@media (min-width:840px){.tags{width:calc(100% + .5em);padding:0 0 0 1em}.tags .titulo{margin:1em .5em 1.5em 0}}.tags .tag{background-color:transparent;-webkit-transition:background-color .3s ease-in-out;-ms-transition:background-color .3s ease-in-out;-moz-transition:background-color .3s ease-in-out;-o-transition:background-color .3s ease-in-out;transition:background-color .3s ease-in-out;color:#c77200;border-radius:2px;border:2px solid #ffa62e;display:inline-block;line-height:1.2;padding:.3em .5em;margin:0 .5em .5em 0}.tags .tag:hover{background-color:#fff2e1}.tags .topview{width:100%;padding-bottom:.4em}.tags .topview div{float:left;border-radius:2px;border:2px solid #ffa62e;line-height:23px;width:23px;position:relative;text-align:center}.tags .topview a{margin-left:10px;color:#333}
  
.tags .titulo{text-align:left;margin:1em 0 1.5em 0}@media (min-width:840px){.tags{width:calc(100% + .5em);padding:0 0 0 1em}.tags .titulo{margin:1em .5em 1.5em 0}} .titulo{line-height:1.5!important}
  .titulo.titulo--linea{display:block;font-weight:400;margin:1em .75em .75em .75em;padding:0;line-height:0;border-bottom:1px solid #333;color:#333}.titulo.titulo--linea.sin-margin-lateral{margin:1em 0 1.5em 0}.titulo.titulo--linea .pastilla{font-size:1.2em;display:inline-block;line-height:1.05;padding:.25em .5em;margin:0;position:relative}@media screen and (min-width:480px){.titulo.titulo--linea .pastilla{font-size:1.2em}}@media screen and (min-width:840px){.titulo.titulo--linea .pastilla{font-size:1.4em}}@media screen and (min-width:1025px){.titulo.titulo--linea .pastilla{font-size:1.4em}}.columna-post .titulo.titulo--linea{display:block}@media (min-width:840px){aside>.titulo.titulo--linea{display:none}}
        .titulo.titulo--linea.pastilla{font-size:1.2em;display:inline-block;line-height:1.05;padding:.25em .5em;margin:0;position:relative}@media screen and (min-width:480px){.titulo.titulo--linea .pastilla{font-size:1.2em}}@media screen and (min-width:840px){.titulo.titulo--linea .pastilla{font-size:1.4em}}@media screen and (min-width:1025px){.titulo.titulo--linea .pastilla{font-size:1.4em}}
  .tags .topview{width:100%;padding-bottom:.4em}.tags .topview div{float:left;border-radius:2px;border:2px solid #ffa62e;line-height:23px;width:23px;position:relative;text-align:center}.tags .topview a{margin-left:10px;color:#333}
   .post{display:inline-block;vertical-align:top;width:calc(100% - 300px - 2em)}
</style>
<div class="tags" data-js-selector="top-views">
<div class="titulo titulo--linea"><div class="pastilla">Modelo 1</div></div>
  
<div class="topview  Post"><div >1.</div><a class="ga" data-category="Post" data-event="topviews" data-vars-event-label="https://" href="https://">Lorem ipsum.</a></div>

<div class="topview"><div>2.</div><a class="ga" data-category="Post" data-event="topviews" data-vars-event-label="https://" href="https://">Lorem ipsum.</div>

<div class="topview"><div>3.</div><a class="ga" data-category="Post" data-event="topviews" data-vars-event-label="https://" href="https://">Lorem ipsum.</div>

______________________________________________________________________________

Modelo 2

Lorem ipsum.....


  
<style>
  
.titulo{line-height:1.5!important;text-decoration:none!important}

.titulo.titulo--h3{font-size:1.2em;line-height:1.2;font-weight:600;padding:0 .3em 0 .1em;margin:.5em 1em .25em 1em;color:#333;display:block}@media screen and (min-width:480px){.apartado h3,.intro h3,.titulo.titulo--h3{font-size:1.2em}}@media screen and (min-width:840px){.apartado h3,.intro h3,.titulo.titulo--h3{font-size:1.4em}}@media screen and (min-width:1025px){.apartado h3,.intro h3,.titulo.titulo--h3{font-size:1.4em}}
.titulo.titulo--apartado{padding-top:70px;margin-top:-70px}@media (min-width:1025px){.titulo.titulo--apartado{padding-top:100px;margin-top:-100px}}.titulo.titulo--relacionados{padding-bottom:.5em}.apartado h3,.intro h3,.titulo.titulo--h3{font-size:1.2em;line-height:1.2;font-weight:600;padding:0 .3em 0 .1em;margin:.5em 1em .25em 1em;color:#333;display:block}@media screen and (min-width:480px){.apartado h3,.intro h3,.titulo.titulo--h3{font-size:1.2em}}@media screen and (min-width:840px){.apartado h3,.intro h3,.titulo.titulo--h3{font-size:1.4em}}@media screen and (min-width:1025px){.apartado h3,.intro h3,.titulo.titulo--h3{font-size:1.4em}}
.apartado{margin:0 0 1.5em 0}
.apartado .orden{font-size:1.8em;font-weight:800;color:#333;float:left;padding:.25em .5em;line-height:0;margin:.5em 0 0 .5em}@media screen and (min-width:480px){.apartado .orden{font-size:1.8em}}@media screen and (min-width:840px){.apartado .orden{font-size:2em}}@media screen and (min-width:1025px){.apartado .orden{font-size:2em}}
</style>

<div class="titulo titulo--h3">Modelo 2</div>
<div class="apartado" id="anchor_0">
<div class="orden">1</div>
<p>Lorem ipsum.....</p>
</div>
<div class="apartado" id="anchor_1">
<div class="orden">2</div>
<p>Lorem ipsum.....</p>
</div>

jueves, 15 de septiembre de 2022

Modelos de listas