testingStyles

SonicGalactic · Dec 20, 2024 · 75ebbc2 · 75ebbc2
1 parent 15e0100
commit 75ebbc2
Show file tree

Hide file tree

Showing 2 changed files with 122 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<html>
+<!-- <html>
 <head>
 <title>Sonic Galactic</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
@@ -19,4 +19,38 @@ <h1 align="center"><i>Presented by Starteam</i></h1>
 
 <h2 align="center">Site coming soon!</h2>
 <p>cool text here</p>
+</html> -->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sonic Galactic</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <header class="header">
+    <div class="logo">
+      <h1>Sonic Galactic</h1>
+    </div>
+    <nav class="nav">
+      <a href="#">About</a>
+      <a href="#">Story</a>
+      <a href="#">Characters</a>
+      <a href="#">Soundtrack</a>
+      <a href="#">Media</a>
+      <a href="#">Social Media</a>
+    </nav>
+  </header>
+  <main class="main">
+    <div class="content">
+      <h2>Presented by Starteam</h2>
+      <p>Site coming soon!</p>
+    </div>
+  </main>
+  <footer class="footer">
+    <p>© 2024 Starteam. All rights reserved.</p>
+  </footer>
+</body>
 </html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,87 @@
+/* Global Styles */
+body {
+    margin: 0;
+    font-family: 'Arial', sans-serif;
+    background: linear-gradient(to bottom, #87CEEB, #4682B4); /* Sky gradient */
+    color: #fff;
+    text-align: center;
+  }
+
+  a {
+    text-decoration: none;
+    color: #fff;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  /* Header */
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    background: rgba(0, 0, 0, 0.6);
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 1000;
+  }
+
+  .logo h1 {
+    margin: 0;
+    font-size: 1.8rem;
+    font-weight: bold;
+  }
+
+  .nav a {
+    margin: 0 15px;
+    font-size: 1rem;
+  }
+
+  /* Main Section */
+  .main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background: url('background-image.jpg') no-repeat center center/cover; /* Replace with actual image */
+    padding-top: 60px; /* To offset the fixed header */
+  }
+
+  .content h2 {
+    font-size: 2.5rem;
+    margin: 10px 0;
+  }
+
+  .content p {
+    font-size: 1.2rem;
+  }
+
+  /* Footer */
+  .footer {
+    background: rgba(0, 0, 0, 0.8);
+    padding: 10px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+  }
+
+  /* Responsive Design */
+  @media (max-width: 768px) {
+    .nav a {
+      margin: 0 10px;
+      font-size: 0.9rem;
+    }
+
+    .content h2 {
+      font-size: 2rem;
+    }
+
+    .content p {
+      font-size: 1rem;
+    }
+  }
+