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 Add and Remove Row Dynamically in React JS

How to Add and Remove Row Dynamically in React JS

How to Add and Remove Row Dynamically : React is a front-end library created by Facebook. It is utilized for dealing with the view layer for web and portable applications. ReactJS permits us to make reusable UI segments. It is right now perhaps the most well known JavaScript libraries and has a solid establishment and huge local area behind it.

This instructional exercise will help JavaScript engineers who look forward to manage ReactJS interestingly. We will attempt to present each idea by showing basic code models that can be handily perceived. Subsequent to completing every one of the parts, you will feel sure working with ReactJS. As a little something extra we will present extra components that function admirably with ReactJS to assist you with learning the prescribed procedures and pursue the advanced JavaScript directions.

Introduction to the Blog

This tutorial will teach you how to add and remove rows from the network.

This instructional exercise additionally covers the Reactive structure approvals on powerfully created components and reset structure in the wake of presenting the structure.

In the wake of Researching numerous things over google about this usefulness the websites were not covering everything simultaneously.

So I chose to compose code myself and offer it with each and every individual who actually needs it.

This will required to Setup ReactJS Locally on you system along with Node JS : See here

We should begin :

It will require 2 Files.

app.js

app.css

App.js :

In this file you will have to install two dependency :

npm install react-bootstrap

and  then

npm install react-bootstrap bootstrap

 

import './App.css';
import React , {useState}   from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import { Container } from 'react-bootstrap';
function App() {
//------------Contact Information Phone Script starts here------------- //
const[contactPhoneList, setcontactPhoneList] = useState([
{contactPhoneType: "Program 1", contactCountryCode: "Test", contactMobileNumber: "9050131191", contactExtension: "Extension 1", contactIsPrefered : true}]
) 
const cPhoneHandleChange = (e,index) => {  
let {id, value} = e.target; // accessing the value of element by ID\ 
//Checking if element is checkbox or not and setting it's value true 
if(e.target.checked == true && e.target.type === 'checkbox'){
value = true;
}
//Checking if element is checkbox or not and setting it's value false
else if(e.target.checked == false &&  e.target.type === 'checkbox'){   
value=false;
} 
const cPhonelist = [...contactPhoneList];
cPhonelist[index][id] = value; 
setcontactPhoneList(cPhonelist);
}
const cPhonehandleAddInput = () => {
setcontactPhoneList([...contactPhoneList, {contactPhoneType: "Program 1", contactCountryCode: "Test", contactMobileNumber: "9050131191", contactExtension: "Extension 1",contactIsPrefered : true}])
}
const cPhoneHandleRemoveInput = (index) => {
const cPhonelist = [...contactPhoneList];
cPhonelist.splice(index, 1);
setcontactPhoneList(cPhonelist);
}
//------------Contact Information Phone ends starts here------------- //  
return (
<div className="App">
<header className="App-header">
<Container>
<div class="row result">
{JSON.stringify(contactPhoneList , null , 2)}
</div>
{contactPhoneList.map((item,i) => {
return(
<div className="row">
<div className="col-md-2 col-6">
<div className="form-group floating">
<select className="form-select" id="contactPhoneType" value={item.contactPhoneType} onChange={e => cPhoneHandleChange(e,i)}>
<option selected disabled value="">Phone Type</option>
<option>Personal</option> 
<option>Work</option>    
<option>Alternate</option>      
<option>PA</option>                   
</select>
</div>
</div>
<div className="col-md-2 col-6">
<div className="form-group floating">
<select className="form-select" id="contactCountryCode" value={item.contactCountryCode} onChange={e => cPhoneHandleChange(e,i)} required >
<option selected disabled value="">Country Code</option>
<option>+1</option> 
<option>+2</option>    
<option>+3</option>      
<option>+4</option>                   
</select>
<div className="invalid-feedback">
Please select Country Code.
</div>
</div>
</div>                            
<div className="col-md-2 col-6">
<div className="form-group">
<input type="text" id="contactMobilenumber" className="form-control" placeholder="Number" name="contactMobilenumber" value={item.contactMobilenumber} onChange={e => cPhoneHandleChange(e,i)} required />
</div>
</div>
<div className="col-md-2 col-6">
<div className="form-group">
<input type="text" id="contactExtension" className="form-control" placeholder="Extension" name="cextension" value={item.contactExtension} onChange={e => cPhoneHandleChange(e,i)} />

</div>
</div>
<div className="col-md-2 col-6">
<div className="d-flex ">
<label htmlFor="floatingInput">Active
</label>
<div className="form-check form-switch ms-3">
<input className="form-check-input contactIsPrefered" type="checkbox" id="contactIsPrefered" defaultChecked={item.contactIsPrefered} value={item.contactIsPrefered}  onChange={e => cPhoneHandleChange(e,i)}/>
<label className="form-check-label" htmlFor="contactIsPrefered" />
</div>
</div>
</div>
<div className="col-md-2 col-6">
<div className="actionContainer ">
{contactPhoneList.length - 1 === i &&
// <button type="button" className="btn btn-primary">Add More</button>
<a href className="ms-4" onClick={cPhonehandleAddInput} >
<img src="https://img.icons8.com/color/48/000000/add.png"/>
{/* <div className="icon dripicons-trash" /> */}
</a> 

}                                
{contactPhoneList.length !== 1 &&
<a href className="ms-4" onClick={e => cPhoneHandleRemoveInput(i)}>
<img src="https://img.icons8.com/color/48/000000/delete-sign--v1.png"/>
{/* <div className="icon dripicons-trash" /> */}
</a>  
}                                   
</div>
</div>                                
</div>   
)
})}
</Container>
</header>
</div>
);
}
export default App;

