Untitled

mail@pastecode.io avatar
unknown
plain_text
6 months ago
12 kB
3
Indexable
Never
<div class="stl__embeded" class="shopify-section">

  

  <!-- First we look if both metafields on product page are set -->
  

    <div class="module module--featured module--featured--grid module--completelook mt mb">
      <div class="module__bd bd">
        <div class="featured__header effect effect--default effect--ready">
           
             <h4 class="featured__header__heading heading-reg case-upper text-sml">COMPLETE THE LOOK</h4>
           
        </div>
        <div class="row">
          <div class="col col-1 col-md-1-2 col-lg-1-2">
            <div class="mediaimg">
              <img class="mediaimg__img mediaimg__img--inline lazy entered loaded" data-srcset="//www.bordelle.co.uk/cdn/shop/files/AdjustableAngelaDressnavyfrton_1_600x.jpg?v=1698318497 600w, //www.bordelle.co.uk/cdn/shop/files/AdjustableAngelaDressnavyfrton_1_1200x.jpg?v=1698318497 1200w" data-sizes="(max-width: 550px) 600px, 1200px" data-ll-status="loaded" sizes="(max-width: 550px) 600px, 1200px" srcset="//www.bordelle.co.uk/cdn/shop/files/AdjustableAngelaDressnavyfrton_1_600x.jpg?v=1698318497 600w, //www.bordelle.co.uk/cdn/shop/files/AdjustableAngelaDressnavyfrton_1_1200x.jpg?v=1698318497 1200w">
            </div>
          </div>
          <div class="col col-1 col-md-1-2 col-lg-1-2">
            <div class="cartitems">
              
              <ul>
                
                  <!-- /snippets/product-tile-cart.liquid -->

<li class="cartitem">
  <div class="cartitem__image">
    <a class="noline" href="/products/vero-strap-collar-navy"></a>
    <div class="cartitem__imagesrc" style="background-image:url(//www.bordelle.co.uk/cdn/shop/products/Verostrapcollarnavufront_fe1d90df-5f77-406f-a3e7-569bf60cee7c_large.jpg?v=1698941293);"></div>
  </div>

  <div class="cartitem__body">

    <div class="cartitem__name font-bold text-reg">
      <a href="/products/vero-strap-collar-navy" class="ajaxcart__product-name noline">Vero Strap Collar</a>
    </div>
    <div class="cartitem__price text-xsml color-grey">
      

      
      
        <span class="money">£55.00</span>
      
    </div>
    <div class="cartitem__details">
      <div class="cartitem__size detail text-sml">

        

        <div class="detail__option sizeselect text-xsml">
          
            
            
            <div class="sizeselect__selected " data-id="43916151357578" data-inventory-policy="" data-inventory="16">One Size</div>
          
        </div>
      </div>
      <div class="cartitem__addtocart">
        <a class="cartitem__addtocartbtn btn btn--secondary case-upper text-xsml  font-bold" href="javascript:;">Add</a>


        
      </div>
    </div>
  </div>
</li>
<li class="cartitem">
  <div class="cartitem__image">
    <a class="noline" href="/products/vero-strap-collar-navy"></a>
    <div class="cartitem__imagesrc" style="background-image:url(//www.bordelle.co.uk/cdn/shop/products/Verostrapcollarnavufront_fe1d90df-5f77-406f-a3e7-569bf60cee7c_large.jpg?v=1698941293);"></div>
  </div>

  <div class="cartitem__body">

    <div class="cartitem__name font-bold text-reg">
      <a href="/products/vero-strap-collar-navy" class="ajaxcart__product-name noline">Vero Strap Collar</a>
    </div>
    <div class="cartitem__price text-xsml color-grey">
      

      
      
        <span class="money">£55.00</span>
      
    </div>
    <div class="cartitem__details">
      <div class="cartitem__size detail text-sml">

        

        <div class="detail__option sizeselect text-xsml">
          
            
            
            <div class="sizeselect__selected " data-id="43916151357578" data-inventory-policy="" data-inventory="16">One Size</div>
          
        </div>
      </div>
      <div class="cartitem__addtocart">
        <a class="cartitem__addtocartbtn btn btn--secondary case-upper text-xsml  font-bold" href="javascript:;">Add</a>


        
      </div>
    </div>
  </div>
