Tuesday, November 30, 2021

Pagination with Rounded Border

 Pagination with Rounded Border

 


<!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

         <link rel="STYLESHEET"type="text/css"href="web.css">

        <title>web design</title>

    </head>

    <body>

        <h1>Pagination with Rounded Borders</h1>

        <div class="pagination">

            <a href="#">&laquo;</a>

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

            <a href="#"class="active">2</a>

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

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

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

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

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

            <a href="#">&raquo;</a>


        </div>

 </body>

</html>


CSS Pagination with Rounded Border Style

 .pagination{

    display: inline-block;

}

.pagination a{

    color: #000;

    float: left;

    text-decoration: none;

    border: 1px solid #ddd;

    padding:8px 16px;

}

.active{

    background-color: green;

    color:#fff;

    border:1px solid green ;

}

.pagination a:hover:not(.active){

    background-color:#ddd;

    color: #000;

}

.pagination a:first-child{

    border-top-left-radius:5px ;

    border-bottom-left-radius:5px ;

}

.pagination a:last-child{

    border-top-right-radius:5px ;

    border-bottom-right-radius:5px ;

}

:::click her to youtube channels:::

at No comments:

Monday, November 29, 2021

The transition-timing-function

 The transition-timing-function


 <!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

         <link rel="STYLESHEET"type="text/css"href="web.css">

        <title>web design</title>

    </head>

    <body>

<h1>The transition-timing-function Property</h1>

<p>Hover over the div elements below, to see the different speed curves:

</p>

<div id="div1">linear</div><br>

<div id="div2">ease</div><br>

<div id="div3">ease-in</div><br>

<div id="div4">ease-out</div><br>

<div id="div5">ease-in-out</div>


 </body>

</html>


CSS The transition-timing-function Style

 div{

    width:100px;

    height: 100px;

    background-color: red;

    transition: width 2s;

}

.div1{

    transition-timing-function:linear ;

}

.div2{

    transition-timing-function:ease ;

}.div3{

    transition-timing-function:ease-in ;

}.div4{

    transition-timing-function:ease-out ;

}.div5{

    transition-timing-function:ease-in-out ;

}

div:hover{

    width:300px ;

}


:::click here to youtube channels::: 

 

at No comments:

The Transition Porperty

 The Transition Porperty


<!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

         <link rel="STYLESHEET"type="text/css"href="web.css">

        <title>web design</title>

    </head>

    <body>

<h1>The Transition Porperty</h1>

<p>Hover over the div element below, to see the transition effect:

</p>

<div class="box"></div>

 </body>

</html>

 

CSS The Transition Porperty Style

.box{

    width:100px;

    height:100px;

    background-color: red;

    transition:width 2s,height 4s ;

}

.box:hover{

    width:300px;

    height: 300px;

} 

at No comments:

Sunday, November 28, 2021

Pagination with Borders

 Pagination with Borders



<!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

         <link rel="STYLESHEET"type="text/css"href="web.css">

        <title>web design</title>

    </head>

    <body>

<h1>Pagination with Borders</h1>

<div class="pagination">

    <a href="#">&laquo;</a>

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

    <a href="#"class="active">2</a>

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

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

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

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

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

    <a href="#">&raquo;</a>

</div>

 </body>

</html> 


CSS Pagination with Borders Style

 .pagination{

    display: inline-block;

}

.pagination a{

    color: #000;

    float: left;

    padding: 8px 16px;

    text-decoration: none;

    transition:background-color .3s ;

    border: 1px solid #ddd;

}

.active{

    background-color: green;

    color: #fff;

    border: 1px solid green;

}

.pagination a:hover:not(.active){

    background-color: #ddd;

    color: #000;

}

at No comments:

Saturday, November 27, 2021

Transition Effect on Hover Pagination

 Transition Effect on Hover Pagination


 <!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

         <link rel="STYLESHEET"type="text/css"href="web.css">

        <title>web design</title>

    </head>

    <body>

        <h1>Transition Effect on Hover pagination</h1>

        <p>Move the mouse over the numbers.

        </p>

        <div class="pagination"> 

            <a href="#">&laquo;</a>

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

            <a href="#"class="active">2</a>

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

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

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

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

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

            <a href="#">&raquo;</a></div>

 </body>

</html>


CSS Transition Effect on Hover Pagination Style

