Merge pull request #6936 from Namanv0509/event-style

Hacktoberfest page refactor

Author: Namanv0509

src/collections/events/2024/hacktoberfest-2024/index.mdx

@@ -26,16 +26,21 @@ import hacktoberfestBadge from "./layer5-hacktoberfest11-badge-large.png";
 Prepare for Hacktoberfest and ready yourself for contributing to CNCF projects the easy way with Layer5 <Link to="/community/meshmates">MeshMates</Link> and Maintainers. Spend an hour with seasoned, open source maintainers and hack your way through. To get a head start, see our <Link to="/community/newcomers">Newcomers Resources</Link>. Get familiar with the Layer5 community through our <Link to="/community/handbook">Community Handbook</Link>.
 </p>
 
-<h3>Earn a Badge </h3> 
-<p>Earn a Hacktoberfest Contributor badge by contributing to Layer5 projects during this Hacktoberfest.</p>
-<img src={hacktoberfestBadge} style="width: 250px"/>
-
+<div style={{ display: 'flex', alignItems: 'flex-start', gap: '20px', marginBottom: '-230px' }}>
+  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' , marginBottom: '-20px' }}>
+    <h3 style={{ margin: '0', marginBottom: '10px', whiteSpace: 'nowrap' }}>Earn a Badge</h3>
+    <p style={{ margin: '0', width: '800px' }}>
+      Earn a Hacktoberfest Contributor badge by contributing to Layer5 projects during this Hacktoberfest.
+    </p>
+  </div>
+  <img src={hacktoberfestBadge} style={{ width: '250px', flexShrink: '0', marginLeft: '80px' , marginTop: '-50px' }} />
+</div>
+<h3 style={{ marginBottom: '10px'}} >Event Details</h3>
 <ul>
     <li><strong>DATE:</strong>September 27, 2024</li>
     <li><strong>TIME:</strong>10AM CT | 4PM WAT | 8:30PM IST</li>
     <li><strong>LIVESTREAM:</strong> <a href="https://www.youtube.com/watch?v=iKe52yMWWK4">YouTube</a></li>
 </ul>
-
 <p> Resources:</p>
 <ul>
     <li><Link to="/blog/open-source/ways-to-contribute-at-layer5">Code and Non-Code Contributing at Layer5</Link></li>

src/collections/events/2025/hacktoberfest-2025/index.mdx

@@ -24,24 +24,32 @@ import hacktoberfestTheme from "./hacktoberfest-meshery-theme.webp";
 
 <p>As in years past, Layer5 has a number of different projects and a variety of technologies for participants to choose from. For Hacktoberfest 2025, our theme will center on Designing with Meshery. <Link to="/cloud-native-management/meshery">Meshery</Link> is an extensible, self-service platform for collaborative infrastructure management. Be sure to understand the <Link to="/blog/meshery/comparing-meshery-models-and-meshery-designs">difference between Meshery Models and Meshery Designs</Link>. The Meshery project is looking for contributors to extend these models to support new cloud native infrastructure and their features.</p>
 
-<img src={hacktoberfestOpenArms} style="width: 350px; margin-right: 20px; float: left;"/>
+<img src={hacktoberfestOpenArms} style="width: 750px; margin-right: 20px; float: left;"/>
 
 <p>
 Prepare for Hacktoberfest and ready yourself for contributing to CNCF projects the easy way with Layer5 <Link to="/community/meshmates">MeshMates</Link> and Maintainers. Spend an hour with seasoned, open source maintainers and hack your way through. To get a head start, see our <Link to="/community/newcomers">Newcomers Resources</Link>. Get familiar with the Layer5 community through our <Link to="/community/handbook">Community Handbook</Link>.
 </p>
 
-<h3>Earn a Badge </h3> 
-<p>Earn a Hacktoberfest Contributor badge by contributing to Layer5 projects during this Hacktoberfest.</p>
-<img src={hacktoberfestBadge} style="width: 250px"/>
+<div style={{ display: 'flex', alignItems: 'flex-start', marginBottom: '-200px' }}>
+  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' , marginBottom: '-20px' }}>
+    <h3 style={{ margin: '0', marginBottom: '10px', whiteSpace: 'nowrap' }}>Earn a Badge</h3>
+    <p style={{ margin: '0', width: '900px' }}>
+      Earn a Hacktoberfest Contributor badge by contributing to Layer5 projects during this Hacktoberfest.
+    </p>
+  </div>
+  <img src={hacktoberfestBadge} style={{ width: '250px', flexShrink: '0', marginLeft: '80px' , marginTop: '-50px' }} />
+</div>
+
+<h3 style={{marginBottom: '10px'}}>Event Details</h3>
+
 
 <ul>
     <li><strong>DATE: </strong>October 3rd, 2025</li>
     <li><strong>TIME: </strong> 14:00 UTC (9AM CDT | 4PM CEST | 3PM WAT | 7:30PM IST)</li>
-    {/* <li><strong>LIVESTREAM:</strong> <a href="https://www.youtube.com/watch?v=iKe52yMWWK4">YouTube</a></li> */}
-     <li><strong>LIVESTREAM:</strong> <a href="https://youtube.com/live/1-oaEy0Pm5I?feature=share">Livestream</a></li>
+    <li><strong>LIVESTREAM:</strong> <a href="https://youtube.com/live/1-oaEy0Pm5I?feature=share">Livestream</a></li>
 </ul>
 
-<p> Resources:</p>
+<p>Resources:</p>
 
 <ul>
     <li><Link to="/blog/open-source/ways-to-contribute-at-layer5">Code and Non-Code Contributing at Layer5</Link></li>