HTML CODE

 

COMPLETE WEB DEVELOPMENT BOOTCAMP TUTORIALS

Animation property in CSS: tut36animation.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Creating Animation and keyframes</title>
    <style>
        .container {
            background-color: greenyellow;
        }

        .box {
            height: 30px;
            width: 30px;
            background-color: goldenrod;
            position: relative;
            /* animation-iteration-count: 2; */
            /* animation-name: frame2; */
            /* animation-duration: 6s; */
            /* animation-timing-function: ease-out; */
            /*ease-in:mtlb suru me slow aaega fir sudden fast& ease-out; means opposite*/
            /* animation-fill-mode: forwards; */
            /*backwards; mtlb backposition  & forwards; means bad wale position ko align krega*/
            /* animation-delay: 3s; */
            /* animation-direction: alternate; */
            /*Revise this all properties */

            /* animation shorthand property */
            /* animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-fill-mode; */
            animation: frame3 1s ease-in 0s infinite backwards;
            /* REMEMBER; TRICK; ANIMATION: KDTDCF & animation ke liye position dena necessary hai */
            border-radius: 45PX;
        }

        .box1{
        height: 30px;
            width: 30px;
            background-color: rgb(218, 32, 209);
            position: absolute;
            animation: frame3 2s ease-in 0s infinite forwards;
            border-radius: 45PX;

    }
    .box2{
        height: 30px;
            width: 30px;
            background-color: rgb(244, 7, 23);
            position: absolute;
            animation: frame3 3s ease-in 0s infinite forwards;
            border-radius: 45PX;

    }
    .box3{
        height: 30px;
            width: 30px;
            background-color: rgb(22, 6, 247);
            position: absolute;
            animation: frame3 4s ease-in 0s infinite forwards;
            border-radius: 45PX;

    }
    .box4{
        height: 30px;
            width: 30px;
            background-color: rgb(11, 244, 3);
            position: absolute;
            animation: frame3 5s ease-in 0s infinite forwards;
            border-radius: 45PX;

    }
        @keyframes frame2 {
            0% {
                top: 0px;
                left: 0px;
            }

            25% {
                top: 450px;
                left: 0px;
                box-shadow: 18px 18px 5px rgb(239, 9, 9);
            }

            50% {
                top: 450px;
                left: 450px;
                box-shadow: -18px -18px 5px rgb(239, 231, 9);
            }

            75% {
                top: 450px;
                /* right: 0px; */
                left: 1200px;
                box-shadow: 18px 18px 5px rgb(3, 244, 11);
            }

            100% {
                top: 0px;
                left: 1200px;
                box-shadow: -18px -18px 15px rgb(203, 6, 252);
            }
        }

        @keyframes frame1 {
            from {
                width: 250px;
                height: 250px;
                border: 2px solid yellowgreen;
                background-color: goldenrod;
                box-shadow: 8px 8px gray;
            }

            to {
                width: 1400px;
                height: 50px;
                border: 10px solid red;
                background-color: aqua;
                box-shadow: -8px -8px rgb(203, 6, 252);
            }
        }

        @keyframes frame3 {
            0% {
                top: 0px;
                left: 0px;
            }

            25% {
                top: 500px;
                left: 0px;
                box-shadow: 18px 18px 5px rgb(239, 9, 9);
            }

            50% {
                top: 0px;
                left: 1200px;
                box-shadow: -18px -18px 5px rgb(239, 231, 9);
            }

            75% {
                top: 500px;
                /* right: 0px; */
                left: 1200px;
                box-shadow: 18px 18px 5px rgb(3, 244, 11);
            }

            100% {
                top: 0px;
                left: 0px;
                box-shadow: -18px -18px 15px rgb(203, 6, 252);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
         <p>F</p>
        </div>
        <div class="box1">
         <p>R</p>
        </div>
        <div class="box2">
         <p>A</p>
        </div>
        <div class="box3">
         <p>M</p>
        </div>
        <div class="box4">
         <p>E</p>
        </div>
    </div>
</body>

</html>

frame1



frame2


frame3




Transform property in CSS : tut38transform.html

Transform  :  T R S S
T: TRANSLATE(to move the box in x or y direction), R: ROTATE(to rotate the box in deg)
S: SKEW(to skew the box in deg) , S:SCALE( to be scaled twice or thrice

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transform property in CSS</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .container {
            background-color: aqua;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .box {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 300px;
            width: 300px;
            border: 3px solid blue;
            background-color: greenyellow;
            border-radius: 50px;
            /* transform: rotate(45deg); */
            transition: all 15s ease-in-out 0s;
        }

        .box:hover {
            /* remember TRICK; T:TRSS */
            transform: rotate(3600000deg);
            /* transform: skew(60deg); */
            /* transform: scale(2); */
            /* transform: translateX(123px); */
            /* transform: translatey(123px); */
            /* transform: translate(123px,123px); */
            /* transform: translate3d(123px, 123px, 123px); */
        }
    </style>
</head>

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

</html>

Outcomes



CSS GRID TEMPLATE AREA : TUT44AREA.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- PRACTICE ADDING GRID IN SECTION, NAVBAR -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS grid template Area</title>
    <style>
        .container{
            display: grid;
            grid-gap: 1rem;
grid-template-areas:
'navbar navbar navbar navbar'
'section section section aside'
'footer footer footer footer';
        }
        .items{
            border: 2px solid black;
            background-color: aqua;
            padding: 23px 34px;
        }
        #navbar{
            grid-area: navbar;
        }
        #section{
grid-area: section;
        }
        #aside{
grid-area: aside;
        }
        #footer{
grid-area: footer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="items" id="navbar">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae ullam architecto atque nisi autem dicta, deserunt assumenda veniam officiis! Doloribus at iste numquam magni, saepe totam vitae tempore esse enim! Quae sit aut dolorum! Magnam tempora nulla, doloremque fuga recusandae voluptas officiis explicabo ex vero debitis dolores odio at eos, iure neque ipsa rem qui necessitatibus.
        </div>
        <div class="items" id="section">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae ullam architecto atque nisi autem dicta, deserunt assumenda veniam officiis! Doloribus at iste numquam magni, saepe totam vitae tempore esse enim! Quae sit aut dolorum! Magnam tempora nulla, doloremque fuga recusandae voluptas officiis explicabo ex vero debitis dolores odio at eos, iure nequearum cum. Dolores, odio.z
        </div>
        <div class="items" id="aside">
            necessitatibus. Doloremque, officiis assumenda nostrum tenetur, consequatur quos ipsam veniam consectetur cumque exercitationem quam placeat quo adipisci? Tempora voluptatibus accusantium explicabo numquam nihil possimus obcaecati asperiores veritatis optio, qui quas et eaque culpa natus laudantium repudiandae quia officia, necessitatibus,
        </div>
        <div class="items" id="footer">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero consectetur dolore unde!
        </div>
        <div class="items">Items-1</div>
        <div class="items">Items-2</div>
        <div class="items">Items-3</div>
        <div class="items">Items-4</div>
        <div class="items">Items-5</div>
        <div class="items">Items-6</div>
        <div class="items">Items-7</div>
        <div class="items">Items-8</div>
        <div class="items">Items-9</div>
        <div class="items">Items-10</div>
        <div class="items">Items-11</div>
        <div class="items">Items-12</div>
        <div class="items">Items-13</div>
        <div class="items">Items-14</div>
    </div>
</body>
</html>

Outcomes


AUTOFIT AND MINMAX IN CSS GRID: TUT43AUTOFIT.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- MAIN POINT IS AAPKE AAPKE DEVELOPER KO DIKKAT NHI HONI CHAHIYE WEBSITE KO MAINTAIN KARNE ME & developing times ka dhyab rakhna hai, USE GRID/FLOAT/FLEXBOX IN WHICH YOU ARE COMFORTABLE/ -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AUTOFIT AND MINMAX IN CSS</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(300px, 1fr));
            /* justify-content: center; */
         }
        .box{
            border: 2px solid black;
            background-color: aqua;
            padding: 34px;
            /* margin: 4px; */
        }
    </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 class="box">Item-15</div>
    </div>
