Planics Devloper

planics Devloper provide Website,program,project,software related content.specially providing web designning, we provide I.T. related content.

Awesome Product  card using Only Html and CSS Hello guys, Planics Devloper is providing HTML,CSS,BootStrap,JavaScript,PHP . If you...


Awesome Product card using Only Html and CSS


Hello guys, Planics Devloper is providing HTML,CSS,BootStrap,JavaScript,PHP. If you want any design then copy code from our post otherwise watch our video on blog.
If you want to design card hover or something then click here and get latest design
                                                                 free  Click here
How to design Best product card hover in 2020?
design beautiful card hover amination using html and CSS . you learn in this video how to flip card using html and CSS.
How to design different type of animation in one loader using html and css?
How to design Skill card using html and css?
Free Cards Effect in HTML with CSS
how to design animated card for website so please check it out in YouTube.
mouse hover flip animation on card  using pure html and CSS. Here we show how to transform any object using only CSS.
Here we show, Responsive Product card using html and CSS. You can free use for as product card or review Card for your site.


card.html
<html>
    <head>
        <title>
            Best Product card by Planics Dev
        </title>
        <!-- Here Add Font bootstrap link and Css Class Bootstrap Link -->
        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

        <style>
                body{
                    display:flex;
                    align-items: center;
                    justify-content: center;
                    height: 100vh;
                    width: 100%;
                    background: #eef;
                }
                *{
                    padding: 5px;
                    margin: 0px;
                    box-sizing: border-box;
                }
                .card-wrap{
                    background: #fff;
                    width: 300px;
                    border-radius: 5px;
                    overflow: hidden;
                    box-shadow: 0 0 10px rgba(0,0,0,0.2);
                }
                .card-image{
                    position: relative;
                }
                .card-image img{
                    width: 100%;
                }
                .card-image .cart-icon{
                    position: absolute;
                    top:10px;
                    right: 10px;
                    display: inline-flex;
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    border: 2px solid rgb(255,69,0);
                    align-items: center;
                    justify-content: center;
                    background: rgb(255,99,71);
                    box-shadow: 0 0 10px rgba(0,0,0,0.2);
                }
                .card-image .cart-icon a{
                    text-decoration: none;
                    color:#fff;
                    font-size: 18px;
                }
                .card-content{
                    padding: 15px;
                }
                .card-content h2{
                    margin-bottom: 10px;
                }
                .card-content p{
                    margin-bottom: 10px;
                    opacity: 0.8;
                }
                .buy-btn{
                    display: inline-block;
                    text-decoration: none;
                    padding: 10px 20px;
                    background: rgb(0,0,0,0.8);
                    color: #fff;
                    border-radius: 5px;
                }

        </style>
    </head>
    <body>
    <div class="container card">
        <div class="row">
            <div class="col-12 col-md-6 col-lg-4">
                <div class="card-wrap">
                    <div class="card-image">
                        <img src="You can add here image link " alt="image">
                        <span class="cart-icon"><a href="#" ><i class="fa fa-shopping-cart"></i></a></span>
                    </div>
                    <div class="card-content">
                    <h2>Electronic gadgets</h2>
                    <p>All Type of Mobile Phone,Tablets, Monitor, Desktop and laptop are Best Quality</p>
                    <a href="#" class="buy-btn">Buy Now</a>
                    </div>

                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <div class="card-wrap">
                    <div class="card-image">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRAKOi7a1Mo34iR-UBLunK6Se2qomKJd154Lqf0gIk_chG23u8h&usqp=CAU" alt="image">

                        <span class="cart-icon"><a href="#" ><i class="fa fa-shopping-cart"></i></a></span>
                    </div>
                    <div class="card-content">
                    <h2>Electronic gadgets</h2>
                    <p>All Type of Mobile Phone,Tablets, Monitor, Desktop and laptop are Best Quality</p>
                    <a href="#" class="buy-btn">Buy Now</a>
                    </div>

                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <div class="card-wrap">
                    <div class="card-image">
                         <img src="Here You can add image link " alt="image">
                        <span class="cart-icon"><a href="#" ><i class="fa fa-shopping-cart"></i></a></span>
                    </div>
                    <div class="card-content">
                    <h2>Electronic gadgets</h2>
                    <p>All Type of Mobile Phone,Tablets, Monitor, Desktop and laptop are Best Quality</p>
                    <a href="#" class="buy-btn">Buy Now</a>
                    </div>

                </div>
            </div>
        </div>
    </div>
    </body>
</html>
How to Design round animated loader using html and css?
How to design home page for car using html and css ?
How to design web page using adobe XD?
How to design different loader using html and css?

Navigation Menubar using html and CSS Hello guys, Planics Devloper is providing HTML,CSS,BootStrap,JavaScript,PHP . If you want an...


Navigation Menubar using html and CSS

Navigation Menubar using html and CSS

Hello guys, Planics Devloper is providing HTML,CSS,BootStrap,JavaScript,PHP. If you want any design then copy code from our post otherwise watch our video on blog.

If you want to design card hover or something then click here and get latest design
                                                                 free  Click here
How to design Best product card hover in 2020?
design beautiful card hover amination using html and CSS . you learn in this video how to flip card using html and CSS.

How to design different type of animation in one loader using html and css?


Free Cards Effect in HTML with CSS
skill card using html and CSS. You can free use for as product card or review Card.
mouse hover flip animation on card  using pure html and CSS. Here we show how to transform any object using only CSS.
Here we show, how to design Responsive navbar using html and css.


Nav.html
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>navs</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
    <link rel='stylesheet' type='text/css'  href="style.css">
</head>
<body>
    <header>
        <div class="navigation">
            <div class="logo">
                <img src="folwerWithoutname.png">
            </div>
            <div class="menu">
                <a href="#">home</a>
                <a href="#">contact</a>
                <a href="#">services</a>
                <a href="#">about</a>
                <a href="#">mores</a>
            </div>
            <div class="btn-login">
                <a href="#">login</a>
            </div>
        </div>
    </header>
</body>
</html>

How to Design round animated loader using html and css?

style.css
/* background-color:#4361ee;
border-bottom:1px solid #f07167; */
*
{
    margin:00px;
    padding:00px;
    font-family: 'Roboto', sans-serif;
   
}
.navigation
{
    height: 100vh;
    width: 100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.logo
{
    height: 80px;
    width:80px;
}
.logo img
{
    height: 100%;
    width:100%;
}
.menu a
{
    margin-right: 20px;
    text-decoration: none;
    color:black;
    transition: all 1s;
    outline: none;
}


.menu a:hover
{
    background-color:#4361ee;
    font-size:20px;
    color:white;
    padding:10px;
    border-radius:10px;
    outline:none;
}

.btn-login
{
    margin:20px;
}
.btn-login a
{
    background-color:#f07167 ;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    color: white;
    outline: none;
   
}

How to design home page for car using html and css ?How to design web page using adobe XD?How to design different loader using html and css? 
Subscribe to: Posts (Atom)