03/10/23 firstcommit

css/myProjectsPage.css

@@ -0,0 +1,69 @@
+@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Semi+Condensed:wght@200;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@1,500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap');
+
+body {
+    background-color: black;
+}
+
+header {
+    height: 100vh;
+    background-image: url("../img/backgroundProjectPageOmbrage.jpg");
+}
+
+/* PAGE */
+
+/* header */
+.titleHeader-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.title h1 {
+    color: #f1f1f1;
+    font-size: 4rem;
+    font-family: 'Sofia Sans Semi Condensed', sans-serif;
+}
+
+/* downArrow and animation */
+.downArrow {
+    animation:  floating 3s ease-in-out 0s infinite;
+}
+
+.downArrow img {
+    width: 64px;
+    height: 64px;
+}
+
+@keyframes floating {
+    0% {
+        transform: translateY(0px);
+    }
+    50% {
+        transform: translateY(-15px);
+    }
+    100% {
+        transform: translate(0px);
+    }
+}
+
+.gradient {
+    width: 100vw;
+    height: 500px;
+    background: rgb(255,255,255);
+    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(17,17,17,0.8652195730609095) 46%, rgba(17,17,17,1) 69%);
+}
+
+@media screen and (max-width:1023px) {
+    header {
+        visibility: hidden;
+        height: 0px;
+    }
+}