</body>
</html>

Outcomes



GRID SPAN IN CSS:  TUT42SPAN.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid span IN CSS </title>
    <style>
        .grid{
            display: grid;
            grid-template-columns:repeat(5, 2fr) ;
        }
        .box{
            border: 2px solid black;
            background-color: aquamarine;
            margin: 4px;
            padding: 23px;
        }
        /* WE CAN USE GRID, FLOAT SYSTEM OR FLEXBOX IN WHICH WE ARE COMFORTABLE; br must not use */
        .box:first-child{
            /* grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 3; */
            /* grid-column: 3 / span 3; */
            /*3rd column se start krega aur 3 column ka space ye khud le lega*/
            grid-row: 2 / span 3;
            /*2nd row se start krega aur 3 row ka space ye khud le lega*/
        }
    </style>
</head>
<body>
    <div class="grid">
        <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-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>
</body>
</html>

Outcomes



 CSS GRID TUTORIALS: TUT40&41GRID.HTML



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Tutorial</title>
    <style>
        /*# USED TO DESIGEN PAGE LAYOUT */
        /*# GRID PROPERTY ALWAYS APPLY IN CONTAINER WHICH HAVE DISPLAY:GRID */
        .container {
            display: grid;
            /* grid-template-columns:300px 200px 100px; */
            /* grid-template-columns:300px auto 100px; */
            /* grid-template-columns:2fr 1fr 2fr; */
            grid-template-columns: repeat(3, auto);
            /*#repeat(no of columns, width of columns)*/
            /* grid-gap: 2rem; */
            /*#grid-gap means space between two lines*/
            /* grid-template-rows: 2fr 3fr 2fr; */
            grid-template-rows: repeat(2, 5fr);
            /*#repeat(no of rows on which property will apply, width of rows)*/
            grid-auto-rows: 2fr;
            /*grid-auto-rows: ; apply for remainder items*/
            grid-column-gap: 5rem;
            grid-row-gap: 5rem;
        }

        .items {
            /* height: 100px;
            width: 100px; */
            border: 2px solid black;
            background-color: red;
            margin: 2px;
            padding: 5px;
        }
    </style>
