"Pure CSS Landscape" made by devansh

<!DOCtype html>
<html>
  <style>div {
  position: absolute;
  box-sizing: border-box;
}

.container {
  width: 135vmin;
  height: 96vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.sky {
  width: 100%;
  height: 100%;
  background-color: #89BFBE;
  z-index: -1;
}

.ground.first {
  width: 110%;
  height: 40%;
  bottom: 0;
  background-color: #C9BE20;
}

.ground.second {
  width: 140%;
  height: 25%;
  bottom: 0;
  left: -10%;
  background-color: #C1B726;
  transform: rotateZ(5deg);
}

.ground.third {
  width: 140%;
  height: 20%;
  bottom: -5%;
  left: -10%;
  background-color: #CCAD33;
  transform: rotateZ(-5deg);
}

.tree.one {
  width: 5vmin;
  height: 15vmin;
  bottom: 100%;
  left: 20%;
}

.tree.two {
  bottom: 100%;
  left: 30%;
  width: 5vmin;
  height: 20vmin;
}

.tree .body {
  display: block;
  width: 100%;
  height: 90%;
  background: #1b771b;
  border-radius: 100% 100% 100% 100%/100% 100% 50% 50%;
  box-shadow: inset 1.5vmin -0.5vmin #186b18;
}

.tree .trunk {
  width: 13%;
  height: 10%;
  background: #484444;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.tree .shadow {
  width: 50%;
  height: 200%;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  transform: rotateZ(-104deg);
  transform-origin: bottom center;
  left: -7%;
  bottom: -7%;
}</style>
<body>
 <div class="container">
  <div class="sky"></div>
  <div class="ground first">
  <div class="tree one">
    <div class="body"></div>
    <div class="trunk"></div>
    <div class="shadow"></div>
  </div>
  <div class="tree two">
    <div class="body"></div>
    <div class="trunk"></div>
    <div class="shadow"></div>
  </div>
  </div>
  <div class="ground second"></div>
  <div class="ground third"></div>
</div>
</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