Machine Animation with CSS

<!DOCtype html>
<html>
<style>
  @font-face {
    font-family: "pacman";
    src: url("https://raw.githubusercontent.com/maxi83c/Fonts/main/pacman.ttf");
  }
  
  html {
    box-sizing: border-box;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
  
  body {
    background-color: #a1d6e6;
    margin-top: 50px;
    margin-bottom: 50px;
  }
  
  .arcade-container {
    position: relative;
    display: flex;
    justify-content: center;
    z-index: 0;
  }
  
  .arcade-container .arcade-wall {
    position: relative;
  }
  
  .arcade-container .arcade-wall .block-1 {
    position: relative;
    overflow: hidden;
    width: 220px;
    height: 85px;
  }
  
  .arcade-container .arcade-wall .block-1::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 100px;
    left: 6px;
    top: 28px;
    background: #0096b6;
    border-top: 8px solid #264042;
    border-left: 4px solid #264042;
    border-top-left-radius: 12px;
    transform: rotate(-19deg);
  }
  
  .arcade-container .arcade-wall .block-2 {
    position: relative;
    width: 220px;
    height: 50px;
    background: #0096b6;
    border-left: 8px solid #264042;
  }
  
  .arcade-container .arcade-wall .block-2::before {
    content: "";
    position: absolute;
    border-left: 8px solid #264042;
    height: 10px;
    top: -7px;
    left: -8px;
    border-radius: 2px;
  }
  
  .arcade-container .arcade-wall .block-2::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 50px;
    background: #0096b6;
    border-bottom: 8px solid #264042;
    border-left: 9px solid #264042;
    border-right: 9px solid #264042;
    transform: skew(-45deg);
    right: 15px;
    z-index: 1;
  }
  
  .arcade-container .arcade-wall .block-3 {
    position: relative;
    width: 220px;
    height: 180px;
    background-color: #0096b6;
    border-left: 8px solid #264042;
  }
  
  .arcade-container .arcade-wall .block-3::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 180px;
    background: #00b8e6;
    border-bottom: 8px solid #264042;
    border-left: 8px solid #264042;
    border-right: 8px solid #264042;
    right: 40px;
    z-index: 1;
  }
  
  .arcade-container .arcade-wall .block-4 {
    position: relative;
    width: 220px;
    height: 45px;
    background-color: #0096b6;
    border-left: 8px solid #264042;
  }
  
  .arcade-container .arcade-wall .block-4::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 45px;
    background: #00cff3;
    border-bottom: 8px solid #264042;
    border-left: 8px solid #264042;
    border-right: 8px solid #264042;
    right: 17px;
    transform: skew(45deg);
    z-index: 1;
    border-bottom-right-radius: 2px;
  }
  
  .arcade-container .arcade-wall .block-5 {
    position: relative;
    width: 220px;
    height: 95px;
    background-color: #0096b6;
    border-left: 8px solid #264042;
  }
  
  .arcade-container .arcade-wall .block-5::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 95px;
    background: #00b8e6;
    border-bottom: 8px solid #264042;
    border-left: 8px solid #264042;
    border-right: 8px solid #264042;
    right: -5px;
    z-index: 1;
    border-bottom-right-radius: 2px;
  }
  
  .arcade-container .arcade-wall .block-6 {
    position: relative;
    width: 220px;
    height: 25px;
    background-color: #0096b6;
    border-left: 8px solid #264042;
  }
  
  .arcade-container .arcade-wall .block-6::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 25px;
    background: #0096b6;
    border-bottom: 8px solid #264042;
    border-left: 9px solid #264042;
    border-right: 9px solid #264042;
    right: 8px;
    z-index: 1;
    transform: skew(-45deg);
    border-bottom-left-radius: 2px;
  }
  
  .arcade-container .arcade-wall .block-7 {
    position: relative;
    width: 220px;
    height: 195px;
    background-color: #0096b6;
    border-left: 8px solid #264042;
    border-bottom: 8px solid #264042;
    border-bottom-left-radius: 4px;
  }
  
  .arcade-container .arcade-wall .block-7::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 195px;
    background: #00b8e6;
    border-bottom: 8px solid #264042;
    border-left: 9px solid #264042;
    border-right: 9px solid #264042;
    right: 20px;
    z-index: 1;
    border-bottom-left-radius: 2px;
  }
  
  .arcade-container .arcade-wall.alt {
    margin-left: -250px;
    z-index: -1;
  }
  
  .arcade-container .arcade-wall.alt .block-2,
  .arcade-container .arcade-wall.alt .block-6 {
    background: linear-gradient(136deg, #0096b6 80%, rgba(0, 0, 0, 0) 75%);
  }
  
  .arcade-container .arcade-wall.alt .block-3,
  .arcade-container .arcade-wall.alt .block-7 {
    background: linear-gradient(90deg, #0096b6 80%, rgba(0, 0, 0, 0) 75%);
  }
  
  .arcade-container .arcade-wall.alt .block-4 {
    background: linear-gradient(45deg, #0096b6 80%, rgba(0, 0, 0, 0) 75%);
  }
  
  .arcade-container .arcade-wall.alt .block-5 {
    background: linear-gradient(90deg, #0096b6 90%, rgba(0, 0, 0, 0) 75%);
  }
  
  .arcade-container .arcade-wall.alt .block-2::before {
    content: "";
    position: absolute;
    width: 25px;
    height: 5px;
    background-color: #264042;
    border-radius: 2.5px;
    z-index: 1;
    transform: rotate(-45deg) translate(110px, 120px);
  }
  
  .arcade-container .arcade-wall.alt .block-6::before {
    content: "";
    position: absolute;
    width: 25px;
    height: 5px;
    background-color: #264042;
    border-radius: 2.5px;
    right: 32px;
    top: 3px;
    z-index: 1;
    transform: rotate(-45deg);
  }
  
  .arcade-container .arcade-mid {
    position: relative;
  }
  
  .arcade-container .arcade-mid .top .b1-cont {
    display: flex;
    position: relative;
    left: -20px;
  }
  
  .arcade-container .arcade-mid .top .b1-cont .border {
    position: relative;
    width: 22px;
    height: 85px;
    background: #00b8e6;
    border-top: 8px solid #264042;
    border-bottom: 8px solid #264042;
  }
  
  .arcade-container .arcade-mid .top .b1-cont .border.left {
    border-left: 8px solid #264042;
    border-top-left-radius: 10px;
  }
  
  .arcade-container .arcade-mid .top .b1-cont .border.right {
    border-right: 8px solid #264042;
    border-top-right-radius: 10px;
  }
  
  .arcade-container .arcade-mid .top .block-1 {
    position: relative;
    width: 300px;
    height: 85px;
    background: #00b8e6;
    background: linear-gradient(315deg, #00b8e6 30%, #41d1ee 30%, #41d1ee 70%, #00b8e6 70%);
    border: 8px solid #264042;
    box-shadow: inset -8px 8px #41d1ee;
  }
  
  .arcade-container .arcade-mid .top .block-1::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 13px;
    background: #264042;
    border-radius: 1px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  
  .arcade-container .arcade-mid .top .block-2 {
    position: relative;
    left: -20px;
    width: 250px;
    height: 40px;
    background: #284f5f;
    transform: skewX(-45deg);
    border-bottom: 8px solid #264042;
    border-right: 10px solid #264042;
    border-left: 10px solid #264042;
  }
  
  .arcade-container .arcade-mid .top .block-2::before,
  .arcade-container .arcade-mid .top .block-2::after {
    content: "";
    position: absolute;
    left: -2px;
    width: 40px;
    height: 4px;
    background-color: #264042;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    transform: skewX(45deg);
  }
  
  .arcade-container .arcade-mid .top .block-2::before {
    top: 6px;
    width: 40px;
    height: 4px;
  }
  
  .arcade-container .arcade-mid .top .block-2::after {
    top: 15px;
    width: 80px;
    height: 4px;
  }
  
  .arcade-container .arcade-mid .screen {
    position: relative;
    left: -40px;
    width: 250px;
    height: 210px;
    background-color: #446068;
    background-image: radial-gradient(rgba(38, 64, 66, 0.7) 40%, transparent 40%), radial-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%);
    background-size: 730px 540px, 30px 30px;
    background-repeat: no-repeat;
    background-position: -310px -25px, 94% 39%;
    border: 8px solid #264042;
    border-top: none;
    border-left: none;
  }
  
  .arcade-container .arcade-mid .screen .pacman-container {
    overflow: hidden;
    position: absolute;
    width: 250px;
    height: 210px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.8;
  }
  
  .arcade-container .arcade-mid .screen .pacman-container::before {
    content: "";
    width: 130px;
    height: 200px;
    position: absolute;
    right: 8px;
    top: 0;
    background-image: radial-gradient(gold 14%, transparent 11%);
    background-size: 100px 100px;
    background-repeat: repeat-x;
    background-position: 200px center;
    animation: move-dots 1.6s linear infinite;
    z-index: 1;
  }
  
  .arcade-container .arcade-mid .screen .pacman-container::after {
    content: "";
    width: 13px;
    height: 13px;
    position: absolute;
    border-radius: 50%;
    background-color: #446068;
    top: 70px;
    left: 120px;
    z-index: 1;
  }
  
  .arcade-container .arcade-mid .screen .pacman {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(90deg, yellow 50%, transparent 50%);
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    z-index: 1;
  }
  
  .arcade-container .arcade-mid .screen .pacman::after,
  .arcade-container .arcade-mid .screen .pacman::before {
    content: "";
    width: 100px;
    height: 50px;
    position: absolute;
    left: 0;
    background-color: yellow;
    animation: eat 0.4s linear infinite alternate;
  }
  
  .arcade-container .arcade-mid .screen .pacman::after {
    top: 0;
    transform: rotate(-45deg);
    transform-origin: center bottom;
  }
  
  .arcade-container .arcade-mid .screen .pacman::before {
    top: 50px;
    transform: rotate(45deg);
    transform-origin: center top;
  }
  
  .arcade-container .arcade-mid .screen::before {
    content: "";
    position: absolute;
    width: 70px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    top: 20px;
    right: 30px;
    transform: rotate(45deg);
  }
  
  .arcade-container .arcade-mid .mid .block-1 {
    position: relative;
    left: -20px;
    width: 250px;
    height: 40px;
    background: #366a7f;
    transform: skewX(45deg);
    border-bottom: 8px solid #264042;
    border-right: 10px solid #264042;
    border-left: 10px solid #264042;
  }
  
  .arcade-container .arcade-mid .mid .block-1 .joystick {
    position: absolute;
    left: 20%;
    transform: skewX(-45deg) translateY(-35px);
    width: 22px;
    height: 60px;
    background: #d6d6d6;
    border-radius: 10px;
    border: 8px solid #264042;
    box-shadow: inset 0 24px 2px -1px #979a9a;
  }
  
  .arcade-container .arcade-mid .mid .block-1 .joystick::before {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 8px solid #264042;
    top: -20px;
    left: 50%;
    transform: translatex(-50%) rotate(45deg);
    background-color: #ff5a59;
    background-image: radial-gradient(24px 16px, #ffa6a6, #ffa6a6 25%, transparent 25%), radial-gradient(7px 7px, #ffa6a6, #ffa6a6 25%, transparent 25%);
    background-size: 2.1em;
    background-position: -6px -5px, 3px 0px;
    background-repeat: no-repeat;
  }
  
  .arcade-container .arcade-mid .mid .block-1 .button {
    position: absolute;
    top: 2px;
    transform: skewX(-45deg);
    width: 30px;
    height: 25px;
    border-radius: 50%;
    border: 8px solid #264042;
    box-shadow: inset -2px 2px 5px -2px #fafafa;
  }
  
  .arcade-container .arcade-mid .mid .block-1 .button.yellow {
    right: 30%;
    background-color: #e5d33a;
  }
  
  .arcade-container .arcade-mid .mid .block-1 .button.red {
    right: 10%;
    background-color: #ff5a59;
  }
  
  .arcade-container .arcade-mid .mid .block-2 {
    position: relative;
    width: 250px;
    height: 70px;
    background: #366a7f;
    border-bottom: 8px solid #264042;
    border-right: 8px solid #264042;
    box-shadow: inset 0 5px 2px #64828d;
  }
  
  .arcade-container .arcade-mid .mid .block-2 .speakers {
    position: absolute;
    width: 5px;
    height: 14px;
    background-color: #264042;
    border-radius: 3px;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 10px -4px #264042, 10px 4px #264042, 20px -8px #264042, 20px 0px #264042, 20px 8px #264042, 30px -4px #264042, 30px 4px #264042, 40px 0px #264042;
  }
  
  .arcade-container .arcade-mid .mid .block-2 .coins {
    position: absolute;
    width: 38px;
    height: 44px;
    border: 5px solid #264042;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 1px;
    box-shadow: inset -5px 5px #64828d;
    background-color: #284f5f;
  }
  
  .arcade-container .arcade-mid .mid .block-2 .coins::before {
    content: "";
    position: absolute;
    width: 5px;
    height: 15px;
    border-radius: 5px;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    background: #264042;
  }
  
  .arcade-container .arcade-mid .mid .block-2 .coins::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 5px;
    border-radius: 5px;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    background: #264042;
  }
  
  .arcade-container .arcade-mid .mid .block-3 {
    position: relative;
    left: -10px;
    width: 250px;
    height: 20px;
    background: #284f5f;
    transform: skewX(-45deg);
    border-bottom: 8px solid #264042;
    border-right: 10px solid #264042;
  }
  
  .arcade-container .arcade-mid .bottom .block-1 {
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    left: -20px;
    width: 250px;
    height: 210px;
    background-color: #366a7f;
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 40%, transparent 40%);
    background-size: 800px 540px;
    background-repeat: no-repeat;
    background-position: -240px -280px;
    border: 8px solid #264042;
    border-left: none;
    border-top: none;
  }
  
  .arcade-container .arcade-mid .bottom .block-1::before {
    content: "";
    position: absolute;
    width: 5px;
    height: 34px;
    background-color: #264042;
    border-radius: 3px;
    bottom: -2px;
    right: 10px;
    box-shadow: -12px 12px #264042;
  }
  
  .arcade-container .arcade-mid .bottom .block-1 .box-1 {
    display: flex;
    justify-content: center;
    position: relative;
    width: 120px;
    height: 100px;
    border: 5px solid #264042;
    border-radius: 2px;
    box-shadow: inset -4px 4px #64828d;
    background-color: #284f5f;
  }
  
  .arcade-container .arcade-mid .bottom .block-1 .box-1::before {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: #264042;
    top: 10px;
    right: 11px;
    border-radius: 5px;
    box-shadow: -10px 0px #264042;
  }
  
  .arcade-container .arcade-mid .bottom .block-1 .box-1 .box-2 {
    position: relative;
    top: 20px;
    width: 80%;
    height: 70%;
    border: 5px solid #264042;
    border-radius: 2px;
    box-shadow: inset -4px 4px #64828d;
    background-color: #284f5f;
  }
  
  .arcade-container .arcade-mid .bottom .block-1 .box-1 .box-2::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    border: 5px solid #264042;
    border-radius: 100%;
    box-shadow: inset -2px 2px 1px #64828d;
  }
  
  .bg {
    position: absolute;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    top: 150px;
  }
  
  .bg .brick-block-1 {
    position: relative;
    left: -390px;
    top: 240px;
  }
  
  .bg .brick-block-1 .brick-1,
  .bg .brick-block-1 .brick-2 {
    position: absolute;
    width: 80px;
    height: 40px;
    border: 6px solid #7aafbe;
    border-radius: 10px;
    background-color: #95ccde;
  }
  
  .bg .brick-block-1 .brick-1::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 6px;
    background-color: #7aafbe;
    border-radius: 3px;
    bottom: -6px;
    right: -30px;
  }
  
  .bg .brick-block-1 .brick-2 {
    top: -34px;
    left: -40px;
  }
  
  .bg .brick-block-1 .brick-2::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 6px;
    background-color: #7aafbe;
    border-radius: 3px;
    top: -6px;
    left: -30px;
  }
  
  .bg .brick-block-2 {
    position: relative;
    right: -335px;
    top: 60px;
  }
  
  .bg .brick-block-2 .brick-1,
  .bg .brick-block-2 .brick-2,
  .bg .brick-block-2 .brick-3 {
    position: absolute;
    width: 80px;
    height: 40px;
    border: 6px solid #7aafbe;
    border-radius: 10px;
    background-color: #95ccde;
  }
  
  .bg .brick-block-2 .brick-1::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 6px;
    background-color: #7aafbe;
    border-radius: 3px;
    bottom: -6px;
    right: -16px;
    box-shadow: 10px 0 #7aafbe, 30px 0 #7aafbe;
  }
  
  .bg .brick-block-2 .brick-2 {
    top: -34px;
    left: -40px;
  }
  
  .bg .brick-block-2 .brick-2::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 6px;
    background-color: #7aafbe;
    border-radius: 3px;
    top: -6px;
    left: -30px;
  }
  
  .bg .brick-block-2 .brick-3 {
    left: -74px;
  }
  
  .extra {
    position: relative;
    width: 500px;
    margin: 0 auto;
  }
  
  .extra .plug {
    position: absolute;
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    background-color: #d6d6d6;
    border-radius: 13px;
    border: 8px solid #264042;
    top: -134px;
    left: -126px;
    box-shadow: -17px 0 0 -8px #c4c4c4, -17px 0 0 #264042;
  }
  
  .extra .plug::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    border: 8px solid #264042;
    background: #366a7f;
  }
  
  .extra .plug::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    background: #264042;
  }
  
  .extra .wire {
    position: absolute;
    width: 80px;
    height: 60px;
    border-bottom-left-radius: 20px;
    border-bottom: 8px solid #264042;
    border-left: 8px solid #264042;
    top: -100px;
    left: -95px;
  }
  
  .ground {
    margin: 0 auto;
    position: relative;
    top: -8px;
    width: 800px;
    height: 8px;
    border-radius: 8px;
    background-color: #264042;
  }
  
  .ground::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #264042;
    right: -16px;
  }
  
  .ground::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 8px;
    border-radius: 4px;
    background: #264042;
    left: -46px;
  }
  
  .detail {
    position: absolute;
  }
  
  .detail.detail-1 {
    width: 30px;
    height: 5px;
    background: #264042;
    border-radius: 4px;
    top: 140px;
    left: 30px;
    z-index: 1;
    transform: rotate(20deg);
    box-shadow: 45px 0 #264042;
  }
  
  .detail.detail-1:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 5px;
    left: 13px;
    border-radius: 4px;
    background: #264042;
    transform: rotate(-90deg);
    box-shadow: -10px 0 #264042, 40px 0 #264042, -30px 24px #264042, -15px 24px #264042, 15px 24px #264042, 25px 24px #264042;
  }
  
  .detail.detail-1:after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: #264042;
    left: 50px;
    top: -55px;
    border-radius: 2.5px;
  }
  
  .detail.detail-2 {
    width: 5px;
    height: 100px;
    background: #264042;
    border-radius: 4px;
    bottom: 190px;
    left: 15px;
    z-index: 1;
  }
  
  .detail.detail-2:after {
    content: "";
    position: absolute;
    width: 5px;
    height: 20px;
    background-color: #264042;
    bottom: -190px;
    border-radius: 2.5px;
  }
  
  @keyframes eat {
    to {
      transform: rotate(0);
    }
  }
  
  @keyframes move-dots {
    to {
      background-position: 0px center;
    }
  }
