<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <label>Enter the name </label><br>
        <input type="text"><br>
        <label>Enter last name</label><br>
        <input type="text"><br>
        <label>Enter password</label><br>
        <input type="Password"><br>
        <br><input type="submit" value="Submit">
    </form>

    <form>
        <br><label>User id </label>
        <input type="text">
        <label>Password</label>
        <input type="Password"><br>

        <br><input type="submit" value="login">
        <input type="submit" value="reset">
    </form>

    <form>
        <p>Kindly select your favorite color</p>
        <input type="radio" >Red
        <br><input type="radio" >Blue
        <br><input type="radio" >Green
        <br><input type="radio" >Yellow<br>

        <br><input type="submit" value="Submit">

    </form>
    <form>
        <p>Kindly select your favorite sports</p>
        <input type="checkbox" >Cricket
        <br><input type="checkbox" >Tennis
        <br><input type="checkbox" >Football
        <br><input type="checkbox" >Baseball
        <br><input type="checkbox" >Basketball<br>

        <br><input type="submit" value="Submit">

    </form>

    <form>
        <br>

        select start and end date:<br><br>
        <label>Start date:</label>
        <input type="date"><br><br>
        <label>End date:</label>
        <input type="date"><br><br>
        <input type="submit" value="Submit"><br><br>
    </form>

    <form>
        <table>
            <tr>
                <td><label>single email</label></td>
                <td><input type="email" required>
                <input type="submit"></td>
            </tr>
            <tr>
                <td><label>enter multiple email</label></td>
                <td><input type="email" multiple>
                <input type="submit"></td>
            </tr>
        </table>
    </form>
</body>
</html>

2diff background

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Top and Bottom Color with Divs</title>
  <style>
    /* Ensure the body takes full height */
    body, html {
      height: 100%;
      margin: 0;
    }

    /* Styling for the top part */
    .top {
      height: 50%;  /* 50% of the height */
      background-color: #ff7f50; /* Coral */
    }

    /* Styling for the bottom part */
    .bottom {
      height: 50%;  /* 50% of the height */
      background-color: #1e90ff; /* Dodger Blue */
    }
  </style>
</head>
<body>

  <div class="top"></div>
  <div class="bottom"></div>

</body>
</html>

login

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{

        background-color: pink;

    }
    .rectangle{
        width: 550px;
        height: 350px;
        background-color: white;
        border-radius: 10px;
        margin-left:35%;
        margin-top: 10%;
    }

    h1{
        text-align: center;
        padding-top: 10px;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }

    #form{
        padding-left: 20px;

        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    #button{
        background-color: rgb(6,135,255);
        width: 90%;
        height:10%;
        margin-left: 10px;
        border: 0;
        border-radius: 10px;
        color:white;
    }
    h4{
        color:rgb(6,135,255);
        text-align: center;
    }

</style>
<body>
    <div class="rectangle">
        <h1>Login</h1>
        <form id="form">
            <label>Username</label><br>
            <input type="text" placeholder="Enter your name"style="width: 90%; height:25px;border-radius:5px;"><br><br>
            <label>Password</label><br> 

            <input type="text" placeholder="Enter your password"style="width: 90%;height:25px;border-radius:5px; border:;">
        </form><br>
        <button id="button">Login</button>
        <h4>Forgot Password?</h4>
    </div>
</body>
</html>

ani

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       @keyframes example {
  0%   {background-color: red;transform: translateX(200px) rotateZ(360deg) ;}
  25%  {background-color: yellow;transform: translateY(200px);}
  50%  {background-color: blue; transform:translateX(-200px) rotateZ(360deg) ;}
  100% {background-color: green;transform: translateY(-200px);}
}


div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
        div{
            width:100px ;
            height: 100px;
            background-color: red;
            top: 200px;
            transition: 1s;
            margin-top: 200px;
            animation-iteration-count: infinite;


        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;           

        }
        div:hover{

            transition: 1s; 





        }


    </style>
</head>
<body>
    <div >

    </div>



</body>
</html>

clock am pm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin:0px;
        padding:0px;
    }
    body{
        background-color: black;
        color:white;
        display: flex;
        justify-content: center;
        align-items:center;
        height: 100vh;
    }
    #clock{
        font-size: 150px;
    }
</style>
<body>

    <div id="clock">00:00:00</div>
    <script >
        function update(){
    const now=new Date();
    let hrs=now.getHours();
    let min=now.getMinutes();
    let sec=now.getSeconds();
    let ampm=hrs>=12?'PM':'AM';

    hrs=hrs%12;
    hrs=hrs?hrs:12;


    min=min<10?"0"+min:min;
    sec=sec<10?"0"+sec:sec;

    document.querySelector("#clock").innerHTML=hrs+":"+min+":"+sec+" "+ampm;
}

setInterval(update,1000);
update();
    </script>
</body>
</html>

profile

// import React from "react";
import React, { useState } from "react";
import boy from './pic/boy.jpg'
import './practiseProfile.css'

const PractiseProfile=(props)=>{
    // const changeColor=()=>{
            //alert("hello");
    //     let box=document.querySelector(".profile-card");
    //     box.classList.toggle("colored");

    // }
    const [iscolor, SetIsColor] = useState(false);

    const changeColor = () => {
      SetIsColor(!iscolor); // Toggle the state
    };
        return(
            // <div class= "profile-card">
            <div className={`profile-card ${iscolor ? "colored" : ""}`}>
                <img src={boy} class="profile-image"></img>
                <h1 class="profile-name">{props.name}</h1>
                <p class="profile-designation">{props.desig}</p>
                <p class=".profile-description">{props.description}</p>
                <button onClick={changeColor}>change</button>
            </div>
        )
}

export default PractiseProfile;
Edit Report
Pub: 07 Jan 2025 07:47 UTC
Edit: 02 Apr 2025 19:34 UTC
Views: 25