Add files via upload

assets/css/animation.css

@@ -0,0 +1,154 @@
+/* ================================================================================================= */
+/*           1. Morph Blob style    - used in home page [ index.html]                   */
+/* ================================================================================================= */
+
+/* .blob {
+
+    overflow: hidden;
+    width: 15rem;
+    height: 15rem;
+    border-radius: 42%;
+} */
+
+.morph-blob {
+    min-width: 215px;
+    height: auto;
+    background-color: #793FDF;
+    border-radius:  30% 70% 70% 30% / 30% 30% 70% 70% ;
+    animation: morphBorders 4s linear infinite;
+}    
+
+@keyframes morphBorders {
+   0% , 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% ; }
+
+   25% { border-radius: 70% 30% 31% 69% / 34% 23% 77% 66%  ;   }
+
+  50% { border-radius: 53% 47% 19% 81% / 59% 76% 24% 41%  ; }
+
+  75% { border-radius: 46% 54% 74% 26% / 73% 52% 48% 27% ;}
+
+}
+
+/* ================================================================================================= */
+/*           2.color-fill style    - used in home page [ index.html]                   */
+/* ================================================================================================= */
+
+/* ---- common style -----   
+
+.color-fill {
+    border-radius: 60px 70px 40px 140px;
+    display: block;
+    width: 250px;
+    height: 220px;
+    background-color: #6C00FF;
+    position: relative;
+    filter: drop-shadow(8px 3px 10px #7D7C7C);
+    border: 3px solid #793FDF;
+} 
+
+*/
+
+/*  ---- 2.1 : hover effect  ----
+
+.color-fill:hover {
+    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
+    display: block;
+    width: 250px;
+    height: 220px;
+    background-color: #793FDF;
+    position: relative;
+    filter: drop-shadow(8px 3px 10px #7D7C7C);
+    border: 3px solid #864AF9;
+}
+
+   ---- end of  2.1 ---- */
+
+/*  ---- 2.2 : instead of using hover effect on the .color-fill class ,
+                  we can use pseudo class ( .color-fill2 )
+                  along with jscript to made the same hover effect. ----                   
+                 
+.color-fill2 {
+    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
+    display: block;
+    width: 250px;
+    height: 220px;
+    background-color: #793FDF;
+    position: relative;
+    filter: drop-shadow(8px 3px 10px #7D7C7C);
+    border: 3px solid #864AF9;
+}
+ 
+    <script>
+        
+        document.querySelector('.color-fill').addEventListener('mouseover', function () {
+                this.classList.remove('color-fill');
+                this.classList.add('color-fill2');
+            });
+    
+        document.querySelector('.color-fill').addEventListener('mouseout', function () {
+                this.classList.remove('color-fill2');
+                this.classList.add('color-fill');
+            });
+    
+    </script>
+
+ ---- end of  2.2 ----   */
+
+ /* ============================================================================== */
+ /*          3. Wave header style     - used in contacts.html */
+ /* ============================================================================== */
+
+ .wave {
+     position: relative;
+     display: grid;
+     place-items:  center;
+ }
+
+ .wave h2 {
+     position: absolute;
+     /* transform: translate(-50%, -50%); */
+     font-size: 4em;
+ }
+
+
+ .wave h2:nth-child(1) {
+     color: transparent;
+     -webkit-text-stroke: 2px #793FDF;
+ }
+
+ .wave h2:nth-child(2) {
+     color: #793FDF;
+     animation: wave-text 4s ease-in-out infinite;
+ }
+
+ @keyframes wave-text {
+
+     0%,
+     100% {
+         clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%)
+     }
+
+     50% {
+         clip-path: polygon(0 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 40%, 100% 100%, 0% 100%)
+     }
+ }
+
+ /* ============================================================================================ */
+ /*           4. wave header reflection bottom   - used in contacts.html    */
+ /* ============================================================================================ */
+
+ /* .css-reflect {
+    -webkit-box-reflect: below -11px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(47%, transparent), to(rgba(255, 255, 255, 0.34)));
+    } */
+
+ /* ============================================================================================ */
+ /*            responsive styles            */
+ /* ============================================================================================ */
+
+/*    for mobile view    */
+
+ @media only screen and (max-width: 500px) {
+     .wave h2 {
+         font-size: 3rem !important;
+     }
+ }