Footer OK

Grid Footer OK
nephcode · Oct 20, 2024 · c7245c3 · c7245c3
1 parent 6456c60
commit c7245c3
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 9 deletions.
diff --git a/src/components/Version/index.jsx b/src/components/Version/index.jsx
@@ -3,7 +3,7 @@ import scssVersion from './version.module.scss';
 const version = () => {
   return (
     <div className={scssVersion.version}>
-      <sup>v 1.4.0</sup>
+      <sup>v 1.5.0</sup>
     </div>
   );
 };

diff --git a/src/layout/Footer/footer.module.css b/src/layout/Footer/footer.module.css
@@ -1,10 +1,26 @@
+footer {
+  position: relative;
+  display: grid;
+  place-items: center;
+  border-bottom: 4px solid;
+  border-image: linear-gradient(to right, #FF0042, #FF007E) 1;
+}
+footer::after {
+  content: "";
+  position: absolute;
+  bottom: 15px;
+  height: 15px;
+  width: 100%;
+  box-shadow: 0 30px 13px #FF0042;
+}
 footer .punchline {
   width: 150px;
+  margin-bottom: clamp(20px, 5vw, 50px);
 }
 footer .pyramides {
   width: 250px;
-  filter: drop-shadow(-10px -10px 4rem #FF0042);
+  filter: drop-shadow(-10px -10px 1.5rem #FF0042);
 }
 footer .pyramides img {
-  line-height: 0;
+  display: block;
 }/*# sourceMappingURL=footer.module.css.map */
diff --git a/src/layout/Footer/footer.module.css.map b/src/layout/Footer/footer.module.css.map
diff --git a/src/layout/Footer/footer.module.scss b/src/layout/Footer/footer.module.scss
@@ -1,25 +1,38 @@
 @use '../../scss/colors.module.scss' as colors;
 
 footer {
-
+    position: relative;
+    display: grid;
+    place-items: center;
+    border-bottom: 4px solid;
+    border-image: linear-gradient(to right, colors.$colorMain, colors.$colorSecondary) 1;
+
+
+    &::after {
+        content: '';
+        position: absolute;
+        bottom: 15px;
+        height: 15px;
+        width: 100%;
+        box-shadow: 0 30px 13px colors.$colorMain;
+    }
 
     .punchline {
         width: 150px;
+        margin-bottom: clamp(20px, 5vw, 50px);
     }
 
     .pyramides {
         width: 250px;
-        filter: drop-shadow(-10px -10px 4rem colors.$colorMain);
+        filter: drop-shadow(-10px -10px 1.5rem colors.$colorMain);
 
         img {
-            line-height: 0;
+            display: block;
         }
 
 
 
 
-
-
     }
 
 }