initial header positioning

ArabPixel · ArabPixel · commit cbd9f54fd5bc · 2025-01-23T18:04:15.000+01:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.history
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,50 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    transition: all 0.3s ease;
+}
+
+html{
+    --background: #19329e;
+}
+
+body{
+    font: inherit;
+    background: var(--background);   
+}
+
+header{
+    background: yellow;
+    display: flex;
+    width: 100%;
+    max-height: 15vh;
+    padding: 10px;
+}
+.left{
+    width: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 20px;
+}
+
+.left img{
+    width: 70px;
+    border-radius: 50%;
+}
+
+.right{
+    width: 50%;
+    display: flex;
+    gap: 20px;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.right ul{
+    display: contents;
+    list-style-type: none;
+}
+
+
diff --git a/imgs/logo.png b/imgs/logo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sourceware Lab</title>
+    <link rel="stylesheet" href="css/index.css">
+    <!-- <script src="https://unpkg.com/@tailwindcss/browser@4"></script> -->
+    <style>
+    </style>
+</head>
+<body>
+    <header>
+        <div class="left">
+            <img src="imgs/logo.png" max-width="100px" alt="">
+            <p>Sourceware Lab</p>
+        </div>
+        <div class="right">
+            <ul>
+                <li>About us</li>
+                <li>Projects</li>
+                <li>Socials</li>
+            </ul>
+        </div>
+    </header>
+
+    <main>
+        <div id="aboutus">
+            <h3>Sourceware Lab</h3>
+            <p>Learn by doing</p>
+        </div>
+        <div id="projects">
+
+        </div>
+        <div id="socials">
+            
+        </div>
+    </main>
+
+</body>
+</html>
