HTML

Angular 11 How to convert HTML to image?

Angular 11 How to convert HTML to image

Angular 11 How to convert HTML to image, This article will tell the developer how to change over HTML into an image utilizing the html-to-image NPM bundle. developer can change over any Dom components into a image, Dom components like div, length, table, and so forth

By utilizing html-to-image bundle client can change HTML over to an image, a developer can change HTML over to JPEG, PNG, SVG, BLOB(Binary Large Object), This model gives you a straightforward and simple approach to change Angular 11 HTML over to Image.

Angular 11 How to convert HTML to Image Example

  • Step 1 – Create a new Angular 11 app
  • Step 2 – Install html-to-image Package
  • Step 3 – Add HTML into a view file
  • Step 4 – Add code in Component .ts file
  • Step 5 – Run Angular app

Step 1 – Create a new Angular 11 app

First of all, open your command prompt and execute the following command to create a new Angular 11 app.

ng new htmltoImage

Step 2 – Install html-to-image Package

In this step, We will install html-to-image using node package module, open the terminal and execute the following command in the terminal.

npm install --save html-to-image

Step 3 – Add HTML into a view file

In this step, We will add HTML code in a view file so visit the src/app/app.component.html file and add your HTML code

 

<div id="image-section">
  <h1>Hello world!</h1>
</div>
 
<button type="button" (click)="generateImg()">GenerateImage</button>

In the above code, I have added the id attribute because this package will access the DOM Elements and generate an image.

Step 4 – Add code in Component .ts file

import { Component } from '@angular/core';
import * as htmlToImage from 'html-to-image';
 
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'htmltoImage';
 
  generateImg(){
    var node:any = document.getElementById('image-section');
    htmlToImage.toPng(node)
      .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
      })
      .catch(function (error) {
        console.error('Error, something is missing!', error);
      });
  }
}
Step 5 –

Step 5 – Run Angular app

ng serve

How to create new components in Angular using the CLI

How to create new components in Angular using the CLI

How to create new components in Angular using the CLI : It just so happens, when creating your own new components in Angular, you can finish the cycle totally by hand. That was useful for learning the subtleties of what goes in to an Angular Component. Well we as a whole like automation, and you can really build another Angular command automatically using the Angular CLI, That sounds magnificent as less composing code is a reward in my book. How about we take a stab at building another Angular Component yet this time, we’ll utilize that extremely helpful Angular command line interface.

So before you start generating component using the CLI, please setup Angular app locally on your system. if you already setup angular app skip this step and move to Step 2 : CLI Component Generation

Step 1: Angular App Installation :

See how to install Angular 
after installation move to Step 2 below.

Step  2 : CLI Component Generation

You’ll want to have the ng serve process already running in a command line window for your application. Then, you can open another instance of the command line and type ng generate component edit-new-corporate to create a new edit-new-corporate component.

PS D:\corporateApp> ng g c components/edit-new-corporate
or 
PS D:\corporateApp> ng genarte component components/edit-new-corporate

> corporateApp@0.0.0 ng D:\corporateApp
> ng "g" "c" "components/edit-new-corporate"

CREATE src/app/components/edit-new-corporate/edit-new-corporate.component.html (33 bytes)
CREATE src/app/components/edit-new-corporate/edit-new-corporate.component.spec.ts (700 bytes)
CREATE src/app/components/edit-new-corporate/edit-new-corporate.component.ts (322 bytes)
CREATE src/app/components/edit-new-corporate/edit-new-corporate.component.scss (0 bytes)

Alright exceptionally interesting! It seems as though the CLI naturally made the new folder to hold our new component in src/components/edit-corporate. Likewise we see four new files related with the naturally created component.

edit-new-corporate.component.html

<p>
  edit-new-corporate works!
</p>

edit-new-corporate.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { EditNewCorporateComponent } from './edit-new-corporate.component';

