Monday, 28 March 2022

TUT 44 (CSS GRID - 3)

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid</title>
<style>
.container{
      display: grid;
      grid-gap: 1rem;
      /* grid-template-areas: ; */
}
.item{
     background-color: yellow;
     border: 3px solid black;
}
</style>    
</head>
<body>
    <div class="container">
        <div class="box">Item-1</div>
        <div class="box">Item-2</div>
        <div class="box">Item-3</div>
        <div class="box">Item-4</div>
        <div class="box">Item-5</div>
        <div class="box">Item-6</div>
        <div class="box">Item-7</div>
        <div class="box">Item-8</div>
        <div class="box">Item-9</div>
        <div class="box">Item-10</div>
        <div class="box">Item-11</div>
        <div class="box">Item-12</div>
        <div class="box">Item-13</div>
        <div class="box">Item-14</div>
    </div>
</body>
</html>





at No comments:

TUT43 (CSS GRID- 2)

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid</title>
    <style>
        .container{
            display: grid;
            grid-gap: 1rem;
            /* grid-template-columns: 112px 112px 112px; */
            /* grid-template-columns: 1fr 1fr 1fr; */
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            /* justify-content: center; */
        }
        .box{
            border: 2px solid black;
            background-color: rgb(245, 187, 181) ;
            padding: 34px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Item-1</div>
        <div class="box">Item-2</div>
        <div class="box">Item-3</div>
        <div class="box">Item-4</div>
        <div class="box">Item-5</div>
        <div class="box">Item-6</div>
        <div class="box">Item-7</div>
        <div class="box">Item-8</div>
        <div class="box">Item-9</div>
        <div class="box">Item-10</div>
        <div class="box">Item-11</div>
        <div class="box">Item-12</div>
    </div>
</body>
</html>



at No comments:

TUT42 (CSS GRID)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid</title>
    <style>
        .container{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(4, 1fr);
        grid-gap: 1rem;
}        
            /* grid-column-gap: 7rem;
            grid-row-gap: 1rem; */
           
        .box{
            border: 2px solid black;
            background-color: cyan;
        }
        .box:first-child{
            /* grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 3; */
            grid-column: 1/ span 3;
            grid-row: 1/ span 3;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Item-1</div>
        <div class="box">Item-2</div>
        <div class="box">Item-3</div>
        <div class="box">Item-4</div>
        <div class="box">Item-5</div>
        <div class="box">Item-6</div>
        <div class="box">Item-7</div>
        <div class="box">Item-8</div>
        <div class="box">Item-9</div>
        <div class="box">Item-10</div>
        <div class="box">Item-11</div>
        <div class="box">Item-12</div>
        <div class="box">Item-13</div>
        <div class="box">Item-14</div>
    </div>
   
</body>
</html>



at No comments:

Saturday, 19 March 2022

TUT41 (CSS Grid)

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid</title>
    <style>
        .grid{
              display: grid;
              grid-template-rows: 1fr 1fr 4fr;
               grid-auto-rows: 2fr;
               grid-template-columns: repeat(9, 2fr);
               grid-gap: 1rem;
        }
        .box{
            background-color: cyan;
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <div class="grid">
        <div class="box">This is Box-1</div>
        <div class="box">This is Box-2</div>
        <div class="box">This is Box-3</div>
        <div class="box">This is Box-4</div>
        <div class="box">This is Box-5</div>
        <div class="box">This is Box-6</div>
        <div class="box">This is Box-7</div>
        <div class="box">This is Box-8</div>
        <div class="box">This is Box-9</div>
        <div class="box">This is Box-10</div>
    </div>
</body>
</html>




at No comments:

TUT40 (CSS Grid Tutorial)

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Tutorial</title>
    <style>
       .container{
           display: grid;
           /* grid-template-columns: 300px 100px 100px; */
           /* grid-template-columns: 300px auto 100px; */
           /* grid-template-columns: 1fr 4fr 1fr; */
           grid-template-columns: repeat(3,auto);
           grid-gap: 2rem;
       }
       .item{
           /* height: 100px;
           width: 100px; */
           background-color: aqua;
           border: 2px solid red;
           padding: 15px 5px;
       }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">This is Item-1</div>
        <div class="item">This is Item-2</div>
        <div class="item">This is Item-3</div>
        <div class="item">This is Item-4</div>
        <div class="item">This is Item-5</div>
        <div class="item">This is Item-6</div>
        <div class="item">This is Item-7</div>
        <div class="item">This is Item-8</div>
        <div class="item">This is Item-9</div>
        <div class="item">This is Item-10</div>
        <div class="item">This is Item-11</div>
        <div class="item">This is Item-12</div>
        <div class="item">This is Item-13</div>
        <div class="item">This is Item-14</div>
        <div class="item">This is Item-15</div>
        <div class="item">This is Item-16</div>
        <div class="item">This is Item-17</div>
        <div class="item">This is Item-18</div>
    </div>
</body>
</html>






at No comments:

TUT38 (CSS Transform)

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Transfrom</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
     .container{
         height: 80vh;
         background-color: burlywood;
         display: flex;
         justify-content: center;
         align-items: center;
     }
     
     .box{
        display: flex;
         justify-content: center;
         align-items: center;
         background: brown;
         border: 2px solid black;
         border-radius: 8px;
         height: 200px;
         width: 200px;
         transform: all 0.5s ease-in-out;
     }
    .box:hover{
        /* transform: rotate(360deg); */
        /* transform: skew(40deg); */
        /* transform: scale(2); */
        /* transform: translateX(123px); */
        /* transform: translateY(123px); */
        transform: translate(123px, 123px);
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            This is Box
        </div>
    </div>
</body>
</html>











at No comments:

TUT37 (CSS Transitions)

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Transitions</title>
</head>
<style>
    body{
        background-color: black;
    }
 #box{
     display: flex;
     height: 200px;
     width: 200px;
     background-color: red;
     justify-content: center;
     align-items: center;
     /* transition-property: background-color; */
     /* transition-duration: 1s; */
     /* transition-timing-function: ease-out; */
      /* transition-delay: 3s; */

      /* Transition short hand property in one line */
      /* transition: background-color 4s ease-in-out 2s */
     
      transition: all 1s ease-in-out 3s

 }

#box:hover{
    background-color: cyan;
    height: 400px;
    width: 300px;
    border-radius: 100px;
    font-size: 45px;
}
</style>
<body>
    <h3>This is CSS Transition Tutorial</h3>
    <div class="container">
        <div id="box">
         This is my box
        </div>
    </div>
</body>
</html>





at No comments:

TUT36 (Keyframes and Animations)

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Keyframes and Animations</title>
</head>
<style>
 .container{
     background-color: yellow;
 }
 .box{
     background-color: green;
     width: 250px;
     height: 250px;
     position: relative;
     animation-name: Zoya2;
     animation-duration: 8s;
     animation-iteration-count: 1;
    /* animation-fill-mode: forwards; */
    /* animation-timing-function: ease-in ease-in-out; */
    /* animation-delay: 3s; */
     /* animation-direction: reverse; */

     /* These properties can be set using this shorthand */
     /* animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-fill-mode */
     animation: zoya 5s ease-in 1s 12 backwards;

    }@keyframes Zoya2{
     0%{
        top: 0px;
        left: 0px;
    }
    25%{
        top: 250px;
        left: 0px;
       
     }
     75%{
        top: 250px;
        left: 250px;
     }
     100%{
        top: 0px;
        left: 250px;
     }
     }
 }

    }@keyframes Zoya1{
     From{
         width: 200px;}
         To{
             width:1400px
         }
     }
 }

