switch to more easily modifyable readme header

README.md

@@ -1,19 +1,23 @@
-<p align="center" id="reactpy">
-    <a href="#">
-        <img src="https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/svg/reactpy-logo-landscape.svg" alt="ReactPy Logo" style="min-width: 300px; width: 50%" />
-    </a>
-</p>
-<p align="center">
-    <em>Reactive user interfaces with pure Python</em>
-</p>
-    <p align="center">
-    <a href="https://github.com/reactive-python/reactpy/actions">
-        <img src="https://github.com/reactive-python/reactpy/workflows/test/badge.svg" alt="Build Status">
-    </a>
-    <a href="https://pypi.org/project/reactpy/">
-        <img src="https://badge.fury.io/py/reactpy.svg" alt="Package version">
-    </a>
-</p>
+<svg fill="none" viewBox="0 0 600 300" width="600" height="300" xmlns="http://www.w3.org/2000/svg">
+  <foreignObject width="100%" height="100%">
+    <div xmlns="http://www.w3.org/1999/xhtml">
+      <style>
+        .container {
+          display: flex;
+          width: 100%;
+          height: 300px;
+          background-color: black;
+          color: white;
+        }
+      </style>
+
+      <div class="container">
+        <h1>Hi there, my name is Nikola 👋</h1>
+      </div>
+    </div>
+
+  </foreignObject>
+</svg>
 
 ---
 
@@ -62,8 +66,8 @@ run(HelloWorld)
 
 Follow the links below to find out more about this project.
 
--   [Try it Now](https://mybinder.org/v2/gh/reactive-python/reactpy-jupyter/main?urlpath=lab/tree/notebooks/introduction.ipynb) - check out ReactPy in a Jupyter Notebook.
--   [Documentation](https://reactpy.dev/) - learn how to install, run, and use ReactPy.
--   [Community Forum](https://github.com/reactive-python/reactpy/discussions) - ask questions, share ideas, and show off projects.
--   [Contributor Guide](https://reactpy.dev/docs/developing-reactpy/contributor-guide.html) - see how you can help develop this project.
--   [Code of Conduct](https://github.com/reactive-python/reactpy/blob/main/CODE_OF_CONDUCT.md) - standards for interacting with this community.
+- [Try it Now](https://mybinder.org/v2/gh/reactive-python/reactpy-jupyter/main?urlpath=lab/tree/notebooks/introduction.ipynb) - check out ReactPy in a Jupyter Notebook.
+- [Documentation](https://reactpy.dev/) - learn how to install, run, and use ReactPy.
+- [Community Forum](https://github.com/reactive-python/reactpy/discussions) - ask questions, share ideas, and show off projects.
+- [Contributor Guide](https://reactpy.dev/docs/developing-reactpy/contributor-guide.html) - see how you can help develop this project.
+- [Code of Conduct](https://github.com/reactive-python/reactpy/blob/main/CODE_OF_CONDUCT.md) - standards for interacting with this community.

temp.html

@@ -0,0 +1,44 @@
+<svg fill="none" width="100%" height="300px" xmlns="http://www.w3.org/2000/svg">
+  <foreignObject width="100%" height="100%">
+    <div xmlns="http://www.w3.org/1999/xhtml">
+      <p id="reactpy">
+        <a
+          href="#"
+          target="_blank"
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-decoration: none;
+          "
+        >
+          <img
+            src="https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/svg/reactpy-logo-square.svg"
+            alt="ReactPy Logo"
+            height="200px"
+          />
+          <span style="color: #00be5a; font-size: 4rem; font-family: sans-serif"
+            >ReactPy</span
+          >
+        </a>
+      </p>
+      <p align="center">
+        <em>Reactive user interfaces with pure Python</em>
+      </p>
+      <p align="center">
+        <a href="https://github.com/reactive-python/reactpy/actions">
+          <img
+            src="https://github.com/reactive-python/reactpy/workflows/test/badge.svg"
+            alt="Build Status"
+          />
+        </a>
+        <a href="https://pypi.org/project/reactpy/">
+          <img
+            src="https://badge.fury.io/py/reactpy.svg"
+            alt="Package version"
+          />
+        </a>
+      </p>
+    </div>
+  </foreignObject>
+</svg>