ProductItemCard

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .Productist{
            display: flex;
            gap: 3px;
            flex-wrap: wrap;
        }
        .ProductItem{
            height: 200px;
            position: relative;
            width: 200px;
            background: #80c79c;
            overflow: hidden;
        }

        .ProductItem img{
            width: 100%;
        }
        .new{
            background: yellow;
            padding: 9px;
            padding-top: 5px;
            border-radius: 5px;
            font-weight: bold;
            position: absolute;
            /* right: 0; */
        }
        .dis{
            background: #ff0052;
            padding: 9px;
            padding-top: 5px;
            border-radius: 5px;
            font-weight: bold;
            color: wheat;
            position: absolute;
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
<div class="Productist">
    <!---------Product 1---------->
    <div class="ProductItem">
        <span class="new">New</span>
        <span class="dis">10% Off</span>
        <img src="../1.webp">
    </div>
    <!---------Product 1---------->
    <!---------Product 1---------->
    <div class="ProductItem">
        <span class="new">New</span>
        <span class="dis">10% Off</span>
        <img src="../2.webp">
    </div>
    <!---------Product 1---------->
    <!---------Product 1---------->
    <div class="ProductItem">
        <span class="new">New</span>
        <span class="dis">10% Off</span>
        <img src="../3.webp">
    </div>
    <!---------Product 1---------->
    <!---------Product 1---------->
    <div class="ProductItem">
        <span class="new">New</span>
        <span class="dis">10% Off</span>
        <img src="../1.webp">
    </div>
    <!---------Product 1---------->
    <!---------Product 1---------->
    <div class="ProductItem">
        <span class="new">New</span>
        <span class="dis">10% Off</span>
        <img src="../2.webp">
    </div>
    <!---------Product 1---------->
    <!---------Product 1---------->
    <div class="ProductItem">
        <span class="new">New</span>
        <span class="dis">10% Off</span>
        <img src="../3.webp">
    </div>
    <!---------Product 1---------->
</div>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

pesudo element

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> . box { height : 200 px ; width : 200 px ; background : #22bf60 ; } . box : hover { height : 250 px ; width : 250 px ; background : red ; } . p : first-line { color : red ; } . p : before { content : "*" ; color : green ; font-size : x-large ; } . p : after { content : '*' ; color : green ; font-size : x-large ; } . p : first-letter { color : #042a84 ; font-size : x-large ; } </style> </head> <body> <div class ="box" > </div> <p class ="p" > CSS pseudo-elements a...
Read more

sticky

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> . menu { background : #22bf60 ; height : 50 px ; font-size : large ; position : sticky ; top : 0 px ; } p { width : 20 % ; } </style> </head> <body> <p> CSS gives you an opportunity to create layers of various divisions. The CSS layers refer to applying the z-index property to elements that overlap with each other.M <br> The z-index property is used along with the position property to create an effect of layers. You can specify which element should come on top and which element should come at bottom. <br> A z-index property can help you to create more complex webpage layouts. The following example shows how to create layers in CSS. <b...
Read more