<!DOCTYPE html>
<html>

<head>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i"
        rel="stylesheet">    

    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">


<style>
    ul.two-button li a:focus {
    outline: none;
    box-shadow: none;
  }   

    .wrapper{
        width: 100%;
    }

h1{
    font-size: 48px;
    line-height: 58px;
    margin-top: 0px;
    font-family: "Roboto Slab",palatino,serif;
    color: #444444;
    font-weight: 300;
    letter-spacing: -.2px;
}

.top-left h1 span {
    display: block;
    margin-top: 21px;
    font-size: 21px;
    line-height: 28px;
    font-weight: 400;
}

p{
       font-size: 18px;
       font-weight: 300;
       line-height: 22px;
       font-family: Roboto,arial,sans-serif;
       color: #444444;

}
.wrapper img{
    max-width: 100%!important;
}

.top {
    display: flex;
    align-items: center;
    padding: 80px 20px 80px 50px;
    
}

.top-left{
    width: 50%;
    /*padding-right: 50px;*/
    padding-right: 2%;
}

.top-left ul.listing-alpha{
  padding-left: 20px;
}
.top-left ul.listing-alpha li {
    font-size: 17px;
    font-weight: 300;
    line-height: 22px;
    font-family: Roboto,arial,sans-serif;
    color: #444444;
}

.top-right-image{
    /*width: calc(100% - 55%);*/
    /*padding-left:90px;*/
    text-align: left;
    /*width: 44%;*/
    width: calc(100% - 53%);
}
.site-width {
    margin: 0 auto;
    width: 100%;
}

.top-section,
.bootom-section {
    background: #fff;
}

.middle-section{
    /*min-height: 600px;*/
}

.middle-section.light-grey {
    background: #f6f6f6;
}


ul.two-button li a {
     text-decoration: none;
    font-size: 18px;
     padding: 10px 20px;
     font-family: "Roboto Slab",palatino,serif;
}

ul.two-button li:nth-of-type(1) a{
  color: #fff;
  background:#e7803e;
  border:1px solid #e7803e;
}

ul.two-button li:nth-of-type(2) a{
  color: #000;
  background:#fff;
  border: 1px solid #000;
  margin-left: 5px;
}

.top-button {
    padding-top: 30px;
    padding-bottom:20px;    
}


ul.two-button{
  display: flex;
  justify-content: center;
}
a.msg91 {
    text-decoration: none;
    padding: 9px 19px;
    display: inline-block;
    color: #fff;
    background: #e7803e;
    font-weight: 500;
    margin-left: 10px;
    border-radius: 5px;
}
a.msg91:hover {
    color:#fff;
}

</style>
</head>


<body>
<div class="main">
    <div class="wrapper">
        
        <div class="top-section">
            <div class="site-width">
                <div class="top-button">
                    <ul class="two-button">
                      <li><a target="_blank" href="https://phoeniixx.com/product/color-image-swatches-woocommerce/">UPGRADE TO PREMIUM VERSION</a></li>
                      <li><a target="_blank" href="https://colorswatches.phoeniixxdemo.com/shop/">LIVE DEMO</a></li>
                    </ul>

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

          <div class="top-section">
            <div class="site-width">
                <div class="top">

            <div class="top-left">
                    <h1>Display Swatches on Shop Page</h1>
                  
                                     
            </div>

            <div class="top-right-image">
                <img src="/wp-content/plugins/color-and-image-swatches-for-variable-product-attributes/images/color-swatch-6.jpg">
              
               

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

     <div class="middle-section light-grey">
            <div class="site-width">
                <div class="top">

            <div class="top-left">
                    <h1>Bi-Color Based Swatches</h1>
                                                      
            </div>

            <div class="top-right-image">
             
             <img src="/wp-content/plugins/color-and-image-swatches-for-variable-product-attributes/images/color-swatch-5.jpg">

             


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

     <div class="middle-section light-grey">
            <div class="site-width">
                <div class="top">

            <div class="top-left">
                    <h1>Icon Based Swatches</h1>
                                                      
            </div>

            <div class="top-right-image">
             
             <img src="/wp-content/plugins/color-and-image-swatches-for-variable-product-attributes/images/color-swatch-3.jpg">
 


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

     <div class="middle-section light-grey">
            <div class="site-width">
                <div class="top">

            <div class="top-left">
                    <h1>Radio Button Based Swatches</h1>
                                                      
            </div>

            <div class="top-right-image">
                       
             
             <img src="/wp-content/plugins/color-and-image-swatches-for-variable-product-attributes/images/color-swatch-4.jpg">

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

     <div class="middle-section light-grey">
            <div class="site-width">
                <div class="top">

            <div class="top-left">
                    <h1>Dropdown Based Swatches</h1>
                                                      
            </div>

            <div class="top-right-image">
             <img src="/wp-content/plugins/color-and-image-swatches-for-variable-product-attributes/images/color-swatch-2.jpg">
            


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


     
<div class="middle-section light-grey">
            <div class="site-width">
                <div class="top">
            <div class="top-left">
                <h1>Product Based Swatches</h1>
                
            </div>

            <div class="top-right-image">
             <img src="/wp-content/plugins/color-and-image-swatches-for-variable-product-attributes/images/color-swatch-1.jpg">


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


       


   



         <div class="bootom-section">
            <div class="site-width">
                <div class="top-button bottom-button">
        <ul class="two-button">
                      <li><a target="_blank" href="https://phoeniixx.com/product/color-image-swatches-woocommerce/">UPGRADE TO PREMIUM VERSION</a></li>
                      <li><a target="_blank" href="https://colorswatches.phoeniixxdemo.com/shop/">LIVE DEMO</a></li>
                    </ul>

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



    </div>

</div>

   
</body>
</html>


