Code Blast

Posts

Showing posts with the label CSS3

How to create Instagram Icon in HTML & CSS3

- September 29, 2022

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

Code Card

- April 03, 2022

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

Voice assistant Alpha

- December 30, 2021

Voice Assistant in JavaScript Alpha Hey ! I Am A Virtual Assistant Talk

- December 23, 2021

Mickey Mouse 🐭 using CSS mickey mouse

- December 15, 2021

Colourful Animation Rain

Message box Chat app UI Design

- December 12, 2021

Message Ashish Kumar Online Today Hello bro what's up ? 09:30 P.M nothing bro !!! 09:30 P.M

- November 15, 2021

Ambient Light Effect

Covid19 Update

- October 20, 2021

COVID-19 Update {{title}} Coronavirus disease (COVID-19) is an infectious disease caused by the SARS-CoV-2 virus. Most people who fall sick with COVID-19 will experience mild to moderate symptoms and recover without special treatment. However, some will become seriously ill and require medical attention. Confirm Cases {{all_data.confirmed.value}} Deaths Cases {{all_data.deaths.value}} {{c}} status Confirm Cases {{c_data.confirmed.value}} Deaths Cases {{c_data.deaths.value}}

- August 23, 2021

Filterable Image Gallery All Bag Shoe Watch Camera Headphone Image Category:

Loader Animation

- August 08, 2021

Loader

How to get colour HEX value using JavaScript

- August 02, 2021

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

- July 28, 2021

TODOs List TODOs List Title Description Add Item Clear list Your Items S.No Title Description Action

Time wisher

- July 09, 2021

Automatic Time Wisher Automatic Time Wisher Toggle

Portrait Image mode

- July 06, 2021

CSS Portait mode Image

Loading

- June 23, 2021

Google photo Icon in CSS

- June 22, 2021

CSS Code *{ padding:0; margin:0; } body { width:100%; height:100vh; background:#f6f6f6; display:flex; justify-content:center; align-items:center; } .center{ width:300px; height:300px; display:flex; justify-content:center; align-items:center; position:relative; } .red { width:80px; height:40px; background:red; position:absolute; border-radius:50px 50px 0px 0px; transform:rotate(90deg); } .yellow { width:80px; height:40px; background:#E5D900; position:absolute; border-radius:50px 50px 0px 0px; transform:rotate(0deg); left:16.50%; top:50%; } .green { width:80px; height:40px; background:#03AE00; position:absolute; border-radius:50px 50px 0px 0px; transform:rotate(270deg); left:23.24%; top:70.1%; } .sky { width:80px; height:40px; background:#008CFF; position:absolute; border-radius:50px 50px 0px 0px; transform:rotate(180deg); left:43.40%; top:63.42%; } HTML Code <div class="center"> <div class="...

Search This Blog