</li>
<li class="cartitem">
  <div class="cartitem__image">
    <a class="noline" href="/products/vero-strap-collar-navy"></a>
    <div class="cartitem__imagesrc" style="background-image:url(//www.bordelle.co.uk/cdn/shop/products/Verostrapcollarnavufront_fe1d90df-5f77-406f-a3e7-569bf60cee7c_large.jpg?v=1698941293);"></div>
  </div>

  <div class="cartitem__body">

    <div class="cartitem__name font-bold text-reg">
      <a href="/products/vero-strap-collar-navy" class="ajaxcart__product-name noline">Vero Strap Collar</a>
    </div>
    <div class="cartitem__price text-xsml color-grey">
      

      
      
        <span class="money">£55.00</span>
      
    </div>
    <div class="cartitem__details">
      <div class="cartitem__size detail text-sml">

        

        <div class="detail__option sizeselect text-xsml">
          
            
            
            <div class="sizeselect__selected " data-id="43916151357578" data-inventory-policy="" data-inventory="16">One Size</div>
          
        </div>
      </div>
      <div class="cartitem__addtocart">
        <a class="cartitem__addtocartbtn btn btn--secondary case-upper text-xsml  font-bold" href="javascript:;">Add</a>


        
      </div>
    </div>
  </div>
</li>
<li class="cartitem">
  <div class="cartitem__image">
    <a class="noline" href="/products/vero-strap-collar-navy"></a>
    <div class="cartitem__imagesrc" style="background-image:url(//www.bordelle.co.uk/cdn/shop/products/Verostrapcollarnavufront_fe1d90df-5f77-406f-a3e7-569bf60cee7c_large.jpg?v=1698941293);"></div>
  </div>

  <div class="cartitem__body">

    <div class="cartitem__name font-bold text-reg">
      <a href="/products/vero-strap-collar-navy" class="ajaxcart__product-name noline">Vero Strap Collar</a>
    </div>
    <div class="cartitem__price text-xsml color-grey">
      

      
      
        <span class="money">£55.00</span>
      
    </div>
    <div class="cartitem__details">
      <div class="cartitem__size detail text-sml">

        

        <div class="detail__option sizeselect text-xsml">
          
            
            
            <div class="sizeselect__selected " data-id="43916151357578" data-inventory-policy="" data-inventory="16">One Size</div>
          
        </div>
      </div>
      <div class="cartitem__addtocart">
        <a class="cartitem__addtocartbtn btn btn--secondary case-upper text-xsml  font-bold" href="javascript:;">Add</a>


        
      </div>
    </div>
  </div>
</li>
<li class="cartitem">
  <div class="cartitem__image">
    <a class="noline" href="/products/vero-strap-collar-navy"></a>
    <div class="cartitem__imagesrc" style="background-image:url(//www.bordelle.co.uk/cdn/shop/products/Verostrapcollarnavufront_fe1d90df-5f77-406f-a3e7-569bf60cee7c_large.jpg?v=1698941293);"></div>
  </div>

  <div class="cartitem__body">

    <div class="cartitem__name font-bold text-reg">
      <a href="/products/vero-strap-collar-navy" class="ajaxcart__product-name noline">Vero Strap Collar</a>
    </div>
    <div class="cartitem__price text-xsml color-grey">
      

      
      
        <span class="money">£55.00</span>
      
    </div>
    <div class="cartitem__details">
      <div class="cartitem__size detail text-sml">

        

        <div class="detail__option sizeselect text-xsml">
          
            
            
            <div class="sizeselect__selected " data-id="43916151357578" data-inventory-policy="" data-inventory="16">One Size</div>
          
        </div>
      </div>
      <div class="cartitem__addtocart">
        <a class="cartitem__addtocartbtn btn btn--secondary case-upper text-xsml  font-bold" href="javascript:;">Add</a>


        
      </div>
    </div>
  </div>
