Planics Devloper

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

How to Design Responsive 404 Error Page in only 5 minutes Hello guys, Planics Devloper is providing HTML,CSS,BootStrap,JavaScript,...


How to Design Responsive 404 Error Page in only 5 minutes

How to Design Responsive 404 Error Page in only 5 minutes

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

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 404 Error page in only 5 minutes.


404.html
Note: here it is only code if you want to download full then click Here
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>404 page not found</title>
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <header class="text-gray-700 body-font">
        <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
          <a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-red-500 rounded-full" viewBox="0 0 24 24">
              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
            </svg>
            <span class="ml-3 text-xl">Planics dev</span>
          </a>
          <nav class="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400   flex flex-wrap items-center text-base justify-center">
            <a class="mr-5 hover:text-gray-900">home</a>
            <a class="mr-5 hover:text-gray-900">service</a>
            <a class="mr-5 hover:text-gray-900">about</a>
            <a class="mr-5 hover:text-gray-900">more</a>
          </nav>
          <button class="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">Go to home
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
              <path d="M5 12h14M12 5l7 7-7 7"></path>
            </svg>
          </button>
        </div>
      </header>

      <section class="text-gray-700 body-font">
        <div class="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
          <img class="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="images/undraw_page_not_found_su7k.svg">
          <div class="text-center lg:w-2/3 w-full">
            <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">404 "page not found" ERROR</h1>
            <p class="mb-8 leading-relaxed">A 404 error is often returned when pages have been moved or deleted. ... 404 errors should not be confused with DNS errors, which appear when the given URL refers to a server name that does not exist. A 404 error indicates that the server itself was found, but that the server was not able to retrieve the requested page.</p>
            <div class="flex justify-center">
              <button class="inline-flex text-white bg-red-500 border-0 py-2 px-6 focus:outline-none hover:bg-red-600 rounded text-lg">Go to home</button>
              <button class="ml-4 inline-flex text-gray-700 bg-gray-200 border-0 py-2 px-6 focus:outline-none hover:bg-gray-300 rounded text-lg">More</button>
            </div>
          </div>
        </div>
      </section>
</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 using htmland 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?

Card Hover Effect using html and CSS. Hello guys, Planics Devloper is providing HTML,CSS,BootStrap,JavaScript,PHP . If you want ...


Card Hover Effect using html and CSS.

Card hover effect 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 ofanimation 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 transform any object using only CSS.
Here we show, card hover effect using html and CSS.


card.html
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>our services</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' media='screen' href="style.css">
</head>
<body>
    <div class="heading">
        <h1>our services</h1>
    </div> 
    <div class="container">
        <div class="card-container">
            <div class="full-card">
                <div class="card-content">
                    <h1>web design</h1>
                </div>
            </div>
            <div class="card">
                <div class="card-top hover1">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis obcaecati earum, qui natus doloribus porro.</p>
                </div>
            </div>
        </div>

        <div class="card-container">
            <div class="full-card">
                <div class="card-content">
                    <h1>web devlopment</h1>
                </div>
            </div>
            <div class="card">
                <div class="card-top hover2">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis obcaecati earum, qui natus doloribus porro.</p>
                </div>
            </div>
        </div>

        <div class="card-container">
            <div class="full-card">
                <div class="card-content">
                    <h1>UI/UX design</h1>
                </div>
            </div>
            <div class="card">
                <div class="card-top hover3">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis obcaecati earum, qui natus doloribus porro.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

{
    padding: 00px;
    margin:00px;
    box-sizing: border-box;
}
.heading
{
    height: 20vh;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:grey;
    background-color: #293241;
    font-size: 30px;
    box-sizing: border-box;
    padding-top: 20px;
}

.heading h1
{
    border-bottom: 1px solid gray;
}

.container
{
    height: 80vh;
    width:100%;
    display:flex;
    justify-content:space-evenly;
    align-items:center;
    background-color: #293241;
    color: grey;
    box-sizing: border-box;
}

.card-container
{
    height: 150px;
    width:250px;
    position: relative;
}

.full-card
{
    height: 100%;
    width:100%;
    box-shadow: 0px 10px 40px #001845;
    position: absolute;
    background-color: #293241;
    z-index: 5;
    display:flex;
    align-items:center;
    justify-content: center;
}


.card
{
    height: 100%;
    width:100%;
    position: absolute;
    z-index: 2;
}

.card-content
{
    text-align: center;

}

.card-top
{
    height: 100%;
    width:100%;
    position: absolute;
    top:00px;
    background-color: #ffba08;
    color:white;
    transition: all .5s;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
}

.card-container:hover .hover1
{
   
    top:-80%;
    transform:rotate(30deg) scale(1.1);

}

.card-container:hover .hover2
{
    top:-80%;
    transform: scale(1.1);

}
.card-container:hover .hover3
{
    top:-80%;
    transform:rotate(30deg) scale(1.1);

}

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)