1st

css/library-fundraiser.css

@@ -0,0 +1,5 @@
+
+/* Add your custom CSS styles here */
+.library-fundraiser-block {
+  /* Define your styles */
+}

library_fundraiser.info.yml

@@ -0,0 +1,13 @@
+name: 'Library Fundraiser'
+type: module
+description: 'Creates a custom block for library fundraising purposes.'
+core_version_requirement: ^10
+package: Custom
+dependencies:
+  - block
+
+libraries:
+  - library_fundraiser/library-fundraiser-styles:
+    css:
+      theme:
+        css/library-fundraiser.css: {}

src/Plugin/Block/LibraryFundraiserBlock.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace Drupal\library_fundraiser\Plugin\Block;
+
+use Drupal\Core\Block\BlockBase;
+
+/**
+ * Provides a 'Library Fundraiser Block' block.
+ *
+ * @Block(
+ *   id = "library_fundraiser_block",
+ *   admin_label = @Translation("Library Fundraiser Block"),
+ *   category = @Translation("Custom")
+ * )
+ */
+class LibraryFundraiserBlock extends BlockBase {
+
+  /**
+   * {@inheritdoc}
+   */
+
+  public function build() {
+    $html = ' <style>
+                .libfund_block {
+                  background: green;
+                  }
+              </style>
+              <div class="libfund_block">
+                  <h1 class="test" style=" color: blue; ">It works</h1>
+              </div>';
+    $build = [
+      '#theme' => 'library_fundraiser_block',
+      '#markup' => \Drupal\Core\Render\Markup::create($html),
+    ];
+
+    // Attach the library.
+    $build['#attached']['library'][] = 'library_fundraiser/library-fundraiser-styles';
+
+    return $build;
+  }
+
+}

templates/block--libraryfundraiserblock.html.twig

@@ -0,0 +1,4 @@
+
+<div class="library-fundraiser-block">
+  {{ content }}
+</div>

templates/library-fundraiser-block.html.twig

@@ -0,0 +1,4 @@
+
+<div class="library-fundraiser-block">
+  {{ content }}
+</div>