.pagination{

    display: inline-block;

}

.pagination a{

    color: #000;

    float: left;

    padding: 8px 16px;

    text-decoration: none;

    transition:background-color.3s ;

}

.active{

    background-color: green;

    color:#fff;

}

.pagination:not(.active):hover{

    background-color: #ddd;

    color: #000;

}

at No comments:

Friday, November 26, 2021

Rounded Active and Hover Pagination

 Rounded Active and Hover Pagination



 <!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

         <link rel="STYLESHEET"type="text/css"href="web.css">

        <title>web design</title>

    </head>

    <body>

        <h1>Rounded Active and hoverable Pagination</h1>

        <div class="Pagination">

            <a href="#">&laquo;</a>

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

            <a href="#" class="active">2</a>

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

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

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

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

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


            <a href="#">&raquo;</a>


        </div>

 </body>

</html>


CSS Rounded Active and Hover Pagination Style

.pagination{

    display: inline-block;

}

.pagination a{

    color: #000;

    float: left;

    padding: 8px 16px;

    text-decoration: none;

}

.active{

    background-color: green;

    color: #fff;

    border-radius: 5px;

}

.pagination a:hover:not(.active){

    background-color: #ddd;

    color: #000;

}

at No comments:

Thursday, November 25, 2021

Animated Button-Fade in Effect

 Animated Button-Fade in Effect



<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="STYLESHEET"type="text/css"href="web.css">
        <title>web design</title>
    </head>
    <body>
    <h1>Animated-Button Fade in Effect</h1>
    <button class="btn">Hover Over me</button>
 </body>
</html>

CSS Animated Button-Fade in Effect Style 

 .btn{

    background-color: #f4511e;

    border: none;

    color: #fff;

    padding:16px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    opacity:0 6;

    font-size: 16px;

    transition:0.3s;

    cursor: pointer;

}

.btn:hover{

    opacity:0 1;

}

at No comments:

Wednesday, November 24, 2021

Active and Hoverable Pagination

 Active and Hoverable Pagination



<!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

         <link rel="STYLESHEET"type="text/css"href="web.css">

        <title>web design</title>

    </head>

    <body>

       <h1>Active and hoverable Pagination</h1>

       <p>Move the mouse over the numbers.

    </p>

    <div class="pagination">

        <a href="#">&laquo;</a>

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

        <a href="#" class="active">2</a>

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

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

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

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

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

        <a href="#">&raquo;</a>


    </div>

 </body>

</html> 


CSS Active and Hoverable Pagination Style

 .pagination{

    display: inline-block;

}

.pagination a{

    color: #000;

    float: left;

    padding:8px 16px;

    text-decoration: none;

}

.active{

    background-color:green;

     color: #fff;

}

.pagination a:hover:not(.active){

    background-color: #ddd;

    color: #000;

}

at No comments:

The transition Property

 The transition Property Code



<!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

         <link rel="STYLESHEET"type="text/css"href="web.css">

        <title>web design</title>

    </head>

    <body>

        <h1>The transition Property</h1>

        <p>Hover over the div element below, to see the transition effect:</p>

        <div></div>

 </body>

</html> 


CSS The transition Property Style Sheet

 div{

    width:100px;

    height:100px;

    background-color: red;

    transition:width 2s;

}

div:hover{

    width:300px;

}

at No comments:

Monday, November 22, 2021

Animated Button-"Pressed Effect"

 Animated Button-"Pressed Effect"




<!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

         <link rel="STYLESHEET"type="text/css"href="web.css">

        <title>web design</title>

    </head>

    <body>

        <h1>Animated Button -"pressed Effect"</h1>

        <button class="btn">Click me</button>

 </body>

</html> 


CSS  Animated Button-"Pressed Effect" Style Sheet 

.btn{

    display: inline-block;

    padding:15px 25px;

    font-size: 24px;

    text-align: center;

    text-decoration: none;

    color: #fff;

    background-color: green;

    outline: none;

    border: none;

    border-radius:15px;

    box-shadow:0px 9px #999 ;

    cursor: pointer;

}

.btn:hover{

    background-color: #3e8e41;

}

.btn:active{

    background-color: #3e8e41;

    box-shadow:0px 5px #666;

    transform: translateY(4px);

}

at No comments:

Tuesday, November 9, 2021

