Ads Top

How to create custom html for the product category boxes?


Custom HTML for the product boxes:

Product categories boxes for the most important thing that we need to use CSS "displayinline-block;". This property will align all category boxes in one line. As given below more category example:

Categories box design 1:

<style>
        .categorySection1 {
            padding30px;
        }
        .categorySection1 ul {
            margin20px 0;
            padding0;
            list-stylenone;
            text-aligncenter;
        }
        .categorySection1 ul li {
            displayinline-block;
            margin1%;
            width16%;
            text-aligncenter;
            vertical-aligntop;
            positionrelative
        }
        .categorySection1 p {font-weight700;color#0bf;margin15px auto;}
 .categorySection1 img {width127px; }
        @media(max-width:767px) {
            .categorySection1 {padding15px;}              
 .categorySection1 ul li { margin2% 0;width48%; } 
.categorySection1 p {padding0 15px;}       
} 
        @media(max-width:414px) { 
.categorySection1 ul li {margin2% 0; width100%;}
}    
</style>

<div class="categorySection1">
<ul>            
<li>
    <div><img src="images/dummyImage.png" alt="Dummy"></div>                             <p>HTML 5 your dummy content will come</p>            
</li>            
<li>
    <div><img src="images/dummyImage.png" alt="Dummy"></div>                             <p>Reactjs your dummy content</p>            
</li>            
<li>
    <div><img src="images/dummyImage.png" alt="Dummy"></div>                             <p>Angular your dummy </p>            
  </li>  
 <li>
          <div><img src="images/dummyImage.png" alt="Dummy"></div>
         <p>Angular js your dummy content</p>            
 </li>
  <li>
        <div><img src="images/dummyImage.png" alt="Dummy"></div> 
        <p>Amp your dummy content will come</p>
</li>        
</ul>    
</div>
.............................................................

Product box design 2:

/* CategorySection2 */
        .categorySection2 {
            padding30px;
        }

        .mysliderBox {
            background#fff;
            border-radius5px;
            box-shadow0 0 15px 1px #f1f1f1;
            text-aligncenter;
            padding20px;
            transitionall 0.5s;
            width300px;
            margin-top80px;
        }

        .mysliderBox h3 {
            font-weight700 !important;
            font-size20px !important;
            color#333 !important;
            margin0 0 10px 0;
        }

        .mysliderBox p {
            font-size15px;
            color#666;
            min-height48px;
            margin0;
        }

        .mysliderBox img {
            margin-top-80px;
            margin-bottom15px;
        }

        .mysliderBox:hover {
            box-shadow0 0 15px 1px #ccc;
            transitionall 0.5s;
            transform: scale(1.1);
        }
 <div class="categorySection2">
        <h3>Product box design 2</h3>
        <div class="mysliderBox">
            <div><a href="#">
    <img src="images/dummyImage.png" width="150" alt="Dummy"></a></div>
            <h3><a href="#">Javascript</a></h3>
            <p>Your dummy content will come</p>
        </div>
    </div>
.............................................................

Product box design 3 (bootstrap boxes)


    <div class="categorySection3" style="width: 300px;">
        <img src="images/dummyImage.png" alt="Cate">
        <h3>TypeScript</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
 
/* CategorySection3 */
        .categorySection3 {
            padding20px;
            text-aligncenter;
            /* optional */
            border1px solid #ccc;
        }

        .categorySection3 img {
            width100px;
        }

        .categorySection3 h3 {
            font-weight600;
            color#0bf;
            margin10px 0;
        }

        .categorySection3 p {
            font-family'arial'sans-serif;
            color#000;
            font-size16px;
            font-weight700;
        }
 
.............................................................
 

Product box design 4

 

    <div class="CategorySection4">
        <ul>
            <li>
                <div class="cateMore"><img src="images/dummyImageSquar.png" alt="Product" class="img-fluid"></div>
                <h4>Yonex Vcore 100 Tennis Racket 2019 (300g)</h4>
                <div class="lowPrice">as low as: <span>£144.00</span></div>
            </li>
            <li>
                <div class="cateMore"><img src="images/dummyImageSquar.png" alt="Product" class="img-fluid"></div>
                <h4>Yonex Vcore 100 Tennis</h4>
                <div class="rateFooter"><span>£300.99</span> £121.00 </div>
            </li>
        </ul>
    </div>
 
/* CategorySection4 */
        .CategorySection4 ul {
            margin10px 0;
            padding0;
            list-stylenone;
            text-aligncenter;
        }
        .CategorySection4 ul li {
            displayinline-block;
            margin1%;
            width14%;
            text-aligncenter;
            vertical-aligntop;
            positionrelative
        }
        .CategorySection4 img {
            width100%;
        }
        .CategorySection4 h4 {
            font-size15px;
            color#3d464d;
            text-alignleft;
            margin10px 0;
        }
        .CategorySection4 .rateFooter span {
            font-size20px;
            font-weight700;
            color#777;
            text-decorationline-through;
        }
        .CategorySection4 .rateFooter {
            color#0b6;
            text-alignleft;
            font-size20px;
            font-weight700;
        }
        .CategorySection4 .lowPrice {
            font-size13px;
            font-familyarial;
            text-alignleft;
        }
        .CategorySection4 .lowPrice span {
            color#0b6;
            font-size20px;
            font-weight700;
        }
 
.............................................................
   

No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.