describe('EditNewCorporateComponent', () => {
  let component: EditNewCorporateComponent;
  let fixture: ComponentFixture<EditNewCorporateComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ EditNewCorporateComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(EditNewCorporateComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

edit-new-corporate.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-edit-new-corporate',
  templateUrl: './edit-new-corporate.component.html',
  styleUrls: ['./edit-new-corporate.component.scss']
})
export class EditNewCorporateComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

edit-new-corporate.component.css

/* todo: add your styles here */

Snowfall with Pure CSS

Snowfall with Pure CSS

Introduction to the blog

Snowfall with Pure CSS : Playing around CSS is fun, with the help of CSS many things can be done using transition animation and a lot more. There are more property of CSS to work with

A site’s visual style and design are directed by CSS or Cascading Style Sheets. These are records that shape a site page’s HTML markup, giving internet browsers guidelines on the most proficient method to show the pages that outcome from that markup. CSS handles a page’s format, just as shading, foundation pictures, typography, thus considerably more.

On the off chance that you take a gander at a CSS record, you will see that, similar to any markup or coding language, these documents have a particular punctuation to them. Each template is comprised of various CSS rules. These standards, when taken in full, are what styles the site.

At the point when you compose CSS properties, you can’t just make them up as you see fit. For example, “shading” is a real CSS property, so you can utilize it. This property is the thing that decides the content shade of a component. In the event that you attempted to utilize “text-shading” or “textual style tone” as CSS properties, these would come up short since they are not genuine pieces of the CSS language.

So, in this blog you will know how to create snowfall effect with Pure CSS no jQuery and JavaScript is required:

Step 1 : HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snofall Effect</title>

</head>
<body>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
</body>
</html>

 

Step 2 : CSS

body {
  height: 100vh;
  background: url(./snow-bg.jpg);
  overflow: hidden;
  filter: drop-shadow(0 0 10px white);
}

.snowdot {
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
}
.snowdot:nth-child(1) {
  opacity: 0.6889;
  transform: translate(30.7543vw, -10px) scale(0.618);
  animation: fall-1 16s -6s linear infinite;
}
@keyframes fall-1 {
  36.024% {
    transform: translate(37.3153vw, 36.024vh) scale(0.618);
  }
  to {
    transform: translate(34.0348vw, 100vh) scale(0.618);
  }
}
.snowdot:nth-child(2) {
  opacity: 0.5463;
  transform: translate(13.3186vw, -10px) scale(0.1242);
  animation: fall-2 13s -21s linear infinite;
}
@keyframes fall-2 {
  55.682% {
    transform: translate(16.3764vw, 55.682vh) scale(0.1242);
  }
  to {
    transform: translate(14.8475vw, 100vh) scale(0.1242);
  }
}
.snowdot:nth-child(3) {
  opacity: 0.7949;
  transform: translate(35.7772vw, -10px) scale(0.3812);
  animation: fall-3 27s -14s linear infinite;
}
@keyframes fall-3 {
  43.662% {
    transform: translate(34.09vw, 43.662vh) scale(0.3812);
  }
  to {
    transform: translate(34.9336vw, 100vh) scale(0.3812);
  }
}
.snowdot:nth-child(4) {
  opacity: 0.6365;
  transform: translate(22.1872vw, -10px) scale(0.3654);
  animation: fall-4 18s -23s linear infinite;
}
@keyframes fall-4 {
  36.92% {
    transform: translate(16.4547vw, 36.92vh) scale(0.3654);
  }
  to {
    transform: translate(19.32095vw, 100vh) scale(0.3654);
  }
}
.snowdot:nth-child(5) {
  opacity: 0.6352;
  transform: translate(63.1565vw, -10px) scale(0.083);
  animation: fall-5 25s -14s linear infinite;
}
@keyframes fall-5 {
  68.916% {
    transform: translate(56.3248vw, 68.916vh) scale(0.083);
  }
  to {
    transform: translate(59.74065vw, 100vh) scale(0.083);
  }
}
.snowdot:nth-child(6) {
  opacity: 0.8465;
  transform: translate(2.2081vw, -10px) scale(0.6326);
  animation: fall-6 25s -18s linear infinite;
}
@keyframes fall-6 {
  67.203% {
    transform: translate(0.9089vw, 67.203vh) scale(0.6326);
  }
  to {
    transform: translate(1.5585vw, 100vh) scale(0.6326);
  }
}
.snowdot:nth-child(7) {
  opacity: 0.0499;
  transform: translate(25.1378vw, -10px) scale(0.4473);
  animation: fall-7 13s -24s linear infinite;
}
@keyframes fall-7 {
  61.55% {
    transform: translate(23.4783vw, 61.55vh) scale(0.4473);
  }
  to {
    transform: translate(24.30805vw, 100vh) scale(0.4473);
  }
}
.snowdot:nth-child(8) {
  opacity: 0.1631;
  transform: translate(87.5335vw, -10px) scale(0.429);
  animation: fall-8 26s -3s linear infinite;
}
@keyframes fall-8 {
  55.725% {
    transform: translate(82.4vw, 55.725vh) scale(0.429);
  }
  to {
    transform: translate(84.96675vw, 100vh) scale(0.429);
  }
}
.snowdot:nth-child(9) {
  opacity: 0.975;
  transform: translate(42.4408vw, -10px) scale(0.9024);
  animation: fall-9 29s -22s linear infinite;
}
@keyframes fall-9 {
  45.862% {
    transform: translate(41.838vw, 45.862vh) scale(0.9024);
  }
  to {
    transform: translate(42.1394vw, 100vh) scale(0.9024);
  }
}
.snowdot:nth-child(10) {
  opacity: 0.3361;
  transform: translate(78.7775vw, -10px) scale(0.1956);
  animation: fall-10 10s -23s linear infinite;
}
@keyframes fall-10 {
  37.599% {
    transform: translate(73.0556vw, 37.599vh) scale(0.1956);
  }
  to {
    transform: translate(75.91655vw, 100vh) scale(0.1956);
  }
}
.snowdot:nth-child(11) {
  opacity: 0.785;
  transform: translate(43.0434vw, -10px) scale(0.2422);
  animation: fall-11 27s -30s linear infinite;
}
@keyframes fall-11 {
  72.141% {
    transform: translate(33.662vw, 72.141vh) scale(0.2422);
  }
  to {
    transform: translate(38.3527vw, 100vh) scale(0.2422);
  }
}
.snowdot:nth-child(12) {
  opacity: 0.2391;
  transform: translate(17.75vw, -10px) scale(0.6132);
  animation: fall-12 15s -4s linear infinite;
}
@keyframes fall-12 {
  30.034% {
    transform: translate(19.3818vw, 30.034vh) scale(0.6132);
  }
  to {
    transform: translate(18.5659vw, 100vh) scale(0.6132);
  }
}
.snowdot:nth-child(13) {
  opacity: 0.9322;
  transform: translate(83.6105vw, -10px) scale(0.5942);
  animation: fall-13 24s -23s linear infinite;
}
@keyframes fall-13 {
  79.063% {
    transform: translate(78.7181vw, 79.063vh) scale(0.5942);
  }
  to {
    transform: translate(81.1643vw, 100vh) scale(0.5942);
  }
}
.snowdot:nth-child(14) {
  opacity: 0.4371;
  transform: translate(48.5671vw, -10px) scale(0.4509);
  animation: fall-14 24s -2s linear infinite;
}
@keyframes fall-14 {
  69.307% {
    transform: translate(39.5419vw, 69.307vh) scale(0.4509);
  }
  to {
    transform: translate(44.0545vw, 100vh) scale(0.4509);
  }
}
.snowdot:nth-child(15) {
  opacity: 0.4472;
  transform: translate(37.7903vw, -10px) scale(0.9735);
  animation: fall-15 19s -19s linear infinite;
}
@keyframes fall-15 {
  31.872% {
    transform: translate(35.3002vw, 31.872vh) scale(0.9735);
  }
  to {
    transform: translate(36.54525vw, 100vh) scale(0.9735);
  }
}
.snowdot:nth-child(16) {
  opacity: 0.799;
  transform: translate(53.5716vw, -10px) scale(0.5875);
  animation: fall-16 10s -4s linear infinite;
}
@keyframes fall-16 {
  58.149% {
    transform: translate(44.8808vw, 58.149vh) scale(0.5875);
  }
  to {
    transform: translate(49.2262vw, 100vh) scale(0.5875);
  }
}
.snowdot:nth-child(17) {
  opacity: 0.9686;
  transform: translate(60.3792vw, -10px) scale(0.1798);
  animation: fall-17 27s -20s linear infinite;
}
@keyframes fall-17 {
  61.309% {
    transform: translate(54.0186vw, 61.309vh) scale(0.1798);
  }
  to {
    transform: translate(57.1989vw, 100vh) scale(0.1798);
  }
}
.snowdot:nth-child(18) {
  opacity: 0.8476;
  transform: translate(93.5252vw, -10px) scale(0.077);
  animation: fall-18 16s -22s linear infinite;
}
@keyframes fall-18 {
  51.812% {
    transform: translate(90.0046vw, 51.812vh) scale(0.077);
  }
  to {
    transform: translate(91.7649vw, 100vh) scale(0.077);
  }
}
.snowdot:nth-child(19) {
  opacity: 0.216;
  transform: translate(23.3224vw, -10px) scale(0.318);
  animation: fall-19 25s -21s linear infinite;
}
@keyframes fall-19 {
  74.711% {
    transform: translate(18.3764vw, 74.711vh) scale(0.318);
  }
  to {
    transform: translate(20.8494vw, 100vh) scale(0.318);
  }
}
.snowdot:nth-child(20) {
  opacity: 0.81;
  transform: translate(4.8588vw, -10px) scale(0.1435);
  animation: fall-20 22s -23s linear infinite;
}
@keyframes fall-20 {
  52.502% {
    transform: translate(-0.999vw, 52.502vh) scale(0.1435);
  }
  to {
    transform: translate(1.9299vw, 100vh) scale(0.1435);
  }
}
.snowdot:nth-child(21) {
  opacity: 0.5251;
  transform: translate(73.9603vw, -10px) scale(0.3108);
  animation: fall-21 30s -25s linear infinite;
}
@keyframes fall-21 {
  54.262% {
    transform: translate(68.1337vw, 54.262vh) scale(0.3108);
  }
  to {
    transform: translate(71.047vw, 100vh) scale(0.3108);
  }
}
.snowdot:nth-child(22) {
  opacity: 0.9928;
  transform: translate(4.6531vw, -10px) scale(0.2918);
  animation: fall-22 28s -29s linear infinite;
}
@keyframes fall-22 {
  75.167% {
    transform: translate(10.4631vw, 75.167vh) scale(0.2918);
  }
  to {
    transform: translate(7.5581vw, 100vh) scale(0.2918);
  }
}
.snowdot:nth-child(23) {
  opacity: 0.879;
  transform: translate(15.8708vw, -10px) scale(0.5441);
  animation: fall-23 17s -21s linear infinite;
}
@keyframes fall-23 {
  49.929% {
    transform: translate(12.7058vw, 49.929vh) scale(0.5441);
  }
  to {
    transform: translate(14.2883vw, 100vh) scale(0.5441);
  }
}
.snowdot:nth-child(24) {
  opacity: 0.9969;
  transform: translate(45.2942vw, -10px) scale(0.6611);
  animation: fall-24 10s -23s linear infinite;
}
@keyframes fall-24 {
  40.841% {
    transform: translate(55.1631vw, 40.841vh) scale(0.6611);
  }
  to {
    transform: translate(50.22865vw, 100vh) scale(0.6611);
  }
}
.snowdot:nth-child(25) {
  opacity: 0.2059;
  transform: translate(34.2078vw, -10px) scale(0.8644);
  animation: fall-25 13s -1s linear infinite;
}
@keyframes fall-25 {
  75.502% {
    transform: translate(34.0938vw, 75.502vh) scale(0.8644);
  }
  to {
    transform: translate(34.1508vw, 100vh) scale(0.8644);
  }
}
.snowdot:nth-child(26) {
  opacity: 0.5561;
  transform: translate(84.2094vw, -10px) scale(0.2961);
  animation: fall-26 12s -8s linear infinite;
}
@keyframes fall-26 {
  74.147% {
    transform: translate(89.1048vw, 74.147vh) scale(0.2961);
  }
  to {
    transform: translate(86.6571vw, 100vh) scale(0.2961);
  }
}
.snowdot:nth-child(27) {
  opacity: 0.4053;
  transform: translate(98.0698vw, -10px) scale(0.3986);
  animation: fall-27 27s -14s linear infinite;
}
@keyframes fall-27 {
  60.217% {
    transform: translate(94.1621vw, 60.217vh) scale(0.3986);
  }
  to {
    transform: translate(96.11595vw, 100vh) scale(0.3986);
  }
}
.snowdot:nth-child(28) {
  opacity: 0.5631;
  transform: translate(27.146vw, -10px) scale(0.8285);
  animation: fall-28 19s -13s linear infinite;
}
@keyframes fall-28 {
  58.305% {
    transform: translate(33.2433vw, 58.305vh) scale(0.8285);
  }
  to {
    transform: translate(30.19465vw, 100vh) scale(0.8285);
  }
}
.snowdot:nth-child(29) {
  opacity: 0.7025;
  transform: translate(38.4808vw, -10px) scale(0.2398);
  animation: fall-29 20s -1s linear infinite;
}
@keyframes fall-29 {
  59.4% {
    transform: translate(48.1908vw, 59.4vh) scale(0.2398);
  }
  to {
    transform: translate(43.3358vw, 100vh) scale(0.2398);
  }
}
.snowdot:nth-child(30) {
  opacity: 0.735;
  transform: translate(65.1571vw, -10px) scale(0.1493);
  animation: fall-30 30s -17s linear infinite;
}
@keyframes fall-30 {
  42.633% {
    transform: translate(68.72vw, 42.633vh) scale(0.1493);
  }
  to {
    transform: translate(66.93855vw, 100vh) scale(0.1493);
  }
}
.snowdot:nth-child(31) {
  opacity: 0.0481;
  transform: translate(12.7454vw, -10px) scale(0.8663);
  animation: fall-31 18s -9s linear infinite;
}
@keyframes fall-31 {
  73.392% {
    transform: translate(5.4269vw, 73.392vh) scale(0.8663);
  }
  to {
    transform: translate(9.08615vw, 100vh) scale(0.8663);
  }
}
.snowdot:nth-child(32) {
  opacity: 0.3114;
  transform: translate(61.544vw, -10px) scale(0.6776);
  animation: fall-32 13s -17s linear infinite;
}
@keyframes fall-32 {
  79.748% {
    transform: translate(68.6762vw, 79.748vh) scale(0.6776);
  }
  to {
    transform: translate(65.1101vw, 100vh) scale(0.6776);
  }
}
.snowdot:nth-child(33) {
  opacity: 0.8053;
  transform: translate(42.1033vw, -10px) scale(0.0871);
  animation: fall-33 22s -6s linear infinite;
}
@keyframes fall-33 {
  52.599% {
    transform: translate(41.467vw, 52.599vh) scale(0.0871);
  }
  to {
    transform: translate(41.78515vw, 100vh) scale(0.0871);
  }
}
.snowdot:nth-child(34) {
  opacity: 0.5135;
  transform: translate(10.2237vw, -10px) scale(0.8038);
  animation: fall-34 24s -6s linear infinite;
}
@keyframes fall-34 {
  39.401% {
    transform: translate(3.0768vw, 39.401vh) scale(0.8038);
  }
  to {
    transform: translate(6.65025vw, 100vh) scale(0.8038);
  }
}
.snowdot:nth-child(35) {
  opacity: 0.2478;
  transform: translate(87.3627vw, -10px) scale(0.4996);
  animation: fall-35 19s -20s linear infinite;
}
@keyframes fall-35 {
  43.153% {
    transform: translate(88.5063vw, 43.153vh) scale(0.4996);
  }
  to {
    transform: translate(87.9345vw, 100vh) scale(0.4996);
  }
}
.snowdot:nth-child(36) {
  opacity: 0.0403;
  transform: translate(99.0492vw, -10px) scale(0.8184);
  animation: fall-36 11s -8s linear infinite;
}
@keyframes fall-36 {
  70.744% {
    transform: translate(101.2317vw, 70.744vh) scale(0.8184);
  }
  to {
    transform: translate(100.14045vw, 100vh) scale(0.8184);
  }
}
.snowdot:nth-child(37) {
  opacity: 0.3355;
  transform: translate(36.4019vw, -10px) scale(0.6828);
  animation: fall-37 15s -7s linear infinite;
}
@keyframes fall-37 {
  35.065% {
    transform: translate(37.4162vw, 35.065vh) scale(0.6828);
  }
  to {
    transform: translate(36.90905vw, 100vh) scale(0.6828);
  }
}
.snowdot:nth-child(38) {
  opacity: 0.9094;
  transform: translate(68.5879vw, -10px) scale(0.2917);
  animation: fall-38 13s -14s linear infinite;
}
@keyframes fall-38 {
  51.32% {
    transform: translate(66.9977vw, 51.32vh) scale(0.2917);
  }
  to {
    transform: translate(67.7928vw, 100vh) scale(0.2917);
  }
}
.snowdot:nth-child(39) {
  opacity: 0.0857;
  transform: translate(78.1739vw, -10px) scale(0.9082);
  animation: fall-39 16s -3s linear infinite;
}
@keyframes fall-39 {
  43.734% {
    transform: translate(74.8314vw, 43.734vh) scale(0.9082);
  }
  to {
    transform: translate(76.50265vw, 100vh) scale(0.9082);
  }
}
.snowdot:nth-child(40) {
  opacity: 0.2228;
  transform: translate(56.7612vw, -10px) scale(0.5203);
  animation: fall-40 13s -17s linear infinite;
}
@keyframes fall-40 {
  76.444% {
    transform: translate(62.7995vw, 76.444vh) scale(0.5203);
  }
  to {
    transform: translate(59.78035vw, 100vh) scale(0.5203);
  }
}
.snowdot:nth-child(41) {
  opacity: 0.3379;
  transform: translate(7.4798vw, -10px) scale(0.1121);
  animation: fall-41 26s -28s linear infinite;
}
@keyframes fall-41 {
  59.889% {
    transform: translate(6.6573vw, 59.889vh) scale(0.1121);
  }
  to {
    transform: translate(7.06855vw, 100vh) scale(0.1121);
  }
}
.snowdot:nth-child(42) {
  opacity: 0.478;
  transform: translate(0.3175vw, -10px) scale(0.8465);
  animation: fall-42 20s -30s linear infinite;
}
@keyframes fall-42 {
  54.988% {
    transform: translate(4.5026vw, 54.988vh) scale(0.8465);
  }
  to {
    transform: translate(2.41005vw, 100vh) scale(0.8465);
  }
}
.snowdot:nth-child(43) {
  opacity: 0.4541;
  transform: translate(38.1393vw, -10px) scale(0.2143);
  animation: fall-43 18s -3s linear infinite;
}
@keyframes fall-43 {
  50.795% {
    transform: translate(40.2192vw, 50.795vh) scale(0.2143);
  }
  to {
    transform: translate(39.17925vw, 100vh) scale(0.2143);
  }
}
.snowdot:nth-child(44) {
  opacity: 0.4751;
  transform: translate(72.9946vw, -10px) scale(0.7616);
  animation: fall-44 23s -23s linear infinite;
}
@keyframes fall-44 {
  41.196% {
    transform: translate(68.3354vw, 41.196vh) scale(0.7616);
  }
  to {
    transform: translate(70.665vw, 100vh) scale(0.7616);
  }
}
.snowdot:nth-child(45) {
  opacity: 0.9259;
  transform: translate(33.1852vw, -10px) scale(0.7521);
  animation: fall-45 14s -18s linear infinite;
}
@keyframes fall-45 {
  57.03% {
    transform: translate(41.3935vw, 57.03vh) scale(0.7521);
  }
  to {
    transform: translate(37.28935vw, 100vh) scale(0.7521);
  }
}
.snowdot:nth-child(46) {
  opacity: 0.3197;
  transform: translate(57.6235vw, -10px) scale(0.5397);
  animation: fall-46 21s -26s linear infinite;
}
@keyframes fall-46 {
  72.531% {
    transform: translate(65.5051vw, 72.531vh) scale(0.5397);
  }
  to {
    transform: translate(61.5643vw, 100vh) scale(0.5397);
  }
}
.snowdot:nth-child(47) {
  opacity: 0.2397;
  transform: translate(51.337vw, -10px) scale(0.6894);
  animation: fall-47 19s -19s linear infinite;
}
@keyframes fall-47 {
  79.863% {
    transform: translate(53.4694vw, 79.863vh) scale(0.6894);
  }
  to {
    transform: translate(52.4032vw, 100vh) scale(0.6894);
  }
}
.snowdot:nth-child(48) {
  opacity: 0.4152;
  transform: translate(75.2991vw, -10px) scale(0.6796);
  animation: fall-48 12s -30s linear infinite;
}
@keyframes fall-48 {
  56.281% {
    transform: translate(70.287vw, 56.281vh) scale(0.6796);
  }
  to {
    transform: translate(72.79305vw, 100vh) scale(0.6796);
  }
}
.snowdot:nth-child(49) {
  opacity: 0.0176;
  transform: translate(89.1994vw, -10px) scale(0.1318);
  animation: fall-49 27s -20s linear infinite;
}
@keyframes fall-49 {
  70.243% {
    transform: translate(93.7676vw, 70.243vh) scale(0.1318);
  }
  to {
    transform: translate(91.4835vw, 100vh) scale(0.1318);
  }
}
.snowdot:nth-child(50) {
  opacity: 0.1704;
  transform: translate(58.6467vw, -10px) scale(0.7875);
  animation: fall-50 11s -27s linear infinite;
}
@keyframes fall-50 {
  47.829% {
    transform: translate(68.1382vw, 47.829vh) scale(0.7875);
  }
  to {
    transform: translate(63.39245vw, 100vh) scale(0.7875);
  }
}
.snowdot:nth-child(51) {
  opacity: 0.7727;
  transform: translate(25.188vw, -10px) scale(0.6132);
  animation: fall-51 24s -22s linear infinite;
}
@keyframes fall-51 {
  63.256% {
    transform: translate(33.4275vw, 63.256vh) scale(0.6132);
  }
  to {
    transform: translate(29.30775vw, 100vh) scale(0.6132);
  }
}
.snowdot:nth-child(52) {
  opacity: 0.5272;
  transform: translate(34.4986vw, -10px) scale(0.9318);
  animation: fall-52 11s -13s linear infinite;
}
@keyframes fall-52 {
  55.245% {
    transform: translate(29.7725vw, 55.245vh) scale(0.9318);
  }
  to {
    transform: translate(32.13555vw, 100vh) scale(0.9318);
  }
}
.snowdot:nth-child(53) {
  opacity: 0.2244;
  transform: translate(54.4019vw, -10px) scale(0.3568);
  animation: fall-53 24s -7s linear infinite;
}
@keyframes fall-53 {
  34.685% {
    transform: translate(60.1439vw, 34.685vh) scale(0.3568);
  }
  to {
    transform: translate(57.2729vw, 100vh) scale(0.3568);
  }
}
.snowdot:nth-child(54) {
  opacity: 0.9293;
  transform: translate(10.4204vw, -10px) scale(0.6416);
  animation: fall-54 18s -27s linear infinite;
}
@keyframes fall-54 {
  39.942% {
    transform: translate(0.4413vw, 39.942vh) scale(0.6416);
  }
  to {
    transform: translate(5.43085vw, 100vh) scale(0.6416);
  }
}
.snowdot:nth-child(55) {
  opacity: 0.1339;
  transform: translate(40.9497vw, -10px) scale(0.8111);
  animation: fall-55 16s -14s linear infinite;
}
@keyframes fall-55 {
  54.566% {
    transform: translate(39.3945vw, 54.566vh) scale(0.8111);
  }
  to {
    transform: translate(40.1721vw, 100vh) scale(0.8111);
  }
}
.snowdot:nth-child(56) {
  opacity: 0.3563;
  transform: translate(29.7237vw, -10px) scale(0.4314);
  animation: fall-56 15s -10s linear infinite;
}
@keyframes fall-56 {
  49.548% {
    transform: translate(26.7606vw, 49.548vh) scale(0.4314);
  }
  to {
    transform: translate(28.24215vw, 100vh) scale(0.4314);
  }
}
.snowdot:nth-child(57) {
  opacity: 0.0633;
  transform: translate(24.6799vw, -10px) scale(0.5501);
  animation: fall-57 17s -20s linear infinite;
}
@keyframes fall-57 {
  35.738% {
    transform: translate(16.7552vw, 35.738vh) scale(0.5501);
  }
  to {
    transform: translate(20.71755vw, 100vh) scale(0.5501);
  }
}
.snowdot:nth-child(58) {
  opacity: 0.6226;
  transform: translate(27.2441vw, -10px) scale(0.4687);
  animation: fall-58 21s -19s linear infinite;
}
@keyframes fall-58 {
  73.786% {
    transform: translate(36.421vw, 73.786vh) scale(0.4687);
  }
  to {
    transform: translate(31.83255vw, 100vh) scale(0.4687);
  }
}
.snowdot:nth-child(59) {
  opacity: 0.1141;
  transform: translate(82.232vw, -10px) scale(0.1403);
  animation: fall-59 10s -2s linear infinite;
}
@keyframes fall-59 {
  69.087% {
    transform: translate(88.063vw, 69.087vh) scale(0.1403);
  }
  to {
    transform: translate(85.1475vw, 100vh) scale(0.1403);
  }
}
.snowdot:nth-child(60) {
  opacity: 0.2248;
  transform: translate(99.3693vw, -10px) scale(0.1215);
  animation: fall-60 12s -24s linear infinite;
}
@keyframes fall-60 {
  48.06% {
    transform: translate(96.5207vw, 48.06vh) scale(0.1215);
  }
  to {
    transform: translate(97.945vw, 100vh) scale(0.1215);
  }
}
.snowdot:nth-child(61) {
  opacity: 0.4644;
  transform: translate(63.7059vw, -10px) scale(0.9111);
  animation: fall-61 16s -4s linear infinite;
}
@keyframes fall-61 {
  73.767% {
    transform: translate(69.2223vw, 73.767vh) scale(0.9111);
  }
  to {
    transform: translate(66.4641vw, 100vh) scale(0.9111);
  }
}
.snowdot:nth-child(62) {
  opacity: 0.3828;
  transform: translate(89.48vw, -10px) scale(0.4984);
  animation: fall-62 29s -14s linear infinite;
}
@keyframes fall-62 {
  43.199% {
    transform: translate(91.536vw, 43.199vh) scale(0.4984);
  }
  to {
    transform: translate(90.508vw, 100vh) scale(0.4984);
  }
}
.snowdot:nth-child(63) {
  opacity: 0.6973;
  transform: translate(70.4643vw, -10px) scale(0.8025);
  animation: fall-63 13s -9s linear infinite;
}
@keyframes fall-63 {
  40.304% {
    transform: translate(67.1033vw, 40.304vh) scale(0.8025);
  }
  to {
    transform: translate(68.7838vw, 100vh) scale(0.8025);
  }
}
.snowdot:nth-child(64) {
  opacity: 0.9;
  transform: translate(75.5485vw, -10px) scale(0.9844);
  animation: fall-64 14s -26s linear infinite;
}
@keyframes fall-64 {
  39.432% {
    transform: translate(67.0187vw, 39.432vh) scale(0.9844);
  }
  to {
    transform: translate(71.2836vw, 100vh) scale(0.9844);
  }
}
.snowdot:nth-child(65) {
  opacity: 0.2064;
  transform: translate(45.1067vw, -10px) scale(0.6251);
  animation: fall-65 30s -3s linear infinite;
}
@keyframes fall-65 {
  58.202% {
    transform: translate(44.3032vw, 58.202vh) scale(0.6251);
  }
  to {
    transform: translate(44.70495vw, 100vh) scale(0.6251);
  }
}
.snowdot:nth-child(66) {
  opacity: 0.6817;
  transform: translate(34.5771vw, -10px) scale(0.8723);
  animation: fall-66 24s -25s linear infinite;
}
@keyframes fall-66 {
  40.99% {
    transform: translate(31.2768vw, 40.99vh) scale(0.8723);
  }
  to {
    transform: translate(32.92695vw, 100vh) scale(0.8723);
  }
}
.snowdot:nth-child(67) {
  opacity: 0.5111;
  transform: translate(43.2249vw, -10px) scale(0.2363);
  animation: fall-67 17s -21s linear infinite;
}
@keyframes fall-67 {
  65.106% {
    transform: translate(36.6148vw, 65.106vh) scale(0.2363);
  }
  to {
    transform: translate(39.91985vw, 100vh) scale(0.2363);
  }
}
.snowdot:nth-child(68) {
  opacity: 0.7352;
  transform: translate(38.2109vw, -10px) scale(0.1631);
  animation: fall-68 15s -25s linear infinite;
}
@keyframes fall-68 {
  73.41% {
    transform: translate(36.5856vw, 73.41vh) scale(0.1631);
  }
  to {
    transform: translate(37.39825vw, 100vh) scale(0.1631);
  }
}
.snowdot:nth-child(69) {
  opacity: 0.6635;
  transform: translate(37.3401vw, -10px) scale(0.0332);
  animation: fall-69 15s -19s linear infinite;
}
@keyframes fall-69 {
  37.661% {
    transform: translate(35.3414vw, 37.661vh) scale(0.0332);
  }
  to {
    transform: translate(36.34075vw, 100vh) scale(0.0332);
  }
}
.snowdot:nth-child(70) {
  opacity: 0.3773;
  transform: translate(71.4604vw, -10px) scale(0.0733);
  animation: fall-70 21s -8s linear infinite;
}
@keyframes fall-70 {
  68.748% {
    transform: translate(65.3275vw, 68.748vh) scale(0.0733);
  }
  to {
    transform: translate(68.39395vw, 100vh) scale(0.0733);
  }
}
.snowdot:nth-child(71) {
  opacity: 0.4444;
  transform: translate(86.5045vw, -10px) scale(0.0017);
  animation: fall-71 12s -28s linear infinite;
}
@keyframes fall-71 {
  73.617% {
    transform: translate(93.4177vw, 73.617vh) scale(0.0017);
  }
  to {
    transform: translate(89.9611vw, 100vh) scale(0.0017);
  }
}
.snowdot:nth-child(72) {
  opacity: 0.3794;
  transform: translate(15.0016vw, -10px) scale(0.9998);
  animation: fall-72 12s -15s linear infinite;
}
@keyframes fall-72 {
  58.121% {
    transform: translate(13.0754vw, 58.121vh) scale(0.9998);
  }
  to {
    transform: translate(14.0385vw, 100vh) scale(0.9998);
  }
}
.snowdot:nth-child(73) {
  opacity: 0.8136;
  transform: translate(15.9973vw, -10px) scale(0.736);
  animation: fall-73 14s -29s linear infinite;
}
@keyframes fall-73 {
  30.209% {
    transform: translate(24.4556vw, 30.209vh) scale(0.736);
  }
  to {
    transform: translate(20.22645vw, 100vh) scale(0.736);
  }
}
.snowdot:nth-child(74) {
  opacity: 0.1845;
  transform: translate(45.0215vw, -10px) scale(0.7459);
  animation: fall-74 19s -18s linear infinite;
}
@keyframes fall-74 {
  60.221% {
    transform: translate(51.4077vw, 60.221vh) scale(0.7459);
  }
  to {
    transform: translate(48.2146vw, 100vh) scale(0.7459);
  }
}
.snowdot:nth-child(75) {
  opacity: 0.3434;
  transform: translate(29.1851vw, -10px) scale(0.1018);
  animation: fall-75 14s -29s linear infinite;
}
@keyframes fall-75 {
  34.865% {
    transform: translate(35.1939vw, 34.865vh) scale(0.1018);
  }
  to {
    transform: translate(32.1895vw, 100vh) scale(0.1018);
  }
}
.snowdot:nth-child(76) {
  opacity: 0.874;
  transform: translate(55.2834vw, -10px) scale(0.642);
  animation: fall-76 16s -11s linear infinite;
}
@keyframes fall-76 {
  72.086% {
    transform: translate(56.0366vw, 72.086vh) scale(0.642);
  }
  to {
    transform: translate(55.66vw, 100vh) scale(0.642);
  }
}
.snowdot:nth-child(77) {
  opacity: 0.5459;
  transform: translate(50.9485vw, -10px) scale(0.0328);
  animation: fall-77 12s -21s linear infinite;
}
@keyframes fall-77 {
  76.278% {
    transform: translate(52.8427vw, 76.278vh) scale(0.0328);
  }
  to {
    transform: translate(51.8956vw, 100vh) scale(0.0328);
  }
}
.snowdot:nth-child(78) {
  opacity: 0.0375;
  transform: translate(30.9678vw, -10px) scale(0.012);
  animation: fall-78 14s -13s linear infinite;
}
@keyframes fall-78 {
  47.342% {
    transform: translate(33.5108vw, 47.342vh) scale(0.012);
  }
  to {
    transform: translate(32.2393vw, 100vh) scale(0.012);
  }
}
.snowdot:nth-child(79) {
  opacity: 0.8309;
  transform: translate(85.9396vw, -10px) scale(0.2649);
  animation: fall-79 16s -8s linear infinite;
}
@keyframes fall-79 {
  32.007% {
    transform: translate(88.1825vw, 32.007vh) scale(0.2649);
  }
  to {
    transform: translate(87.06105vw, 100vh) scale(0.2649);
  }
}
.snowdot:nth-child(80) {
  opacity: 0.1923;
  transform: translate(85.3993vw, -10px) scale(0.3482);
  animation: fall-80 21s -27s linear infinite;
}
@keyframes fall-80 {
  52.848% {
    transform: translate(76.784vw, 52.848vh) scale(0.3482);
  }
  to {
    transform: translate(81.09165vw, 100vh) scale(0.3482);
  }
}
.snowdot:nth-child(81) {
  opacity: 0.8656;
  transform: translate(83.0564vw, -10px) scale(0.5488);
  animation: fall-81 28s -5s linear infinite;
}
@keyframes fall-81 {
  55.508% {
    transform: translate(82.8148vw, 55.508vh) scale(0.5488);
  }
  to {
    transform: translate(82.9356vw, 100vh) scale(0.5488);
  }
}
.snowdot:nth-child(82) {
  opacity: 0.3156;
  transform: translate(77.1699vw, -10px) scale(0.5333);
  animation: fall-82 14s -1s linear infinite;
}
@keyframes fall-82 {
  35.266% {
    transform: translate(80.8497vw, 35.266vh) scale(0.5333);
  }
  to {
    transform: translate(79.0098vw, 100vh) scale(0.5333);
  }
}
.snowdot:nth-child(83) {
  opacity: 0.2871;
  transform: translate(73.9318vw, -10px) scale(0.9002);
  animation: fall-83 21s -30s linear infinite;
}
@keyframes fall-83 {
  63.572% {
    transform: translate(82.9028vw, 63.572vh) scale(0.9002);
  }
  to {
    transform: translate(78.4173vw, 100vh) scale(0.9002);
  }
}
.snowdot:nth-child(84) {
  opacity: 0.019;
  transform: translate(47.1242vw, -10px) scale(0.8318);
  animation: fall-84 19s -24s linear infinite;
}
@keyframes fall-84 {
  34.562% {
    transform: translate(43.4054vw, 34.562vh) scale(0.8318);
  }
  to {
    transform: translate(45.2648vw, 100vh) scale(0.8318);
  }
}
.snowdot:nth-child(85) {
  opacity: 0.7221;
  transform: translate(78.2772vw, -10px) scale(0.545);
  animation: fall-85 29s -1s linear infinite;
}
@keyframes fall-85 {
  66.334% {
    transform: translate(81.4462vw, 66.334vh) scale(0.545);
  }
  to {
    transform: translate(79.8617vw, 100vh) scale(0.545);
  }
}
.snowdot:nth-child(86) {
  opacity: 0.2226;
  transform: translate(55.4394vw, -10px) scale(0.855);
  animation: fall-86 21s -15s linear infinite;
}
@keyframes fall-86 {
  43.017% {
    transform: translate(56.2679vw, 43.017vh) scale(0.855);
  }
  to {
    transform: translate(55.85365vw, 100vh) scale(0.855);
  }
}
.snowdot:nth-child(87) {
  opacity: 0.5698;
  transform: translate(37.4007vw, -10px) scale(0.4992);
  animation: fall-87 28s -4s linear infinite;
}
@keyframes fall-87 {
  72.179% {
    transform: translate(46.5485vw, 72.179vh) scale(0.4992);
  }
  to {
    transform: translate(41.9746vw, 100vh) scale(0.4992);
  }
}
.snowdot:nth-child(88) {
  opacity: 0.7181;
  transform: translate(15.8831vw, -10px) scale(0.8312);
  animation: fall-88 11s -26s linear infinite;
}
@keyframes fall-88 {
  55.855% {
    transform: translate(12.4424vw, 55.855vh) scale(0.8312);
  }
  to {
    transform: translate(14.16275vw, 100vh) scale(0.8312);
  }
}
.snowdot:nth-child(89) {
  opacity: 0.147;
  transform: translate(18.7926vw, -10px) scale(0.9022);
  animation: fall-89 27s -17s linear infinite;
}
@keyframes fall-89 {
  65.403% {
    transform: translate(25.8314vw, 65.403vh) scale(0.9022);
  }
  to {
    transform: translate(22.312vw, 100vh) scale(0.9022);
  }
}
.snowdot:nth-child(90) {
  opacity: 0.584;
  transform: translate(77.4319vw, -10px) scale(0.5997);
  animation: fall-90 16s -29s linear infinite;
}
@keyframes fall-90 {
  72.913% {
    transform: translate(81.9108vw, 72.913vh) scale(0.5997);
  }
  to {
    transform: translate(79.67135vw, 100vh) scale(0.5997);
  }
}
.snowdot:nth-child(91) {
  opacity: 0.7838;
  transform: translate(17.9317vw, -10px) scale(0.4642);
  animation: fall-91 17s -18s linear infinite;
}
@keyframes fall-91 {
  35.171% {
    transform: translate(22.7536vw, 35.171vh) scale(0.4642);
  }
  to {
    transform: translate(20.34265vw, 100vh) scale(0.4642);
  }
}
.snowdot:nth-child(92) {
  opacity: 0.7703;
  transform: translate(84.3051vw, -10px) scale(0.2701);
  animation: fall-92 27s -22s linear infinite;
}
@keyframes fall-92 {
  36.852% {
    transform: translate(84.818vw, 36.852vh) scale(0.2701);
  }
  to {
    transform: translate(84.56155vw, 100vh) scale(0.2701);
  }
}
.snowdot:nth-child(93) {
  opacity: 0.4725;
  transform: translate(31.1114vw, -10px) scale(0.3651);
  animation: fall-93 11s -8s linear infinite;
}
@keyframes fall-93 {
  79.368% {
    transform: translate(29.9328vw, 79.368vh) scale(0.3651);
  }
  to {
    transform: translate(30.5221vw, 100vh) scale(0.3651);
  }
}
.snowdot:nth-child(94) {
  opacity: 0.7992;
  transform: translate(48.0293vw, -10px) scale(0.5804);
  animation: fall-94 13s -6s linear infinite;
}
@keyframes fall-94 {
  40.239% {
    transform: translate(39.5037vw, 40.239vh) scale(0.5804);
  }
  to {
    transform: translate(43.7665vw, 100vh) scale(0.5804);
  }
}
.snowdot:nth-child(95) {
  opacity: 0.0511;
  transform: translate(18.2337vw, -10px) scale(0.9099);
  animation: fall-95 20s -27s linear infinite;
}
@keyframes fall-95 {
  59.041% {
    transform: translate(10.044vw, 59.041vh) scale(0.9099);
  }
  to {
    transform: translate(14.13885vw, 100vh) scale(0.9099);
  }
}
.snowdot:nth-child(96) {
  opacity: 0.0092;
  transform: translate(27.4472vw, -10px) scale(0.9153);
  animation: fall-96 18s -27s linear infinite;
}
@keyframes fall-96 {
  66.226% {
    transform: translate(36.2489vw, 66.226vh) scale(0.9153);
  }
  to {
    transform: translate(31.84805vw, 100vh) scale(0.9153);
  }
}
.snowdot:nth-child(97) {
  opacity: 0.8979;
  transform: translate(53.0258vw, -10px) scale(0.1645);
  animation: fall-97 29s -19s linear infinite;
}
@keyframes fall-97 {
  77.786% {
    transform: translate(61.6525vw, 77.786vh) scale(0.1645);
  }
  to {
    transform: translate(57.33915vw, 100vh) scale(0.1645);
  }
}
.snowdot:nth-child(98) {
  opacity: 0.7299;
  transform: translate(29.8107vw, -10px) scale(0.0337);
  animation: fall-98 25s -7s linear infinite;
}
@keyframes fall-98 {
  71.325% {
    transform: translate(25.594vw, 71.325vh) scale(0.0337);
  }
  to {
    transform: translate(27.70235vw, 100vh) scale(0.0337);
  }
}
.snowdot:nth-child(99) {
  opacity: 0.6602;
  transform: translate(87.4938vw, -10px) scale(0.1662);
  animation: fall-99 26s -7s linear infinite;
}
@keyframes fall-99 {
  58.148% {
    transform: translate(87.6502vw, 58.148vh) scale(0.1662);
  }
  to {
    transform: translate(87.572vw, 100vh) scale(0.1662);
  }
}
.snowdot:nth-child(100) {
  opacity: 0.3082;
  transform: translate(83.6971vw, -10px) scale(0.591);
  animation: fall-100 17s -17s linear infinite;
}
@keyframes fall-100 {
  40.313% {
    transform: translate(84.2532vw, 40.313vh) scale(0.591);
  }
  to {
    transform: translate(83.97515vw, 100vh) scale(0.591);
  }
}
.snowdot:nth-child(101) {
  opacity: 0.7868;
  transform: translate(49.5073vw, -10px) scale(0.9603);
  animation: fall-101 29s -26s linear infinite;
}
@keyframes fall-101 {
  59.275% {
    transform: translate(45.6409vw, 59.275vh) scale(0.9603);
  }
  to {
    transform: translate(47.5741vw, 100vh) scale(0.9603);
  }
}
.snowdot:nth-child(102) {
  opacity: 0.0768;
  transform: translate(77.6426vw, -10px) scale(0.8373);
  animation: fall-102 20s -19s linear infinite;
}
@keyframes fall-102 {
  36.677% {
    transform: translate(68.5345vw, 36.677vh) scale(0.8373);
  }
  to {
    transform: translate(73.08855vw, 100vh) scale(0.8373);
  }
}
.snowdot:nth-child(103) {
  opacity: 0.8395;
  transform: translate(18.2343vw, -10px) scale(0.4953);
  animation: fall-103 19s -15s linear infinite;
}
@keyframes fall-103 {
  31.697% {
    transform: translate(8.8775vw, 31.697vh) scale(0.4953);
  }
  to {
    transform: translate(13.5559vw, 100vh) scale(0.4953);
  }
}
.snowdot:nth-child(104) {
  opacity: 0.5866;
  transform: translate(60.0369vw, -10px) scale(0.4119);
  animation: fall-104 14s -19s linear infinite;
}
@keyframes fall-104 {
  35.86% {
    transform: translate(52.9841vw, 35.86vh) scale(0.4119);
  }
  to {
    transform: translate(56.5105vw, 100vh) scale(0.4119);
  }
}
.snowdot:nth-child(105) {
  opacity: 0.4912;
  transform: translate(62.7519vw, -10px) scale(0.5233);
  animation: fall-105 30s -17s linear infinite;
}
@keyframes fall-105 {
  52.963% {
    transform: translate(62.3243vw, 52.963vh) scale(0.5233);
  }
  to {
    transform: translate(62.5381vw, 100vh) scale(0.5233);
  }
}
.snowdot:nth-child(106) {
  opacity: 0.9404;
  transform: translate(32.2165vw, -10px) scale(0.0367);
  animation: fall-106 24s -23s linear infinite;
}
@keyframes fall-106 {
  34.355% {
    transform: translate(36.5216vw, 34.355vh) scale(0.0367);
  }
  to {
    transform: translate(34.36905vw, 100vh) scale(0.0367);
  }
}
.snowdot:nth-child(107) {
  opacity: 0.616;
  transform: translate(38.69vw, -10px) scale(0.5938);
  animation: fall-107 10s -20s linear infinite;
}
@keyframes fall-107 {
  62.264% {
    transform: translate(31.0368vw, 62.264vh) scale(0.5938);
  }
  to {
    transform: translate(34.8634vw, 100vh) scale(0.5938);
  }
}
.snowdot:nth-child(108) {
  opacity: 0.7376;
  transform: translate(45.4863vw, -10px) scale(0.3018);
  animation: fall-108 25s -24s linear infinite;
}
@keyframes fall-108 {
  41.407% {
    transform: translate(43.3613vw, 41.407vh) scale(0.3018);
  }
  to {
    transform: translate(44.4238vw, 100vh) scale(0.3018);
  }
}
.snowdot:nth-child(109) {
  opacity: 0.0698;
  transform: translate(28.6717vw, -10px) scale(0.9455);
  animation: fall-109 13s -10s linear infinite;
}
@keyframes fall-109 {
  36.641% {
    transform: translate(31.7995vw, 36.641vh) scale(0.9455);
  }
  to {
    transform: translate(30.2356vw, 100vh) scale(0.9455);
  }
}
.snowdot:nth-child(110) {
  opacity: 0.0411;
  transform: translate(65.8744vw, -10px) scale(0.3776);
  animation: fall-110 14s -12s linear infinite;
}
@keyframes fall-110 {
  73.575% {
    transform: translate(66.0709vw, 73.575vh) scale(0.3776);
  }
  to {
    transform: translate(65.97265vw, 100vh) scale(0.3776);
  }
}
.snowdot:nth-child(111) {
  opacity: 0.4325;
  transform: translate(57.5081vw, -10px) scale(0.97);
  animation: fall-111 18s -7s linear infinite;
}
@keyframes fall-111 {
  38.976% {
    transform: translate(53.3169vw, 38.976vh) scale(0.97);
  }
  to {
    transform: translate(55.4125vw, 100vh) scale(0.97);
  }
}
.snowdot:nth-child(112) {
  opacity: 0.9485;
  transform: translate(9.1889vw, -10px) scale(0.1769);
  animation: fall-112 22s -12s linear infinite;
}
@keyframes fall-112 {
  48.375% {
    transform: translate(15.8068vw, 48.375vh) scale(0.1769);
  }
  to {
    transform: translate(12.49785vw, 100vh) scale(0.1769);
  }
}
.snowdot:nth-child(113) {
  opacity: 0.0593;
  transform: translate(42.043vw, -10px) scale(0.4514);
  animation: fall-113 18s -3s linear infinite;
}
@keyframes fall-113 {
  78.699% {
    transform: translate(47.9656vw, 78.699vh) scale(0.4514);
  }
  to {
    transform: translate(45.0043vw, 100vh) scale(0.4514);
  }
}
.snowdot:nth-child(114) {
  opacity: 0.4349;
  transform: translate(19.186vw, -10px) scale(0.1255);
  animation: fall-114 16s -1s linear infinite;
}
@keyframes fall-114 {
  46.45% {
    transform: translate(10.8335vw, 46.45vh) scale(0.1255);
  }
  to {
    transform: translate(15.00975vw, 100vh) scale(0.1255);
  }
}
.snowdot:nth-child(115) {
  opacity: 0.9326;
  transform: translate(92.9794vw, -10px) scale(0.5649);
  animation: fall-115 30s -4s linear infinite;
}
@keyframes fall-115 {
  74.312% {
    transform: translate(87.5845vw, 74.312vh) scale(0.5649);
  }
  to {
    transform: translate(90.28195vw, 100vh) scale(0.5649);
  }
}
.snowdot:nth-child(116) {
  opacity: 0.8436;
  transform: translate(52.7595vw, -10px) scale(0.8938);
  animation: fall-116 30s -8s linear infinite;
}
@keyframes fall-116 {
  55.612% {
    transform: translate(48.8356vw, 55.612vh) scale(0.8938);
  }
  to {
    transform: translate(50.79755vw, 100vh) scale(0.8938);
  }
}
.snowdot:nth-child(117) {
  opacity: 0.6046;
  transform: translate(48.7454vw, -10px) scale(0.1244);
  animation: fall-117 21s -17s linear infinite;
}
@keyframes fall-117 {
  70.715% {
    transform: translate(57.6883vw, 70.715vh) scale(0.1244);
  }
  to {
    transform: translate(53.21685vw, 100vh) scale(0.1244);
  }
}
.snowdot:nth-child(118) {
  opacity: 0.7904;
  transform: translate(65.3848vw, -10px) scale(0.1934);
  animation: fall-118 26s -21s linear infinite;
}
@keyframes fall-118 {
  49.423% {
    transform: translate(71.9809vw, 49.423vh) scale(0.1934);
  }
  to {
    transform: translate(68.68285vw, 100vh) scale(0.1934);
  }
}
.snowdot:nth-child(119) {
  opacity: 0.2161;
  transform: translate(63.2494vw, -10px) scale(0.2325);
  animation: fall-119 23s -1s linear infinite;
}
@keyframes fall-119 {
  33.461% {
    transform: translate(65.1354vw, 33.461vh) scale(0.2325);
  }
  to {
    transform: translate(64.1924vw, 100vh) scale(0.2325);
  }
}
.snowdot:nth-child(120) {
  opacity: 0.9819;
  transform: translate(37.8449vw, -10px) scale(0.2902);
  animation: fall-120 28s -13s linear infinite;
}
@keyframes fall-120 {
  41.892% {
    transform: translate(30.5052vw, 41.892vh) scale(0.2902);
  }
  to {
    transform: translate(34.17505vw, 100vh) scale(0.2902);
  }
}
.snowdot:nth-child(121) {
  opacity: 0.1829;
  transform: translate(29.7158vw, -10px) scale(0.2768);
  animation: fall-121 15s -18s linear infinite;
}
@keyframes fall-121 {
  67.142% {
    transform: translate(22.0009vw, 67.142vh) scale(0.2768);
  }
  to {
    transform: translate(25.85835vw, 100vh) scale(0.2768);
  }
}
.snowdot:nth-child(122) {
  opacity: 0.1989;
  transform: translate(7.9007vw, -10px) scale(0.7511);
  animation: fall-122 21s -23s linear infinite;
}
@keyframes fall-122 {
  56.935% {
    transform: translate(5.5927vw, 56.935vh) scale(0.7511);
  }
  to {
    transform: translate(6.7467vw, 100vh) scale(0.7511);
  }
}
.snowdot:nth-child(123) {
  opacity: 0.6687;
  transform: translate(80.2318vw, -10px) scale(0.248);
  animation: fall-123 20s -15s linear infinite;
}
@keyframes fall-123 {
  55.051% {
    transform: translate(72.0134vw, 55.051vh) scale(0.248);
  }
  to {
    transform: translate(76.1226vw, 100vh) scale(0.248);
  }
}
.snowdot:nth-child(124) {
  opacity: 0.1675;
  transform: translate(5.9723vw, -10px) scale(0.568);
  animation: fall-124 25s -8s linear infinite;
}
@keyframes fall-124 {
  74.657% {
    transform: translate(5.2711vw, 74.657vh) scale(0.568);
  }
  to {
    transform: translate(5.6217vw, 100vh) scale(0.568);
  }
}
.snowdot:nth-child(125) {
  opacity: 0.0047;
  transform: translate(10.7104vw, -10px) scale(0.7867);
  animation: fall-125 11s -22s linear infinite;
}
@keyframes fall-125 {
  49.102% {
    transform: translate(17.5161vw, 49.102vh) scale(0.7867);
  }
  to {
    transform: translate(14.11325vw, 100vh) scale(0.7867);
  }
}
.snowdot:nth-child(126) {
  opacity: 0.1881;
  transform: translate(58.2921vw, -10px) scale(0.6377);
  animation: fall-126 10s -20s linear infinite;
}
@keyframes fall-126 {
  59.395% {
    transform: translate(66.9835vw, 59.395vh) scale(0.6377);
  }
  to {
    transform: translate(62.6378vw, 100vh) scale(0.6377);
  }
}
.snowdot:nth-child(127) {
  opacity: 0.1646;
  transform: translate(77.9337vw, -10px) scale(0.6994);
  animation: fall-127 26s -2s linear infinite;
}
@keyframes fall-127 {
  36.51% {
    transform: translate(76.5563vw, 36.51vh) scale(0.6994);
  }
  to {
    transform: translate(77.245vw, 100vh) scale(0.6994);
  }
}
.snowdot:nth-child(128) {
  opacity: 0.4332;
  transform: translate(49.2022vw, -10px) scale(0.2752);
  animation: fall-128 13s -14s linear infinite;
}
@keyframes fall-128 {
  69.888% {
    transform: translate(43.0476vw, 69.888vh) scale(0.2752);
  }
  to {
    transform: translate(46.1249vw, 100vh) scale(0.2752);
  }
}
.snowdot:nth-child(129) {
  opacity: 0.2043;
  transform: translate(7.0243vw, -10px) scale(0.0912);
  animation: fall-129 18s -17s linear infinite;
}
@keyframes fall-129 {
  77.359% {
    transform: translate(-2.9049vw, 77.359vh) scale(0.0912);
  }
  to {
    transform: translate(2.0597vw, 100vh) scale(0.0912);
  }
}
.snowdot:nth-child(130) {
  opacity: 0.653;
  transform: translate(23.4745vw, -10px) scale(0.988);
  animation: fall-130 11s -13s linear infinite;
}
@keyframes fall-130 {
  47.609% {
    transform: translate(25.7998vw, 47.609vh) scale(0.988);
  }
  to {
    transform: translate(24.63715vw, 100vh) scale(0.988);
  }
}
.snowdot:nth-child(131) {
  opacity: 0.0762;
  transform: translate(21.304vw, -10px) scale(0.0824);
  animation: fall-131 17s -27s linear infinite;
}
@keyframes fall-131 {
  58.543% {
    transform: translate(16.637vw, 58.543vh) scale(0.0824);
  }
  to {
    transform: translate(18.9705vw, 100vh) scale(0.0824);
  }
}
.snowdot:nth-child(132) {
  opacity: 0.7751;
  transform: translate(35.8084vw, -10px) scale(0.6474);
  animation: fall-132 30s -3s linear infinite;
}
@keyframes fall-132 {
  37.66% {
    transform: translate(39.2264vw, 37.66vh) scale(0.6474);
  }
  to {
    transform: translate(37.5174vw, 100vh) scale(0.6474);
  }
}
.snowdot:nth-child(133) {
  opacity: 0.0111;
  transform: translate(28.2485vw, -10px) scale(0.9542);
  animation: fall-133 24s -14s linear infinite;
}
@keyframes fall-133 {
  30.923% {
    transform: translate(28.8265vw, 30.923vh) scale(0.9542);
  }
  to {
    transform: translate(28.5375vw, 100vh) scale(0.9542);
  }
}
.snowdot:nth-child(134) {
  opacity: 0.707;
  transform: translate(36.1078vw, -10px) scale(0.3576);
  animation: fall-134 26s -15s linear infinite;
}
@keyframes fall-134 {
  45.549% {
    transform: translate(41.5398vw, 45.549vh) scale(0.3576);
  }
  to {
    transform: translate(38.8238vw, 100vh) scale(0.3576);
  }
}
.snowdot:nth-child(135) {
  opacity: 0.8739;
  transform: translate(50.0526vw, -10px) scale(0.7216);
  animation: fall-135 25s -30s linear infinite;
}
@keyframes fall-135 {
  59.566% {
    transform: translate(43.7411vw, 59.566vh) scale(0.7216);
  }
  to {
    transform: translate(46.89685vw, 100vh) scale(0.7216);
  }
}
.snowdot:nth-child(136) {
  opacity: 0.443;
  transform: translate(14.7477vw, -10px) scale(0.9289);
  animation: fall-136 27s -28s linear infinite;
}
@keyframes fall-136 {
  49.077% {
    transform: translate(10.3758vw, 49.077vh) scale(0.9289);
  }
  to {
    transform: translate(12.56175vw, 100vh) scale(0.9289);
  }
}
.snowdot:nth-child(137) {
  opacity: 0.8895;
  transform: translate(42.6784vw, -10px) scale(0.074);
  animation: fall-137 11s -13s linear infinite;
}
@keyframes fall-137 {
  59.466% {
    transform: translate(48.513vw, 59.466vh) scale(0.074);
  }
  to {
    transform: translate(45.5957vw, 100vh) scale(0.074);
  }
}
.snowdot:nth-child(138) {
  opacity: 0.0421;
  transform: translate(48.8353vw, -10px) scale(0.0391);
  animation: fall-138 29s -26s linear infinite;
}
@keyframes fall-138 {
  36.776% {
    transform: translate(58.0751vw, 36.776vh) scale(0.0391);
  }
  to {
    transform: translate(53.4552vw, 100vh) scale(0.0391);
  }
}
.snowdot:nth-child(139) {
  opacity: 0.2185;
  transform: translate(43.4093vw, -10px) scale(0.541);
  animation: fall-139 27s -28s linear infinite;
}
@keyframes fall-139 {
  36.25% {
    transform: translate(37.3286vw, 36.25vh) scale(0.541);
  }
  to {
    transform: translate(40.36895vw, 100vh) scale(0.541);
  }
}
.snowdot:nth-child(140) {
  opacity: 0.7502;
  transform: translate(8.7927vw, -10px) scale(0.5536);
  animation: fall-140 30s -29s linear infinite;
}
@keyframes fall-140 {
  37.544% {
    transform: translate(5.0786vw, 37.544vh) scale(0.5536);
  }
  to {
    transform: translate(6.93565vw, 100vh) scale(0.5536);
  }
}
.snowdot:nth-child(141) {
  opacity: 0.3862;
  transform: translate(33.1975vw, -10px) scale(0.282);
  animation: fall-141 28s -4s linear infinite;
}
@keyframes fall-141 {
  68.358% {
    transform: translate(33.0841vw, 68.358vh) scale(0.282);
  }
  to {
    transform: translate(33.1408vw, 100vh) scale(0.282);
  }
}
.snowdot:nth-child(142) {
  opacity: 0.9299;
  transform: translate(49.0224vw, -10px) scale(0.5774);
  animation: fall-142 18s -24s linear infinite;
}
@keyframes fall-142 {
  71.018% {
    transform: translate(47.3601vw, 71.018vh) scale(0.5774);
  }
  to {
    transform: translate(48.19125vw, 100vh) scale(0.5774);
  }
}
.snowdot:nth-child(143) {
  opacity: 0.1317;
  transform: translate(37.5856vw, -10px) scale(0.4082);
  animation: fall-143 14s -3s linear infinite;
}
@keyframes fall-143 {
  71.641% {
    transform: translate(38.5452vw, 71.641vh) scale(0.4082);
  }
  to {
    transform: translate(38.0654vw, 100vh) scale(0.4082);
  }
}
.snowdot:nth-child(144) {
  opacity: 0.6027;
  transform: translate(62.4546vw, -10px) scale(0.7631);
  animation: fall-144 14s -19s linear infinite;
}
@keyframes fall-144 {
  79.465% {
    transform: translate(62.4553vw, 79.465vh) scale(0.7631);
  }
  to {
    transform: translate(62.45495vw, 100vh) scale(0.7631);
  }
}
.snowdot:nth-child(145) {
  opacity: 0.0412;
  transform: translate(62.7216vw, -10px) scale(0.5121);
  animation: fall-145 24s -14s linear infinite;
}
@keyframes fall-145 {
  34.118% {
    transform: translate(54.8194vw, 34.118vh) scale(0.5121);
  }
  to {
    transform: translate(58.7705vw, 100vh) scale(0.5121);
  }
}
.snowdot:nth-child(146) {
  opacity: 0.9037;
  transform: translate(57.353vw, -10px) scale(0.9859);
  animation: fall-146 15s -22s linear infinite;
}
@keyframes fall-146 {
  33.115% {
    transform: translate(58.8449vw, 33.115vh) scale(0.9859);
  }
  to {
    transform: translate(58.09895vw, 100vh) scale(0.9859);
  }
}
.snowdot:nth-child(147) {
  opacity: 0.5652;
  transform: translate(28.2891vw, -10px) scale(0.1073);
  animation: fall-147 26s -23s linear infinite;
}
@keyframes fall-147 {
  68.727% {
    transform: translate(33.3045vw, 68.727vh) scale(0.1073);
  }
  to {
    transform: translate(30.7968vw, 100vh) scale(0.1073);
  }
}
.snowdot:nth-child(148) {
  opacity: 0.5048;
  transform: translate(7.5785vw, -10px) scale(0.3217);
  animation: fall-148 17s -12s linear infinite;
}
@keyframes fall-148 {
  68.579% {
    transform: translate(13.9222vw, 68.579vh) scale(0.3217);
  }
  to {
    transform: translate(10.75035vw, 100vh) scale(0.3217);
  }
}
.snowdot:nth-child(149) {
  opacity: 0.4061;
  transform: translate(77.9576vw, -10px) scale(0.1266);
  animation: fall-149 15s -19s linear infinite;
}
@keyframes fall-149 {
  49.269% {
    transform: translate(73.9337vw, 49.269vh) scale(0.1266);
  }
  to {
    transform: translate(75.94565vw, 100vh) scale(0.1266);
  }
}
.snowdot:nth-child(150) {
  opacity: 0.1083;
  transform: translate(21.7749vw, -10px) scale(0.822);
  animation: fall-150 13s -29s linear infinite;
}
@keyframes fall-150 {
  31.594% {
    transform: translate(23.7995vw, 31.594vh) scale(0.822);
  }
  to {
    transform: translate(22.7872vw, 100vh) scale(0.822);
  }
}
.snowdot:nth-child(151) {
  opacity: 0.5677;
  transform: translate(82.5511vw, -10px) scale(0.9556);
  animation: fall-151 28s -14s linear infinite;
}
@keyframes fall-151 {
  49.147% {
    transform: translate(75.3703vw, 49.147vh) scale(0.9556);
  }
  to {
    transform: translate(78.9607vw, 100vh) scale(0.9556);
  }
}
.snowdot:nth-child(152) {
  opacity: 0.8578;
  transform: translate(58.9051vw, -10px) scale(0.7867);
  animation: fall-152 22s -16s linear infinite;
}
@keyframes fall-152 {
  37.962% {
    transform: translate(62.0854vw, 37.962vh) scale(0.7867);
  }
  to {
    transform: translate(60.49525vw, 100vh) scale(0.7867);
  }
}
.snowdot:nth-child(153) {
  opacity: 0.1859;
  transform: translate(28.4534vw, -10px) scale(0.4011);
  animation: fall-153 22s -26s linear infinite;
}
@keyframes fall-153 {
  49.435% {
    transform: translate(23.5031vw, 49.435vh) scale(0.4011);
  }
  to {
    transform: translate(25.97825vw, 100vh) scale(0.4011);
  }
}
.snowdot:nth-child(154) {
  opacity: 0.7264;
  transform: translate(10.1362vw, -10px) scale(0.8844);
  animation: fall-154 14s -20s linear infinite;
}
@keyframes fall-154 {
  48.287% {
    transform: translate(2.314vw, 48.287vh) scale(0.8844);
  }
  to {
    transform: translate(6.2251vw, 100vh) scale(0.8844);
  }
}
.snowdot:nth-child(155) {
  opacity: 0.2265;
  transform: translate(26.0983vw, -10px) scale(0.1735);
  animation: fall-155 11s -13s linear infinite;
}
@keyframes fall-155 {
  77.253% {
    transform: translate(23.4196vw, 77.253vh) scale(0.1735);
  }
  to {
    transform: translate(24.75895vw, 100vh) scale(0.1735);
  }
}
.snowdot:nth-child(156) {
  opacity: 0.4909;
  transform: translate(71.3102vw, -10px) scale(0.2498);
  animation: fall-156 20s -4s linear infinite;
}
@keyframes fall-156 {
  72.203% {
    transform: translate(78.056vw, 72.203vh) scale(0.2498);
  }
  to {
    transform: translate(74.6831vw, 100vh) scale(0.2498);
  }
}
.snowdot:nth-child(157) {
  opacity: 0.9549;
  transform: translate(65.4243vw, -10px) scale(0.6395);
  animation: fall-157 17s -27s linear infinite;
}
@keyframes fall-157 {
  44.477% {
    transform: translate(64.0654vw, 44.477vh) scale(0.6395);
  }
  to {
    transform: translate(64.74485vw, 100vh) scale(0.6395);
  }
}
.snowdot:nth-child(158) {
  opacity: 0.6713;
  transform: translate(95.5191vw, -10px) scale(0.3045);
  animation: fall-158 24s -28s linear infinite;
}
@keyframes fall-158 {
  75.022% {
    transform: translate(88.4154vw, 75.022vh) scale(0.3045);
  }
  to {
    transform: translate(91.96725vw, 100vh) scale(0.3045);
  }
}
.snowdot:nth-child(159) {
  opacity: 0.4176;
  transform: translate(97.3215vw, -10px) scale(0.5439);
  animation: fall-159 26s -17s linear infinite;
}
@keyframes fall-159 {
  42.334% {
    transform: translate(92.135vw, 42.334vh) scale(0.5439);
  }
  to {
    transform: translate(94.72825vw, 100vh) scale(0.5439);
  }
}
.snowdot:nth-child(160) {
  opacity: 0.549;
  transform: translate(92.4106vw, -10px) scale(0.6128);
  animation: fall-160 26s -18s linear infinite;
}
@keyframes fall-160 {
  69.662% {
    transform: translate(87.1774vw, 69.662vh) scale(0.6128);
  }
  to {
    transform: translate(89.794vw, 100vh) scale(0.6128);
  }
}
.snowdot:nth-child(161) {
  opacity: 0.7208;
  transform: translate(97.0266vw, -10px) scale(0.9506);
  animation: fall-161 29s -17s linear infinite;
}
@keyframes fall-161 {
  68.881% {
    transform: translate(100.3272vw, 68.881vh) scale(0.9506);
  }
  to {
    transform: translate(98.6769vw, 100vh) scale(0.9506);
  }
}
.snowdot:nth-child(162) {
  opacity: 0.5475;
  transform: translate(52.7884vw, -10px) scale(0.2135);
  animation: fall-162 16s -29s linear infinite;
}
@keyframes fall-162 {
  54.408% {
    transform: translate(59.0884vw, 54.408vh) scale(0.2135);
  }
  to {
    transform: translate(55.9384vw, 100vh) scale(0.2135);
  }
}
.snowdot:nth-child(163) {
  opacity: 0.1915;
  transform: translate(32.1631vw, -10px) scale(0.445);
  animation: fall-163 23s -16s linear infinite;
}
@keyframes fall-163 {
  42.577% {
    transform: translate(38.0498vw, 42.577vh) scale(0.445);
  }
  to {
    transform: translate(35.10645vw, 100vh) scale(0.445);
  }
}
.snowdot:nth-child(164) {
  opacity: 0.2863;
  transform: translate(57.0803vw, -10px) scale(0.339);
  animation: fall-164 24s -10s linear infinite;
}
@keyframes fall-164 {
  54.955% {
    transform: translate(58.4002vw, 54.955vh) scale(0.339);
  }
  to {
    transform: translate(57.74025vw, 100vh) scale(0.339);
  }
}
.snowdot:nth-child(165) {
  opacity: 0.2373;
  transform: translate(17.6113vw, -10px) scale(0.0026);
  animation: fall-165 29s -5s linear infinite;
}
@keyframes fall-165 {
  41.187% {
    transform: translate(10.4879vw, 41.187vh) scale(0.0026);
  }
  to {
    transform: translate(14.0496vw, 100vh) scale(0.0026);
  }
}
.snowdot:nth-child(166) {
  opacity: 0.138;
  transform: translate(33.3845vw, -10px) scale(0.0467);
  animation: fall-166 17s -7s linear infinite;
}
@keyframes fall-166 {
  40.173% {
    transform: translate(34.1638vw, 40.173vh) scale(0.0467);
  }
  to {
    transform: translate(33.77415vw, 100vh) scale(0.0467);
  }
}
.snowdot:nth-child(167) {
  opacity: 0.6187;
  transform: translate(74.1974vw, -10px) scale(0.2062);
  animation: fall-167 29s -2s linear infinite;
}
@keyframes fall-167 {
  58.359% {
    transform: translate(73.6478vw, 58.359vh) scale(0.2062);
  }
  to {
    transform: translate(73.9226vw, 100vh) scale(0.2062);
  }
}
.snowdot:nth-child(168) {
  opacity: 0.0763;
  transform: translate(38.7521vw, -10px) scale(0.6782);
  animation: fall-168 19s -11s linear infinite;
}
@keyframes fall-168 {
  48.917% {
    transform: translate(46.3329vw, 48.917vh) scale(0.6782);
  }
  to {
    transform: translate(42.5425vw, 100vh) scale(0.6782);
  }
}
.snowdot:nth-child(169) {
  opacity: 0.5374;
  transform: translate(87.3537vw, -10px) scale(0.1298);
  animation: fall-169 21s -11s linear infinite;
}
@keyframes fall-169 {
  44.487% {
    transform: translate(82.2124vw, 44.487vh) scale(0.1298);
  }
  to {
    transform: translate(84.78305vw, 100vh) scale(0.1298);
  }
}
.snowdot:nth-child(170) {
  opacity: 0.9761;
  transform: translate(26.5382vw, -10px) scale(0.6716);
  animation: fall-170 20s -17s linear infinite;
}
@keyframes fall-170 {
  35.879% {
    transform: translate(18.2798vw, 35.879vh) scale(0.6716);
  }
  to {
    transform: translate(22.409vw, 100vh) scale(0.6716);
  }
}
.snowdot:nth-child(171) {
  opacity: 0.4313;
  transform: translate(33.9246vw, -10px) scale(0.8143);
  animation: fall-171 18s -17s linear infinite;
}
@keyframes fall-171 {
  46.997% {
    transform: translate(31.8765vw, 46.997vh) scale(0.8143);
  }
  to {
    transform: translate(32.90055vw, 100vh) scale(0.8143);
  }
}
.snowdot:nth-child(172) {
  opacity: 0.3438;
  transform: translate(54.6927vw, -10px) scale(0.3289);
  animation: fall-172 22s -18s linear infinite;
}
@keyframes fall-172 {
  64.805% {
    transform: translate(58.1468vw, 64.805vh) scale(0.3289);
  }
  to {
    transform: translate(56.41975vw, 100vh) scale(0.3289);
  }
}
.snowdot:nth-child(173) {
  opacity: 0.7846;
  transform: translate(37.2687vw, -10px) scale(0.3106);
  animation: fall-173 15s -9s linear infinite;
}
@keyframes fall-173 {
  43.035% {
    transform: translate(38.8743vw, 43.035vh) scale(0.3106);
  }
  to {
    transform: translate(38.0715vw, 100vh) scale(0.3106);
  }
}
.snowdot:nth-child(174) {
  opacity: 0.2062;
  transform: translate(7.7049vw, -10px) scale(0.95);
  animation: fall-174 10s -4s linear infinite;
}
@keyframes fall-174 {
  67.279% {
    transform: translate(5.9776vw, 67.279vh) scale(0.95);
  }
  to {
    transform: translate(6.84125vw, 100vh) scale(0.95);
  }
}
.snowdot:nth-child(175) {
  opacity: 0.8115;
  transform: translate(9.936vw, -10px) scale(0.903);
  animation: fall-175 24s -25s linear infinite;
}
@keyframes fall-175 {
  58.279% {
    transform: translate(16.5448vw, 58.279vh) scale(0.903);
  }
  to {
    transform: translate(13.2404vw, 100vh) scale(0.903);
  }
}
.snowdot:nth-child(176) {
  opacity: 0.3775;
  transform: translate(39.2358vw, -10px) scale(0.3205);
  animation: fall-176 20s -14s linear infinite;
}
@keyframes fall-176 {
  70.607% {
    transform: translate(32.0294vw, 70.607vh) scale(0.3205);
  }
  to {
    transform: translate(35.6326vw, 100vh) scale(0.3205);
  }
}
.snowdot:nth-child(177) {
  opacity: 0.3556;
  transform: translate(98.9037vw, -10px) scale(0.0364);
  animation: fall-177 27s -14s linear infinite;
}
@keyframes fall-177 {
  32.054% {
    transform: translate(103.9562vw, 32.054vh) scale(0.0364);
  }
  to {
    transform: translate(101.42995vw, 100vh) scale(0.0364);
  }
}
.snowdot:nth-child(178) {
  opacity: 0.6072;
  transform: translate(70.4337vw, -10px) scale(0.7809);
  animation: fall-178 13s -16s linear infinite;
}
@keyframes fall-178 {
  33.249% {
    transform: translate(73.6394vw, 33.249vh) scale(0.7809);
  }
  to {
    transform: translate(72.03655vw, 100vh) scale(0.7809);
  }
}
.snowdot:nth-child(179) {
  opacity: 0.6831;
  transform: translate(25.3529vw, -10px) scale(0.2155);
  animation: fall-179 19s -3s linear infinite;
}
@keyframes fall-179 {
  61.704% {
    transform: translate(30.1704vw, 61.704vh) scale(0.2155);
  }
  to {
    transform: translate(27.76165vw, 100vh) scale(0.2155);
  }
}
.snowdot:nth-child(180) {
  opacity: 0.1521;
  transform: translate(84.3817vw, -10px) scale(0.7897);
  animation: fall-180 12s -22s linear infinite;
}
@keyframes fall-180 {
  43.612% {
    transform: translate(89.9586vw, 43.612vh) scale(0.7897);
  }
  to {
    transform: translate(87.17015vw, 100vh) scale(0.7897);
  }
}
.snowdot:nth-child(181) {
  opacity: 0.357;
  transform: translate(29.0409vw, -10px) scale(0.5523);
  animation: fall-181 13s -27s linear infinite;
}
@keyframes fall-181 {
  64.391% {
    transform: translate(23.6891vw, 64.391vh) scale(0.5523);
  }
  to {
    transform: translate(26.365vw, 100vh) scale(0.5523);
  }
}
.snowdot:nth-child(182) {
  opacity: 0.866;
  transform: translate(74.207vw, -10px) scale(0.762);
  animation: fall-182 13s -21s linear infinite;
}
@keyframes fall-182 {
  35.186% {
    transform: translate(79.147vw, 35.186vh) scale(0.762);
  }
  to {
    transform: translate(76.677vw, 100vh) scale(0.762);
  }
}
.snowdot:nth-child(183) {
  opacity: 0.1948;
  transform: translate(39.2323vw, -10px) scale(0.6272);
  animation: fall-183 24s -17s linear infinite;
}
@keyframes fall-183 {
  66.028% {
    transform: translate(42.0527vw, 66.028vh) scale(0.6272);
  }
  to {
    transform: translate(40.6425vw, 100vh) scale(0.6272);
  }
}
.snowdot:nth-child(184) {
  opacity: 0.6447;
  transform: translate(50.2824vw, -10px) scale(0.7949);
  animation: fall-184 20s -9s linear infinite;
}
@keyframes fall-184 {
  31.489% {
    transform: translate(48.9266vw, 31.489vh) scale(0.7949);
  }
  to {
    transform: translate(49.6045vw, 100vh) scale(0.7949);
  }
}
.snowdot:nth-child(185) {
  opacity: 0.3272;
  transform: translate(94.1651vw, -10px) scale(0.6664);
  animation: fall-185 30s -8s linear infinite;
}
@keyframes fall-185 {
  49.016% {
    transform: translate(92.2088vw, 49.016vh) scale(0.6664);
  }
  to {
    transform: translate(93.18695vw, 100vh) scale(0.6664);
  }
}
.snowdot:nth-child(186) {
  opacity: 0.3445;
  transform: translate(37.4138vw, -10px) scale(0.4171);
  animation: fall-186 15s -24s linear infinite;
}
@keyframes fall-186 {
  52.472% {
    transform: translate(34.0836vw, 52.472vh) scale(0.4171);
  }
  to {
    transform: translate(35.7487vw, 100vh) scale(0.4171);
  }
}
.snowdot:nth-child(187) {
  opacity: 0.6438;
  transform: translate(11.3699vw, -10px) scale(0.8383);
  animation: fall-187 26s -27s linear infinite;
}
@keyframes fall-187 {
  79.431% {
    transform: translate(13.7753vw, 79.431vh) scale(0.8383);
  }
  to {
    transform: translate(12.5726vw, 100vh) scale(0.8383);
  }
}
.snowdot:nth-child(188) {
  opacity: 0.9835;
  transform: translate(25.1713vw, -10px) scale(0.4286);
  animation: fall-188 29s -1s linear infinite;
}
@keyframes fall-188 {
  31.489% {
    transform: translate(26.0184vw, 31.489vh) scale(0.4286);
  }
  to {
    transform: translate(25.59485vw, 100vh) scale(0.4286);
  }
}
.snowdot:nth-child(189) {
  opacity: 0.7081;
  transform: translate(59.8883vw, -10px) scale(0.1939);
  animation: fall-189 16s -15s linear infinite;
}
@keyframes fall-189 {
  66.621% {
    transform: translate(54.3938vw, 66.621vh) scale(0.1939);
  }
  to {
    transform: translate(57.14105vw, 100vh) scale(0.1939);
  }
}
.snowdot:nth-child(190) {
  opacity: 0.9142;
  transform: translate(51.1011vw, -10px) scale(0.85);
  animation: fall-190 27s -6s linear infinite;
}
@keyframes fall-190 {
  69.634% {
    transform: translate(57.4487vw, 69.634vh) scale(0.85);
  }
  to {
    transform: translate(54.2749vw, 100vh) scale(0.85);
  }
}
.snowdot:nth-child(191) {
  opacity: 0.6545;
  transform: translate(94.8413vw, -10px) scale(0.068);
  animation: fall-191 21s -1s linear infinite;
}
@keyframes fall-191 {
  70.404% {
    transform: translate(103.4705vw, 70.404vh) scale(0.068);
  }
  to {
    transform: translate(99.1559vw, 100vh) scale(0.068);
  }
}
.snowdot:nth-child(192) {
  opacity: 0.3814;
  transform: translate(54.5538vw, -10px) scale(0.2282);
  animation: fall-192 10s -27s linear infinite;
}
@keyframes fall-192 {
  59.996% {
    transform: translate(53.6683vw, 59.996vh) scale(0.2282);
  }
  to {
    transform: translate(54.11105vw, 100vh) scale(0.2282);
  }
}
.snowdot:nth-child(193) {
  opacity: 0.2672;
  transform: translate(96.3814vw, -10px) scale(0.8448);
  animation: fall-193 19s -4s linear infinite;
}
@keyframes fall-193 {
  51.643% {
    transform: translate(88.4065vw, 51.643vh) scale(0.8448);
  }
  to {
    transform: translate(92.39395vw, 100vh) scale(0.8448);
  }
}
.snowdot:nth-child(194) {
  opacity: 0.8208;
  transform: translate(19.8884vw, -10px) scale(0.7156);
  animation: fall-194 27s -26s linear infinite;
}
@keyframes fall-194 {
  53.202% {
    transform: translate(20.5137vw, 53.202vh) scale(0.7156);
  }
  to {
    transform: translate(20.20105vw, 100vh) scale(0.7156);
  }
}
.snowdot:nth-child(195) {
  opacity: 0.0345;
  transform: translate(17.1508vw, -10px) scale(0.1011);
  animation: fall-195 15s -18s linear infinite;
}
@keyframes fall-195 {
  46.492% {
    transform: translate(11.4173vw, 46.492vh) scale(0.1011);
  }
  to {
    transform: translate(14.28405vw, 100vh) scale(0.1011);
  }
}

 

How to remove duplicates from an array of objects using JavaScript?

How to remove duplicates from an array of objects using JavaScript? : Given an assortment of articles and the task is to dispose of the duplicate item part from the group list. There are two procedures to deal with this issue which are discussed below :

Strategy 1:

Using one of the keys as index: A temporary array is created which stores the objects of the original array using one of its keys as the index. Anyone of the object properties can be used as a key. The key is extracted from the object and used as the index of the new temporary array. The object is then assigned to this index. This approach will remove the duplicate objects as only one of each object of the original array will get assigned to the same index.

<!DOCTYPE html>
<html>

<head>
    <title>
        How to remove duplicates from an array of objects using JavaScript ?
    </title>
</head>

<body>
    <h1 style="color: green">
        Online Portfolio
    </h1>

    <b>
        How to remove duplicates from an array of objects?
    </b>

    <p>
        Click on the button to remove the duplicated in the array
    </p>

    <p>Check the console for the output</p>

    <button onclick="deleteDuplicates()">
        Remove Duplicate
    </button>

    <script type="text/javascript">
        function deleteDuplicates() {

            // Create an array of objects
            subjects = [{
                title: "C++",
                author: "Rohit Gautam"
            }, {
                title: "JavaScript",
                author: "James"
            }, {
                title: "Python",
                author: "Ajit"
            }, {
                title: "ReactJS",
                author: "Sandeep"
            }, {
                title: "ReactJS",
                author: "Alok"
            }, {
                title: "ReactJS",
                author: "Ankit"
            }, ];

            // Display the list of array objects
            console.log(subjects);

            // Declare a new array
            let newArray = [];

            // Declare an empty object
            let otherObject = {};

            // Loop for the array elements
            for (let i in subjects) {

                // Extract the title
                objTitle = subjects[i]['title'];

                // Use the title as the index
                otherObject[objTitle] = subjects[i];
            }

            // Loop to push unique object into array
            for (i in otherObject) {
                newArray.push(otherObject[i]);
            }

            // Display the unique objects
            console.log(newArray);
        }
    </script>
</body>

</html>

Output :

How to remove duplicates from an array of objects using JavaScript?

How to remove duplicates from an array of objects using JavaScript?

Strategy 2:

Converting the exhibit to a Set to eliminate the copies: A Set item holds just extraordinary upsides of any sort. This property can be utilized to store just the items that are special in the cluster.

Each object of the cluster is first changed over into a JSON encoded string utilizing the JSON.stringify technique. The JSON encoded string is then planned to an exhibit utilizing the guide() strategy. Another set is made by passing this cluster to the new set constructor. This progression will eliminate every one of the copy components as the JSON encoded strings will be something similar for similar components.

The set is then changed over to an Array utilizing the from() strategy, passing the set as a boundary. This exhibit won’t have copied objects.

 

<!DOCTYPE html>
<html>

<head>
    <title>
        How to remove duplicates from an array of objects using JavaScript ?
    </title>
</head>

<body>
    <h1 style="color: red">
        Online Portfolio
    </h1>

    <b>
        How to remove duplicates from an array of objects?
    </b>

    <p>
        Click on the button to remove the duplicated in the array
    </p>

    <p>Check the console for the output</p>

    <button onclick="deleteDuplicates()">
        Remove Duplicate
    </button>

    <script type="text/javascript">
        function deleteDuplicates() {

            // Create an array of objects
            subjects = [{
                title: "C++",
                author: "Rohit Gautam"
            }, {
                title: "JAVA",
                author: "Alok"
            }, {
                title: "Python",
                author: "Ajit"
            }, {
                title: "JAVA",
                author: "Alok"
            }, {
                title: "Python",
                author: "Ajit"
            }, {
                title: "C++",
                author: "Rohit Gautam"
            }, ];
            jsonObject = subjects.map(JSON.stringify);

            console.log(jsonObject);

            uniqueSet = new Set(jsonObject);
            uniqueArray = Array.from(uniqueSet).map(JSON.parse);
            console.log(uniqueArray);
        }
    </script>
</body>

</html>

Output

remove duplicate

CSS MEGA MENU/ FULLY RESPONSIVE

CSS MEGA MENU/ FULLY RESPONSIVE

CSS MEGA MENU/ FULLY RESPONSIVE

CSS MEGA MENU/ FULLY RESPONSIVE

The solitary strategy we had of investigating a site used to a little menu with navigational connections to chronicles and classes. This improved when the drop-down menu became. And afterward came the super menu.

Today, most news sites, online stores, and eCommerce sites would be inadequate without a super menu. Indeed, even the greatest retail sites, for example, Amazon and eBay wouldn’t be such a triumph without assistance from their uber menus.

What is a super menu, precisely? Would it be advisable for you to utilize a super menu on your site? How might you introduce one in WordPress? Continue to peruse to discover the appropriate responses.

 

Create A Mega Menu 

Make a mega menu that seems when the user moves the mouse over a component inside a navbar and hover on it, that time mega menu will start display. This is a very good approach to use only with css no any JS and jQuery required. Examining immense areas has dependably been a plan issue. You could make a huge sitemap-like menu with relationship with each page, yet it would turn out to be difficult to review and become legitimately colossal as more pages are added.

Step 1 : Add HTML

<div class="nav">
<nav>
<a href="javascript:void(0);" class="mobile-menu-trigger">Open mobile menu</a>
<ul class="menu menu-bar">
<li>
<a href="javascript:void(0);" class="menu-link menu-bar-link" aria-haspopup="true">1. Multilevel mega
menu</a>
<ul class="mega-menu mega-menu--multiLevel">
<li>
<a href="javascript:void(0);" class="menu-link mega-menu-link" aria-haspopup="true">1.1 Flyout
link</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">1.1.1 Page link</a>
</li>
<li>
<a href="javascript:void(0);" class="menu-link menu-list-link" aria-haspopup="true">1.1.2 Flyout link</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">1.1.2.1 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">1.1.2.2 Page link</a>
</li>
</ul>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">1.1.3 Page link</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-link mega-menu-link" aria-haspopup="true">1.2 Flyout
link</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">1.2.1 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">1.2.2 Page link</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-link mega-menu-link" aria-haspopup="true">1.3 Flyout
link</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">1.3.1 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">1.3.2 Page link</a>
</li>
</ul>
</li>
<li>
<a href="/page" class="menu-link mega-menu-link">1.4 Page link</a>
</li>
<li class="mobile-menu-back-item">
<a href="javascript:void(0);" class="menu-link mobile-menu-back-link">Back</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-link menu-bar-link" aria-haspopup="true">2. Flat mega menu (3
cols)</a>
<ul class="mega-menu mega-menu--flat">
<li>
<a href="/page" class="menu-link mega-menu-link mega-menu-header">2.1 Page link header</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">2.1.1 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">2.1.2 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">2.1.3 Page link</a>
</li>
</ul>
</li>
<li>
<a href="/page" class="menu-link mega-menu-link mega-menu-header">2.2 Page link header</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">2.2.1 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">2.2.2 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">2.2.3 Page link</a>
</li>
</ul>
</li>
<li>
<a href="/page" class="menu-link mega-menu-link mega-menu-header">2.3 Page link header</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">2.2.1 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">2.2.2 Page link</a>
</li>
</ul>
</li>
<li class="mobile-menu-back-item">
<a href="javascript:void(0);" class="menu-link mobile-menu-back-link">Back</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-link menu-bar-link" aria-haspopup="true">3. Flat mega menu (2
cols)</a>
<ul class="mega-menu mega-menu--flat">
<li>
<a href="#" class="menu-link mega-menu-link mega-menu-header">3.1 Page link header</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">
3.1.1 Page link<br />
<small>Short decription of link</small>
</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">
3.1.2 Page link<br />
<small>Short decription of link</small>
</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">
3.1.2 Page link<br />
<small>Short decription of link</small>
</a>
</li>
</ul>
</li>
<li class="mega-menu-content">
<p class="mega-menu-header">3.2 Page link header</p>
<p>This is just static content. You can add anything here. Images, text, buttons, your grandma's secrect recipe.</p>
</li>
<li class="mobile-menu-back-item">
<a href="javascript:void(0);" class="menu-link mobile-menu-back-link">Back</a>
</li>
</ul>
</li>
<li>
<a href="/page" class="menu-link menu-bar-link">Static link</a>
</li>
<li class="mobile-menu-header">
<a href="/home" class>
<span>Home</span>
</a>
</li>
</ul>
</nav>
</div>

