ANATOMIA DE LAS CIBERPAGINAS: 👨‍💻 Fragmento de bootstrap. cintas div

Limited Offer

Este es el código html utilizado para crear este fragmento de bootstrap, puede copiar, pegar, cambiar, personalizar y ejecutar el siguiente código HTML para obtener un resultado como el que se muestra en la selección de vista previa:

<div class="container bootstrap snippets bootdey">
    <div class="row mb-20">
        <div class="col-md-3">
            <div class="ribbon-content">
                <div class="ribbon base"><span>Limited Offer</span></div>
            </div>
        </div> 
        <div class="col-md-3">
            <div  class="ribbon-content">
                <div class="ribbon base-alt"><span>Limited Offer</span></div>
            </div>
        </div> 
        <div class="col-md-3">
            <div  class="ribbon-content">
                <div class="ribbon orange"><span>Limited Offer</span></div>
            </div>
        </div> 
        <div class="col-md-3">
            <div  class="ribbon-content">
                <div class="ribbon dark"><span>Limited Offer</span></div>
            </div>
        </div> 
    </div>
    <div class="row mb-20">
        <div class="col-md-3">
            <div  class="ribbon-content">
                <div class="ribbon red"><span>Limited Offer</span></div>
            </div>
        </div> 
        <div class="col-md-3">
            <div  class="ribbon-content">
                <div class="ribbon yellow"><span>Limited Offer</span></div>
            </div>
        </div> 
       
    </div>
</div>

Este es el código css utilizado para crear este fragmento de bootstrap, puede copiar, pegar, cambiar, personalizar y ejecutar el siguiente código CSS para obtener un resultado como el que se muestra en la selección de vista previa

.ribbon {
    position: absolute;
    top: 20px;
    right: -5px;
    padding: 15px;
}
.ribbon-content{
    position: relative; 
    width: 100%; 
    height: 100px; 
    background: #f1f1f1; 
    border: 1px solid #DDD;    
}
.ribbon.base {
    background: #3498db;
    color: #fff;
    border-right: 5px solid #8bc4ea;
}
.ribbon.light {
    background: #ecf0f1;
    color: #2c3e50;
    border-right: 5px solid #dde4e6;
}
.ribbon.dark {
    background: #131313;
    color: #fff;
    border-right: 5px solid #464646;
}
.ribbon.base-alt {
    background: #9cd70e;
    color: #fff;
    border-right: 5px solid #c6f457;
}
.ribbon.red {
    background: #e91b23;
    color: #fff;
    border-right: 5px solid #f2787d;
}
.ribbon.orange {
    background: #ff8a3c;
    color: #fff;
    border-right: 5px solid #ffc7a2;
}
.ribbon.yellow {
    background: #ffd800;
    color: #fff;
    border-right: 5px solid #ffe866;
}
.ribbon:before, .ribbon:after {
    content: '';
    position: absolute;
    left: -9px;
    border-left: 10px solid transparent;
}
.ribbon:before {
    top: 0;
}
.ribbon:after {
    bottom: 0;
}
.ribbon.base:before {
    border-top: 27px solid #3498db;
}
.ribbon.base:after {
    border-bottom: 27px solid #3498db;
}
.ribbon.light:before {
    border-top: 27px solid #ecf0f1;
}
.ribbon.light:after {
    border-bottom: 27px solid #ecf0f1;
}
.ribbon.dark:before {
    border-top: 27px solid #131313;
}
.ribbon.dark:after {
    border-bottom: 27px solid #131313;
}
.ribbon.base-alt:before {
    border-top: 27px solid #9cd70e;
}
.ribbon.base-alt:after {
    border-bottom: 27px solid #9cd70e;
}
.ribbon.red:before {
    border-top: 27px solid #e91b23;
}
.ribbon.red:after {
    border-bottom: 27px solid #e91b23;
}
.ribbon.orange:before {
    border-top: 27px solid #ff8a3c;
}
.ribbon.orange:after {
    border-bottom: 27px solid #ff8a3c;
}
.ribbon.yellow:before {
    border-top: 27px solid #ffd800;
}
.ribbon.yellow:after {
    border-bottom: 27px solid #ffd800;
}
.ribbon span {
    display: block;
    font-size: 16px;
    font-weight: 600;
}

⁂

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et viverra nunc, ut finibus erat. Ut risus purus, efficitur lobortis dui non, pretium vehicula felis. Sed ac lectus non elit dapibus ultrices at sit amet dui.

Ejemplo

El HTML es el siguiente:

El CSS es el siguiente:

.mb-2{
    background: transparent;
   width:700px; height:72px;
    color:black;text-align: justify;
        padding:22px;
}
      
      
    .ribbon.purple {
    background: purple;
    color: yellow;  
    border-right: 5px solid #f2787d;
      
}
      
  .ribbon {
    position: absolute;
    top: 20px;
    right: -5px;
    padding: 15px;
}
.ribbon-content-2{
    position: relative; 
    width: 90%; 
    height: 100px; 
    background: #f1f1f1; 
    border: 1px solid #DDD;  padding-left:22px; 
  border: 2px solid red;border-radius:32px;
}

.ribbon.base:before {
    border-top: 27px solid #3498db;
}
.ribbon.base:after {
    border-bottom: 27px solid #3498db;
} 
 
.ribbon:before {
    top: 0;
}
.ribbon:after {
    bottom: 0;
}
 
      .ribbon.purple:after {
    border-bottom: 27px solid #e91b23;
}
.ribbon.purple:before {
    border-top: 27px solid #e91b23;
}
  
 .ribbon:before, .ribbon:after {
    content: '';
    position: absolute;
    left: -9px;
    border-left: 10px solid transparent;
}

Fuente.

https://www.bootdey.com/snippets/view/div-ribbons#html

ANATOMIA DE LAS CIBERPAGINAS

Etiquetas

martes, 21 de diciembre de 2021

👨‍💻 Fragmento de bootstrap. cintas div