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{
            position: relative;
            animation: sk1 1s ease-in-out 1s 2 forwards;
            background-color: rgb(249, 21, 249);
        }
        #box2{
            position: relative;
            animation: sk2 1.4s ease-in-out 1s 3 forwards;
            background-color: rgb(155, 23, 249);
        }
        #box3{
            position: relative;
            animation: sk3 1.5s ease-in-out 1s 4 forwards;
            background-color: blue;
        }
        #box4{
            position: relative;
            animation: sk4 1.6s ease-in-out 1s 5 forwards;
            background-color: rgb(24, 240, 24);
        }
        #box5{
            position: relative;
            animation: sk5 1.7s ease-in-out 1s 6 forwards;
            background-color: yellow;
        }
        #box6{
            position: relative;
            animation: sk6 1.8s ease-in-out 1s 7 forwards;
            background-color: rgb(251, 13, 13);
        }

        @keyframes sk1 {
            0% {
                top:0% ;
                left:0% ;
            }
            25% {
                top: 93%; ;
                left:0% ;
            }
            50% {
                top:93%  ;
                left:97% ;
            }
            75% {
                top:0% ;
                left:97% ;
            }
            100% {
                top:0% ;
                left:0% ;
            }
            from{
            }
            to{
                background-color: rgb(251, 13, 13);

            }
            }
        @keyframes sk2 {
            0% {
                top:0% ;
                left:0% ;
            }
            25% {
                top: 93%; ;
                left:0% ;
            }
            50% {
                top:0%  ;
                left:97% ;
            }
            75% {
                top:93% ;
                left:97% ;
            }
            100% {
                top:0% ;
                left:0% ;
            }
            from{
            }
            to{
                background-color: yellow;

            }
            }
           
        @keyframes sk3 {
            0% {
                top:0% ;
                left:0% ;
            }
            25% {
                top: 46.5%; ;
                left:48.5% ;
            }
            50% {
                top:0%  ;
                left:97% ;
            }
            75% {
                top:93% ;
                left:0% ;
            }
            100% {
                top:0% ;
                left:0% ;
            }
            from{
            }
            to{
                background-color: rgb(24, 240, 24);

            }
            }
        @keyframes sk4 {
            0% {
                top:93% ;
                left:0% ;
            }
            25% {
                top: 46.5%; ;
                left:48.5% ;
            }
            50% {
                top:93%  ;
                left:97% ;
            }
            75% {
                top:0% ;
                left:0% ;
            }
            100% {
                top:0% ;
                left:0% ;
            }
            from{
               
            }
            to{
                background-color: blue;

            }
            }
        @keyframes sk5 {
            0% {
                top:0% ;
                left:48.5% ;
            }
            25% {
                top: 46.5%; ;
                left:48.5% ;
            }
            50% {
                top:93%  ;
                left:97% ;
            }
            75% {
                top:93% ;
                left:0% ;
            }
            100% {
                top:0% ;
                left:0% ;
            }
            from{
            }
            to{
                background-color: rgb(155, 23, 249);
            }
            }
        @keyframes sk6 {
            0% {
                top:93% ;
                left:48.5% ;
            }
            25% {
                top: 46.5%; ;
                left:48.5% ;
            }
            50% {
                top:0%  ;
                left:97% ;
            }
            75% {
                top:0% ;
                left:0% ;
            }
            100% {
                top:0% ;
                left:0% ;
            }
            from{
         
            }
            to{
                background-color: rgb(249, 21, 249);
            }
            }
    </style>
</head>

<body>
    <div class="container">
        <div class="box" id="box1">S</div>
        <div class="box" id="box2">A</div>
        <div class="box" id="box3">U</div>
        <div class="box" id="box4">R</div>
        <div class="box" id="box5">A</div>
        <div class="box" id="box6">V</div>
    </div>

</body>

</html>
           
           






Comments

Anonymous said…
Thanks saurav
June 22, 2023 at 12:35 PM
Nitin Sinha said…
please provide a clear Notes of CSS
June 23, 2023 at 11:44 PM
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