[Feature] Improve the design of the index.html (#16)

* add gitignore file

* enhance site header

* enhance UI of tool cards

* hide menu items in smaller screens

* add category icons to the cards

* Add meta and favicon to the head

* remove text underline from navbar

* Add comments to html

* add Negar Jamalifard as a contributer to index page

Author: negarjf

.gitignore

@@ -0,0 +1,6 @@
+# IDE config
+.idea/
+.vscode/
+
+# dependencies
+node_modules/

assets/styles/style.css

@@ -0,0 +1,78 @@
+/*
+***
+* COSTUME STYLESHEET
+***
+* Please use the bootstrap color pallet and available css variables
+* for a more consistent design
+*/
+
+/*
+*----------------------------------------------------------------
+* SITE HEADER
+*----------------------------------------------------------------
+*/
+
+.site-header{
+    background-color: rgba(0, 0, 0, .85);
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
+    backdrop-filter: saturate(180%) blur(20px);
+}
+
+/*
+*----------------------------------------------------------------
+* HERO SECTION
+*----------------------------------------------------------------
+*/
+.hero-section {
+    background-color: var(--indigo);
+}
+
+.hero-section__graphic {
+
+}
+
+.hero-section__graphic, .hero-section__graphic:before, .hero-section__graphic:after {
+    background-color: rgba(255,255,255,0.1);
+    width: 300px;
+    height: 300px;
+    border-radius: 40% 30% 30% 40% / 60% 40% 60% 40%;
+}
+
+.hero-section__graphic:before, .hero-section__graphic:after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    animation: float 10s infinite linear;
+}
+.hero-section__graphic:after {
+    animation-direction: reverse;
+    animation-delay: 500ms;
+}
+
+.hero-section__icon{
+    fill: var(--light);
+    width: 100%;
+    height: auto;
+}
+
+
+@keyframes float {
+    0% {
+        transform: translate(0%, 0%) rotate(0);
+    }
+
+    33% {
+        transform: translate(2%, 2%) rotate(120deg);
+    }
+
+    66% {
+        transform: translate(2%, -2%) rotate(240deg);
+    }
+
+
+    to {
+        transform: translate(0%, 0%) rotate(360deg);
+    }
+}