App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.result{
  height: 200px;
  overflow: scroll;
  border: 1px solid;
  background-color: #3e3e3e;
  margin-bottom: 30px;
  font-size: 14px;
}

 

How to Import Components from React Bootstrap

How to Import Components from React Bootstrap

Introduction

How to Import Components from React Bootstrap : React Bootstrap is one of the broadly utilized libraries in React, and its different segments are utilized in React applications to make them portable agreeable. It has huge loads of segments that give applications the different subtleties of design, structure controls, data pointers, and navigational segments.

In this aide, you will figure out how to add React Bootstrap into a React application by bringing in and utilizing the React Bootstrap parts in your React segments.

Adding React Bootstrap into a React App :

Install the React Bootstrap library by using the below npm command.

npm install react-bootstrap bootstrap

After installing the above two libraries, the next step is to add bootstrap CSS file into either index.js or app.js like this:

import 'bootstrap/dist/css/bootstrap.min.css';

On the other hand, in case you are utilizing SASS in your application, you can add it as displayed beneath.

App.scss

@import "~bootstrap/scss/bootstrap";

App.js

import './App.scss';

Presently you are a great idea to proceed to can continue further with React Bootstrap by bringing different segments into your React application.

Importing Components from React Bootstrap :

Since you have introduced the bootstrap library and arranged the CSS record into your application, it’s an ideal opportunity to import the segments from react-bootstrap.

The essential language structure for bringing in anything from react-bootstrap resembles this:

import { COMPONENT_NAME } from 'react-bootstrap';
or
import COMPONENT_NAME from 'react-bootstrap/COMPONENT_NAME';

It is the fundamental language structure that is utilized to import the particular segments from the library, yet you can in any case import it utilizing alternate ways that you will learn in the following segment of this aide.

Import Components from the React Bootstrap Library

Importing Single Components

You can import any Solo component from react-bootstrap as shown below.

import React, { Component } from "react";
import { Image } from "react-bootstrap";

class SoloComponent extends Component {
  render() {
    return (
      <div>
        <Image
          src="https://dummyimage.com/170x180/000/fff.png&text=TEST123"
          thumbnail
        />
      </div>
    );
  }
}

export default SoloComponent ;

In the above model, to import the Solo component called Image from the react-bootstrap library, the order utilized is:

import { Image } from "react-bootstrap";

Inside the render() work, the <Image/> component is utilized alongside different properties like href and another supporting property called thumbnail.

This is the means by which you can import any single segment from React Bootstrap:

Import Solo Components Individually : 

You can import and utilize any React Bootstrap component exclusively from respond bootstrap instead of bringing in them from the total library as displayed beneath.

import React, { Component } from "react";
import Breadcrumb from "react-bootstrap/Breadcrumb";

class SoloIndividualComp extends Component {
  render() {
    return (
      <Breadcrumb>
        <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
        <Breadcrumb.Item href="#">Profile</Breadcrumb.Item>
        <Breadcrumb.Item active>Test123</Breadcrumb.Item>
      </Breadcrumb>
    );
  }
}

export default SoloIndividualComp ;

As displayed in the above model, Breadcrumb exclusively imported by utilizing this order:

import Breadcrumb from "react-bootstrap/Breadcrumb";

Pulling the particular component from the library instead of getting the entire bundle works on the exhibition while bringing and delivering the specific segment.

Use React Bootstrap Default Syntax 

The default sentence structure is an approach to utilize React Bootstrap powerfully without naming the particular segments, as done beforehand.

