making the articles fit..

Bricks-Network · Nov 14, 2023 · b61847d · b61847d
1 parent 10953cc
commit b61847d
Showing 1 changed file with 51 additions and 38 deletions.
diff --git a/index.html b/index.html
@@ -76,44 +76,57 @@ <h3>Battle Royale</h3>
 								</section>
 
 							<!-- Section -->
-							<section>
-								<header class="major">
-									<h2>The team</h2>
-								</header>
-								<div class="posts">
-									<article>
-										<a href="https://www.youtube.com/@G9AEROSPACEYT" target="_blank" class="image">
-											<img src="images/g9aerospace.png" alt="G9 Aerospace Icon" style="max-width: 150px; max-height: 150px;" />
-										</a>
-										<h3>G9 Aerospace</h3>
-										<p>Hi! I own the network as well as the survival, anarchy and battle royale servers!</p>
-										<ul class="actions">
-											<li><a href="https://g9aerospace.in/home" target="_blank" class="button">More</a></li>
-										</ul>
-									</article>
-									<article>
-										<a href="#" class="image">
-											<img src="images/memo.png" alt="" style="max-width: 150px; max-height: 150px;" />
-										</a>
-										<h3>StreamMemo</h3>
-										<p>My uncle was the greatest pilot in the middle east</p>
-										<ul class="actions">
-											<li><a href="#" class="button">More</a></li>
-										</ul>
-									</article>
-									<article>
-										<a href="https://www.youtube.com/channel/UC0nNf9CjBmsZO7oHvF4EZBA" target="_blank" class="image">
-											<img src="images/jinimaestro.png" alt="" style="max-width: 150px; max-height: 150px;" />
-										</a>
-										<h3>JiniMaestro</h3>
-										<p>Subscribe to technoblade</p>
-										<ul class="actions">
-											<li><a href="https://www.youtube.com/channel/UC0nNf9CjBmsZO7oHvF4EZBA" target="_blank" class="button">More</a></li>
-										</ul>
-									</article>
-								</div>
-							</section>
-
+							<style>
+								.posts {
+									display: flex;
+									justify-content: space-between;
+									flex-wrap: wrap;
+								}
+
+								article {
+									width: calc(33.33% - 20px); /* Adjust the width as needed */
+									box-sizing: border-box;
+									margin-bottom: 20px;
+								}
+							</style>
+
+								<section>
+									<header class="major">
+										<h2>The team</h2>
+									</header>
+									<div class="posts">
+										<article>
+											<a href="https://www.youtube.com/@G9AEROSPACEYT" target="_blank" class="image">
+												<img src="images/g9aerospace.png" alt="G9 Aerospace Icon" style="max-width: 150px; max-height: 150px;" />
+											</a>
+											<h3>G9 Aerospace</h3>
+											<p>Hi! I own the network as well as the survival, anarchy and battle royale servers!</p>
+											<ul class="actions">
+												<li><a href="https://g9aerospace.in/home" target="_blank" class="button">More</a></li>
+											</ul>
+										</article>
+										<article>
+											<a href="#" class="image">
+												<img src="images/memo.png" alt="" style="max-width: 150px; max-height: 150px;" />
+											</a>
+											<h3>StreamMemo</h3>
+											<p>My uncle was the greatest pilot in the middle east</p>
+											<ul class="actions">
+												<li><a href="#" class="button">More</a></li>
+											</ul>
+										</article>
+										<article>
+											<a href="https://www.youtube.com/channel/UC0nNf9CjBmsZO7oHvF4EZBA" target="_blank" class="image">
+												<img src="images/jinimaestro.png" alt="" style="max-width: 150px; max-height: 150px;" />
+											</a>
+											<h3>JiniMaestro</h3>
+											<p>Subscribe to technoblade</p>
+											<ul class="actions">
+												<li><a href="https://www.youtube.com/channel/UC0nNf9CjBmsZO7oHvF4EZBA" target="_blank" class="button">More</a></li>
+											</ul>
+										</article>
+									</div>
+								</section>				
 						</div>
 					</div>