Wednesday, September 22, 2021

Html Forms with CSS Background-Colored Style

  Html Forms with CSS Background-Colored Style Code

<!DOCTYPE html>>

<html>


<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="nav.css">

    <title>Html Form</title>

</head>


<body>

<form>

    <label for="fname">First Name::</label><br>

    <input type="text"id="fname"placeholder="You First name"><br>

    <label for="lname">Last Name::</label><br>

    <input type="text"id="lname"placeholder="You Last name">

</form>

</body>


</html>


CSS STYLE SHEET

input[type=text]{

     width:100%;

     padding:12px 20px;

     margin:8px 0;

     box-sizing: border-box;

     border: none;

     background-color:#3cbc8d;

     color: #fff;

}

Tuesday, September 21, 2021

Html Forms with CSS Style Botton Border

 Html Forms with CSS Style Botton Border Code

<!DOCTYPE html>>

<html>


<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="nav.css">

    <title>Html Form</title>

</head>


<body>

<form>

    <label for="fname">first name</label><br>

    <input type="text"id="fname"placeholder="You First name"><br>

    <label for="lname">last name</label><br>

    <input type="text"id="lname"placeholder="You last name"><br>

</form>

</body>


</html>


CSS STYLE Botton Border 

input[type=text]{

     padding:12px 20px;

     margin:8px 0px;

     box-sizing: border-box;

     border: none;

     border-bottom:2px solid red ;

}

Sunday, September 19, 2021

Html Forms with CSS Width Step

 Html Forms with CSS Width Step Code

<!DOCTYPE html>>

<html>


<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="nav.css">

    <title>Html Form</title>

</head>


<body>

   <form>

       <label for="fname">

         First name

       </label>

       <input type="text"id="fname"name="firstname"placeholder="You Firstname">

       <label for="lname">

        last name

      </label>

      <input type="text"id="lname"name="lastname"placeholder="You lastname">

      <input type="submit"value="login">

   </form>

</body>

</html>

CSS STYLESHEET CODE

input{

    width:100%;

}

JavaScript Animated

  JavaScript Animated <!DOCTYPE html> <html> <style> #myContainer {   width: 400px;   height: 400px;   position: relative;...