Posts

Showing posts with the label html

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

How to used Tailwindcss CDN link in your project with Example

-
Tailwind CSS Background Colour How to used Tailwind CSS:- Example:- <div class="bg-blue-700"></div> 100 200 300 400 500 600 700 800 900
Post a Comment
Read more

Background Animation with HTML, CSS & JavaScript

-
BG Animation
Post a Comment
Read more
-
New Year Time Wishing
Post a Comment
Read more

Image slideshow in pure CSS

-
Slideshow Images Slidehow
Post a Comment
Read more

Angular Js V/S Vanilla Js

-
Result Here:
Post a Comment
Read more

How to get colour HEX value using JavaScript

-
Get Colour HEX value My Colour Pick Select your colour... Colour HEX Value: Color introduced in HTML5 in <input type="color" /> type. We are create a JavaScript function. there we are used inline javascript in input tag. In this tag using onchange method. So we Access the color HEX value in the script. index.html <div class="wrapper"> <h2> My Colour Pick </h2> <p> Select your colour... </p> <input type="color" id="colour" onchange="myColour()" /> <p id="pick">Colour HEX Value: <span id="result"></span> </p> </div> style.css .wrapper { width:300px; height:200px; margin:auto; display:grid; background-color:#f1f1f1f1; place-items:center; border-radius:12px; box-shadow:2px 2px 20px rgba(0,0,0,0.4); } .wrapper #colour { height:40px; width:80px; } h2{ color:blue; } p { color:green; text-alig...
1 comment
Read more