Add files via upload

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

Hide file tree

Showing 2 changed files with 211 additions and 18 deletions.
diff --git a/CSS/global.css b/CSS/global.css
@@ -11,6 +11,7 @@
 }
 html {
     overflow-x: hidden;
+    width: 100vw;
 }
 .copy-popup {
     position: fixed;
@@ -68,6 +69,66 @@ body {
     margin-left: auto;
     margin-right: auto;
 }
+
+
+main {
+    /* border: 1px solid red; */
+    padding-top: 0 !important;
+    /* background-color: red; */
+    background-image: url('../images/bgi.png');
+    background-size: cover;
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    position: relative;
+    padding-top: 50px !important;
+    z-index: 1;
+    padding-bottom: 120px;
+}
+main::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: -moz-linear-gradient(top, var(--background), rgba(15, 15, 15, 0.80)); /* For Firefox */
+    background: -webkit-linear-gradient(top, var(--background), rgba(15, 15, 15, 0.80)); /* For Chrome and Safari */
+    background: linear-gradient(to bottom, var(--background), rgba(15, 15, 15, 0.80)); /* Standard */
+    z-index: -2;
+}
+
+.color {
+    position: absolute;
+    width: 100vw;
+    height: 100%;
+    /* height: 550px; */
+    top: 0;
+    left: 0%;
+    z-index: -1;
+    /* opacity: 100; */
+    background: linear-gradient(to top, rgba(15, 15, 15), var(--primary-overlay)); 
+    /* border: 1px solid red; */
+}
+main, header {
+    margin: -2px !important;
+}
+/* body::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1; /* Set a negative z-index to position the overlay behind the content */
+ */
+
+
+/* Add a class to exclude the header from the overlay */
+.header {
+    position: relative; /* Set the header to a relative position */
+    z-index: 1; /* Ensure the header is displayed above the overlay */
+}
+
 header {
     padding-bottom: 50px;
 }
@@ -116,15 +177,6 @@ header {
     /* height: 550px; */
     z-index: -1;
 }
-.color {
-    position: absolute;
-    width: 100vw;
-    /* height: 550px; */
-    top: 0;
-    left: 0%;
-    z-index: -1;
-    background: linear-gradient(to top, var(--background), var(--primary-overlay)); 
-}
 nav {
     padding: 50px var(--side-padding);
 }
