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:
Subscribe to: Posts (Atom)

TUT 44 (CSS GRID - 3)

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