Thursday, 31 December 2020

CSS Pagination

                             CSS Pagination

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pagination</title>
</head>
<style>
    .pagination {
        display: inline-block;
    }
    .pagination a {
        color: black;
        float: left;
        text-decoration:none;
        font-size: 40px; /*Use font size to change the pagination size */
        padding: 10px 13px;
        margin: 3px;
        /* border-radius: 6px; */
        border: 1px solid crimson;
        transition: background-color 0.8s; /*Adding transition effects on hover*/
        
    }
    .pagination a.active {
        background-color: rgb(95, 218, 95);
        /* border-radius: 8px; */
    }
    .pagination a:hover:not(.active) {
        background-color: #555dc2;
    }
    .pagination a:first-child {
        border-top-left-radius: 6px;
        border-bottom-left-radius: 5px;
    }
    .pagination a:last-child {
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
    }
    .center {
        text-align: center;
    }
</style>
<body>
    <div class="center">
    <div class="pagination">
        <a href=""><<</a>
        <a href="">1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a class="active" href="">4</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href="">>></a>
    </div>
</div>
</body>
</html>
Breadcrumb......
 

 

at No comments:

Friday, 18 December 2020

CSS Button in Image

                                 CSS Button in Image

 

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buttons Group</title>
</head>
    <style>
        .button {
            background-color: greenyellow;
            border: 1px solid green;
            padding: 15px 25px;
            margin: 0;
            float: left;
            display: block;
        }
        button:hover {
            background-color: green;
        }
        .buttn {
            background-color: greenyellow;
            border: 1px solid green;
            padding: 15px 25px;
            margin: 100% ;
            margin-bottom: 0;
            float: left;
            display: block;
        }
    </style>
<body>
    <button class="button btn1">Button </button>
    <button class="button btn2">Button </button>
    <button class="button btn3">Button </button>
    <button class="button btn4">Button </button>
    <button class="button btn5">Button </button>
    <button class="button btn6">Button </button>
    <button class="buttn btn1">Button </button>
    <button class="buttn btn2">Button </button>
    <button class="buttn btn3">Button </button>
    <button class="buttn btn4">Button </button>
    <button class="buttn btn5">Button </button>
    <button class="buttn btn6">Button </button>
</body>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>button in image</title>
</head>
    <style>
        .container {
            position: relative;
            width: 100%;
            max-width: 500px;
        }
        .container img {    
                width: 100%;
                height: auto;
                border-radius: 5% ;
        }
        .container .btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            padding: 10px 20px;
            border-radius: 9px;
            background: linear-gradient(to right,white,violet);
            border: none;
        }
        .container .btn:hover {
            font-size: xx-large;
            color:#f1f1f1;
        }
        .container .btn:hover span::after {
            content: "\21A0";
        }
        .riple {
            position: relative;
            background-color: darkgreen;
            border: none;
            font-size: 28px;
            color: #fff;
            padding: 20px;
            width: 200px;
            text-align: center;
            transition-duration: 0.4s;
            text-decoration: none;
            overflow: hidden;
            cursor: pointer;
        }
        .riple::after {
            content: "";
            background-color: #f1f1f1;
            display: block;
            position: absolute;
            padding-top:300% ;
            padding-left: 350%;
            margin-left: -20px !important;
            margin-top: -120%;
            opacity: 0;
            transition: all 0.8s;
        }
        .riple:active:after {
            padding: 0;
            margin: 0;
            opacity: 1;
            transition: 0s;

        }
    </style>
<body>
    <div class="container">
        <img src="https://www.wallpapertip.com/wmimgs/152-1527909_cool-nature-background-images-beautiful-backgrounds.jpg" alt="">
        <button class="btn">Button <span></span></button>
    </div>
    <br><br> 
    <button class="riple">Click M3!</button>
</body>
</html>
at No comments:

Wednesday, 16 December 2020

