Monday, 18 January 2021

CSS_Media_Queries

                              CSS_Media_Queries

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Queries</title>
</head>
<style>
.box {
padding: 25px;
text-align: center;
background-color: aquamarine;
margin: 5px 25%;
font-size: xx-large;
display:none;
}
@media only screen and (max-width: 500px) {
    #box1 {
         display: block;
    }
}
@media only screen and (min-width: 500px) and (max-width: 700px) {
    #box2 {
         display: block;
         color: yellow;
         background-color: blueviolet;
    }
}
@media only screen and (min-width: 700px) and (max-width: 1000px) {
    #box3 {
         display: block;
         color: azure;
         background-color: cyan;
    }
}
@media only screen and (min-width: 1000px) and (max-width: 1300px) {
    #box4 {
         display: block;
         color: azure;
         background-color: pink;
    }
}
@media only screen and (min-width: 1300px)  {
    #box5 {
         display: block;
         color: azure;
         background-color: steelblue;
    }
}
</style>
<body>
    <div class="box" id="box1">I have a Oppo Mobile</div>
    <div class="box" id="box2">I have a Vivo Mobile</div>
    <div class="box" id="box3">I have a Samsung Mobile</div>
    <div class="box" id="box4">I have a Infinix Mobile</div>
    <div class="box" id="box5">I have a Iphone Mobile</div>
</body>
</html>

   

at No comments:

Wednesday, 6 January 2021

CSS Multiple Column

                                     CSS Multiple Column 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Columns</title>
    <style>
        .box {
            width: 100%;
            border: 1px solid crimson;
            /* column-count: 3; we can use only one property between column-count and column-width at a time */
            column-width: 250px; /* column width property automatically adjust the count of the columns */
            column-gap: 40px;
            column-rule-width: 10px;
            column-rule-style: dashed;
            column-rule-color: deepskyblue;
            /* Same as above */
            /* column-rule: 10px double violet; */
        }
        h1 {
            column-span: all; /*This property have only two values all and none*/
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>Heading Heading Heading Heading Heading Heading</h1>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe consequatur voluptate sed voluptas animi magni quidem nihil facere culpa at odit quos in fugit similique omnis unde aliquam atque, facilis tempore architecto itaque voluptatem ab ipsam impedit. Cupiditate, voluptates fugit. Fugiat adipisci at voluptas nisi pariatur. Vel nulla perspiciatis dolor, fugiat sed eius odit tenetur cumque et, exercitationem ipsa laborum vero temporibus maiores. Maiores, cupiditate ipsa error magni minima accusamus mollitia, dicta similique molestias sequi a nam iure eos. Impedit voluptate distinctio debitis deleniti magni autem placeat blanditiis aut non at adipisci quo velit quis ea delectus vero nesciunt sapiente minus cum quasi, pariatur perferendis perspiciatis saepe voluptatem? Laborum, quod aperiam. Rerum soluta id non minus eos quia blanditiis quam, maiores libero? Illo quas aliquid consequatur accusantium voluptatibus laboriosam dolore perspiciatis maxime sequi quisquam sed ipsam, saepe quidem facere optio error. Similique neque quidem harum officiis voluptatem. Assumenda natus veniam eius voluptatum accusamus quam expedita minus quisquam, ea libero incidunt vel, amet neque tempora earum facere voluptatem! Veniam ut reprehenderit explicabo blanditiis quo doloremque nisi quasi. Est sed aliquid delectus minima itaque eum, veniam earum velit ea saepe. Suscipit quibusdam culpa neque quas repellendus voluptate, adipisci numquam? Eius sit maxime commodi, voluptas incidunt quaerat asperiores amet accusantium harum, non cupiditate iste exercitationem, quod expedita enim eum? Quia magni culpa molestias nesciunt facere laborum unde maiores praesentium nostrum ipsa dolore quam incidunt quasi odio eius dicta tempora modi assumenda, expedita odit neque ratione explicabo qui placeat? Odit, dicta quidem. Ab consectetur, doloribus eos facilis laboriosam quis sunt fugiat ipsam dolor esse totam vel delectus voluptate sit quod debitis! Consequuntur dolore modi labore neque expedita. Dolor ratione perferendis aliquid esse facere repudiandae incidunt, dolorum, officiis aperiam architecto praesentium, rem ducimus? Quos, quisquam eum quo dolorem nam minima sint placeat nobis omnis quis maiores soluta natus totam necessitatibus quaerat debitis impedit magni iste officiis autem cumque consectetur. Voluptatibus est neque perferendis, amet ab quam doloremque laboriosam molestiae ut corrupti officia fugiat. Quidem iusto excepturi maxime vel atque obcaecati labore repellat omnis explicabo. Fugit repellat omnis voluptas provident ad quibusdam libero numquam repudiandae modi repellendus facere assumenda hic consequuntur mollitia a obcaecati, sed tenetur. Officiis dolore, et quia, odio impedit eaque fugit hic ut unde vero accusantium sequi. Rerum aliquam reiciendis iste ipsum rem soluta voluptas. Ipsa neque labore ab pariatur ducimus. Consequuntur veniam repudiandae similique necessitatibus temporibus earum voluptatibus laboriosam quod quo ipsam?

    </div>
</body>
</html>
column and column-fill ..... 
 

 

at No comments:

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