Tranform

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Tranform</title>

</head>

<style>

*{

margin: 0px;

padding: 0px;

}

.container{

background-color: chocolate;

width: 75vw;

height: 80vh;

display: flex;

align-items: center;

justify-content: center;

}

.box{display: flex;

align-items: center;

justify-content: center;

    color: red;

border: 2px solid red;

width: 150px;

height: 150px;

background-color: yellowgreen;

transition: all 0.5s ease-in-out  ;

}

.box:hover{

transform: rotate(360deg);

transform: scale(3);

transform: translate(100px,150px);

transform: perspective(3);

transform: skew(40deg);

transform: matrix(20,25,35,25);

cursor: pointer;

background-color: yellow;

}

</style>

<body>

    <div class="container">

        <div class="box">

            This is transform box

        </div>

    </div>

</body>

</html>

selector

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>selector</title>

</head>

<style>

h1{

    border: 2px solid black;

    background-color: black;

    color: white;

    font-weight: bold;

}

div p{

    /* color: red; */

}

p{

    /* color:yellow */

}

div li p{

    /* color: blue; */

}

div>p{

    /* color: green; */

}

li<p{

    color: orange;

}

</style>

<body>

    <h1>This is head line</h1>

    <div class="container">

        <ul>

            <li>

                <p>This is inside li para</p>

                <p>This is inside li para</p>

            </li>

        </ul>

<div class="para"><p>This is frist para</p></div>

<div class="para"><p>This is second para</p></div>

<div class="para"><p>This is third para</p></div>

    </div>

    <p>This is outer para</p>

</body>

</html>

Responsive Design

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Responsive Design</title>

</head>

<style>

    html{

        font-size: 5px;

    }

.container{

    border: 2px solid black;

    text-align: center;

    /* font-size: 10px; */

    width: 100vw;

    height: 100vh;

}

#second{

font-size: 5rem;

}

#Third{

font-size: 5rem;

}

.para{

    border: 2px solid black;

}

</style>

<body>

    <div class="container">

        <h1 class="para"   id="first">This is First paragraph</h1>

        <h1 class="para"  id="second">This is second paragraph</h1>

        <h1 class="para"  id="Third">This is Third paragraph</h1>

    </div>

</body>

</html>

nth or pseudo

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>nth or pseudo</title>

</head>

<style>

.container{

border: 2px solid black;

width:50%;

display: block;

margin: auto;

background-color: black;

}

input{

    display: block;

    margin: auto;

}

.item{

display: block;

margin: 2px 250px;

}

input[type="text"]{

padding: 5px 5px;

border-radius: 10px;

margin: 5px auto;

color: red;

background: black;

}

input[type="Email"]{

padding: 5px 5px;

border-radius: 10px;

margin: 5px auto;

color: red;

background: black;

}

input[type="password"]{

padding: 5px 5px;

border-radius: 10px;

margin: 5px auto;

color: red;

background: black;

}

input[type="button"]{

border-radius: 10px;

margin: 8px auto;

    padding: 5px 15px;

background-color:red;

font-size: 20px;

}

a[target="_blank"]{

display: block;

margin: 5px 250px;

font-size: 30px;

font-weight: bold;

color: red;

}

a[target="_post"]{

display: block;

}

/* .item:nth-child(4n+2){

    color: blue;

    

    text-decoration:underline ;

    font-weight: bold;

} */

li:nth-child(odd){

    color: crimson;

    font-weight: bolder;

}

li:nth-child(even){

    color: white;

    font-weight: bolder;

}

input:hover{

cursor: pointer;

background-color: darkblue;

}

li:hover:nth-child(even){

cursor: pointer;

    color: red;

}

li:hover:nth-child(odd){

    cursor:pointer;

    color:blue;

}

</style>

<body>

    <div class="container">

<a href="http://Google.com" target="_blank">Go to the Google </a>

<form action="noaction.php" class="form-inp">

    <input type="text" placeholder="Enter Your Name">

    <input type="Email" placeholder="Enter Your Email">

    <input type="password" placeholder="Enter Your password">

    <input type="button" value="Submit">