Simple Pagination

 Simple Pagination

 


<!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

         <link rel="STYLESHEET"type="text/css"href="web.css">

        <title>web design</title>

    </head>

    <body>

    <h1>Simple Pagination</h1>

    <div class="pagination">

        <a href="#">&laquo;</a>

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

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

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

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

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

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

        <a href="#">&raquo;</a>



    </div>     

 </body>

</html>


CSS Simple Pagination Style Sheet

.pagination{

    display: inline-block;

}

.pagination a{

    color: #000;

    float: left;

    padding:8px 16px;

    text-decoration: none;

}

at No comments:
Location: Pakistan

Monday, November 8, 2021

Notification Button

 Notification Button


<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="STYLESHEET"type="text/css"href="web.css">
        <title>web design</title>
    </head>
    <body>
        <h1>Notification Button</h1>
        <a href="#" class="notification">
            <span>inbox</span>
            <span class="bage">3</span>
        </a>        
 </body>
</html>

CSS Notification Button Style Sheet
.notification{
    background-color: #555;
    color: #fff;
    text-decoration: none;
    padding:15px 26px;
    display: inline;
    position: relative;
    border-radius: 2px;
    cursor: pointer;
}
.notification:hover{
    background-color: red;
}
.notification .bage{
    position: absolute;
    top:-10px;
    right:-10px;
    padding:5px 10px;
    border-radius: 50px;
    background-color: red;
    color: #fff;
}

 

at No comments:
Location: Pakistan

Button on Image

 Button on Image Code

 


<!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

         <link rel="STYLESHEET"type="text/css"href="web.css">

        <title>web design</title>

    </head>

    <body>

        <h1>Button on Image</h1>

        <p>Add Button on an image</p>

        <div class="container" >

            <img src="pic.jpg">

            <button class="btn">Button</button>

        </div>

 </body>

</html>


CSS Button on Image StyleSheet

.container{

    position: relative;

    width:100%;

    max-width:40px;

}

.container .img{

    width:100%;

    height: auto;

}

.container .btn{

    position: absolute;

    top:50%;

    left: 702%;

    transform: translate(-50%,-50%);

    -ms-transform:translate(-50%50%) ;

    background-color: #f1f1f1;

    color:black;

    border: none;

    padding:16px 30px;

    text-align: center;

    font-size: 16px;

    border-radius: 5px;

    cursor: pointer;

}

.container .btn:hover{

    background-color: black;

    color: #fff;

}

at No comments:

Saturday, November 6, 2021

Vertical Group Button

 Vertical Group Button Code



<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="STYLESHEET"type="text/css"href="web.css">
        <title>web design</title>
    </head>
    <body>
        <div class="btn-group">
            <button class="button">Button</button>
            <button class="button">Button</button>
            <button class="button">Button</button>
            <button class="button">Button</button>
        </div>
 </body>
</html>

 CSS  Vertical Group Button Style Code

.btn-group .button{

    background-color: green;

    border:1px solid black ;

    color: #fff;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    font-size: 16px;

    cursor: pointer;

    width:150px;

    display: block;

}

.btn-group .button:hover{

    background-color: #3e8e41;

}


at No comments:

Friday, November 5, 2021

Round Card

 Round Card Code


 <!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

         <link rel="STYLESHEET"type="text/css"href="web.css">

        <title>web design</title>

    </head>

    <body>

        <h1>Round Card</h1>

        <div class="card">

            <img src="photo.png"alt="photo">

            <div class="container">

                <h4><b>Jane Doe </b></h4>

                <p>Interior Designer</p>

            </div>

        </div>

 </body>

</html>

 

CSS Round Card Style

.card{

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

    transition: 0.3s;

    width:40%;

    border-radius:5px;

}

.card:hover{

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

}

img{

    border-radius: 5px 5px 0 0;

    width:100% ;

}

.container{

    padding:2px 16px ;

}


at No comments:

Wednesday, November 3, 2021

Style Download Button

 Style Download Button Code

 <!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

         <link rel="STYLESHEET"type="text/css"href="web.css">

        <title>web design</title>

    </head>

    <body>

        <h1>Style Download Button</h1>


        <p>Auto width</p>

        <button class="btn"><i class="fa fa-download"></i>Download</button>

        <p>Full width</p>

        <button class="btn"Style="width:100%;"><i class="fa fa-download"></i>Download</button>


 </body>