import React, { Component } from "react";
import * as ReactBootstrap from "react-bootstrap";

class DynamicImport extends Component {
  render() {
    return (
      <ReactBootstrap.Button bsStyle="success" bsSize="small">
        Something
      </ReactBootstrap.Button>
    );
  }
}

export default DynamicImport;

The above model doesn’t import any parts by name yet utilized a powerful import configuration to bring a particular segment when required, as displayed underneath.

import * as ReactBootstrap from "react-bootstrap";

At the point when you need any segments while fostering the UI, you need to utilize prefix ReactBoootstrap.comp_name followed by the particular segment name, which makes it simpler to utilize.

Importing Multiple Components

So far in this aide, you have figured out how to import a solitary explicit segment, yet you can import different segments from the single import articulation also.

The following is a basic model that tells the best way to import numerous segments from respond bootstrap from a solitary import proclamation.

 

import React, { Component } from "react";
import { Form, Col, Button } from "react-bootstrap";

class MultipleImport extends Component {
  render() {
    return (
      <Form>
        <Form.Row>
          <Col>
            <Form.Control placeholder="First name..." />
          </Col>
          <Col>
            <Form.Control placeholder="Last name..." />
          </Col>
          <Col>
            <Button>Submit</Button>
          </Col>
        </Form.Row>
      </Form>
    );
  }
}

export default MultipleImport;

In the above model, three segments, Form, Col, and Button, are imported from the single import explanation.

import { Form, Col, Button } from "react-bootstrap";

You can pick any of these techniques, however with regards to the exhibition, the different segments import proclamation or individual part import are way better compared to the others. I trust this aide assists you with messing about bringing in different segments. That was it from this aide; be protected, and continue to code.

Top Angular Interview Questions and Answers

Top Angular Interview Questions and Answers

Top Angular Interview Questions and Answers : Expecting taking care of your shocking circumstance of an Angular Developer? On the other hand, essentially proposing to change to being an Angular subject matter expert? In this article, we will take a gander at a touch of the habitually introduced smart demands that you can need to be coming your bearing during an Angular get-together for crafted by an Angular planner.

In spite of these idea based solicitations, there will be a requirement for a (or possibly different) coding test(s). Tolerating you need to change immense Angular contemplations before the get-together, The Complete Angular Course: Beginner to Advanced course from Udemy will end up being of staggering assistance. Nearby Angular solicitations, you’ll in like way be asked standard social affair demands. Here is a rule 189 Programming Questions and Solutions that will invigorate you exceptionally fast.

Top Angular Interview Questions and Answers

In any case, ready to see how well your plan is going? Moving along, here we present you for certain critical Angular requests questions and answers that you might expect in your gathering. These requests are similarly genuine for your Angular 6 requests questions and Angular 7 Interview Questions.

Question: What is Angular?

Answer: Angular is a TypeScript-based open-source web application system, created and kept up with by Google. It offers a simple and incredible method of building front end online applications.

Question: Why was Angular presented as a client side structure?

Answer: Traditionally, VanillaJS and jQuery were utilized by designers to develop unique sites. As the sites turned out to be more complex with added features and functionality , it was difficult for the designers to keep up with the code. Also, there was no arrangement of information dealing with offices across the perspectives by jQuery. In this way, Angular was worked to resolve these issues, subsequently, making it simpler for the engineers by partitioning code into more modest pieces of data that are known as Components in Angular.

Customer side structures grant the improvement of cutting edge web applications like SPAs which, whenever created by VanillaJS, is a more slow interaction.

 

Question: Define the ng-content Directive?

Answer: Conventional HTML components have some substance between the labels. For example:

<p>Put your section here</p>

Presently think about the accompanying instance of having custom content between Angular labels:

<app-work>This will not work like HTML until you use ng-content Directive</application work>

In any case, accomplishing so will not work the manner in which it worked for HTML components. To make it work very much like the HTML model referenced above, we need to utilize the ng-content Directive. Also, it is useful in building reusable components.

Find out about the ng-content mandate.

Question: Please clarify the different highlights of Angular.

Answer: There are a few highlights of Angular that make it an optimal front end JavaScript structure. Generally significant of them are portrayed as follows:

Availability Applications

Precise permits making open applications utilizing ARIA-empowered parts, inherent a11y test foundation, and designer guides.

Angular CLI

Angular offers help for command line interface devices. These apparatuses can be utilized for adding components, testing, moment sending, and so forth

Activity Support

Precise’s instinctive API permits the making of elite, complex movement courses of events with very little code.

Cross-Platform App Development

Angular can be utilized for building a proficient and amazing work area, local, and reformist web applications. Angular offers help for building local portable applications utilizing Cordova, Ionic, or NativeScript.

