Skip to main content

All Solution Code of CodeChef May Long Challenge 2021

competitve programming solution here...
3 comments

JARVIS Animation using HTML and CSS

 

HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jarvis animation with html</title>
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    
</head>
<body>
    <div id="overlay">
        <div class="container">
            <div class="cursor"></div>
            <div class="big circle"></div>
            <div class="outermost circle"></div>
            <div class="outer circle"></div>
            <div class="middle circle"></div>
            <div class="middle2 circle"></div>
            <div class="middle3 circle"></div>
            <div class="inner circle"></div>
            <div class="innermost3 circle"></div>
            <div class="innermost2 circle"></div>
            <div class="innermost circle"></div>
        </div>
    </div>
</body>
</html>

---------------------------------------------------------------------------------------
CSS Code
*{
    box-sizing: border-box;
}

#overlay {
    background: black;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
.container{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    
}

.cursor {
    width: 20px;
    height: 20px;
    border: 1px solid white;
    border-radius: 50%;
    position: absolute;
    top: calc(50% - 9px);
    left: calc(50% - 9px);
    transform: translate(-50%,-50%);
    animation: cursorAnim 0.5s infinite alternate;
}

.cursor::after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    border: 8px solid #0088ff;
    border-radius: 50%;
    opacity: .6;
    top: -9px;
    left: -9px;
    transform: translate(-50%,-50%);
    animation: cursorAnim2 .18s infinite alternate;
}

@keyframes cursorAnim {
    from {
        transform: scale(.8);
    }
    to {
        transform: scale(1.4);
    }
}
@keyframes cursorAnim2 {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(.6);
    }
}

.circle{
    border-radius: 50%;
}

.bg{
    width: 300px;
    height: 300px;
    background-color: black;
    border: solid 5px #0088ff;

}
.big{
    width: 277px;
    height: 270px;
    background: black;
    border: solid 2px rgba(0, 0, 0, 0);
    border-bottom: solid 2px #0088ff;
    border-left: solid 2px #0088ff;
    border-top: solid 2px #0088ff;
    border-right: solid 2px #0088ff;
}
.outermost{
    width: 255px;
    height: 255px;
    border: solid 10px rgba(0, 0, 0, 0);
    border-bottom: solid 10px #0088ff;
    border-left: solid 10px #0088ff;   
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation: spin 30s linear infinite;
}
.outer{
    width: 250px;
    height: 250px;
    border: solid 5px #0088ff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation: spin 30s linear infinite;
}
.middle{
    width: 215px;
    height: 215px;
    border: solid 12px rgba(0, 0, 0, 0);
    border-bottom: solid 12px #005aa8;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(45deg);
    animation: spin2 20s linear infinite reverse;
}
.middle2{
    width: 215px;
    height: 215px;
    border: solid 6px rgba(0, 0, 0, 0);
    border-top: solid 6px #005aa8;
    border-right: solid 6px #005aa8;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation: spin 20s linear infinite reverse;
}       
.middle3{
    width: 205px;
    height: 205px;
    border: solid 30px rgba(0, 0, 0, 0);
    border-top: solid 30px #0088ff4b;
    border-right: solid 30px #0088ff4b;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation: spin 20s linear infinite reverse;
}
.inner{
    width: 140px;
    height: 140px;
    border: solid 5px #0088ff;
    border-bottom: solid 5px #000000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(45deg);
    animation: spin2 20s linear infinite;
}   

.innermost2{
    width: 80px;
    height: 80px;
    border: solid 13px #0088ff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.innermost{
    width: 117px;
    height: 117px;
    border: solid 13px #0088ff;
    border-top: solid 13px #000000;
    border-bottom: solid 13px #000000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation: spin2 20s linear infinite reverse;
}

@keyframes spin{
    0% {
        transform: translate(-50%,-50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}
@keyframes spin2{
    0% {
        transform: translate(-50%,-50%) rotate(45deg);
    }
    100% {
        transform: translate(-50%,-50%) rotate(405deg);
    }
}

Comments

Post a Comment

Popular posts from this blog

solution code of Modular Equation problem number-5 of may long challenge codechef

 Modular Equation Problem Code: CodeChef Solution Code #include <bits/stdc++.h> using   namespace   std ; #define   int   long   long   int #define   endl   " \n " int32_t   main () {      ios_base :: sync_with_stdio ( false );     cin. tie ( 0 );      int  t;cin >> t;      while (t -- )     {          int  n, m;cin >> n >> m;          int  count_of_pair  =   0 ;          vector < int >  modular_equation(n + 1 ,  1 );          for ( int  a  =   2 ;a <= n;a ++ )         {              int  x  =  m % a;             count_of_pair  +=  modular_equation [ x ] ;              for ( int  b  =  x;b <= n;b += a)             {                 modular_equation [ b ] ++ ;             }         }         cout << count_of_pair << endl ;     }      return   0 ; }
Post a Comment
Read more

solution code of Tree House problem number-6 of may long challenge codechef

 Tree House Problem Solution Code: CodeChef Solution Code #pragma   GCC   optimize (" Ofast ", " unroll-loops ") #include   <bits/stdc++.h> using   namespace   std ; #define   int   long   long   int #define   double   long   double using   pii   =   pair < int ,  int >; template  < typename   T > using   Prior   =   std :: priority_queue < T ,  vector < T >,  greater < T >>; #define   X  first #define   Y  second #define   eb  emplace_back #define   ALL ( x )  begin (x),  end (x) #define   RALL ( x )  rbegin (x),  rend (x) #define   fastIO ()  ios_base ::sync_with_stdio, cin. tie ( 0 ) mt19937_64  rng( chrono :: steady_clock :: now (). time_since_epoch (). count ()); inline   int   getRand ( int   L ,  int   R ) {      if  ( L   >   R )          swap ( L ,  R );      return  ( int )(rng()  %  ( uint64_t )( R   -   L   +   1 )  +   L ); } template  < typename   T1 ,  typename   T2 > ostream   &operator <<( ostre
1 comment
Read more

solution code of Tic Tac Toe problem number-4 of may long challenge codechef

 Tic Tac Toe Problem Solution Code:  CodeChef Solution Code #include <bits/stdc++.h> using   namespace   std ; #define   ll   long   long   int int   main () {      ll  t;     cin >> t;      while (t -- )     {          ll  cx  =   0 , co  = 0 , c_ =   0 ;          char  a[ 3 ][ 3 ];          for ( ll  i = 0 ;i < 3 ;i ++ )         {              for ( ll  j = 0 ;j < 3 ;j ++ )             {                 cin >> a[i][j];                  if (a[i][j] == 'X' )cx ++ ;                  if (a[i][j] == 'O' )co ++ ;                  if (a[i][j] == '_' )c_ ++ ;             }         }          ll  wx  =   0 , wo  =   0 ;          if (a[ 0 ][ 0 ]  ==   'X'   &&  a[ 1 ][ 0 ]  ==   'X'   &&  a[ 2 ][ 0 ]  ==   'X' )wx = 1 ;          if (a[ 0 ][ 1 ]  ==   'X'   &&  a[ 1 ][ 1 ]  ==   'X'   &&  a[ 2 ][ 1 ]  ==   'X' )wx = 1 ;          if (a[ 0 ][ 2 ]  ==   'X'   &
Post a Comment
Read more