CSS Buttons

                                 CSS Buttons


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Css Buttons</title>
    <style>
        .button {
            font-size: 16px;
            padding: 12px 32px;
            display: block;
            /* float: left; */
            margin: 25px 10px;
            border: none;
            background-color: white;
            transition-duration: 1.5s;

        }
        .button:hover {

            box-shadow: 0 8px 8px rgb(128, 128, 128,0.5);
        }
        .btn1 {
            border: 2px solid skyblue;
            font-size: 10px;
            padding: 10px 24px;
            border-radius: 2px;
            
        }
        .btn1:hover {

            background-color: skyblue;
        }
        .btn2 {
            /* background-color: dodgerblue; */
            border: 2px solid dodgerblue;
            font-size: 15px;
            padding: 12px 28px;
            border-radius: 4px;
            
        }
        .btn2:hover {

            background-color: dodgerblue;
        }
        .btn3 {
            /* background-color: red; */
            border: 2px solid red;
            font-size: 20px;
            padding: 14px 40px;
            border-radius: 8px;
            
        }
        .btn3:hover {

            background-color: red;
            box-shadow: 0 9px #999;
        }
        .btn4 {
            /* background-color: lightseagreen; */
            border: 2px solid lightseagreen;
            font-size: 25px;
            padding: 32px 16px;
            border-radius: 12px;
            width: 20%;
            transition:  2s;
            
            
        }
        .btn4:hover {

            width: 75%;
            background-color: lightseagreen;
        }
        .btn5 {
            /* background-color: violet; */
            display: inline-block;
            border: 2px solid violet;
            border-radius: 4px;
            font-size: 30px;
            padding: 20px;
            display: inline-block;
            /* border-radius: 4px; */
            /* width: 75%; */

        }
        .btn5:hover {

            background-color: violet;
        }
        
        .btn5 span {
            /* display: inline-block; */
            position: relative;
            transition: .5s;
        }
        .btn5 span::after {
            content: "\21C9";
            position: absolute;
            /* padding: 20px; */
            /* margin; */
            font-size: 25px;
            top: 0px;
            right: -25px;
            transition: .5s;
            opacity: 0;
        }
        .btn5:hover span {
            padding-right: 25px;
        }
        .btn5:hover span::after {
            opacity: 1;
            right: 0;
        }
        /* .disabled {
            opacity: 0.2;
            cursor: not-allowed;
        } */
        .buttun {
            border: none;
            background-color:#4caf50 ;
            box-shadow: 0px 8px #999,0px 8px #999 ;
            border-radius: 14px;
            font-size: 28px;
            padding:20px;
            width: 200px;
            text-align: center;
            /* transition-duration: 0.8s; */
            text-decoration: none;
            overflow: hidden;
            cursor: pointer;
            height: 80px;
            color: #fff;
        }
        .buttun:active {
            box-shadow: 0px 6px grey,0px 6px grey;
        }
        /* .buttun::after {
            content: "";
            display: block;
            background-color: whitesmoke;
            padding-top: 300%;
            padding-right: 350%;
            margin-left:-350px ;
            margin-right: -20px !important;
            margin-top: -120%;
            opacity: 0;
            transition: all 0.8s;

        }
        .buttun:active:after{
            padding: 0;
            margin: 0;
            opacity: 1;
            transition: 0s ;
        } */
    </style>
</head>
<body>
    <h1>CSS ADvance Buttons</h1>
    <button class="btn1 button disabled">Click Me</button>
    <button class="btn2 button disabled">Click Me</button>
    <button class="btn3 button disabled">Click Me</button>
    <button class="btn4 button disabled">Click Me ❤😒</button>
    <button class="btn5 button disabled">Click Me<span></span></button>
    <button class="btn6 buttun ">Click Me</button>

</body>
</html>
at No comments:

Monday, 7 December 2020