Modal Explained

So, Utilize any component to open the mega menu, for example, a button element.

Utilize a holder component to make the dropdown menu and add a framework (segments) and add dropdown joins inside the lattice.

Wrap a component around the catch and the holder component ( to position the dropdown menu effectively with CSS.

STEP 2 : ADD CSS

* {
font-family: cursive;
}

nav ul,
nav li {
list-style: none;
padding: 0;
margin: 0;
}

nav a {
display: block;
text-decoration: none;
}

nav a:hover,
nav a:visited {
text-decoration: none;
}

.menu-bar {
background: #ffffff;
display: flex;
}

.menu-link {
padding: 15px 10px;
background: #ffffff;
color: #c16161;
transition: background 0.2s, color 0.2s;
position: relative;
z-index: 1;
}

.menu-link[aria-haspopup="true"] {
padding-right: 40px;
}

.menu-link[aria-haspopup="true"]:after {
content: "";
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowRight.svg#accent');
background-size: 14px;
width: 14px;
height: 14px;
font-size: 12px;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}

.mega-menu-header {
font-size: 1.2em;
text-transform: uppercase;
font-weight: bold;
color: #136a73;
}

.mega-menu {
background: #ffffff;
z-index: 10;
}

.mega-menu--multiLevel {
flex-direction: column;
}

@media all and (min-width: 951px) {
.nav {
background: #ffffff;
}
.nav>nav {
max-width: 900px;
margin: 0 auto;
}
.menu [aria-haspopup="true"]~ul {
display: none;
}
.menu-bar {
position: relative;
}
.menu-bar>li>[aria-haspopup="true"]:after {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowBottom.svg#accent');
}
.menu-bar>li>[aria-haspopup="true"]:hover:after {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowBottom.svg#light');
}
.menu-bar>li>[aria-haspopup="true"]:focus~ul {
display: flex;
transform-origin: top;
animation: dropdown 0.2s ease-out;
}
.menu-bar>li>[aria-haspopup="true"]~ul:hover {
display: flex;
}
.menu-bar>li:focus-within>[aria-haspopup="true"]~ul {
display: flex;
}
.menu-bar>li>[aria-haspopup="true"]:focus,
.menu-bar>li:focus-within>[aria-haspopup="true"],
.menu-bar>li:hover>a {
background: #c16161;
color: #ffffff;
}
.menu-bar>li>[aria-haspopup="true"]:focus:after,
.menu-bar>li:focus-within>[aria-haspopup="true"]:after,
.menu-bar>li:hover>a:after {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowTop.svg#light');
}
.mega-menu {
position: absolute;
top: 100%;
left: 0;
width: 100%;
}
.mega-menu:hover {
display: flex;
}
.mega-menu a:hover {
background: #dceced;
color: #136a73;
}
.mega-menu--multiLevel>li {
width: 33.33333333%;
}
.mega-menu--multiLevel>li>[aria-haspopup="true"]~ul {
left: 33.33333333%;
width: 33.33333333%;
}
.mega-menu--multiLevel>li>[aria-haspopup="true"]~ul ul {
width: 100%;
left: 100%;
}
.mega-menu--multiLevel li:hover>[aria-haspopup="true"]~ul {
display: block;
transform-origin: left;
animation: flyout 0.2s ease-out;
}
.mega-menu--multiLevel li:focus-within>[aria-haspopup="true"]~ul {
display: block;
}
.mega-menu--multiLevel li:hover>[aria-haspopup="true"],
.mega-menu--multiLevel li:focus-within>[aria-haspopup="true"],
.mega-menu--multiLevel li:hover>a,
.mega-menu--multiLevel li:focus-within>a {
background: #dceced;
color: #136a73;
}
.mega-menu--multiLevel [aria-haspopup="true"]~ul,
.mega-menu--multiLevel [aria-haspopup="true"] {
border-left: 1px solid #f0f0f0;
}
.mega-menu--multiLevel [aria-haspopup="true"]~ul:hover,
.mega-menu--multiLevel [aria-haspopup="true"]:hover {
display: block;
}
.mega-menu--multiLevel [aria-haspopup="true"]~ul {
position: absolute;
top: 0;
height: 100%;
}
.mega-menu--flat>* {
flex: 1;
}
.mobile-menu-trigger,
.mobile-menu-header,
.mobile-menu-back-item {
display: none;
}
}

@media all and (max-width: 950px) {
.nav {
padding: 20px;
}
.mobile-menu-trigger,
.mobile-menu-header,
.mobile-menu-back-item {
display: block;
}
.mobile-menu-trigger {
background: #c16161;
color: #ffffff;
border: 0;
padding: 10px;
font-size: 1.2em;
border-radius: 4px;
}
.mobile-menu-header {
order: -1;
background: grey;
}
.mobile-menu-header a {
padding: 20px 25px;
color: #ffffff;
visibility: visible;
}
.menu-bar {
flex-direction: column;
position: fixed;
top: 0;
left: -100%;
height: 100vh;
width: 350px;
max-width: 350px;
max-width: 90%;
overflow-x: hidden;
transition: left 0.3s;
box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.25);
}
.menu-bar>li>[aria-haspopup="true"]~ul {
display: flex;
flex-direction: column;
background: #ffffff;
position: absolute;
left: 100%;
top: 0;
max-height: 100vh;
width: 100%;
transition: left 0.3s;
}
.menu-bar>li>[aria-haspopup="true"]~ul>li>[aria-haspopup="true"] {
font-size: 1.2em;
}
.menu-bar>li>[aria-haspopup="true"]~ul>li>[aria-haspopup="true"]~ul a {
padding-left: 40px;
}
.menu-bar>li>[aria-haspopup="true"]~ul>li>[aria-haspopup="true"]~ul>li>[aria-haspopup="true"]~ul a {
padding-left: 80px;
}
.menu-bar>li>[aria-haspopup="true"]~ul [aria-haspopup="true"] {
color: #2a2a2a;
}
.menu-bar>li>[aria-haspopup="true"]~ul [aria-haspopup="true"]:after {
content: "+";
background: none;
font-size: 1em;
font-weight: normal;
height: 20px;
line-height: 1;
}
.menu-bar>li>[aria-haspopup="true"]~ul [aria-haspopup="true"]~ul {
max-height: 0px;
transform-origin: top;
transform: scaleY(0);
transition: max-height 0.1s;
}
.mega-menu-content {
padding: 20px 25px;
}
.mobile-menu-back-item {
order: -1;
}
.mobile-menu-back-item a {
background: #d9d9d9;
color: #2a2a2a;
max-height: calc(1.4em + 40px);
margin-top: calc(0px - (1.4em + 40px));
pointer-events: none;
}
.mobile-menu-back-item a:before {
content: "";
width: 14px;
height: 12px;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowLeft.svg#default');
background-size: 14px;
margin-right: 10px;
display: inline-block;
}
.mobile-menu-trigger:focus~ul {
left: 0;
}
.menu-bar:hover,
.menu-bar:focus-within {
left: 0;
}
.menu-bar>li>[aria-haspopup="true"]:focus~ul {
left: 0;
}
.menu-bar>li>[aria-haspopup="true"]~ul {
margin-top: calc(1.4em + 40px);
}
.menu-bar>li>[aria-haspopup="true"]~ul:hover,
.menu-bar>li>[aria-haspopup="true"]~ul:focus-within {
left: 0;
}
.menu-bar>li>[aria-haspopup="true"]~ul [aria-haspopup="true"]:focus~ul {
max-height: 500px;
animation: dropdown 0.3s forwards;
}
.menu-bar>li>[aria-haspopup="true"]~ul li:focus-within>[aria-haspopup="true"]~ul {
max-height: 500px;
transform: scaleY(1);
}
.menu-bar>li:focus-within~.mobile-menu-header a {
visibility: hidden;
}
}

