Posts

Showing posts with the label css

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>

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

Background Animation with HTML, CSS & JavaScript

BG Animation
New Year Time Wishing

Image slideshow in pure CSS

Slideshow Images Slidehow
Image
Tic Tac Toe MyTicTacToe.com Welcome to Tic Tac MyTicTacToe Turn for X Reset

Game vanilla script

Game Restart UP LEFT RIGHT DOWN

Ping Pong game || p5js

Pong Game In p5.js

CSS Water Drop

CSS Water Drop

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...