CSS Style Images

                                                    CSS Style Images

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Style Images</title>
    <style>
        body{
            margin: 25px;
            margin-bottom: 200px;
        }
        img.round{
            border-radius: 50%;
        }
        img.round:hover {

            box-shadow: 0px 0px 8px 10px skyblue;
        }
        
        a img.thumbnail {
            /* border: 1px solid #ddd; */
            border-radius: 10%;
            padding: 5px;
            width: 180px;
        }
        a img.thumbnail:hover {
            box-shadow: 0 0 2px 2px rgba(0, 140, 186, 0.5);
            
        }
        img.responsive {
            max-width: 100%;
            height: auto;
        }
        img.center {
            margin: auto;
            display: block;
            width: 50%;
        }
        div.polaroid {
            margin: auto;
            width: 50%;
            background-color: white;
            box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.2),0 6px 8px 0px rgba(0, 0, 0, 0.19);
            /* margin-bottom: 25px;
            margin-left: 100px; */
        }
        /* div.polaroid img {
            margin-left: 270px;
        } */
        div.p{
            text-align: center;
            padding: 10px 20px;
            margin: 25px;
        }
        div.transparent {
            position: relative;
        }
        div.transparent img{
            opacity: 0.5;
        }
        div.leftbottom {
            font-size: xx-large;
            position: absolute;
            left: 10px;
            bottom: 56px;
        }
        div.lefttop {
            font-size: xx-large;
            position: absolute;
            left: 10px;
            top: 16px;
        }
        div.rightbottom {
            font-size: xx-large;
            position: absolute;
            right: 10px;
            bottom: 56px;
        }
        div.righttop {
            font-size: xx-large;
            position: absolute;
            right: 10px;
            top: 16px;
        }
        div.centertxt {
            font-size: xx-large;
            position: absolute;
            /* right: 348px;
            top: 248px; */
            right: 50%;
            top: 50%;
            transform: translate(50%,50%);
            text-align: center;
        }
        .blur {
            filter: blur(2px);
        }
        .brightness {
            filter: brightness(40%);
        }
        .contrast {
            filter: contrast(240%);
        }
        .greyscale {
            filter: grayscale(100%);
        }
        .huerotate {
            filter: hue-rotate(250deg);
        }
        .invert {
            filter: invert(90%);
        }
        .opacity{
            filter: opacity(40%);
        }
        .saturate {
            filter: saturate(5);
        }
        .sepia {
            filter: sepia(75%);
        }
        .shadow {
            filter: drop-shadow(3px 8px 18px green);
        }
        
        .imgcontain {
            position: relative;
            width: 50%;
            margin: auto;
        }
        .imgcontain img {
            display: block;
            width: 100%;
            height: auto;
        }
        .overlay {
            position: absolute;
            bottom: 0;
            top: 0;
            left: 100%;
            right: 0;
            opacity: 0;
            width: 0;
            /* height: 0; */
            overflow: hidden;

            transition:  1.5s ease;
            background-color: rgb(5, 119, 233);
        }
        .imgcontain:hover .overlay {
            width: 100%;
            opacity: 1;
            left: 0;
            transition: 1.5s ease;
        }
        .overlaytxt {
            position: absolute;
            color: white;
            white-space: nowrap;
            font-size: 20px;
            top: 50%;
            left: 50%;
            /* overflow: hidden; */
            transform: translate(-50%,-50%);

        }
        .overlay1 {
            opacity: 0;
            transition: 1.5s ease;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            
        }
        .imgcontain:hover img {
            opacity: 0.3;

        }
        .imgcontain:hover .overlay1 {
            opacity: 1;
        }
        .fadetxt {
            background-color: green;
            color: white;
            font: size 20px ;
            padding: 16px 32px;
        }
        .flip:hover {
            transform: scaleX(-1);
            margin: auto;
            width: 50%;
        }
        .responsive {
            /* width: 74.9999%; */
            width: 100%m;
            float: left;
            padding: 0 6px;
            
        }
        /* @media only screen and (max-width: 700px;) {
            .responsive {
                width: 49.9999%;
            }
        }
         @media only screen and (max-width: 500px;) {
             .responsive {
                 float: left;
                 width: 100%;
             }
         } */
        .resp1 {
            border: 2px solid black;
            width: 300px; 
            float: left;
            margin-left: 10px;
        }
        .resp1 img {
            width: 100%;
        }
        .rt1 {
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
    <h2>Rounded Images</h2>
    <p>Use border radius to create rounded images.</p>
    <img src="https://www.freshboo.com/wp-content/uploads/2014/06/Cool-Wallpapers.jpg" alt="Google search" class="round">
    <div>
        <h2>Thumbnail Image as link</h2>
        <a href="https://wallpaperheart.com/wp-content/uploads/2018/04/abstracts-wallpaper-cool-background-images.jpg" target="_blank" >
        <img src="https://wallpaperheart.com/wp-content/uploads/2018/04/abstracts-wallpaper-cool-background-images.jpg" alt="Google kar" class="thumbnail" width="500px">
    </a>
</div>
<div>
    <h2>Responsive Image</h2>
        <img src="https://images.hdqwalls.com/wallpapers/phoenix-the-red-bird-4k-i4.jpg" alt="Google" class="responsive">
    </div>
    <!-- Centered -->
    <div>
        <h2>Image in Center</h2>
        <img src="https://www.pxwall.com/wp-content/uploads/2019/04/4K-Phoenix-HD-Wallpapers.jpg" alt="" class="center">
    </div> <br><br>
    <!-- Polaroid /Cards like images -->
    <div class="polaroid">
        <img src="https://wallpaperboat.com/wp-content/uploads/2020/04/phoenix-wallpaper-download-full-13.jpg" alt="" style="width: 100%;">
        <div class="p">
            A Phoenix Fire
        </div>
    </div>
    <!-- Tranparent Images with text aligned on them -->
    <div class="transparent">
        <img src="https://wallpaperboat.com/wp-content/uploads/2020/04/phoenix-wallpaper-download-full-13.jpg" alt="" style="width: 100%;">
        <div class="lefttop">
            A Phoenix Fire
        </div>
        <div class="leftbottom">
            A Phoenix Fire
        </div>
        <div class="righttop">
            A Phoenix Fire
        </div>
        <div class="rightbottom">
            A Phoenix Fire
        </div>
        <div class="centertxt">
            A Phoenix Fire
        </div>
    </div> <br><hr><br> 
    <h2>Image with filter effects</h2>
    <div class="filters">
        <img src="https://avante.biz/wp-content/uploads/Nature-Backgrounds-Image/Nature-Backgrounds-Image-011.jpg" width="300px" height="auto" alt="Nature-Backgrounds-Image" class="normal">
        <img src="https://avante.biz/wp-content/uploads/Nature-Backgrounds-Image/Nature-Backgrounds-Image-011.jpg" width="300px" height="auto" alt="Nature-Backgrounds-Image" class="blur">
        <img src="https://avante.biz/wp-content/uploads/Nature-Backgrounds-Image/Nature-Backgrounds-Image-011.jpg" width="300px" height="auto" alt="Nature-Backgrounds-Image" class="brightness">
        <img src="https://avante.biz/wp-content/uploads/Nature-Backgrounds-Image/Nature-Backgrounds-Image-011.jpg" width="300px" height="auto" alt="Nature-Backgrounds-Image" class="contrast">
        <img src="https://avante.biz/wp-content/uploads/Nature-Backgrounds-Image/Nature-Backgrounds-Image-011.jpg" width="300px" height="auto" alt="Nature-Backgrounds-Image" class="greyscale">
        <img src="https://avante.biz/wp-content/uploads/Nature-Backgrounds-Image/Nature-Backgrounds-Image-011.jpg" width="300px" height="auto" alt="Nature-Backgrounds-Image" class="huerotate">
        <img src="https://avante.biz/wp-content/uploads/Nature-Backgrounds-Image/Nature-Backgrounds-Image-011.jpg" width="300px" height="auto" alt="Nature-Backgrounds-Image" class="invert">
        <img src="https://avante.biz/wp-content/uploads/Nature-Backgrounds-Image/Nature-Backgrounds-Image-011.jpg" width="300px" height="auto" alt="Nature-Backgrounds-Image" class="opacity">
        <img src="https://avante.biz/wp-content/uploads/Nature-Backgrounds-Image/Nature-Backgrounds-Image-011.jpg" width="300px" height="auto" alt="Nature-Backgrounds-Image" class="saturate">
        <img src="https://avante.biz/wp-content/uploads/Nature-Backgrounds-Image/Nature-Backgrounds-Image-011.jpg" width="300px" height="auto" alt="Nature-Backgrounds-Image" class="sepia">
        <img src="https://avante.biz/wp-content/uploads/Nature-Backgrounds-Image/Nature-Backgrounds-Image-011.jpg" width="300px" height="auto" alt="Nature-Backgrounds-Image" class="shadow">
    </div>
    <!-- Image Hover Overlay -->
        <br><br>
    <div class="imgcontain">
        <img class="myimg" src="https://cutewallpaper.org/21/cool-nature-backgrounds/Cool-Nature-Desktop-Backgrounds-57-images-DodoWallpaper..jpg"  alt="Google">
        <div class="overlay">
            <div class="overlaytxt">
                Hello World!
            </div>
        </div>
        
    </div>
     <br> <br>
    <div class="imgcontain">
        <img class="myimg" src="https://selfgrowth.info/photos/cool-nature-pictures-without-text/best-nature-wallpapers-without-copyright2784.jpg"  alt="Google">
        <div class="overlay1">
            <div class="fadetxt">
                Hello World!
            </div>
        </div>
        
    </div> <br> <br>
    <hr>
    <div >
        Hovr on the image below and check it make it as a flip  <br>
        <img src="https://cdn.wallpapersafari.com/41/9/cE1nV0.jpg" width="50%" alt="Google" class="flip">
    </div>
    <div class="responsive">
        <div class="resp1">
            <img src="https://cdn.wallpapersafari.com/41/9/cE1nV0.jpg" alt="">
            <div class="rt1">This is a responsive image gallary.</div>
        </div>
        <div class="resp1">
            <img src="https://cdn.wallpapersafari.com/41/9/cE1nV0.jpg" alt="">
            <div class="rt1">This is a responsive image gallary.</div>
        </div>
        <div class="resp1">
            <img src="https://cdn.wallpapersafari.com/41/9/cE1nV0.jpg" alt="">
            <div class="rt1">This is a responsive image gallary.</div>
        </div>
        <div class="resp1">
            <img src="https://cdn.wallpapersafari.com/41/9/cE1nV0.jpg" alt="">
            <div class="rt1">This is a responsive image gallary.</div>
        </div>
        <div class="resp1">
            <img src="https://cdn.wallpapersafari.com/41/9/cE1nV0.jpg" alt="">
            <div class="rt1">This is a responsive image gallary.</div>
        </div>
    </div>
</body>
</html>


 

at No comments:
Subscribe to: Posts (Atom)

Get Phone Number Details Using Python

 Get Phone Number Details Using Python Import Python module PHONENUMBERS using command " pip install phonenumbers" in you CLI Then...