Thursday, September 30, 2021

CSS Button

 CSS Button 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>CSS Button</title>

</head>


<body>

<h1>CSS Button</h1>

<button>Default Button</button>

<a class="button" href="#">Link button</a>

<button>CSS Button</button>

<input type="button"class="button"value="Input button">

</body>


</html>


CSS BUTTON STYLE CODE

.button{

    background-color: #4cac50;

    border: none;

    color: #fff;

    padding:15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size:16px;

    margin:4px 2px;

    cursor: pointer;

}

at No comments:
Location: Lahore, Punjab, Pakistan

Wednesday, September 29, 2021

Dropdown Menu inside a Navigation Bar

 Dropdown Menu inside a Navigation Bar 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>

<ul>

  <li><a href="#">Home</a></li>

  <li><a href="#">New</a></li>

  <li class="dropdrown"><a class="dropbtn" href="#">dropdrown menu</a>

    <div class="dropdown-content">

      <li><a href="#">Link 1</a></li>

      <li><a href="#">Link 2</a></li>

      <li><a href="#">Link 3</a></li>


    </div>

  </li>


</ul>

<h3>Dropdown Menu inside a Navigation Bar</h3>

<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

</body>


</html>


CSS STYLE SHEET CODE

ul{

    list-style-type: none;

    margin:0;

    padding:0;

    overflow: hidden;

    background-color: #333;

}

li a{

    float: left;

}

li a .dropbtn{

    display: inline-block;

    color: #fff;

    text-align: center;

    padding:14px 16px;

    text-decoration: none;

}

li a:hover, .dropbtn ,.dropdown{

    background-color: red;

}

.dropdown{

    display: inline-block;

}

.dropdown-content{

    display: none;

    position: absolute;

    background-color:#f9f9f9 ;

    min-width:16px;

    box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);

    z-index: 1;

}

.dropdown-content a{

    display: block;

    padding:12px 16px;

    text-align: left;

    text-decoration: none;

}

.dropdown:hover ,.dropdown-content{

 display: block;

}

.dropdown:hover ,.dropdown-content a{

    background-color: #f1f1f1;

}

 

at No comments:

Tuesday, September 28, 2021

Html Dropdown Menu with CSS STYLE

 Html Dropdown Menu with CSS 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>

  ​<h2>Dropdown Menu</h2>

   <p>Move the mouse over the button to open the dropdown menu.</p>

  <div class="dropdrown">

   <button class="dropbtn">dropdrown</button>

    <div class="dropdown b">

       <a href="#">link 1</a>

       <a href="#">link 1</a>

       <a href="#">link 1</a>

    </div>

  </div>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

</body>


</html>


CSS Dropdown Menu Style Code

.dropdrown{

    display: inline-block;

    position: relative;

}

.dropdrown b{

    display: none;

    position: absolute;

    background-color:#f9f9f9;

    min-width:160px;

    box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);

    z-index:1;

}

.dropbtn{

    background-color:#4caf50;

    color: #fff;

    padding:16px;

    font-size:16px;

    border: none;

    cursor: pointer;

}

.dropdrown b a{

    color: #000;

    padding:12px 16px;

    text-decoration: none;

    display: block;

}

.dropdrown:hover .dropdrown b{

    display: block;

}

.dropdrown:hover .dropbtn{

    background-color: #3e8e41;

}

.dropdrown:hover .dropdrown b{

    background-color:#f1f1f1 ;

}

    

at No comments:

Monday, September 27, 2021

Html Search With Animated input

 Html Search With Animated input 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>

  <p>Animated Search input</p>

  <form>

      <input type="text"name="Search"placeholder="Search">

  </form>

</body>


</html>


CSS Animated Style

input[type=text]{

    width:130px;

    box-sizing: border-box;

    border:2px solid #ccc;

    border-radius:4px;

    font-size:16px;

    background-color: white;

    background-image: url(searchicon.png);

    background-position:10px 10px;

    background-repeat: no-repeat;

    padding:12px 20px 12px 40px;

    transition:width 0.4s ease-in-out;

}

input[type=text]:focus{

    width:100%;

}

at No comments:

Saturday, September 25, 2021

Html Search bar With CSS icon/image Style

 Html Search bar With CSS icon/image 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>

  <P>input with icon/image</P>

  <form>

      <input type="text"id="search"name="search"placeholder="Search">

  </form>

</body>


</html>


CSS ICON/IMAGE STYLE CODE

input[type=text]{

   width:100%;

   box-sizing: border-box;

   border:2px solid #ccc;

   border-radius:4px;

   font-size:16px;

   background-color: white;

   background-image:url('searchicon.png');

   background-position:10px 10px;

   background-repeat: no-repeat;

   padding:12px 20px 12px 40px;

}

at No comments:
Location: Lahore, Punjab, Pakistan

Friday, September 24, 2021