Precise permits making elite, disconnected, and zero-venture establishment reformist web applications utilizing current web stage abilities. The famous JS structure can likewise be utilized for building work area applications for Linux, macOS, and Windows.

Code Generation

Angular can change over formats into profoundly streamlined code for present day JavaScript virtual machines.

Code Splitting

With the new Component Router, Angular applications load rapidly. The Component Router offers programmed code-parting so just the code needed to deliver the view that is mentioned by a client is stacked.

Cooperative energy with Popular Code Editors and IDEs

Angular offers code fulfillment, moment blunders, and so forth with mainstream source code editors and IDEs.

Layouts

Permits making UI sees with a straightforward and incredible layout grammar.

Testing

Angular allows you to complete regular unit tests utilizing Karma. The Protractor permits running quicker situation tests in a steady manner.

Question: What are Lifecycle hooks in Angular? Clarify some life cycles hooks

Answer: Angular parts enter its lifecycle from the time it is made to the time it is obliterated. Angular hooks give approaches to take advantage of these stages and trigger changes at explicit stages in a lifecycle.

ngOnChanges( ): This technique is called at whatever point at least one info properties of the component changes. The hooks  gets a SimpleChanges object containing the past and current values of the property.

ngOnInit( ): This hooks gets called once, after the ngOnChanges hook.

It introduces the component and sets the information properties of the part.

ngDoCheck( ): It gets called after ngOnChanges and ngOnInit and is utilized to distinguish and follow up on changes that can’t be identified by Angular.

We can carry out our change recognition calculation in this hooks .

ngAfterContentInit( ): It gets called after the main ngDoCheck hooks . This hooks reacts after the substance gets projected inside the part.

ngAfterContentChecked( ): It gets called after ngAfterContentInit and each ensuing ngDoCheck. It reacts after the projected substance is checked.

ngAfterViewInit( ): It reacts after a component ‘s view, or a youngster component ‘s view is introduced.

ngAfterViewChecked( ): It gets called after ngAfterViewInit, and it reacts after the part’s view, or the kid component ‘s view is checked.

ngOnDestroy( ): It gets called not long before Angular obliterates the part. This hooks can be utilized to tidy up the code and disconnect occasion controllers.

Question: Could we make a precise application to deliver on the worker side?

Answer: Yes, we can, with Angular Universal, an innovation given by Angular fit for delivering applications on the worker side.

The advantages of utilizing Angular Universal are:

Better User Experience: Allows clients to see the perspective on the application quickly.

Better SEO: Universal guarantees that the substance is accessible on each web index prompting better SEO.

Loads Faster: Render pages are accessible to the programs sooner, so the worker side application stacks quicker.

Question: Explain Dependency Injection?

Answer: Dependency infusion is an application configuration design that is executed by Angular and structures the center ideas of Angular.

Allow us to comprehend in a nitty gritty way. Conditions in Angular are administrations which have a usefulness. Different components and orders in an application can require these functionalities of the help. Precise gives a smooth system by which these conditions are infused into components and mandates.

Question: What is string interpolation in Angular?
Answer: Also referred to as moustache syntax, string interpolation in Angular refers to a special type of syntax that makes use of template expressions in order to display the component data. These template expressions are enclosed within double curly braces i.e. .

The JavaScript expressions that are to be executed by Angular are added within the curly braces and the corresponding output is embedded into the HTML code. Typically, these expressions are updated and registered like watches as a part of the digest cycle.

Question: What is Angular Material?

Answer: It is a UI part library. Rakish Material aides in making alluring, predictable, and completely utilitarian pages just as web applications. It does as such while following current website composition standards, including program transportability and smooth debasement.

Question: What is AOT (Ahead-Of-Time) Compilation?

Answer: Each Angular application gets gathered inside. The Angular compiler takes in the JS code, gathers it and afterward delivers some JS code. This happens just once per event per client. It is known as AOT (Ahead-Of-Time) aggregation.

Question: What is Data Binding? What number of ways it tends to be finished?

Answer: In request to interface application information with the DOM (Data Object Model), information restricting is utilized. It occurs between the layout (HTML) and component (TypeScript). There are 3 different ways to accomplish information restricting:

Occasion Binding – Enables the application to react to client contribution to the objective climate

Property Binding – Enables insertion of qualities processed from application information into the HTML

Two-way Binding – Changes made in the application state gets naturally reflected in the view and the other way around. The ngModel mandate is utilized for accomplishing this kind of information restricting.

Question: Can you draw a correlation between the service() and the industrial factory() capacities?

