restructuring layout

2025-09-26 16:56:07 -06:00
parent dce377b586
commit 3bd6d6b7c2
64 changed files with 187 additions and 195 deletions
@@ -0,0 +1,41 @@
+.logo {
+  position: relative;
+  filter: invert(1);
+  z-index: 3;
+  margin: 5px;
+}
+
+.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: 65%;
+  height: 100%;
+  min-width: 300px;
+  background: linear-gradient(to right, #bd8c01, #f9f9f9);
+  transform: skew(-45deg);
+  z-index: 0;
+}
+
+@media (max-width: 800px) {
+  .yellowPart {
+    background: #bd8c01;
+  }
+}
@@ -0,0 +1,31 @@
+import Image from "next/image";
+import header from"./Header.module.css";
+import Link from "next/link";
+
+function Header() {
+    return (
+        <header>
+            <Link href="https://www.unam.mx/" className={header.center}>
+                <Image
+                    className={header.logo}
+                    src="/logo_fes.png"
+                    alt="Logo FES"
+                    width={200}
+                    height={50}
+                />
+            </Link>
+            <div className={header.yellowPart}></div>
+            <div className={header.cedetecContainer}>
+                <Image
+                    src="/cedetec.jpg"
+                    alt="Image of CEDETEC"
+                    width={300}
+                    height={71}
+                />
+            </div>
+        </header>
+    );
+}
+
+export default Header;
+//IO