first commit

app/Components/Header/Header.css

@@ -0,0 +1,34 @@
+.logo {
+    position: relative;
+    filter: invert(1);
+    z-index: 3;
+}
+
+.cedetecContainer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 300px;
+    height: 100%;
+    z-index: -1;
+}
+
+.cedetecContainer::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to right, #f9f9f9, rgba(128, 128, 128, 0));
+}
+
+.yellowPart {
+    position: absolute;
+    content: "";
+    top: 0;
+    left: -20px;
+    width: 30%;
+    height: 50%;
+    min-width: 300px;
+    background-color: #d59f0f;
+    transform: skew(-45deg);
+    z-index: 0;
+}

app/Components/Header/Header.tsx

@@ -0,0 +1,31 @@
+import Image from "next/image";
+import "./Header.css";
+import Link from "next/link";
+
+function Header() {
+    return (
+        <header>
+            <Link href="https://www.unam.mx/" className="center">
+                <Image
+                    className="logo"
+                    src="/logo_fes.png"
+                    alt="Logo FES"
+                    width={200}
+                    height={50}
+                />
+            </Link>
+            <div className="yellowPart"></div>
+            <div className="cedetecContainer">
+                <Image
+                    src="/cedetec.jpg"
+                    alt="Image of CEDETEC"
+                    width={300}
+                    height={71}
+                />
+            </div>
+        </header>
+    );
+}
+
+export default Header;
+//IO