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 "display: inline-block;". This property will align all category boxes in one line. As given below more category example:

Categories box design 1:

<style>

        .categorySection1 {

            padding: 30px;

        }

        .categorySection1 ul {

            margin: 20px 0;

            padding: 0;

            list-style: none;

            text-align: center;

        }

        .categorySection1 ul li {

            display: inline-block;

            margin: 1%;

            width: 16%;

            text-align: center;

            vertical-align: top;

            position: relative

        }

        .categorySection1 p {font-weight: 700;color: #0bf;margin: 15px auto;}

 .categorySection1 img {width: 127px; }

        @media(max-width:767px) {

            .categorySection1 {padding: 15px;}              

 .categorySection1 ul li { margin: 2% 0;width: 48%; } 

.categorySection1 p {padding: 0 15px;}       

} 

        @media(max-width:414px) { 

.categorySection1 ul li {margin: 2% 0; width: 100%;}

}    

</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 {

            padding: 30px;

        }

        .mysliderBox {

            background: #fff;

            border-radius: 5px;

            box-shadow: 0 0 15px 1px #f1f1f1;

            text-align: center;

            padding: 20px;

            transition: all 0.5s;

            width: 300px;

            margin-top: 80px;

        }

        .mysliderBox h3 {

            font-weight: 700 !important;

            font-size: 20px !important;

            color: #333 !important;

            margin: 0 0 10px 0;

        }

        .mysliderBox p {

            font-size: 15px;

            color: #666;

            min-height: 48px;

            margin: 0;

        }

        .mysliderBox img {

            margin-top: -80px;

            margin-bottom: 15px;

        }

        .mysliderBox:hover {

            box-shadow: 0 0 15px 1px #ccc;

            transition: all 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 {

            padding: 20px;

            text-align: center;

            /* optional */

            border: 1px solid #ccc;

        }

        .categorySection3 img {

            width: 100px;

        }

        .categorySection3 h3 {

            font-weight: 600;

            color: #0bf;

            margin: 10px 0;

        }

        .categorySection3 p {

            font-family: 'arial', sans-serif;

            color: #000;

            font-size: 16px;

            font-weight: 700;

        }

 

.............................................................

 

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 {

            margin: 10px 0;

            padding: 0;

            list-style: none;

            text-align: center;

        }

        .CategorySection4 ul li {

            display: inline-block;

            margin: 1%;

            width: 14%;

            text-align: center;

            vertical-align: top;

            position: relative

        }

        .CategorySection4 img {

            width: 100%;

        }

        .CategorySection4 h4 {

            font-size: 15px;

            color: #3d464d;

            text-align: left;

            margin: 10px 0;

        }

        .CategorySection4 .rateFooter span {

            font-size: 20px;

            font-weight: 700;

            color: #777;

            text-decoration: line-through;

        }

        .CategorySection4 .rateFooter {

            color: #0b6;

            text-align: left;

            font-size: 20px;

            font-weight: 700;

        }

        .CategorySection4 .lowPrice {

            font-size: 13px;

            font-family: arial;

            text-align: left;

        }

        .CategorySection4 .lowPrice span {

            color: #0b6;

            font-size: 20px;

            font-weight: 700;

        }

 

.............................................................