@media all and (max-width: 950px) and (hover: none) {
.mobile-menu-trigger:hover~ul {
left: 0;
}
.menu-bar>li>[aria-haspopup="true"]:hover~ul {
left: 0;
}
.menu-bar>li>[aria-haspopup="true"]~ul:hover {
left: 0;
}
.menu-bar>li>[aria-haspopup="true"]~ul [aria-haspopup="true"]:hover~ul {
max-height: 500px;
animation: dropdown 0.3s forwards;
}
.menu-bar>li>[aria-haspopup="true"]~ul [aria-haspopup="true"]~ul:hover {
max-height: 500px;
transform: scaleY(1);
}
.menu-bar>li:hover~.mobile-menu-header a {
visibility: hidden;
}
}

@keyframes dropdown {
0% {
opacity: 0;
transform: scaleY(0);
}
50% {
opacity: 1;
}
100% {
transform: scaleY(1);
}
}

@keyframes flyout {
0% {
opacity: 0;
transform: scaleX(0);
}
100% {
opacity: 1;
transform: scaleX(1);
}
}

See all the CSS related posts

LIVE DEMO

See the Pen sdfsdf by Rohit Gautam (@TheRrohitt) on CodePen.

Textarea Auto Height According to Content

Textarea Auto Height According to Content