Answer: Used for the business layer of the application, the service() work works as a constructor work. The capacity is conjured at runtime utilizing the new catchphrase.

Albeit the plant() work works in practically the same way as the service() work does, the previous is more adaptable and amazing. In genuine, the industrial factory() work are configuration designs that assistance in making objects.

Question: Please clarify the review cycle in Angular?

Answer: The way toward observing the watchlist to follow changes in the worth of the watch variable is named the summary cycle in Angular. The past and present forms of the extension model qualities are looked at in each overview cycle.

Albeit the condensation cycle measure gets set off certainly, it is feasible to begin it physically by utilizing the $apply() work.

Question: Could you clarify the different sorts of channels in AngularJS.

Answer: In request to organize the worth of articulation with the goal that it tends to be shown to the client, AngularJS has channels. It is feasible to add these channels to the regulators, orders, administrations, or formats. AngularJS likewise offers help for making custom channels.

Coordinating information in such a manner with the goal that it is shown just when certain models are satisfied is made conceivable utilizing channels. Channels are added to the articulations utilizing the line ‘|’ character. Different sorts of AngularJS channels are identified as follows:

money – Formats a number to the cash design

date – Formats an information to some particular arrangement

channel – Selects a subset of things from a cluster

json – Formats an item to a JSON string

limitTo – Limits a cluster or string into a predefined number of characters or components

lowercase – Formats a string to lowercase

number – Formats a number to a string

orderBy – Orders a cluster by an articulation

Question: What is new in Angular 6?

Answer: Here are a portion of the new angles presented in Angular 6:

Rakish Elements – It permits changing over Angular parts into web components and inserts something similar in some non-Angular application

Tree Shakeable Provider – Angular 6 presents another method of enlisting a supplier straightforwardly inside the @Injectable() decorator. It is accomplished by utilizing the providedIn trait

RxJS 6 – Angular 6 utilizes RxJS 6 inside

i18n (internationalization) – Without building the application once per region, any Angular application can have “runtime i18n”

JavaScript Methods

JavaScript Methods

JavaScript Methods : In JavaScript, there are many implicit techniques. For instance, Here, the parseInt() method of the Number article is utilized to change over numeric string worth to a whole number worth. To get familiar with worked-in strategies, visit JavaScript Built-In Methods.

Perhaps you don’t care for bolt works, you would prefer not to invest an excess of energy discovering some new information, or they’re simply not important for you. Relax, you are in good company. I’ll show you how it is done in ES5 (practical deceleration) and ES6 (bolt works).

Know: Arrow capacities and capacity statements/articulations are not same and can’t be supplanted aimlessly. Remember that the this watchword works diversely between the two.

How to use Method

Item Methods in JavaScript can be gotten to by utilizing capacities. Capacities in JavaScript are put away as property estimations. The items can likewise be called without utilizing section (). In a technique, ‘this’ alludes to the proprietor object. Extra data can likewise be added alongside the article technique. Language structure: objectName.methodName()

Concat():

const a = ["Rohit Gautam", "Ajit"];
const b = ["Sandeep", "Alok", "Ankit"];
const c = ["Amit"];
const children = a.concat(b, c);
console.log(children);
// Output 
(6) ["Rohit Gautam", "Ajit", "Sandeep", "Alok", "Ankit", "Amit"]

Copywithin():

const persons = ["Rohit Gautam", "Ajit", "Alok", "Ankit"];
const copy = persons.copyWithin(2, 0);
console.log(copy);

//Output
(4) ["Rohit Gautam", "Ajit", "Rohit Gautam", "Ajit"]

entries() :

The Array.entries() method returns an Array Iterator object with key/value pairs:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
console.log(f);
for (let x of f) {
console.log(x);
}

//Ouput 
Array Iterator {}
[0, "Banana"]
[1, "Orange"]
[2, "Apple"]
[3, "Mango"]

every():

Check if all the values in number[] are 10 or greater:

 const number= [32, 33, 16, 40];
 console.log(number.every(checkNumber));

 function checkNumber(age) {
 return age > 10;
 }

//output
true

fill():

const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.fill("Kiwi"))
//output
Kiwi,Kiwi,Kiwi,Kiwi

filter():

const ages = [32, 33, 16, 40];

console.log(ages.filter(checkAdult));

function checkAdult(age) {
  return age >= 18;
}
//output
32,33,40

find():

const ages = [3, 10, 18, 20];

function checkAge(age) {
  return age > 18;
}

function myFunction() {
  console.log(ages.find(checkAge));
}

//output 
20

findIndex():

const ages = [3, 10, 18, 20];

