Improved the site

ComputerTech312 · ComputerTech312 · commit cf1f3bb61ec1 · 2024-04-01T11:59:32.000+02:00
diff --git a/index.html b/index.html
@@ -3,24 +3,30 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Your IRC Client</title>
+    <title>Home - PyeChat</title>
     <link rel="icon" type="image/png" href="elitechat.png">
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
     <header class="header">
-        <h1>PyeChat</h1>
+        <div class="logo-container">
+            <h1>PyeChat</h1>
+        </div>
         <nav>
-            <button onclick="window.location.href='link1.html'">Link 1</button>
-            <button onclick="window.location.href='link2.html'">Link 2</button>
-            <button onclick="window.location.href='link3.html'">Link 3</button>
+            <ul>
+                <li><a href="index.html"><button>Install</button></a></li>
+                <li><a href="https://github.com/pyechat"><button>GitHub</button></a></li>
+                <li><a href="news.html"><button>News</button></a></li>
+            </ul>
         </nav>
     </header>
 
-    <div class="container">
+    <main class="container">
         <section class="main">
             <h2>About the Client</h2>
-            <p>Your IRC client is based on HexChat...</p>
+            <p>PyeChat is a modern, user-friendly IRC client built with PyQt. It's inspired by the design and functionality of HexChat.</p>
+            <!-- Add your screenshot here -->
+            <img class="screenshot" src="screenshot.png" alt="Screenshot of the app">
         </section>
 
         <aside class="sidebar">
@@ -31,8 +37,8 @@ <h3>Features</h3>
                 <li>Feature 3</li>
             </ul>
         </aside>
-    </div>
+    </main>
 
     <script src="script.js"></script>
 </body>
-</html>
+</html>
diff --git a/screenshot.png b/screenshot.png
diff --git a/styles.css b/styles.css
@@ -3,31 +3,73 @@ body {
     margin: 0;
     padding: 0;
     background-color: #f4f4f4;
+    color: #333;
 }
 
 .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     background-color: #333;
     color: #fff;
     padding: 10px;
-    text-align: center;
+    border-bottom: 3px solid #444;
+}
+
+.logo-container h1 {
+    margin: 0;
 }
 
 .container {
     width: 80%;
     margin: auto;
     overflow: hidden;
+    padding: 20px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 .main {
     float: left;
     width: 70%;
-    padding: 30px 0;
+    padding: 30px;
+    box-sizing: border-box;
 }
 
 .sidebar {
     float: right;
     width: 30%;
-    padding: 30px 0;
+    padding: 30px;
     background-color: #333;
     color: #fff;
+    box-sizing: border-box;
 }
+
+nav ul {
+    list-style: none;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+}
+
+nav ul li {
+    margin: 0 10px;
+}
+
+nav ul li a button {
+    padding: 10px 20px;
+    font-size: 1.2em;
+    background-color: #fff;
+    color: #333;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+nav ul li a button:hover {
+    background-color: #eee;
+}
+
+.screenshot {
+    width: 100%; /* adjust this value as needed */
+    height: auto;
+}
