TERMINAL WINDOW DESIGN

<!DOCTYPE html>
<html>

<body>
  <div class=fakeMenu>
    <div class="fakeButtons fakeClose"></div>
    <div class="fakeButtons fakeMinimize"></div>
    <div class="fakeButtons fakeZoom"></div>
  </div>
  <div class="fakeScreen">
    <p class="line1">&#91;&nbsp;&ldquo;I'm DEVANSH MISHRA.&rdquo;,<span class="cursor1">_</span></p>
    <p class="line2">&nbsp;&nbsp;&ldquo;I'm a PROGRAMMER .&rdquo;,<span class="cursor2">_</span></p>
    <p class="line3">&nbsp;&nbsp;&ldquo;I'm tech Enthusiast!&rdquo;&nbsp;&#93;<span class="cursor3">_</span></p>
    <p class="line4">><span class="cursor4">_</span></p>
  </div>

  <style>
    body {
      background-color: #272727;
      padding: 10px;
    }
    
    .fakeButtons {
      height: 10px;
      width: 10px;
      border-radius: 50%;
      border: 1px solid #000;
      position: relative;
      top: 6px;
      left: 6px;
      background-color: #ff3b47;
      border-color: #9d252b;
      display: inline-block;
    }
    
    .fakeMinimize {
      left: 11px;
      background-color: #ffc100;
      border-color: #9d802c;
    }
    
    .fakeZoom {
      left: 16px;
      background-color: #00d742;
      border-color: #049931;
    }
    
    .fakeMenu {
      width: 350px;
      box-sizing: border-box;
      height: 25px;
      background-color: #bbb;
      margin: 0 auto;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;
    }
    
    .fakeScreen {
      background-color: #151515;
      box-sizing: border-box;
      width: 350px;
      margin: 0 auto;
      padding: 20px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    }
    
    p {
      position: relative;
      left: 50%;
      margin-left: -8.5em;
      text-align: left;
      font-size: 1.25em;
      font-family: monospace;
      white-space: nowrap;
      overflow: hidden;
      width: 0;
    }
    
    span {
      color: #fff;
      font-weight: bold;
    }
    
    .line1 {
      color: #9CD9F0;
      -webkit-animation: type .5s 1s steps(20, end) forwards;
      -moz-animation: type .5s 1s steps(20, end) forwards;
      -o-animation: type .5s 1s steps(20, end) forwards;
      animation: type .5s 1s steps(20, end) forwards;
    }
    
    .cursor1 {
      -webkit-animation: blink 1s 2s 2 forwards;
      -moz-animation: blink 1s 2s 2 forwards;
      -o-animation: blink 1s 2s 2 forwards;
      animation: blink 1s 2s 2 forwards;
    }
    
    .line2 {
      color: #CDEE69;
      -webkit-animation: type .5s 4.25s steps(20, end) forwards;
      -moz-animation: type .5s 4.25s steps(20, end) forwards;
      -o-animation: type .5s 4.25s steps(20, end) forwards;
      animation: type .5s 4.25s steps(20, end) forwards;
    }
    
    .cursor2 {
      -webkit-animation: blink 1s 5.25s 2 forwards;
      -moz-animation: blink 1s 5.25s 2 forwards;
      -o-animation: blink 1s 5.25s 2 forwards;
      animation: blink 1s 5.25s 2 forwards;
    }
    
    .line3 {
      color: #E09690;
      -webkit-animation: type .5s 7.5s steps(20, end) forwards;
      -moz-animation: type .5s 7.5s steps(20, end) forwards;
      -o-animation: type .5s 7.5s steps(20, end) forwards;
      animation: type .5s 7.5s steps(20, end) forwards;
    }
    
    .cursor3 {
      -webkit-animation: blink 1s 8.5s 2 forwards;
      -moz-animation: blink 1s 8.5s 2 forwards;
      -o-animation: blink 1s 8.5s 2 forwards;
      animation: blink 1s 8.5s 2 forwards;
    }
    
    .line4 {
      color: #fff;
      -webkit-animation: type .5s 10.75s steps(20, end) forwards;
      -moz-animation: type .5s 10.75s steps(20, end) forwards;
      -o-animation: type .5s 10.75s steps(20, end) forwards;
      animation: type .5s 10.75s steps(20, end) forwards;
    }
    
    .cursor4 {
      -webkit-animation: blink 1s 11.5s infinite;
      -moz-animation: blink 1s 8.5s infinite;
      -o-animation: blink 1s 8.5s infinite;
      animation: blink 1s 8.5s infinite;
    }
    
    @-webkit-keyframes blink {
      0% {
        opacity: 0;
      }
      40% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      90% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
    
    @-moz-keyframes blink {
      0% {
        opacity: 0;
      }
      40% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      90% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
    
    @-o-keyframes blink {
      0% {
        opacity: 0;
      }
      40% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      90% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
    
    @keyframes blink {
      0% {
        opacity: 0;
      }
      40% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      90% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
    
    @-webkit-keyframes type {
      to {
        width: 17em;
      }
    }
    
    @-moz-keyframes type {
      to {
        width: 17em;
      }
    }
    
    @-o-keyframes type {
      to {
        width: 17em;
      }
    }
    
    @keyframes type {
      to {
        width: 17em;
      }
    }
  </style>

</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