Merge pull request #101 from Ajay-Dhangar/searchbar-functionality

update home page

docs/javascript/type-of.md

@@ -127,4 +127,4 @@ The `typeof` operator returns `"object"` if the value is `null`. This is a histo
 
 ## Conclusion
 
-In this tutorial, you learned about the `typeof` operator in JavaScript and how to use it to determine the type of a value. You also learned about the different types of values that the `typeof` operator can return, such as `"undefined"`, `"boolean"`, `"number"`, `"string"`, `"symbol"`, `"function"`, `"object"`, and `"bigint"`. You also learned about the historical bug in JavaScript where the `typeof` operator returns `"object"` for `null` values.
+In this tutorial, you learned about the `typeof` operator in JavaScript and how to use it to determine the type of a value. You also learned about the different types of values that the `typeof` operator can return, such as `"undefined"`, `"boolean"`, `"number"`, `"string"`, `"symbol"`, `"function"`, `"object"`, and `"bigint"`. You also learned about the historical bug in JavaScript where the `typeof` operator returns `"object"` for `null` values. The `typeof` operator is useful when you want to handle different types of values differently in your code, and it can be used to determine the type of a variable or a value at runtime, which can be useful in dynamic programming scenarios.

src/css/custom.css

@@ -1,10 +1,3 @@
-/**
- * Any CSS included here will be global. The classic template
- * bundles Infima by default. Infima is a CSS framework designed to
- * work well for content-centric websites.
- */
-
-/* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #2e9e32e1;
   --ifm-color-primary-dark: #29784c;
@@ -31,11 +24,11 @@
   /* --docusaurus-highlighted-code-line-bg: rgb(100, 100, 100); */
 }
 
-div[class^="announcementBar_"] {
-  background-image: linear-gradient(90deg, #2e9e31 0%, #25c2a0 100%);
-  color: #f2f2f2;
+div[class^='announcementBar_'] {
+  background-image: linear-gradient(#ff0303, #ff030329, transparent), url("../../static/img/use-svg-as-background-image-particle-strokes.svg");
+  color: #fff;
   border-bottom: 1.8px dotted rgb(37, 184, 11);
-  font-weight: bold;
+  font-weight: bold;  
   font-size: 18px;
   width: 100%;
   height: auto;
@@ -44,12 +37,12 @@ div[class^="announcementBar_"] {
   text-align: center;
 }
 
-div[class^="announcementBar_"] a {
-  color: var(--ifm-announcement-color);
+div[class^='announcementBar_'] a {
+  color: #ffe11c;
 }
 
-div[class^="announcementBar_"] .clean-btn {
-  color: #ffffff;
+div[class^='announcementBar_'] .clean-btn {
+  color: #ffe11c;
   opacity: 100%;
 }
 

src/pages/index.module.css

@@ -3,9 +3,30 @@
   text-align: center;
   position: relative;
   overflow: hidden;
-  background: linear-gradient(90deg, #172800 0%, #539200 35%, #02e41c 100%);
-  /* background: rgb(2,9,57); */
-/* background: linear-gradient(90deg, rgba(2,9,57,1) 0%, rgba(0,159,255,1) 100%); */
+  background: linear-gradient(90deg, #539200cd,rgba(117, 233, 82, 0.79)), url("../../static/img/background-img.svg");
+  animation: waveX 10s linear infinite, waveY 10s linear infinite;
+  animation-play-state: paused;
+}
+
+.heroBanner:hover {
+  animation-play-state: running;
+}
+
+@keyframes waveX {
+  0% {
+    background-position-x: 100%, 0;
+  }
+  100% {
+    background-position-x: 100%, 33rem;
+  }
+}
+@keyframes waveY {
+  100% {
+    background-position-y: 100%, 0;
+  }
+  0% {
+    background-position-y: 100%, 33rem;
+  }
 }
 
 .hero__subtitle {