console.log(ages.findIndex(checkAge));

function checkAge(age) {
  return age > 18;
}
//output
3

forEach():

let text = "";
const fruits = ["apple", "orange", "cherry"];
fruits.forEach(myFunction);

console.log(text);
 
function myFunction(item, index) {
  text += index + ": " + item + "<br>"; 
}
//output
0: apple
1: orange
2: cherry

from()

const myArr = Array.from("ABCDEFG");
console.log(myArr);
//output
A,B,C,D,,E,F,G

includes():

const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.includes("Mango"));
//output
true

indexOf():

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.indexOf("Apple")   // Returns 2
//output
2

isArray()

const fruits = ["Banana", "Orange", "Apple", "Mango"];
Array.isArray(fruits)   // Returns true
//output
true

join():

const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.join());
// output
Banana,Orange,Apple,Mango

keys():

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

let text = "";
for (let x of keys) {
  text += x + "<br>";
}
console.log(text );
//output
0
1
2
3

lastIndexOf()

const fruits = ["Apple", "Orange", "Apple", "Mango"];
fruits.lastIndexOf("Apple")   ;

//output
2

map():

const numbers = [4, 9, 16, 25];
console.log(numbers.map(Math.sqrt));
//output
2,3,4,5

pop():

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();   // Removes "Mango"

//output
"Banana", "Orange", "Apple"

push()

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");   // Adds "Kiwi"

//output
Banana,Orange,Apple,Mango,Kiwi

reduce():

const numbers = [275, 50, 25];

numbers.reduce(myFunc);

function myFunc(total, num) {
  return total - num;
}

//output
200

reduceRight():

const numbers = [175, 50, 25];

numbers.reduceRight(myFunc);

function myFunc(total, num) {
  return total - num;
}
//output
-200

reverse():

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
//output
Mango,Apple,Orange,Banana

shift():

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
//output
Orange,Apple,Mango

slice():

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);
//output
Orange,Lemon

some()

const ages = [3, 10, 18, 20];

ages.some(checkAdult)   // Returns true

function checkAdult(age) {
  return age >= 18;
}
//output
true

sort():

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
//output
Apple,Banana,Mango,Orange

splice():

const fruits = ["Banana", "Orange", "Apple", "Mango"];

// At position 2, add 2 elements: 
fruits.splice(2, 0, "Lemon", "Kiwi");

//ouput
Banana,Orange,Lemon,Kiwi,Apple,Mango

toString():

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = fruits.toString();
//output
Banana,Orange,Apple,Mango

unShift():

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
//output
Lemon,Pineapple,Banana,Orange,Apple,Mango

valueOf():

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.valueOf();   // Returns fruits
//output
Banana,Orange,Apple,Mango

 

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

10 Amazing things you can build using JavaScript

10 Amazing things you can build using JavaScript

JavaScript Introduction :

JavaScript was established in 1995 by Brendan Eich. As of late, a study is led by StackOverflow and it is found in the overview that JavaScript is the most utilized and loved language on the earth (10 Amazing things you can build using JavaScript).

Additionally, A fascinating truth turned out in the study that back-end designers are destined to look in regards to JavaScript separated from some other language. Indeed, even java and .NET engineers likewise said that they need to learn something like an essential degree of JavaScript for their last activities.

 

Sites: JavaScript was established by Brendan Eich in 1995 to add intelligence and conduct to static sites and still now it is utilized for a similar reason. Each cutting-edge site has JavaScript somewhat. Wikipedia, Yahoo, and Amazon are a few sites that are assemble utilizing JavaScript.

Web applications: JavaScript has made it simple to make web applications. Take the case of Google maps wherein on the off chance that you need to look through an area on google maps you need to contact and drag the mouse and you see a segment of the guide which is less filled while the zoomed part is more filled. That is the means by which JavaScript works behind scenes. Gmail, Yahoo, and AOL are some web applications that are fabricated utilizing JavaScript.

Introductions: Nowadays JavaScript is additionally used to make introductions very much like sites. RevealJS library is utilized to make introductions in case you know about CSS and HTML. In the event that you don’t know HTML and CSS, you can Try utilizing slides.com which depends on the RevealJS library.

Smartwatch applications: Pebble, a smartwatch-production organization has made pebble.js, a JavaScript structure that permits clients or designers to make an application for watches in JavaScript. In any case, till now it isn’t accessible in IOS and Android watches.

Portable applications: Mobile applications can be made utilizing JavaScript. Prior it is by all accounts an alternate undertaking to make an application for mobiles as various applications are needed for android and IOS as various dialects are needed to make applications for them and more designers are needed. Yet, this assignment should handily be possible utilizing JavaScript and React Native where a solitary application can be utilized on both Android and IOS cell phones. Like Walmart, Airbnb, and Facebook are fabricate utilizing respond and JavaScript.

