adjusted navigation alignment and pie shop list

index.html

@@ -18,9 +18,21 @@
         }
 
         .sub-title {
-            background-color: #fff;
+            background-color: transparent;
             font-size: 1.5em;
             padding: 10px;
+            border-radius: 5px;
+        }
+
+        .sub-title ul {
+            list-style-type: none; /* Remove bullet points */
+            padding: 0; /* Remove padding */
+            margin: 0; /* Remove margin */
+        }
+
+        .sub-title li {
+            margin-bottom: 10px; /* Space between list items */
+            line-height: 1.6; /* Improve readability */
         }
     </style>
 </head>
@@ -39,10 +51,15 @@
         <aside><img src="images/logo.png" alt="SynBio logo"></aside>
         <article>
             <img src="images/banner.png" class="banner" alt="SynBio Ltd" />
-            <h1>Welcome to SynBio </h1>
-            <p class="sub-title">
-                Synthetic Biology Products, Molecular Biology Reagents, Labortory setup and Capacity Building Training.
-            </p>
+            <h1>Welcome to Bethany's Pie Shop</h1>
+            <div class="sub-title">
+                <ul>
+                    <li>Apple Pie</li>
+                    <li>Blueberry Pie</li>
+                    <li>Pumpkin Pie</li>
+                    <li>Sweet Potato Pie</li>
+                </ul>
+            </div>
         </article>
     </main>
     <footer>
@@ -56,4 +73,4 @@ <h1>Welcome to SynBio </h1>
     </footer>
 </body>
 
-</html>
+</html>

site.css

@@ -1,5 +1,6 @@
 * {
     margin: 0;
+    box-sizing: border-box;
 }
 
 html,
@@ -13,7 +14,7 @@ body {
 }
 
 p {
-    margin: .5em 0 .5em 0;
+    margin: .5em 0;
 }
 
 header {
@@ -24,23 +25,33 @@ header {
     width: 100%;
     background-color: #a493c0;
     padding: 10px;
+    z-index: 1000;
+    text-align: center; /* Center-align text inside header */
 }
 
-nav a:visited,
-nav a:link {
-    color: #fff;
-    text-decoration: none;
+nav {
+    display: inline-block;
 }
 
-nav>ul {
-    display: inline;
+nav ul {
+    display: inline-flex; /* Use inline-flex to center the list items horizontally */
     padding: 0;
+    margin: 0;
+    list-style: none;
 }
 
-nav>ul>li {
-    display: inline-block;
-    list-style: none;
-    margin: 0 5px 0 5px;
+nav ul li {
+    margin: 0 5px;
+}
+
+nav ul li a {
+    color: #fff;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+nav ul li a:hover {
+    text-decoration: underline;
 }
 
 main {
@@ -53,19 +64,74 @@ main {
 
 footer {
     padding: 15px;
-}
-
-aside,
-article {
-    padding: 2em;
+    background-color: #a493c0;
+    color: #fff;
+    text-align: center;
 }
 
 aside {
+    position: fixed;
+    bottom: 10px; /* Position it 10px from the bottom */
+    left: 10px; /* Position it 10px from the left */
     text-align: center;
+    padding: 1em; /* Adjust padding as needed */
+    z-index: 1000; /* Ensure it's above other content */
+}
+
+aside img {
+    max-width: 100px; /* Reduce the maximum width of the logo */
+    height: auto;
+    display: block;
+    margin: 0 auto; /* Center the logo horizontally within the aside */
 }
 
 article {
     width: 75%;
+    margin: 0 auto; /* Center the article */
+}
+
+.banner {
+    width: 450px; /* Set a smaller width */
+    height: 310px; /* Set the height equal to width */
+    border-radius: 40%; /* Make the image round */
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    display: block;
+    margin: 0 auto; /* Center the banner image */
+}
+
+h1 {
+    font-size: 2.5em;
+    color: #333;
+    text-align: center; /* Center-align the heading */
+}
+
+.sub-title {
+    background-color: transparent; /* Remove the white background */
+    font-size: 1.2em;
+    padding: 15px;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    text-align: center; /* Center-align the subtitle text */
+}
+
+
+footer nav ul {
+    display: flex;
+    justify-content: center;
+}
+
+footer nav ul li {
+    margin: 0 10px;
+}
+
+footer nav ul li a {
+    color: #fff;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+footer nav ul li a:hover {
+    text-decoration: underline;
 }
 
 .columns {
@@ -84,7 +150,6 @@ article {
     }
 }
 
-
 /* Pies */
 
 .pie {
@@ -121,4 +186,4 @@ article {
     border: solid 1px #f6aeae;
     border-radius: 3px;
     color: #fff;
-}
+}