Textarea Auto Height According to Content : In my current project, I was attempting to discover an approach to auto-resize a textarea as indicated by some substance that would be stacked in powerfully through Ajax. I didn’t have the foggiest idea about the tallness of the substance and the textarea component doesn’t resize normally like other HTML components, so I expected to refresh the stature of the component with JavaScript each time the substance changed.

It appeared to be a basic errand. In the wake of doing a hunt to perceive what sorts of modules and contents were gliding around to do this, the models I discovered appeared to be somewhat excessively perplexing. While most arrangements appeared to join some intricate number-related estimations, I thought about a superior way.

Auto Resize Textarea Height is the best element to fit the enormous substance. This element can make an easy to understand and appealing Textarea Field. It can increment or lessening the tallness of the Textarea field consequently dependent on the length of content.

You can likewise effectively carry out this component with another content field. Along these lines, you will learn here the overall code to use with a book field. It will actually want to grow the stature of the content field consequently at whatever point you enter or glue the substance into it.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Days Counter</title>
</head>

<body>
    <div class="container">
        <div class="calendar">
            <div class="result" id="demo">
                <textarea id="Description" name=""></textarea>
            </div>
        </div>
    </div>
</body>
</html>

JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('#Description').text('Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.')
      
  let scrollHeight = $('#Description').prop('scrollHeight');
        let lineHeight = 15;
        let rows = Math.round(scrollHeight / lineHeight);
        console.log('scrollHeght-->' + scrollHeight + 'lineHeight-->' + lineHeight);
        $('#Description').attr('rows', rows);
    });