Program-based games: Browser-based gaming has purchased another blast in the internet gaming industry. Happening to the HTML5 has taken it to another level. It will be intriguing to perceive how this section will advance later on. CrossCode and Swoop are instances of program-based games.

Flying robots and robots: Basic robots are furnished with a working framework and thus, you can introduce NodeJS on it. So subsequent to introducing it you can without much of a stretch program the robots utilizing JavaScript. AR Drone 2.0 is a viable illustration of this that offers a very good quality API to transfer video, read information back, and get orders.

Worker application: With the happening to NodeJS a couple of years back, JavaScript makes its course from the program and in the worker. However long then, at that point, Node has been utilized by numerous enormous organizations for Example – Paypal, Linkedin, medium, and Uber as a significant piece of back-end framework.

Web workers: JavaScript has made it simple to make web servers like in only 10 lines of code, you can develop an essential web worker. However, you can make more practical workers by utilizing a hub or by utilizing a standard system like express. Hub hi world application and apache tomcat are a few instances of web workers.

Craftsmanship: The material component is another element added as of late in HTML5 which helps in delivering or adding three-dimensional items or shapes to the programs. This has made the program another wellspring of computerized workmanship. For instance, solid shapes, cuboids,s, and triangles can be made utilizing JavaScript.

These are some astonishing things you can do utilizing JavaScript and there are significantly more coming sooner rather than later

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.

jQuery 50 Questions and Answers

jQuery 50 Questions and Answers

A once-over of top regularly asked jQuery talk with requests and answers are given below. A once-over of top regularly asked jQuery talk with requests and answers are given below. You can easily improve your knowledge and skills as well.

1. What is jQuery?

jQuery is not a programming language but a well-written JavaScript code. It is a JavaScript code, which does document traversing, event handling, Ajax interactions, and Animations.

2. Why jQuery is needed?

jQuery is needed for the following list:

  • Used to develop browser compatible web applications
  • Improve the performance of an application
  • Very fast and extensible
  • UI related functions are written in minimal lines of codes

3. Whether jQuery HTML work for both HTML and XML documents?

No, jQuery HTML only works for HTML documents not for XML Documents.

4. What are the methods used to provide effects?

Some of the effects methods are:

  • Show()
  • Hide()
  • Toggle()
  • FadeIn() and
  • FadeOut()

5. What is the advantage of using a minimized version of jQuery?

The efficiency of the web page increases when a minimized version of jQuery is used.min.js file will be more than 50% less than the normal js file. A reduction in the file size makes the web page faster.

Jquery

6. Is jQuery is a JavaScript or JSON library file?

jQuery is a library of JavaScript files and it consists of DOM, event effects, and the Ajax functions. jQuery is said to be a single JavaScript file.

7. Which operating system is more compatible with jQuery?

Mac, Windows, and Linux are more compatible with jQuery.

8. How can we include the jQuery library in the ASP.Net project?

Download the jQuery library from jQuery.com and include that reference on the asp.net page.

9. Which command will give a version of jQuery?

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

10. In what scenarios jQuery can be used?

jQuery can be used in the following scenarios:

  • Apply CSS static or dynamic
  • Calling functions on events
  • Manipulation purpose
  • Mainly for Animation effects

11. What is the difference between find and children methods?

The find method is used to find all levels down the DOM tree but children find a single level down the DOM tree.

12. What is jQuery connect?

A ‘ jQuery connect’  is a plugin used to connect or bind a function with another function. Connect is used to execute functions from any other function or plugin is executed.

13. How to use connect?

Connect can be used by downloading the jQuery connect file from jQuery.com and then include that file in the HTML file. Use $.connect function to connect a function to another function.

14. What are the features of jQuery, have been used in web applications?

jQuery uses features like Sliding, File uploading, and accordion in web applications.

15. What are the browser-related issues for jQuery?

Browser compatibility of the jQuery plugin is an issue and needs a lot of time to fix it.

16. Whether we need to add a jQuery file in both the Master and Content pages?

jQuery file should be added to the Master page and can use access from the content page directly without having any reference to it.

17. What are the basic selectors in jQuery?

Following are the basic selectors in jQuery:

  • Element ID
  • CSS Name
  • Tag Name
  • DOM hierarchy

18. Can we call C# code behind using jQuery?

Yes, we can call C# code from jQuery as it supports the .net application.

19. What is the use of jQuery.data method?