</style>
<body>
    <div class="container">
     <div class="box">
      This is a Box
    </div>
    </div>
</body>
</html>



at No comments:

TUT35 (CSS Variables/Custom Properties)

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Variables/Custom Properties</title>
    <style>
        :root{
            --primary-color: blue;
            --danger-color: red;
            --maxw: 333px;
        }
      .box{
          --box-color: violet;
          width: 200px;
          height: 200px;
          background-color: var(--primary-color);
          border: 2px solid var(--danger-color)
          box-shadow: 3px 3px var(var(--danger-color));
          margin: 2px 9px;
      }
      .container{
         max-width: var(--maxw);
          margin: auto;
          background-color: var(--danger-color);
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: var(--box-color);
      }
    </style>
</head>
<body>
    <div class="container">
       <div class="box"></div>
       <div class="box"></div>
       <div class="box"></div>
    </div>
</body>
</html>



at No comments:

TUT34 (Box shadow and text shadow)

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box shadow and text shadow</title>
</head>
<style>
    .container{
        display: flex;
    }
    .card{
        padding: 23px 12px;
        margin: 23px 12px;
        /* border: 2px solid red; */
        background-color: bisque;
       
        /* box-shadow: offset-x offset-y color; */
        /* box-shadow: offset-x offset-y blur-radius spread-radius color; */

        /* box-shadow: 10px 13px green; */
        /* box-shadow: -7px -5px 10px green; */
        /* box-shadow: -7px -5px 10px 20px rgba(71, 172, 172, 0.5) */
        box-shadow: inset 3px 5px red;
    }
    .card h2{
        /* text-shadow: 3px 4px white; */
        text-shadow: 3px 4px 2px white;
    }
</style>
<body>
    <div class="container">
        <div class="card" id="car-1">
        <h2> This is C++ Course</h2>  
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet repudiandae, quaerat rerum quae error assumenda ipsum beatae excepturi explicabo facilis ex? Voluptate quaerat illo iusto quia incidunt quos, ipsa exercitationem ut perspiciatis eligendi nisi!
        </p>
        </div>
        <div class="card" id="car-2">
            <h2>This is HTML Course</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, voluptates! Dolorem repudiandae vitae, excepturi iusto vel ad reiciendis similique eligendi officia amet animi.</p>
        </div>
        <div class="card" id="car-3">
            <h2> Card3</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates inventore odit qui temporibus ipsa ducimus? Corporis quasi impedit eum! Dolor placeat molestiae explicabo. Expedita praesentium excepturi cumque quidem.</p>
        </div>
    </div>
</body>
</html>



at No comments:
Subscribe to: Posts (Atom)

TUT 44 (CSS GRID - 3)

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < met...