</script>

See the Pen Text area Auto Height According to Content by Rohit Gautam (@TheRrohitt) on CodePen.

Web Designer Top Interview Question and Answer

Web Designer Top Interview Question and Answer

Web Designer Top Interview Question and Answer

Web Designer Top Interview Question and Answer : After collecting questions from many interviews. I came to search for those answer which is needed for the interviews question. These questions are very interesting which covers mostly HTML, CSS/ JavaScript, and jQuery, and Experience a couple of years. This is going to be very useful before anyone faces any interview.

 

In CSS when will you use a CSS float?

Ans –  The “float” CSS property specifies that an element should be placed along the left or right side of its container, where text and inline elements will wrap around it.

Q2 – While writing an error message what are all things do you need to take into consideration?

Ans –  Be Clear And Not Ambiguous

Be Short And Meaningful

Be Humble

Be Specific And Relevant

Don’t Use Technical Jargons.

Avoid Negative Words

Avoid Uppercase Text.

Give Direction to User

Explain what a Grid System is?

Ans –  There is nothing worse for an artist than a blank canvas. A grid system is a set of measurements a graphic designer can use to align and size objects within the given format. Although there are a few different categories of grid systems, there are no strict rules on what can or cannot be a grid. It’s up to you. Any guides that help you shape the final design are okay.

