Posts

How to create Instagram Icon in HTML & CSS3

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Instagram Icon in CSS3</title> <style type="text/css"> *{ margin:0; padding:0; box-sizing:border-box; } body { height:100vh; display:grid; place-items:center; background-color:#000000; } .IG { width:45px; height:45px; background:transparent; border-radius:12px; border:3px solid aqua; display:flex; justify-content:center; align-items:center; position:relative; cursor:pointer; } .IG:before{ content:""; height:13px; width:13px; border-radius:50%; border:3px solid aqua; } .IG:after{ content:""; position:absolute; top:5px; right:6px; border-radius:50%; border:2px solid aqua; } </style> </head> <body> <div class="IG"></div> </a> </body> </html>

3D Pyramid

<style type="text/css"> .container { max-width:100%;   width: 400px;   height: 400px;   margin: 0 auto;   position: relative;   perspective: 400px;   perspective-origin: 50% 40%; } .side {   position: absolute;   left: 140px;   top: 150px;   width: 0;   height: 0;   border-left: 60px solid transparent;   border-right: 60px solid transparent;   border-bottom: 120px solid #ccc;   transform-origin: 50% 0%;   animation: spin 5s infinite linear; } .back {   animation-delay: -2.5s; } .right {   animation-delay: -1.25s; } .left {   animation-delay: -3.75s; } @keyframes spin {   0% {     transform: rotateY(0deg) rotateX(30deg);     border-bottom-color: #1abcff;   }   25% {     transform: rotateY(90deg) rotateX(30deg);     border-bottom-color: #00a2e6;     opacity: 1;   }   25.1% {     opacity: 0;   }   50% {     transform: rotateY(180deg) rotateX(30deg);     border-bottom-color: #0089c2;   }   74.9% {     opacity: 0;   }   75% {     transform: rotat...
Animation
animation water

Mobile Console

Mobile console
https://androidapksfree.com/firefox/org-mozilla-firefox/download-old/firefox-68-6-0-apk/ Download Firefox 68.6.0 version APK

Code Card

* { padding: 0 ; margin: 0 ; box-sizing: border-box ; }