Jul 28, 2024
diff --git a/index.html b/index.html
        }

        .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>
        <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>
    </footer>
 </body>

 </html>
 </html>
diff --git a/site.css b/site.css
 * {
    margin: 0;
    box-sizing: border-box;
 }

 html,
 }

 p {
    margin: .5em 0 .5em 0;
    margin: .5em 0;
 }

 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;
 navul {
    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 {

 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 {
    }
 }


 /* Pies */

 .pie {
    border: solid 1px #f6aeae;
    border-radius: 3px;
    color: #fff;
 }
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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>
Expand All		@@ -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>
Expand All		@@ -56,4 +73,4 @@ <h1>Welcome to SynBio </h1>
		</footer>
		</body>

		</html>
		</html>
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,6 @@
		* {
		margin: 0;
		box-sizing: border-box;
		}

		html,
Expand All		@@ -13,7 +14,7 @@ body {
		}

		p {
		margin: .5em 0 .5em 0;
		margin: .5em 0;
		}

		header {
Expand All		@@ -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;
		navul {
		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 {
Expand All		@@ -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 {
Expand All		@@ -84,7 +150,6 @@ article {
		}
		}


		/* Pies */

		.pie {
Expand DownExpand Up		@@ -121,4 +186,4 @@ article {
		border: solid 1px #f6aeae;
		border-radius: 3px;
		color: #fff;
		}
		}