Q4 – What does is NaN Function do?

Answer –  The isNaN() function determines whether a value is an illegal number (Not-a-Number). This function returns true if the value equates to NaN. Otherwise, it returns false.

isNaN(123) //false

isNaN(-1.23) //false

isNaN(52) //false

isNaN(0) //false

isNaN(‘123’) //false

isNaN(‘Hello’) //true

isNaN(‘2005/12/12’) //true

isNaN() //false

isNaN(true) //false

isNaN(undefined) //true

isNaN(‘NaN’) //true

isNaN(NaN) //true

Explain What is Information Architecture?

Answer –  Information architecture (IA) is the structural design of shared information environments; the art and science of organizing and labelling websites, intranets, online communities and software to support usability and findability; and an emerging community of practice focused on bringing principles of design, architecture and information science to the digital landscape.

What is the difference between span & Div?

Answer –  The primary difference between a div and a span is their default behavior. By default, a <div> is a block-level-element and a <span> is an inline element. In other words, if you want to adjust a small portion of text and not break it out of the current line, you should use a <span>. If you need to modify a large division, the height, move an element, or contain other elements, you should use a <div>.

What is Mobile-First Design ?.

Answer – Responsive design starts on the desktop; that is, at the maximum required resolution, and then scales down to the smallest screen. Even though the content and layout contract to fit smartphones, the navigation, content, and download speeds are geared more for your traditional website.