Html Forms with CSS Focus Animation transition:0.5s; Style

 Html Forms with CSS Focus Animation  transition:0.5s; 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>

    <p>In this example, we use the :focus selector to add a black border color to the text field when it gets focused (clicked on):</p>

    <p>Note that we have added the CSS transition property to animate the border color (takes 0.5 seconds to change the color on focus).</p>

<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 Focus Animation  transition:0.5s; Style

input[type=text]{

     width:100%;

     padding:12px 20px;

     margin:8px 0;

     box-sizing: border-box;

     border: 3px solid #ccc;

     -webkit-transition:0.5s;

     transition:0.5s;

}

input[type=text]:focus{

   border:3px solid #555;

}

at No comments:
Location: Lahore, Punjab, Pakistan

Thursday, September 23, 2021

Html Forms With CSS Focus Style

 Html Forms With CSS Focus 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>

<p>In this example, we use the :focus selector to add a background color to the text field when it gets focused (clicked on):


</p>

<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 Focus Style 

input[type=text]{

     width:100%;

     padding:12px 20px;

     margin:8px 0;

     box-sizing: border-box;

     border:1px solid #555;

     outline: none;

}

input[type=text]:focus{

     background-color: red;

}

at No comments:
Location: Lahore, Punjab, Pakistan

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;

}

at No comments:
Location: Lahore, Punjab, Pakistan

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 ;

}

at No comments:

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%;

}

at No comments:

Tuesday, September 7, 2021

Responsive Web Page - Full Example

 Responsive Web Page - Full Example  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">

    <script src="https://use.fontawesome.com/d07a8c2f55.js"></script>

    <link rel="preconnect" href="https://fonts.gstatic.com">

    <title>Html Form</title>

</head>


<body style="font-family: Verdana, Geneva, Tahoma, sans-serif;color: #aaaa;">

    <div style="background-color:#e5e5e5e5;padding:15px;text-align: center;">

        <h2>Hello World</h2>

    </div>

    <div style="overflow:auto;">

        <div class="meun">

            <a href="#">link</a>

            <a href="#">link</a>

            <a href="#">link</a>

            <a href="#">link</a>

        </div>

        <div class="main">

            <h2>Lorem ipsum </h2>

            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut

                laoreet dolore magna aliquam erat volutpat</p>

        </div>

        <div class="right">

            <h2>About-us</h2>

            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>

        </div>

    </div>

    <div style="background-color:#e5e5e5e5;padding:10px;margin-top:7px;text-align: center;">Web design Channels</div>

</body>


</html>


CSS STYLESHEET CODE

*{

    box-sizing: border-box;

}

.meun{

    float: left;

    width:20%;

    text-align: center;

}

.meun a{

    background-color: #e5e5e5e5;

    display: block;

    width:100%;

    color: #000;

    padding:8px;

    margin-top:7px;

}

.main{

    float: left;

    width:60%;

    padding:0 20px;

}

.right{

    float:left;

    background-color:#e5e5e5e5;

    width:20% ;

    padding:15px;

    margin-top:7px;

    text-align: center;

}


at No comments:

Monday, September 6, 2021

Html Forms with Reset Button

 Html Forms with Reset Button 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">

    <script src="https://use.fontawesome.com/d07a8c2f55.js"></script>

    <link rel="preconnect" href="https://fonts.gstatic.com">

    <title>Html Form</title>

</head>


<body>

   <h1>Reset button with htmlforms</h1>

   <form>

       <label for="fname">firstname</label>

       <input type="text"id="fname"placeholder="john">

       <label for="lname">lastname</label>

       <input type="text"id="lname"placeholder="Doe">

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

       <input type="reset">

   </form>

</body>


</html>

at No comments:

Sunday, September 5, 2021

Html forms with datalist element

 Html forms with datalist element 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">

    <script src="https://use.fontawesome.com/d07a8c2f55.js"></script>

    <link rel="preconnect" href="https://fonts.gstatic.com">

    <title>Html Form</title>

</head>


<body>

    <h1>the datalist element</h1>

<form>

    <input list="brower"name="brower">

    <datalist>

        <option value="firefox">

        <option value="chrome">

        <option value="internet explorer">

        <option value="opera">

        <option value="Saferia">

    </datalist>

    <input type="submit">

</form>

</body>


</html>

at No comments:
Subscribe to: Posts (Atom)

JavaScript Animated

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

  • Button on Image
     Button on Image Code   <!DOCTYPE html> <html>     <head>         <link rel="stylesheet" href="https://c...
  • JavaScript Variables
      JavaScript  Variables 4 Ways to Declare a JavaScript Variable: Using  var Using  let Using  const Using nothing   What are Variables? Vari...
  • The Scale()Method
     The Scale()Method   <!DOCTYPE html> <html> <head>     <link rel="stylesheet" href="https://cdnjs.cloudf...