</style>

<body>
  <div class="bg">
    <div class="brick-block-1">
      <div class="brick-1"></div>
      <div class="brick-2"></div>
    </div>
    <div class="brick-block-2">
      <div class="brick-1"></div>
      <div class="brick-2"></div>
      <div class="brick-3"></div>
    </div>
  </div>
  <div class="arcade-container">
    <div class="arcade-wall">
      <div class="detail detail-1"></div>
      <div class="detail detail-2"></div>
      <div class="top">
        <div class="block-1"></div>
        <div class="block-2"></div>
        <div class="block-3"></div>
        <div class="block-4"></div>
        <div class="block-5"></div>
        <div class="block-6"></div>
        <div class="block-7"></div>
      </div>
    </div>
    <div class="arcade-mid">
      <div class="top">
        <div class="b1-cont">
          <div class="border left"></div>
          <div class="block-1"></div>
          <div class="border right"></div>
        </div>
        <div class="block-2"></div>
      </div>
      <div class="screen">
        <div class="pacman-container">
          <div class="pacman">
          </div>
        </div>
      </div>
      <div class="mid">
        <div class="block-1">
          <div class="joystick"></div>
          <div class="button yellow"></div>
          <div class="button red"></div>
        </div>
        <div class="block-2">
          <div class="speakers"></div>
          <div class="coins"></div>
        </div>
        <div class="block-3"></div>
      </div>
      <div class="bottom">
        <div class="block-1">
          <div class="box-1">
            <div class="box-2"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="arcade-wall alt">
      <div class="top">
        <div class="block-1"></div>
        <div class="block-2"></div>
        <div class="block-3"></div>
        <div class="block-4"></div>
        <div class="block-5"></div>
        <div class="block-6"></div>
        <div class="block-7"></div>
      </div>
    </div>
  </div>
  <div class="extra">
    <div class="plug"></div>
    <div class="wire"></div>
    <div class="drink"></div>
  </div>
  <div class="ground"></div>
