Planics Devloper

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

Showing posts with label card. Show all posts

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?

How to Design Skill Card using html and CSS Hello guys, Planics Devloper is providing HTML,CSS,BootStrap,JavaScript,PHP . If you w...


How to Design Skill Card using html and CSS

design skill card 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 hoverin 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

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 transformany object using only CSS.
Here we show, skill card using html and CSS. You can free use for as product card or review Card.


card.html
<!<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Planics dev</title>
    <link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
            <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
            <link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">
    <style>
      body{
        background-color:#fcfcfc;
      }
      .container{
        background-image:radial-gradient(#4b56f3,#400e9788);
        width: 250pt;
        height: 330pt;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        display: grid;
        place-items: center;
        overflow: hidden;
        text-align: center;
        border-radius: 20px;     }
       
       .box{
         width: 400pt;
         height: 240pt;
         border: 3pt solid rgba(255,255,255,.1);
         position: absolute;
       }
       .b1{
         transform: rotate(30deg);
       }
       .b2{
         transform: rotate(-30deg);
       }
       .profile{
         position: absolute;
         width: 80pt;
         height: 80pt;
         display: grid;
         place-items: center;
         top: 22pt;
         border: 3px solid rgba(255,255,255,.2);
         border-radius: 0 0 50% 50%;
       }
       img{
         position: absolute;
         width: 50pt;
         height: 50pt;
         border-radius: 50%;
         border: 2pt solid white;
       }

       .planics{
         color: #700a0a;
         position: absolute;
         top: 50pt;
         font-size:20pt ;
         text-shadow: 2px 2px 2px #c7f6ee;
         font-family: 'Quicksand',sans-serif;
         letter-spacing: 3pt;
         word-spacing: 3pt;
         text-decoration: underline;
                }
        .skills{
          width: 150pt;
          height: 150pt;
          position: absolute;
          left: 50%;
          top: 135pt;
          transform: translateX(-50%);
          font-family: cursive;
          overflow: hidden;
          text-align: center;
        }
        .skill{
          color: white;
          font-size: 18pt;
          position: relative;
          top: -10pt;
        }
        li{
          color: white;
          position: absolute;
          left: 15pt;
          top:40pt;
          font-size: 15pt;
        }
        li:nth-child(2){
          top: 70pt;;
        }
        li:nth-child(3){
          top: 100pt;
        }
        .html,.css,.js{
          border: 2px solid rgba(32,32,32,.6);
          width: 120pt;
          height: 5pt;
          border-radius: 10pt;
          position: absolute;
          left:50%;
          transform: translateX(-50%);
        }
        .html{
          top:60pt;
        }
        .css{
          top:88pt;
        }
        .js{
          top: 120pt;
        }

        .h{
          background-image: linear-gradient(to right,rgb(248,49,14),rgb(150,16,16));
          width: 80%;
          height: 3pt;
          border-radius: 10px;
          animation:h 2s ease-out;
          box-shadow: 0px 0px 2pt blue;
        }
        @keyframes h{
          0%{
            width: 0;
          }
        }

        .c{
          background-image: linear-gradient(to right,orange,red);
          width: 85%;
          height: 3pt;
          border-radius: 10px;
          animation: c 2s ease-out;
          box-shadow: 0px 0px 2pt red;
        }
        @keyframes c{
          0%{
            width: 0;
          }
        }
        .j{
          background-image: linear-gradient(to right,#22ff8d,green);
          width: 30%;
          height: 3pt;
          border-radius: 10px;
          animation: j 2s ease-out;
          box-shadow: 0px 0px 2pt #22ff8d;
        }
        @keyframes j{
          0%{
            width: 0;
          }
        }
        .location{
          width: 50pt;
          height: 50pt;
          position: absolute;
          bottom: 10pt;
          color: white;
          letter-spacing: 3pt;
          font-family: 'Righteous',cursive;
          display: grid;
          place-items: center;
          border-bottom:2px solid rgba(255,255,255,.3) ;
          border-radius: 0 0 50% 50%;
        }
        .fa{
          position: absolute;
          top: 3pt;
        }
        .India{
          -webkit-text-fill-color: transparent;
          -webkit-background-clip: text;
          background-image: linear-gradient(to right,orange,white,green);
          position: absolute;
          top: 5pt;
        }
    </style>
  </head>
  <body>
      <div class="container">
        <div class="b1 box">

        </div>
        <div class="b2 box">

        </div>
        <div class="profile">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtsQd1ScyjOEm3vBVFwvc3nYPK19M4FSNdgkV6m9mQeLs7gQSc7RK1v-qj1cvGV39Fo31kf7CcwHMqunX-hLKZnvQ7CNKnT27O1bDonWrk8NDzsIANDJxAUJ261KkUq1W49MV9j8AbdtPF/s320/IMG_20200511_233739_720.png" alt="">
            <p class="planics">Planics Dev</p>
        </div>
        <div class="skills">
            <p class="skill">My Skills</p>
            <ul>
              <li>Html</li>
              <li>CSS</li>
              <li>JavaScript</li>
            </ul>
            <div class="html">
                <div class="h"></div>
            </div>
            <div class="css">
              <div class="c"></div>
            </div>
            <div class="js">
              <div class="j"></div>
            </div>
        </div>
        <div class="location">
            <i class="fa fa-map-marker"></i><br>
            <p class="India"><b>India</b></p>
        </div>
      </div>
  </body>
</html>

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