</li>

                
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  <!-- If only the large feature image is set -->
  




</div>

<style>
.stl__embeded .module--featured--grid .featured__header {
    padding: 1.75em 0;
    border-top: 1px solid rgba(0,0,0,.1);
}
.stl__embeded .row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -0.325em;
    margin-right: -0.325em;
}
.stl__embeded .row {
    margin-left: -0.375em;
    margin-right: -0.375em;
}

.stl__embeded .col-1 {
    width: 100% !important;
}
@media only screen and (min-width: 768px){
.stl__embeded .col-lg-1-2 {
    width: 50% !important;
}
}
.stl__embeded .module--completelook .mediaimg {
    box-shadow: 60px 40px 120px rgba(0,0,0,.15);
}
.stl__embeded .mediaimg .mediaimg__img--inline {
    display: block;
    height: auto;
}
.stl__embeded .mediaimg .mediaimg__img {
    max-width: 100%;
    width: 100%;
}
.stl__embeded .module--completelook .cartitems {
    max-width: 66.6%;
    margin: 0 auto;
}
.stl__embeded ol, .stl__embeded ul {
    margin: 0 0 1em;
    padding: 0;
}
.stl__embeded a {
    color: inherit;
    text-decoration: none;
}
.stl__embeded .sizeselect .sizeselect__selected {
    position: relative;
    cursor: pointer;
}

.stl__embeded .cartitem:after {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 30%;
    width: 1px;
    background: #eee;
}
.stl__embeded .cartitem .cartitem__details .cartitem__size .detail__option {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(0,0,0,.07);
    border-radius: 3px;
    display: inline-block;
    padding: 1em 1.5em;
    font-weight: 500;
}
.stl__embeded .btn {
    cursor: pointer;
    background-color: #000;
    font-family: "Untitled Sans",Helvetica,Arial,sans-serif!important;
    color: #fff;
    border-radius: 3px;
    display: inline-block;
    margin: 0 0 0.75em 0;
    padding: 1em 1.5em;
    border: none;
    font-weight: 500;
    -webkit-transition: background-color 150ms cubic-bezier(.65,0,.35,1),color 150ms cubic-bezier(.65,0,.35,1);
    transition: background-color 150ms cubic-bezier(.65,0,.35,1),color 150ms cubic-bezier(.65,0,.35,1);
}
.stl__embeded .cartitem {
    position: relative;
    background: #fff;
    margin-top: 0.65em;
    box-shadow: 0 0 50px 0 rgba(0,0,0,.15);
    list-style: none;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.stl__embeded .btn--secondary {
    background: rgba(0,0,0,.07);
    color: #000;
}
.stl__embeded .cartitem .cartitem__details .cartitem__addtocart .btn {
    margin-bottom: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    border-radius: 3px;
}
.stl__embeded .cartitem .cartitem__details .cartitem__addtocart {
    width: calc(50% - 0.175rem);
}
.stl__embeded .cartitem .cartitem__image {
    position: relative;
    width: 30%;
    height: 0;
    padding-bottom: 45%;
}
.stl__embeded .cartitem .cartitem__details .cartitem__size {
    position: relative;
    width: calc(50% - 0.175rem);
    margin-right: 0.35rem;
}
.stl__embeded .cartitem .cartitem__body {
    position: relative;
    width: 70%;
    padding: 0.85em;
    box-sizing: border-box;
}
.stl__embeded .cartitem .cartitem__details {
    position: absolute;
    bottom: 0.85em;
    left: 0.85em;
    right: 0.85em;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.stl__embeded .cartitem .cartitem__image .cartitem__imagesrc {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
</style>
Leave a Comment