</form>

<ul>

<li class="item" id="item1">Item1</li>

<li class="item" id="item2">Item2</li>

<li class="item" id="item3">Item3</li>

<li class="item" id="item4">Item4</li>

<li class="item" id="item5">Item5</li>

<li class="item" id="item6">Item6</li>

<li class="item" id="item7">Item7</li>

<li class="item" id="item8">Item8</li>

<li class="item" id="item9">Item9</li>

<li class="item" id="item10">Item10</li>

</ul>

    </div>

    

</body>

</html>

Mediaquery

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Mediaquery</title>

</head>

<style>

.box{

font-size: 50px;

    border: 2px solid black;

    background-color: red;

    color: white;

    text-align: center;

    display: none;

}

@media (max-width: 300px){

    #box-1{display: block;

        background-color:green;

    }

}

@media (min-width: 300px ) and  (max-width: 500px){

    #box-2{display: block;

        background-color:red;

    }

}

@media (min-width: 500px) and  (max-width: 900px){

    #box-3{display: block;

        background-color:yellow;

    }

}

@media (min-width: 900px ){

    #box-4{display: block;

        background-color:blue;

    }

}

</style>

<body>

    <div class="box" id="box-1">Main ek Iphone hoon</div>

    <div class="box" id="box-2">Main ek Tablet hoon</div>

    <div class="box" id="box-3">Main ek Laptop hoon</div>

    <div class="box" id="box-4">Main ek Widescreen hoon</div>

</body>

</html>

flexibility

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>flexibility boes</title>

</head>

<style>

.container{

    width: 100%;

    height: 500px;

    border: 3px solid black;

    border-radius: 6px;

  display: flex;

  flex-direction: row;

  /* flex-direction: row;

  flex-direction: column;

  flex-direction: row-reverse;

  flex-direction: column-reverse;

  flex-direction: inherit;

  flex-direction: initial;

  flex-direction: unset;

 

 justify-content: space-around;

 justify-content: space-between;

 align-items: center;

 align-items: stretch; */

  

}

.item{color: white;

border: 2px solid red;

margin: 5px;

padding: 5px;

background-color: blue;

height: 150px;

width: 200px;

}

#item1{

/* order: 3;

flex-shrink: 2; */

flex-basis: 320px;

}

#item2{

/* order: 1;

flex-shrink: 3; */

flex-basis: 150px;

}

#item3{

    /* order: 40;

    flex-shrink: 4; */

    /* flex is short hand for grow shrink and basics */

    flex: 3 2 400px;

    align-self: center;

    align-self: stretch;

}

</style>

<body>

    <h1>This is flex course</h1>

    <div class="container">

        <div class="item" id="item1">frist</div>

        <div class="item" id="item2">Second</div>

        <div class="item" id="item3">third</div>

        <div class="item" id="item4">fourth</div>

        <div class="item" id="item5">fivth</div>

        <div class="item" id="item6">sixth</div>

    </div>

</body>

</html>

CSS-animation and keyframe

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>animation and keyframe</title>

</head>

<style>

.container{

    background-color: blue;

    width: 100vw;

    height: 300px;

    margin: 0px 0px;

}

.box{

border: 2px solid red;

background-color: green;

border-radius: 15px;

width: 200px;

height: 150px;

margin: 15px 5px;

position: relative;

/* animation-name: upendra1;

animation-duration: 3s;

animation-iteration-count: 2;

animation-direction: initial;

animation-fill-mode: alternate;

/* animation-timing-function: ease-out; */

animation-name: upendra2;

animation-duration: 10s;

animation-delay: 5s;

animation-iteration-count: 10;

}

@keyframes upendra2{

0%{

    top: 0px;

    left: 0px;

}

25%{

    top:250px;

    left: 0px

}

75%{

left: 250px;

top: 250px;

}

100%{

top: 0px;

left: 250px;

}

}

@keyframes upendra1{

from{

   width:  200px;

}

to{

width: 800px;

}

}

</style>

<body>

    <div class="container">

        <div class="box">

        </div>

    </div>

</body>

</html>