jQuery.data methods are used to associate the data with the DOM nodes and the objects. This data method makes the jQuery code clear and concise.

20. What is the use of each function in jQuery?

Each function is used to iterate each and every element of an object. It is used to loop DOM elements, arrays, and object properties.

21. What is the difference between the size and length of jQuery?

Size and length both return the number of elements in an object. But length is faster than the size because length is a property and size is a method.

22. Can we add more than one ‘document.ready’ function on a page?

Yes, we can add more than one document.ready function in a page. But, body.onload can be added once on a page.

23. What is the use of the jQuery load method?

the jQuery load method is a powerful AJAX method that is used to load the data from a server and assign the data into the element without loading the page.

24. Whether our own specific characters are used in place of $ in jQuery?

Yes, We can use our own variable in place of $ by using the method called the no Conflict () method.

var sample = $.noConflict()

25. What are the four parameters used for the jQuery Ajax method?

The four parameters are

  • URL – Need to specify the URL to send the request
  • type – Specifies type of request(Get or Post)
  • data – Specifies data to be sent to server
  • Cache – Whether the browser should cache the requested page

26. What is the use of a jQuery filter?

The jQuery filter is used to filter certain values from the object list based on the criteria. An example is to filter certain products from the master list of products in a cart website.

27. Which program is useful for testing jQuery?

QUnit is used to test jQuery and it is very easy and efficient.

28. What is CDN?

CDN is abbreviated as a Content Distribution network and it is said to be a group of companies in different locations with networks containing copies of data files to maximize bandwidth in accessing the data.

29. What are the two types of CDNs?

There are two types of CDNs:

  • Microsoft – Load jQuery from Ajax CDN
  • Google – Load jQuery from Google libraries API

30. Which sign is used as a shortcut for jQuery?

The dollar ($) sign is used as a shortcut for jQuery.

31. Is jQuery is a client or server scripting?

jQuery is a client scripting.

32. What is the script build up by jQuery?

jQuery is a Javascript file and it is a single javascript file that contains common DOM, event effects, and Ajax functions.

33. How can we debug jQuery?

There are two ways to debug jQuery:

Debugger keyword

  • Add the debugger to the line from where we have to start debugging and then run Visual Studio in Debug mode with F5 function key.
  • Insert a break point after attaching the process

34. What are all the ways to include jQuery on a page?

Following are the ways to include jQuery on a page:

  • Local copy inside script tag
  • Remote copy of jQuery.com
  • Remote copy of Ajax API
  • Local copy of script manager control
  • Embedded script using client script object

35. What is the use of jQuery.ajax method ()?

jQuery.ajax method is used for asynchronous HTTP requests.

36. Where can we download JQuery?

jQuery javascript can be downloaded from jQuery official website – www.jquery.com

37. Is jQuery is a replacement for JavaScript?

No, jQuery is not a replacement for JavaScript.

38. What is called chaining?

Chaining is used to connect multiple events and functions in a selector.

39. What are the advantages of jQuery?

Following are the advantages of jQuery:

  • Just a JavaScript enhancement
  • Coding is simple, clear, reusable
  • Removal of writing more complex conditions and loops

40. Whether C# code behind can be called from jQuery?

Yes, we can call C# code behind from jQuery.

41. What is the use of jQuery.data() method?

jQuery data method is used to associate data with DOM nodes and JavaScript objects. This method will make a code very concise and neat.

42. What is the difference between onload() and document.ready()?

On a page, we can have only one onload function but we can have more than one document.ready function. Document.ready function is called when DOM is loaded but onload function is called when DOM and images are loaded on the page.

43. What is the use of jQuery each function?

jQuery each function is used to loop through each and every element of the target jQuery object. It is also useful for multi-element DOM, looping arrays, and object properties.

44. How method can be called inside code behind using jQuery?

$.ajax can be called and by declaring WebMethod inside code behind using jQuery.

45. Which is the fastest selector in jQuery?

ID and Element are the fastest selectors in jQuery.

46. What is the slowest selector in jQuery?

Class selectors are the slowest selectors in jQuery.

47. Where jQuery code is getting executed?

jQuery code is getting executed on a client browser.

48. What is the method used to define the specific character in place of the $ sign?

‘NoConflict’ method is used to reference a jQuery and save it in a variable. That variable can be used instead of Sign.

49. Why jQuery is better than JavaScript?

jQuery is a library used for developing Ajax applications and it helps to write the code clean and concisely. It also handles events, animation, and Ajax support applications.

50. What are the types of selectors in jQuery?

There are three types of selectors in jQuery:

  • CSS Selector
  • XPath Selector
  • Custom Selector

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.