This topic contains 0 replies, has 1 voice, and was last updated by  Hanh Nguyen 10 months, 2 weeks ago. This post has been viewed 375 times

MCP Html Content

  • +) List style:

    -style 1:

    <ul class=”category-list”>  <li><a href=”#”>iPhone 6 Plus</a></li>  <li><a href=”#”>iPhone 6</a></li>  <li><a class=”read-more” href=”#”>View All</a></li></ul>

    -style 2:

    <ul class=”l-specs”>  <li><a href=”#”><i class=”fa fa-check”></i>Windows 8.1 64-bit</a></li>  <li><a href=”#”><i class=”fa fa-check”></i>Technical details: Core i7 Processor; 4GB memory; 1TB hard drive</a></li>  <li><a href=”#”><i class=”fa fa-check”></i>Special features: Built-in wireless networking and bluetooth</a></li></ul>

    -style 3:

    <ul class=”l-specs”>  <li><a href=”#”><i class=”fa fa-caret-right”></i>Desktop CPUs</a></li>  <li><a href=”#”><i class=”fa fa-caret-right”></i>Server CPUs</a></li>  <li><a class=”read-more” href=”#”><i class=”fa fa-caret-right”></i>Show All</a></li></ul>

    -style 4:

    <ul class=”small-list num-bullet”>  <li><a href=”#”>Xperia C3</a></li>  <li><a href=”#”>Asus MemoPad 8</a></li>  <li><a href=”#”>Toshiba Chromebook 2</a></li></ul>

    -style 5:

    <ul class=”small-list a-center”>  <li><a href=”#”>10 Point Touch</a></li>  <li><a href=”#”>Capacitive Touch</a></li>  <li><a href=”#”>Dual Point Touch</a></li></ul>

    +) effect with img content:

    -style 1:

    <div class=”container-ov overlay-icon”>  <img src=”http://livedemo.magebay.com/menupro/pub/media/mcpDemo/desktop.jpg”>  <a class=”fa fa-facebook” href=”#”></a>  <a class=”fa fa-twitter” href=”#”></a>  <a class=”fa fa-google-plus” href=”#”></a>  <a class=”fa fa-pinterest” href=”#”></a></div>

    -style 2:

    <div class=”container-img”>  <img src=”http://livedemo.magebay.com/menupro/pub/media/mcpDemo/notebook.jpg”>  <div class=”flipY-caption a-center item-fle”>    <h3>$1745.00</he>    <ul class=”inline-list”>      <li><a href=”#”><i class=”fa fa-link”></i></a></li>      <li><a href=”#”><i class=”fa fa-comment”></i></a></li>      <li><a href=”#”><i class=”fa fa-star”></i></a></li>      <li><a href=”#”><i class=”fa fa-shopping-cart”></i></a></li>    </ul>  </div></div>

    -style 3:

    <div class=”container-img”>  <img src=”http://livedemo.magebay.com/menupro/pub/media/mcpDemo/screen.jpg”>  <div class=”slideDown-caption a-center”>    <ul class=”small-list”>      <li><a href=”#”>10 Point Touch</a></li>      <li><a href=”#”>Capacitive Touch</a></li>      <li><a href=”#”>Dual Point Touch</a></li>      <li><a href=”#”>View All</a></li>    </ul>  </div></div>

    +) easy buld gird colum in block:

    <div class=”lg-row”>  <div class=”grid-column8″>    <div class=”sub-row”>      <div class=”grid-column4″>         your content      </div>      <div class=”grid-column4″>         your content      </div>      <div class=”grid-column4″>         your content      </div>    </div>  </div>  <div class=”grid-column4″>    your content  </div></div>

    <div class=”lg-row”>  <div class=”grid-column6″>      <div class=”full-r”>         your content      </div>      <div class=”full-r”>         your content      </div>  </div>  <div class=”grid-column6″>    <div class=”sub-row”>      <div class=”grid-column6″>         your content      </div>      <div class=”grid-column6″>         your content      </div>    </div>  </div></div>

You must be logged in to reply to this topic.