Add files via upload

midoalawieh · Oct 29, 2023 · f8367f8 · f8367f8
1 parent 1ec7148
commit f8367f8
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 4 deletions.
diff --git a/CSS/Pages/auth.css b/CSS/Pages/auth.css
@@ -94,10 +94,12 @@ body {
     box-shadow: 0px 0px 5px 1px var(--primary-overlay);
 }
 .button {
-    margin-left: auto;
-    margin-right: auto;
     margin-bottom: 5px;
 }
+.submit {
+    display: flex;
+    justify-content: center;
+}
 .check-wrapper {
     padding: 20px;
 }

diff --git a/CSS/Pages/home.css b/CSS/Pages/home.css
@@ -126,6 +126,40 @@
     right: 0;
     left: unset;
 }
+.section-video {
+    width: 80%;
+    margin: 50px auto;
+    position: relative;
+}
+.section-video::before {
+    width: calc(100% + 20px);
+    height: calc(100% + 20px);
+    left: -10px;
+    top: -10px;
+    position: absolute;
+    content: "";
+    background-image: linear-gradient(-45deg, var(--primary), var(--secondary));
+
+    z-index: 0;
+    border-radius: 12px;
+}
+.section-video::after {
+    width: calc(100% + 20px);
+    height: calc(100% + 20px);
+    left: -10px;
+    top: -10px;
+    position: absolute;
+    content: "";
+    background-image: linear-gradient(-45deg, var(--primary), var(--secondary));
+    z-index: -1;
+    border-radius: 12px;
+    filter: blur(20px);
+}
+.section-video video {
+    width: 100%;
+    box-shadow: 0px 0px 20px 0px var(--primary-overlay);
+    position: relative;
+}
 
 @keyframes content-line {
     to {
@@ -170,6 +204,11 @@
         margin-right: auto;
     }
 }
+@media (max-width: 900px) {
+    .section-video {
+        width: 100%;
+    }
+}
 @media(max-width: 720px) {
     :root {
         --content-line: -20px;

diff --git a/CSS/Pages/store.css b/CSS/Pages/store.css
@@ -186,6 +186,7 @@ main {
     background-clip: text;
 }
 .stores {
+    z-index: 0;
     width: 80%;
     background-color: var(--background-light);
     border-radius: 12px;
@@ -225,6 +226,7 @@ main {
     border-radius: 12px;
     padding: 22px;
     background-color: var(--background);
+    position: relative;
 }
 .item-img {
     width: 70%;
@@ -242,10 +244,13 @@ main {
     width: 100%;
     /* filter: saturate(80%); */
 }
-.item:hover, .item-img:hover {
+.item-img:hover {
     background-color: var(--overlay);
     border: 1px solid var(--primary);
 }
+.item:hover {
+    border: 1px solid var(--primary);
+}
 .item-big:hover {
     border: 1px solid var(--primary);
 }
@@ -350,6 +355,22 @@ main {
     width: 100%;
     height: 100%;
 }
+.item::after {
+    width: 95%;
+    height: 95%;
+    position: absolute;
+    content: "";
+    background: linear-gradient(-45deg, var(--primary), var(--secondary));
+    z-index: -1;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    filter: blur(30px);
+    opacity: 0;
+}
+.item:hover::after {
+    opacity: 1
+}
 @keyframes item-popup {
     to {
         transform: translate(-50%, -50%) scale(1);
@@ -456,4 +477,4 @@ main {
         max-width: 300px;
         min-width: 100%;
     }
-}
+}