Posts

Figma

-
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Figma Logo</title> <style type="text/css"> body { padding: 0; margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: azure; } .figma-logo { width: 200px; display: flex; flex-wrap:wrap; } .element { width: 100px; height: 100px; background: red; } .left { border-top-left-radius: 50px; border-bottom-left-radius: 50px; } .right { border-top-right-radius:50px; border-bottom-right-radius:50px; } .circle { border-radius:50px; } .clip { border-bottom-right-radius:50px; } .orange { background: #FB7266; } .purple { background: #A061FA; ...
Post a Comment
Read more

Figma logo

-
Figma Logo
Post a Comment
Read more

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>
Post a Comment
Read more

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...
Post a Comment
Read more
-
Animation
Post a Comment
Read more
-
animation water
Post a Comment
Read more