DECOTEXS: septiembre 2022

Estilo de flecha par tus enlaces. Modelo 1


<style>@media(max-width:767px) { a.arrowNext { width: calc(100% - 70px); } }

a.arrowNext:link {
color: white;
text-decoration: none;
}
a.arrowNext:visited {
color: white;
}
a.arrowNext:hover {
color: white;
}
a.arrowNext:active {
color: white;
}
.arrowNext {
display: inline-block;
position: relative;
padding: 11px;
width: 85%;
background: #0F9D58;
text-align: right;
margin-top: 1em;
margin-bottom: 1em;
font-family: PT Sans, sans-serif;
}
.arrowNext:after {
content: '';
display: block;
position: absolute;
left: 100%;
top: 50%;
margin-top: -25px;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #0F9D58;
}</style>


<p><a class="arrowNext" href="#htm">Estilo de flecha par tus enlaces. Modelo 1</a></p>
 <!---  
  https://www.englishclub.com/reading/environment/pollution.htm --->

Modelo 1

Lorem ipsum.

  
  <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>

DECOTEXS

lunes, 19 de septiembre de 2022

Estilos para tus enlaces

jueves, 15 de septiembre de 2022

Modelos de listas

domingo, 11 de septiembre de 2022

Cómo poner texto vertical

Cómo distribuir contenido en columnas