code feat

Posts

Showing posts with the label html

Progress bar using HTML/CSS

(switch to desktop mode for better experience) # html code : <! DOCTYPE html > < html lang = "en" > < head > < link href = 'E:\html\testpro\style.css' rel = 'stylesheet' > < 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 > progress bar </ title > </ head > < body > < div class = "box" > < h1 >< u > progress bar </ u > : </ h1 > < h2 id = 'h1' > c </ h2 > < span class = 'c' id = 'bar1' ></ span > < h2 id = 'h2' > c++ </ h2 > < span class = 'cpp' id = 'bar2' ></ span > &

BMI Calculator

Today; in the era of fast changing world where we've prioritized our job, one thing that is being highly compromised is our Health. Recently we've been through the CORONA crisis where we've acknowledge that how weak our immune system is. Bad eating habits and lack of sleep can get you anxiety, stress, fatigue and weakness all over your body. So the question arise: What should we do? One little thing that we could do is to know our Body Mass Index ; the BMI score. BMI is a measurement of a person’s weight with respect to his or her height. It is more of an indicator than a direct measurement of a person’s total body fat. BMI correlates with total body fat. This means that as the BMI score increases, so does a person’s total body fat. The WHO defines an adult who has a BMI below 18.5 is considered Underweight, between 18.5 to 24.9 a Healthy weight, a BMI between 25 and 29.9 as Overweight, and an adult who has a BMI of 30 or higher is considered Obese. BMI

Weather Web App

*This is a Weather Web App build using HTML/CSS and JS Note : Enter any city name of your choice to check the weather updates. You can even try city names from different countries (like New York, London, Tokyo, Toronto, Paris) and it will give you the weather updates of that particular city. #For Quote and Joke generator : click here #For Number Guessing Game : click here

Quote and Joke Generator

*This a random quote and jokes generator. #The first one is a random quote generator. You will get a new quote every time you click on the button. #The second one is a random joke generator. You will get a new joke every time you click on the button. For Number Guessing Game : click here //click on the button to get a quote //-author get a quote //click on the button to get a joke get a joke

Number Guessing Game

* Enter a number between 1 and 10. Note : Firstly, enter the number in the input box. If your guessed number is equal to the computer generated number then you win. If your guessed number is not equal to the computer generated number then a message will be displayed like "you guessed too high" or "you guessed too low". So enter the number and hit the play button. (To play more after you win the game just refresh the page) play #For Temperatue Converter: click here </html

Analog Clock

# html code ==>> <!DOCTYPE html> <html lang="en"> <head> <link href='E:\html\testpro\style.css' rel='stylesheet'> <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>clock</title> </head> <body> <div class="box"> <div class="clock"> <div class="hand" id='hr'></div> <div class="hand" id='min'></div> <div class="hand" id='sec'></div> <div class="point"></div> </div> <img src="C:\Users\Pratik\Pictures\Screenshots\clock.png" alt="clock"> </div> <script src=&qu

Code for temperature converter

# html code ==>> <html> <body> <form> <div id="celsius"> <input placeholder="celsius" type="number" /> </div> <br /><br /> <div id="fahrenheit"> <input placeholder="fahrenheit" type="number" /> </div> <br /><br /> <div id="kelvin"> <input placeholder="kelvin" type="number" /> </div> <br /><br /> <input id="reset" type="reset" value="reset" /> </form> </body> </html> # css code ==>> *{ margin: 0; padding: 0; box-sizing: border-box; } input{ position: relative; border: none; outline: none; color: #000; borde

Temperature Converter

temp Click on the given boxes and insert the number you want to convert into. For code: click here For Analog Clock: click here

Mini Calendar using HTML/CSS and JS

# html code ==>> <!DOCTYPE html> <html lang="en"> <head> <link href='E:\html\testpro\style.css' rel='stylesheet'> <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>mini_calendar</title> </head> <body> <div class="calendar"> <p id='monthname'></p> <p id='dayname'></p> <p id='daynumber'></p> <p id='year'></p> </div> <script src='E:\html\testpro\script.js' rel='text/js'></script> </body> </html> # css code ==>> *{ box-sizing: border-box; margin: 0; padding: 0; } body{ display: flex; background-color: #000;

Digital Clock using HTLM/CSS & JS

# html code ==>> <!DOCTYPE html> <html lang="en"> <head> <link href='E:\html\testpro\style.css' rel='stylesheet'> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap" rel="stylesheet"> <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>clock</title> </head> <body> <div class="container"> <h2>digital clock</h2> <div class="clock"> <p id='time'></p> </div> </div> <script src='E:\html\testpro\script.js' rel='text/js'></script> <

Login form using html/css

{html code} <html> <head> <link href='E:\html\.vscode\.vscode\style.css' type='text/css' rel='stylesheet'> <title>Login Page</title> <style> a:hover{color: red;} a:active{color: yellow;} </style> </head> <body> <div class='container'> <div class="head"><h3>* Login form</h3></div> <input class='id' placeholder="email or username" > <br><br><br> <input class='password' placeholder="password" type='password'> <br><br><br><br> <input class='button' type="submit" value="Submit"> <div class="text"> <p><i>Forget Password!</i>

Coloring Effect using html/css

{html code} <html> <head> <link href='E:\html\.vscode\.vscode\style.css' type='text/css' rel='stylesheet'> <title>coloring effect</title> </head> <body> <div class='text'> <h2>coloring effect</h2> </div> </body> </html> {css code} body{ background: rgb(0, 0, 0); } .text{ position: absolute; top: 20%; left: 10%; color: transparent; background-image: linear-gradient(to right, rgb(0, 174, 255), rgb(98, 0, 128), rgba(255, 192, 203, 0.651), yellow ); font-family: 'poppins', sans-serif; font-size: 60px; text-transform: uppercase; -webkit-background-clip: text; animation: animate 5s linear infinite; background-size: 400%; -webkit-text-stroke-width: 0.6px; -webkit-text-stroke-color: yellow; text-align: center; } @keyframes animate{ 0%{ background-posit

Glowing Border effect using html/css

{html code} <html> <head> <link href='E:\html\.vscode\.vscode\style.css' type='text/css' rel='stylesheet'> <title>Glowing Border</title> </head> <body> <div class='box'> <div class='text'> <h2><u>Glowing Border</u></h2> <p>HTML and CSS are technically not the programming languages, they are the scripting languages. Usually used for the front-end development.</p> </div> </div> </body> </html> {css code} body{ background: black; display: flex; } .text{ padding: 30px; margin: 10px; letter-spacing: 1px; box-sizing: border-box; color: white; } .box{ top: 20%; left: 40%; display: flex; position: relative; width: 300px; height: 420px; justify-items: center; align-it