<h1>
   <span>MADE BY DEVANSH MISHRA</span>
       </h1>
</body>

</html>

Comments

Post a Comment

Popular posts from this blog

Chandrayan 3 Mission Special :Animation

<!--   Creator : Devansh Mishra          --> <!doctype html> <html>    <head>      <style> .full {     animation: full 2s linear 40s 1;     animation-fill-mode: forwards; } @keyframes full {     100% {         opacity: 0     } } h2 {     font-size: 30px;     color: mediumseagreen;     font-family: tahoma;     opacity: 0;     animation: ro 2s linear 50s 1;     animation-fill-mode: forwards;     text-align: center;     z-index: 10; } .rover {     width: 400px;     height: 480px;     position: absolute;     background-image: linear-gradient(to top, #eee2e2 0, #e3c09d 15%, #2f2f3a 90%);     margin: auto;     top: -500px;     left: 0;     bottom: 0;     right: 0;     ...
Read more

Python Basic Programs By Devansh Mishra.

Basic programs are given of python which is very useful for Python Beginner's.  1.Hello World print("Hello World") 2.Square Root  number = int(input("enter a number: ")) sqrt = number ** 0.5 print("square root:", sqrt) 3. cube Root def cube_root(x):         return x**(1/3) print(cube_root(27)) 4. Fahrenheit to Celsius temp = float(input("Enter temperature in Fahrenheit: ")) celsius = (temp - 32) * 5/9 print(f"{temp} in Fahrenheit is equal to {celsius} in Celsius")   5. Area of Triangle Height = float(input("Enter Height: ")) Base = float(input("Enter Base: ")) ans = (0.5) * Height * Base print("Area Of Triangle", ans) 6. Area of Circle rad = float(input("Enter Radius Of Circle :")) area = 3.14 * rad * rad print("Area of Circle", area) 7. Armstrong Number in Python from math import * number = int(input("Enter the number : ")) result = 0 n = 0 temp = number; while (temp != 0)...
Read more

" Words moving in circular motion as Tiny Particles " Animation

<!DOCtype html> <html> <style>   body {     margin: 0;     overflow: hidden;   }      a {     position: fixed;     display: inline-block;     margin-left: calc(50vw - 70px);     font-size: 20px;     z-index: 1;     color: white;   } </style> <body>   <script>     let canvas = document.createElement('canvas');     canvas.style.background = '#000'     document.body.appendChild(canvas);     let gl = canvas.getContext("webgl",     {       preserveDrawingBuffer: true     });     let clearPass = program(     {       type: gl.TRIANGLES,       vertexSize: 2,       vertices: [-1, 3, -1, -1, 3, -1], // full screen triangle       shaders: [`             attribute vec2...
Read more