Mobile-first design is similar to designing a mobile app and then adapting the layout that it can be viewed neatly on tablet and desktop devices without too many modifications. Your whole design and layout are based on providing an excellent mobile user experience: fast download speeds, rich media content to keep your target audience interested, easy touchscreen navigation, and so on.

WHY MOBILE-FIRST DESIGN

Responsive design sounds good, we hear you say. Why should you risk a mobile-first design? Quite simply, the stats show that we have become addicted to surfing on mobile devices. Currently, 52.64% of the total traffic on the Internet is done via mobile phones, and by the end of the year experts from Zenith Media predict an increase of up to 75%. With this information in mind, it is essential to understand what mobile-first design is and what its benefits are. Unlike responsive design, mobile-first is about a complete mobile user experience: adapted app-like user interface, less text, larger fonts, fast download speed, video and audio, one call-to-action per page, short forms, etcetera. Additionally, mobile browsers shortly will have access to more of the smartphone features like camera, haptic feedback, voice detection, so that a mobile-first design will be able to provide a unique experience to put your site ahead of the competition and drive traffic.

Difference between bootstrap3 and bootstrap 4?

Answer – Bootstrap 3 Source CSS Files is LESS.

Bootstrap 4 Source CSS files Converted in SCSS. 

Bootstrap 3 has 4 grid system (col-xs-3, col-sm-3, col-md-3, col-lg-3).

Bootstrap 4 has 5 grid system (.col-, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3). Bootstrap 4 has removed the xs from the lowest break point. Therefore, (col-) covers all devices. 

Bootstrap 3 Offset class is like this (col-md-offset-4).

Bootstrap 4 has changed the offset class (offset-md-4). 

In Bootstrap 3 we are used this (.img-responsive) class for the responsive images.

Bootstrap 4 has changed the class for responsive image (.img-fluid). 

In Bootstrap 3 we are used (.input-lg) and (.input-sm) to increase and decrease the input size.

Bootstrap 4 has changed to (.form-control-lg) and (.form-control-sm) to increase and decrease the input size.

What is the difference between Body.Onload() & document.ready() ?

Answer- The main differences between the two are:

  1. Body.Onload() event will be called only after the DOM and associated resources like images got loaded, but jQuery’s document.ready() event will be called once the DOM is loaded i.e., it won’t wait for the resources like images to get loaded. Hence, the functions in jQuery’s ready event will get executed once the HTML structure is loaded without waiting for the resources.
  2. We can have multiple document.ready() in a page but Body.Onload() event cannot.

What are the Different JavaScript Types?

Answer- In JavaScript, there are two different kinds of data: primitives, and objects. A primitive is simply a data type that is not an object and has no methods.

In JS, there are six primitive data types:

BUNNSS

Boolean, Undefined,  Number, Null, String, Symbol

What about Objects?

Objects are not a primitive dataType.

An object is a collection of properties. These properties are stored in key/value pairs. Properties can reference any type of data, including objects and/or primitive values.

What is the prompt box?

Answer – The prompt() method displays a dialog box that prompts the visitor for input. A prompt box is often used if you want the user to input a value before entering a page.

Note: When a prompt box pops up, the user will have to click either “OK” or “Cancel” to proceed after entering an input value. Do not overuse this method, as it prevents the user from accessing other parts of the page until the box is closed.

The prompt() method returns the input value if the user clicks “OK”. If the user clicks “cancel” the method returns null.

What is the difference between HTML & HTML5?

Ans – The biggest advantage that HTML5 has over its unnumbered predecessor is that it has high-level audio and video support which was not a part of the version specifications in the previous HTML. Other differences between HTML and HTML5:

SVG, canvas and other virtual vector graphics are supported in HTML5, whereas in HTML, using vector graphics was only possible by using it in conjunction with different technologies like Flash, VML, and Silver-light, etc.

HTML5 uses web SQL databases, application cache for temporary storing data, meanwhile, in HTML, only browser cache could be utilized for this purpose.

Another difference between HTML and HTML5 worth mentioning is that the former doesn’t allow JavaScript to run within the web browser (it instead runs in the browser interface thread) whereas the latter provides full support for JavaScript to run in the background (This is a possible courtesy to the JS web worker API of HTML5).

HTML5 is not based on SGML, and that allows it to have improved parsing rules which provide enhanced compatibility.

In HTML5, inline MathML and SVG can be used in text whereas this wasn’t possible in HTML.

Some of the deprecated elements that have now been dropped completely are index, no frames, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike, tt.

HTML5 supports new kinds of form controls, for example, dates and times, email, number, range, tel, url, search, etc.

There are many new elements introduced in HTML. Some of the most important ones are: summary, time, aside, audio, command, data, data list, details, embed, wbr, figcaption, figure, footer, header, article, hgroup, bdi, canvas, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, track, video.

What is $() in the jQuery library? 

Answer – The $() function is an alias of jQuery() function, at first it looks weird and makes jQuery code cryptic, but once you get used to it, you will love its brevity. $() function is used to wrap any object into a jQuery object, which then allows you to call various method-defined jQuery objects. You can even pass a selector string to the $()function, and it will return a jQuery object containing an array of all matched DOM elements. I have seen this jQuery asked several times, despite it’s quite basic, it is used to differentiate between developers who know jQuery or not.

https://career.guru99.com/top-50-jquery-interview-questions/

https://www.codeproject.com/Articles/620811/Latest-JavaScript-Interview-Questions-and-Answers

 What is Grouping?

Answer – When more than one selector shares the same declaration, they may be grouped together via a comma-separated list; this allows you to reduce the size of the CSS (every bit and byte is important) and makes it more readable. The following snippet applies the same background to the first three heading elements.h1, h2, h3 {background: red;}

What is “Semantic Element”?

Ans – A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> – Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> – Clearly defines its content.

Which command will give you a version of Jquery”?

Ans – The command $.ui.version returns jQuery UI version.

What is event bubbling?

Event bubbling is a term you might have come across on your JavaScript travels. It relates to the order in which event handlers are called when one element is nested inside a second element, and both elements have registered a listener for the same event (a click, for example).

Why do we use metatag?

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page but will be machine parsable.

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

The metadata can be used by browsers (how to display content or reload the page), search engines (keywords), or other web services.

What is a web worker?

Ans- When executing scripts on an HTML page, the page becomes unresponsive until the script is finished.

A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.

What are webhooks?

Webhooks provide a mechanism whereby a server-side application can notify a client-side application when a new event (that the client-side application might be interested in) has occurred on the server. Webhooks operate on the concept of “event reaction” (don’t call me, I’ll call you if I have something new), and thus avoids the need for constant polling of the server-side application by the client-side application. Thus, rather than the client-side application constantly polling the server-side application to check for new events, the server-side application calls the client-side application (by invoking a client-provided webhook URL) anytime the server-side has something new to report to the client.

This is the core concept of the Webhook.

What is DOCTYPE!?

The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.

The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.

In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language so that the browsers render the content correctly.

HTML5 is not based on SGML and therefore does not require a reference to a DTD.

Tip: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect.

What is the Callback Function? 

Simply put: A callback is a function that is to be executed after another function has finished executing — hence the name ‘call back’.

Is JavaScript case sensitive?

Ans: Yes!

A function getElementById is not the same as getElementbyID.

 What are undeclared and undefined variables?

Undeclared variables are those that do not exist in a program and are not declared. If the program tries to read the value of an undeclared variable, then a runtime error is encountered.

Undefined variables are those that are declared in the program but have not been given any value. If the program tries to read the value of an undefined variable, an undefined value is returned.

What is the ‘this’ keyword in JavaScript?

‘This’ keyword refers to the object from where it was called.

What is closure in JavaScript?

A closure is a combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

Lexical scoping

Consider the following example code:

function init() {
  var name = 'Mozilla'; // name is a local variable created by init
  function displayName() { // displayName() is the inner function, a closure
    alert(name); // use variable declared in the parent function
  }
  displayName();
}
init();

init() creates a local variable called name and a function called displayName(). The displayName() function is an inner function that is defined inside init() and is available only within the body of the init() function. Note that the displayName() function has no local variables of its own. However, since inner functions have access to the variables of outer functions, displayName() can access the variable name declared in the parent function, init().

What is Hoisting in JavaScript?

JavaScript Declarations are Hoisted

In JavaScript, a variable can be declared after it has been used.

In other words; a variable can be used before it has been declared.