</html>


CSS Download Button Style

.btn{

    background-color: dodgerblue;

    border: none;

    color: #fff;

    padding:12px 30px;

    cursor: pointer;

    font-size:20px;

}

.btn:hover{

    background-color: royalblue;

}


at No comments:

Stacked Forms

 Stacked Forms Code

 


<!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

         <link rel="STYLESHEET"type="text/css"href="web.css">

        <title>web design</title>

    </head>

    <body>

        <h3>Stacked Forms</h3>

        <p>how to use CSS a create Stacked forms</p>

        <div class="container">

            <form>

                <label for="fname">You Name</label>

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

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

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

                <label for="country">Country</label>

                <select id="country">

                    <option value="pakistan">pakistan</option>

                    <option value="usa">usa</option>

                    <option value="india">india</option>

                </select>

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

            </form>

        </div>

 </body>

</html>


CSS Stacked Forms Style

body{

    font-family: Arial, Helvetica, sans-serif;

}

input[type=text],select{

    width:100%;

    padding:12px 20px;

    margin:8px 0;

    display: block;

    border: 2px solid #ccc;

    border-radius:4px;

      box-sizing:border-box ;

}

input[type=submit]{

    width:100%;

    background-color: green;

    padding:14px 20px;

    color: #fff;

    margin: 8px 0;

    border-radius:4px;

    cursor: pointer;

}

input[type=submit]:hover{

    background-color: greenyellow;

}

.container{

    border-radius: 5px;

    background-color:#f2f2f2;

    padding:20px ;

}

at No comments:

Tuesday, November 2, 2021

How TO -Register Form with Icons

 How TO - Register Form with Icons Code

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="STYLESHEET"type="text/css"href="web.css">
        <title>web design</title>
    </head>
    <body>
     <form>
         <h1>Register</h1>
         <div class="form-container">
             <i class="fa fa-user icon"></i>
             <input type="text" class="input-field"placeholder="User name">
         </div>
         <div class="form-container">
            <i class="fa fa-envelope icon"></i>
            <input type="text" class="input-field"placeholder="Email">
        </div>
        <div class="form-container">
            <i class="fa fa-key icon"></i>
            <input type="password" class="input-field"placeholder="password">
        </div>
        <button type="submit"class="btn">Register</button>
     </form>
 </body>
</html>

CSS Form with Icons Style Code
.form-container{
    display: -ms-flexbox;
    display: flex;
    width:100%;
    margin-bottom:15px;
}
.icon{
    padding:10px;
    background-color: dodgerblue;
    color: #fff;
    min-width:50px;
    text-align: center;
}
.input-field{
    padding:10px;
    width: 100%;
    outline: none;
}
.input-field:focus{
    border:2px solid dodgerblue ;
}
.btn{
    background-color: dodgerblue;
    color: #fff;
    border: none;
    padding:15px 20px;
    cursor: pointer;
    width:100%;
    opacity:0.9;
}
.btn:hover{
    opacity:1;
}
at No comments:

Monday, November 1, 2021

icon button with text

 icon button with text Code



<!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

         <link rel="STYLESHEET"type="text/css"href="web.css">

        <title>web design</title>

    </head>

    <body>

       <h1>ICON Button</h1>

       <p>icon button</p>

       <button class="btn"><i class="fa fa-home"></i></button>

       <button class="btn"><i class="fa fa-bars"></i></button>

       <button class="btn"><i class="fa fa-trush"></i></button>

       <button class="btn"><i class="fa fa-close"></i></button>

       <button class="btn"><i class="fa fa-folder"></i></button>

       <p>ICON Button with text</p>

       <button class="btn"><i class="fa fa-home"></i>Home</button>

       <button class="btn"><i class="fa fa-bars"></i>Menu</button>

       <button class="btn"><i class="fa fa-trush"></i>Trush</button>

       <button class="btn"><i class="fa fa-close"></i>Close</button>

       <button class="btn"><i class="fa fa-folder"></i>Folder</button>



 </body>

</html>


CSS  icon button with text Style code

.btn{

    background-color: dodgerblue;

    border: none;

    color: #fff;

    padding:12px 16px;

    font-size:16px;

    cursor: pointer;

}

.btn:hover{

    background-color: royalblue;

}

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