header fix

assets/scss/custom.scss

@@ -62,3 +62,14 @@
 
     padding: 20px;
   }
+
+  .header-with-image {
+    display: flex;
+    align-items: center;
+  }
+
+  .header-with-image img {
+    margin-right: 10px;
+    max-width: 100px; /* Adjust as needed */
+    max-height: 100px; /* Adjust as needed */
+  }

content/english/_index.md

@@ -84,7 +84,7 @@ features:
       link: "/grants"      
 
 features2:
-  - title: "Fediversity explained - for Individuals"
+  - title: "Individuals"
     image: "/images/user.png"
     content: "2Always be in control with your own data on social networks, whether that's with Mastodon, PeerTube or Pixelfed: Fediversity makes it possible."
     button:
@@ -92,7 +92,7 @@ features2:
       label: "Learn more"
       link: "/individuals"
 
-  - title: "Fediversity explained - for Developers"
+  - title: "Developers"
     image: "/images/code.png"
     content: "2As a developer building the next generation of social platforms, you are looking to make it easier to facilitate your customers to use your product. Fediversity can help."
     button:
@@ -100,7 +100,7 @@ features2:
       label: "Learn more"
       link: "/developers"
 
-  - title: "Fediversity explained - for the EC"
+  - title: "European Commission"
     image: "/images/globe.png"
     content: "2The Fediversity Project operates on a grant gratiously provided by the HORIZON fund by the EC. Learn more about the accountability of the project."
     button:

hugo_stats.json

@@ -6,6 +6,7 @@
       "base",
       "body",
       "button",
+      "center",
       "div",
       "footer",
       "form",
@@ -34,7 +35,6 @@
       "section",
       "source",
       "span",
-      "style",
       "svg",
       "textarea",
       "time",
@@ -65,8 +65,6 @@
       "btn-sm",
       "capitalize",
       "col-12",
-      "col-md-3",
-      "col-md-4",
       "column",
       "container",
       "content",
@@ -102,6 +100,7 @@
       "h2",
       "h3",
       "header",
+      "header-with-image",
       "hidden",
       "hover:text-primary",
       "hr-list",

layouts/index.html

@@ -84,13 +84,18 @@
 
 
 <!-- features2test-->
+<center><h2> Fediverse Explained</h2></center>
 
 
 <div class="container">
   <div class="grid-container">
     {{ range $i, $e := .Params.features2 }}
     <div class="grid-item">
-      <h2 class="mb-4">{{ .title | markdownify }}</h2>
+      <div class="header-with-image">
+        <img src="{{ .image }}" alt="Image">
+        <h4 class="mb-4">{{ .title | markdownify }}</h4>
+      </div>
+
       <p class="mb-8 text-lg">{{ .content | markdownify }}</p>
       {{ with .button }} {{ if .enable }}
       <a class="btn btn-primary mt-6" href="{{ .link | absURL }}">

public/css/style.css

@@ -3069,6 +3069,17 @@ input#nav-toggle:checked ~ #nav-menu {
 .grid-item {
   padding: 20px; }
 
+.header-with-image {
+  display: flex;
+  align-items: center; }
+
+.header-with-image img {
+  margin-right: 10px;
+  max-width: 100px;
+  /* Adjust as needed */
+  max-height: 100px;
+  /* Adjust as needed */ }
+
 @media (min-width: 540px) {
 
   .sm\:col-10 {

public/index.html

@@ -2081,13 +2081,18 @@
 
 
 
+<center><h2> Fediverse Explained</h2></center>
 
 
 <div class="container">
   <div class="grid-container">
     
     <div class="grid-item">
-      <h2 class="mb-4">Fediversity explained - for Individuals</h2>
+      <div class="header-with-image">
+        <img src="/images/user.png" alt="Image">
+        <h4 class="mb-4">Individuals</h4>
+      </div>
+
       <p class="mb-8 text-lg">2Always be in control with your own data on social networks, whether that&rsquo;s with Mastodon, PeerTube or Pixelfed: Fediversity makes it possible.</p>
        
       <a class="btn btn-primary mt-6" href="//localhost:1313/individuals">
@@ -2098,7 +2103,11 @@
     </div>
     
     <div class="grid-item">
-      <h2 class="mb-4">Fediversity explained - for Developers</h2>
+      <div class="header-with-image">
+        <img src="/images/code.png" alt="Image">
+        <h4 class="mb-4">Developers</h4>
+      </div>
+
       <p class="mb-8 text-lg">2As a developer building the next generation of social platforms, you are looking to make it easier to facilitate your customers to use your product. Fediversity can help.</p>
        
       <a class="btn btn-primary mt-6" href="//localhost:1313/developers">
@@ -2109,7 +2118,11 @@
     </div>
     
     <div class="grid-item">
-      <h2 class="mb-4">Fediversity explained - for the EC</h2>
+      <div class="header-with-image">
+        <img src="/images/globe.png" alt="Image">
+        <h4 class="mb-4">European Commission</h4>
+      </div>
+
       <p class="mb-8 text-lg">2The Fediversity Project operates on a grant gratiously provided by the HORIZON fund by the EC. Learn more about the accountability of the project.</p>
        
       <a class="btn btn-primary mt-6" href="//localhost:1313/ec">

resources/_gen/assets/css/style.css_82b067fd6c564693170dff5ae4660239.content

@@ -3069,6 +3069,17 @@ input#nav-toggle:checked ~ #nav-menu {
 .grid-item {
   padding: 20px; }
 
+.header-with-image {
+  display: flex;
+  align-items: center; }
+
+.header-with-image img {
+  margin-right: 10px;
+  max-width: 100px;
+  /* Adjust as needed */
+  max-height: 100px;
+  /* Adjust as needed */ }
+
 @media (min-width: 540px) {
 
   .sm\:col-10 {

resources/_gen/assets/scss/main.scss_f120a3f402b106f64b18d498afd3d82e.content

@@ -1060,3 +1060,14 @@
 
 .grid-item {
   padding: 20px; }
+
+.header-with-image {
+  display: flex;
+  align-items: center; }
+
+.header-with-image img {
+  margin-right: 10px;
+  max-width: 100px;
+  /* Adjust as needed */
+  max-height: 100px;
+  /* Adjust as needed */ }