pix for cards

lerina · May 16, 2024 · b54c8d7 · b54c8d7
1 parent a9fe02b
commit b54c8d7
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 8 deletions.
diff --git a/demo/img/alpinejs-logo.png b/demo/img/alpinejs-logo.png
diff --git a/demo/img/ancient-africa-part-ii-l.jpg b/demo/img/ancient-africa-part-ii-l.jpg
diff --git a/demo/img/css-animations.jpg b/demo/img/css-animations.jpg
diff --git a/demo/img/svg.png b/demo/img/svg.png
diff --git a/demo/index.html b/demo/index.html
@@ -98,7 +98,7 @@ <h3 style="padding-left:1em; border: 2px solid var(--color-bg-secondary); border
 <h3 style="padding-left:1em; border: 2px solid var(--color-bg-secondary); border-radius: 4px;">
 Dioxus
 </h3>
-<p>
+<p style="background-color: var(--color-text);">
 <img src="./img/multiplatform-dark.svg" />
 </p>
 <p>
@@ -123,10 +123,13 @@ <h2 id="frontend-coding">Frontend coding</h2>
 <p><span data-x-text="hello"></span></p>
 </div>
 <aside>
-<h3>
+<h3 style="padding-left:1em; border: 2px solid var(--color-bg-secondary); border-radius: 4px;">
 Rapid Prototype
 </h3>
 <p>
+<img src="./img/alpinejs-logo.png" />
+</p>
+<p>
 Interactive front-end interfaces, using Alpine.js. For server rendered,
 static or pre-rendered sites.
 </p>
@@ -135,19 +138,25 @@ <h3>
 </p>
 </aside>
 <aside>
-<h3>
+<h3 style="padding-left:1em; border: 2px solid var(--color-bg-secondary); border-radius: 4px;">
 CSS Animations
 </h3>
 <!-- https://coolcssanimation.com/ -->
 <p>
+<img src="./img/css-animations.jpg" />
+</p>
+<p>
 Client side Animations
 </p>
 </aside>
 <aside>
-<h3>
+<h3 style="padding-left:1em; border: 2px solid var(--color-bg-secondary); border-radius: 4px;">
 SVG
 </h3>
 <p>
+<img src="./img/svg.png" />
+</p>
+<p>
 Powerful Animations
 </p>
 </aside>

diff --git a/demo/index.md b/demo/index.md
@@ -38,7 +38,7 @@ nav {margin-bottom:-3em; }
 </aside>
 <aside>
 <h3 style="padding-left:1em; border: 2px solid var(--color-bg-secondary); border-radius: 4px;">Dioxus</h3>
-<p>
+<p style="background-color: var(--color-text);">
 ![](./img/multiplatform-dark.svg)
 </p>
 <p><br/>Dioxus is a Rust library for building apps that run on desktop, web, mobile, and more.</p>
@@ -58,16 +58,25 @@ This simplifies the cooperation between the developers and the designers freeing
 <span data-x-text="hello"></span>
 </div>
 <aside>
-<h3>Rapid Prototype</h3>
+<h3 style="padding-left:1em; border: 2px solid var(--color-bg-secondary); border-radius: 4px;">Rapid Prototype</h3>
+<p>
+![](./img/alpinejs-logo.png)
+</p>
 <p>Interactive front-end interfaces, using Alpine.js. For server rendered, static or pre-rendered sites.</p>
 <p><small>Test your Ideas</small></p>
 </aside>
 <aside>
-<h3>CSS Animations</h3> <!-- https://coolcssanimation.com/ -->
+<h3 style="padding-left:1em; border: 2px solid var(--color-bg-secondary); border-radius: 4px;">CSS Animations</h3> <!-- https://coolcssanimation.com/ -->
+<p>
+![](./img/css-animations.jpg)
+</p>
 <p>Client side Animations</p>
 </aside>
 <aside>
-<h3>SVG </h3>
+<h3 style="padding-left:1em; border: 2px solid var(--color-bg-secondary); border-radius: 4px;">SVG </h3>
+<p>
+![](./img/svg.png)
+</p>
 <p>Powerful Animations</p>
 </aside>
 </section>