</head>

<body>
    <!-- .container+enter
    .items{This is item-$}*10 -->
    <div class="container">
        <div class="items">This is item-1</div>
        <div class="items">This is item-2</div>
        <div class="items">This is item-3</div>
        <div class="items">This is item-4</div>
        <div class="items">This is item-5</div>
        <div class="items">This is item-6</div>
        <div class="items">This is item-7</div>
        <div class="items">This is item-8</div>
        <div class="items">This is item-9</div>
        <div class="items">This is item-10</div>

</body>

</html>

Outcomes




Comments

Post a Comment

Popular posts from this blog

Knapasack

 # include<stdio.h>   void knapsack(int n, float weight[], float profit[], float capacity) {    float x[20], tp = 0;    int i, j, u;    u = capacity;      for (i = 0; i < n; i++)       x[i] = 0.0;      for (i = 0; i < n; i++) {       if (weight[i] > u)          break;       else {          x[i] = 1.0;          tp = tp + profit[i];          u = u - weight[i];       }    }      if (i < n)       x[i] = u / weight[i];      tp = tp + (x[i] * profit[i]);      printf("\nThe result vector is:- ");    for (i = 0; i < n; i++)       printf("%f\t", x[i]);      printf("\nMaximum profit is:- %f", tp);   }   int main() {    float weight[20], profit[20], capacity;    int num, i, j;    float ratio[20], temp;      printf("\nEnter the no. of objects:- ");    scanf("%d", &num);      printf("\nEnter the wts and profits of each object:- ");    for (i = 0; i < num; i++) {       scanf("%f %f", &weight[i], &am
Read more
Image
    👉 What is an Array? In JavaScript, an array is a versatile data structure used to store multiple values in a single variable.  It allows you to group related data together and perform various operations on them. To create an array, you can use square brackets and separate the values with commas: let myArray = [ value1 , value2 , value3 ]; Arrays can store any type of data, including numbers, strings, objects, and even other arrays. The elements in an array are accessed using their index, which starts from 0 for the first element: let firstElement = myArray[ 0 ]; // Accessing the first element   Arrays have several built-in methods that enable powerful data manipulation. Some commonly used methods include: push : Adds elements to the end of an array. pop : Removes the last element from an array. length : Returns the number of elements in an array. indexOf : Returns the index of a specified element in an array. Here's an example showcasing these methods:  let fruits = [ &q
Read more

Data types & Operators

Image
  Data types Number : Used to represent a number such as 1, 3.14, or -10. String : "Hello world!" This is used to represent text in a sentence or two, such as "JavaScript". Boolean : Represents true or false. used in functions and conditions. Null : Indicates that no value was created intentionally. Undefined : Indicates a variable that has been declared but not yet assigned a value. Object : A complex data type that can contain many values ​​and objects. Objects can be created using curly braces {}. Operators Operators, on the other hand, are symbols or elements used to control values ​​and variables. JavaScript provides many operators, including: 1.Arithmetic operators:  addition (+), subtraction (-), equals (*), division (/), etc. It is used for basic mathematic calculations. 2.Assignment Operators:  It is  used to assign values to variables like the equal sign (=) or +=, -= , *= etc.  3.Comparison operators:  equal (==), not equal (!=), greater than (>), less
Read more

If else condition

Image
  Mastering JavaScript: Unleashing the Power of If-Else Conditions for Web Development: In JavaScript, an if-else statement allows you to make decisions and execute different blocks of code based on a condition. It follows a simple structure: if ( condition ) {   // Code to execute if the condition is true } else {   // Code to execute if the condition is false } The condition is a logical expression that evaluates to either true or false. If the condition is true, the code within the first block will run. Otherwise, the code within the else block will execute. If you have multiple conditions to check, you can use else-if statements:         if ( condition1 ) {   // Code to execute if condition1 is true } else if ( condition2 ) {   // Code to execute if condition1 is false and condition2 is true } else {   // Code to execute if both condition1 and condition2 are false } By utilizing if-else statements and conditions, you can create dynamic and responsive JavaScript code that perf
Read more

COMPLETE WEB DEVELOPMENT BOOTCAMP:practice.html

practice.html <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Animation </ title >     < style >         * {             margin : 0% ;             padding : 0% ;             /* background-color: blue; */             height : 100% ;             width : 100% ;         }         .container {             display : flex ;             background-color : rgb ( 255 , 157 , 0 );           /* height:100%;          width: 100%; */         }         .box {             display : flex ;             height : 50px ;             width : 50px ;             border-radius : 50% ;             background-color : rgb ( 238 , 255 , 0 );             text-align : center ;             align-items : center ;             justify-content : center ;                     }         #box1 {            
Read more