@@ -138,10 +190,11 @@ nav {
 .hero-logo img {
     width: 100%;
 }
-.button {
+/* .button {
     width: 160px;
     height: 50px;
-    background-color: var(--primary);
+    border: 1px solid var(--primary);
+    background-color: transparent;
     border-radius: 8px;
     margin-top: 22px;
     cursor: pointer;
@@ -151,20 +204,156 @@ nav {
     align-items: center;
     position: relative;
     outline: 0;
-    border: 0;
 }
 .button a {
-    color: var(--text);
+    color: var(--primary);
     padding: 12px;
+    position: relative;
 }
-.button:hover {
-    border: 1px solid var(--primary);
-    background-color: transparent;
+.button::before {
+    width: 0%;
+    height: 100%;
+    position: absolute;
+    content: "";
+    left: 0;
+    top: 0;
+    background-image: linear-gradient(-45deg, var(--primary), var(--secondary));
+    transition: all .2s ease-in-out;
+    border-radius: 8px;
 }
+.button:hover::before {
+    width: 160px;
+}  
 .button:hover a {
-    color: var(--primary);
+    color: var(--text-light);
+} */
+.button a {
+    color: var(--text);
+    transition: color .3s ease;
+}
+.button {
+    width: 150px;
+    height: 45px;
+    margin-top: 22px;
+    --border-color: linear-gradient(-45deg, var(--primary), var(--secondary), var(--accent));
+    --border-width: .125em;
+    --curve-size: .5em;
+    --blur: 30px;
+    --bg: var(--background);
+
+        /* use position: relative; so that BG is only for .button */
+    position: relative;
+    isolation: isolate;
+    display: inline-grid;
+    place-content: center;
+    padding: .5em 1.5em;
+    font-size: 17px;
+    border: 0;
+    text-transform: uppercase;
+    box-shadow: 10px 10px 20px rgba(0, 0, 0, .6);
+    clip-path: polygon(
+                /* Top-left */
+                0% var(--curve-size),
+
+                var(--curve-size) 0,
+                /* top-right */
+                100% 0,
+                100% calc(100% - var(--curve-size)),
+
+                /* bottom-right 1 */
+                calc(100% - var(--curve-size)) 100%,
+                /* bottom-right 2 */
+                0 100%);
+    transition: color 250ms;
+}
+
+.button::after,
+.button::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+}
+
+.button::before {
+    background: var(--border-color);
+    background-size: 300% 300%;
+    animation: move-bg7234 5s ease infinite;
+    z-index: -2;
 }
 
+@keyframes move-bg7234 {
+    0% {
+        background-position: 31% 0%
+    }
+
+    50% {
+        background-position: 70% 100%
+    }
+
+    100% {
+        background-position: 31% 0%
+    }
+}
+
+.button::after {
+    background: var(--bg);
+    z-index: -1;
+    clip-path: polygon(
+                /* Top-left */
+                var(--border-width) 
+                calc(var(--curve-size) + var(--border-width) * .5),
+
+                calc(var(--curve-size) + var(--border-width) * .5) var(--border-width),
+
+                /* top-right */
+                calc(100% - var(--border-width)) 
+                var(--border-width),
+
+                calc(100% - var(--border-width)) 
+                calc(100% - calc(var(--curve-size) + var(--border-width) * .5)),
+
+                /* bottom-right 1 */
+                calc(100% - calc(var(--curve-size) + var(--border-width) * .5)) calc(100% - var(--border-width)),
+                /* bottom-right 2 */
+                var(--border-width) calc(100% - var(--border-width)));
+    transition: clip-path 500ms;
+}
+
+.button:where(:hover, :focus)::after {
+    clip-path: polygon(
+                    /* Top-left */
+                    calc(100% - var(--border-width)) 
+
+                    calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)),
+
+                    calc(100% - var(--border-width))
+
+                    var(--border-width),
+
+                    /* top-right */
+                    calc(100% - var(--border-width))
+
+                    var(--border-width),
+
+                    calc(100% - var(--border-width)) 
+
+                    calc(100% - calc(var(--curve-size) + var(--border-width) * .5)),
+
+                    /* bottom-right 1 */
+                    calc(100% - calc(var(--curve-size) + var(--border-width) * .5)) 
+                    calc(100% - var(--border-width)),
+
+                    /* bottom-right 2 */
+                    calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5))
+                    calc(100% - var(--border-width)));
+    transition: 200ms;
+}
+
+.button:where(:hover, :focus) a{
+    color: var(--background);
+}
+
+
 .navbar {
     display: flex;
     gap: 75px;
@@ -320,7 +509,6 @@ nav {
     /* border: 1px solid red; */
 }
 footer {
-    margin-top: 120px;
     background-color: var(--background-light);
     width: 200vw;
     transform: translateX(-50%);
@@ -347,6 +535,10 @@ footer p, .footer-middle a {
     margin-bottom: 20px;
     color: #fafafa;
 }
+footer h2 {
+    font-family: "Rubik";
+
+}
 .footer-section-title::before {
     position: absolute;
     content: "";

diff --git a/CSS/variables.css b/CSS/variables.css
@@ -2,6 +2,7 @@
     --text-light: #ffffff90;
     --text: #d4d4d4;
     --background: #0f0f0f; /* Dark gray background */
+    --background-overlay: #0f0f0f99;
     --background-light: #1a1a1a; /* Slightly lighter gray background */
     --background-lighter: #232323; /* Even lighter gray background */
     --background-img: #24242450; /* Grayish background with reduced opacity */