Add favicon and footer to demo

rainboot · Jan 15, 2024 · 1bc37a7 · 1bc37a7
1 parent b0709a3
commit 1bc37a7
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 20 deletions.
diff --git a/examples/demo/src/assets/favicon.png b/examples/demo/src/assets/favicon.png
diff --git a/examples/demo/src/assets/img01.png b/examples/demo/src/assets/img01.png
diff --git a/examples/demo/src/assets/love.gif b/examples/demo/src/assets/love.gif
diff --git a/examples/demo/src/index.html b/examples/demo/src/index.html
@@ -2,13 +2,13 @@
 <html>
 
 <head>
+  <link rel="icon" type="image/png" href="assets/favicon.png">
   <link href="./assets/rainboot.min.css" rel="stylesheet" />
   <script src="./assets/bootstrap.bundle.min.js"></script>
   <title>rainboot.css</title>
 </head>
 
 <body>
-
   <div class="py-5 text-light" style="background-color: black;">
     <div class="container">
       <div class="row">
@@ -21,9 +21,10 @@ <h3 class="mt-3">Bootstrap with the look of Cloudscape</h3>
             fit while still having a consistent look across your applications.
           </p>
           <div class="mt-5">
-            <a class="btn btn-primary me-2" href="#get-started">Get started</a>
-            <a class="btn btn-primary" href="https://github.com/jasmaa/rainboot.css/tree/main/examples">See
-              examples</a>
+            <a class="btn btn-primary my-2 me-2" href="#get-started">Get started</a>
+            <a class="btn btn-primary my-2" href="https://github.com/jasmaa/rainboot.css/tree/main/examples">
+              See examples
+            </a>
           </div>
         </div>
       </div>
@@ -32,11 +33,11 @@ <h3 class="mt-3">Bootstrap with the look of Cloudscape</h3>
   <div>
     <div class="container py-5">
       <div class="row my-5">
-        <div class="col text-center">
-          <img src="assets/img01.png" class="rounded" style="height: 20rem;" />
+        <div class="col-md-6 order-1 d-flex justify-content-center">
+          <img src="assets/img01.png" class="rounded w-50" />
         </div>
-        <div class="col d-flex flex-column justify-content-center">
-          <h1>Driven by Cloudscape</h1>
+        <div class="col-md-6 order-2 d-flex flex-column justify-content-center">
+          <h1 class="my-3">Driven by Cloudscape</h1>
           <p>
             rainboot.css emulates the look of Cloudscape by generating directly
             from Cloudscape's <a href="https://cloudscape.design/foundation/visual-foundation/design-tokens">design
@@ -47,25 +48,25 @@ <h1>Driven by Cloudscape</h1>
         </div>
       </div>
       <div class="row my-5">
-        <div class="col d-flex flex-column justify-content-center">
-          <h1>Still just Bootstrap</h1>
+        <div class="col-md-6 order-1 order-md-2 d-flex justify-content-center">
+          <img src="assets/img02.png" class="rounded w-100" />
+        </div>
+        <div class="col-md-6 order-2 order-md-1 d-flex flex-column justify-content-center">
+          <h1 class="my-3">Still just Bootstrap</h1>
           <p>
             rainboot.css is still the Bootstrap you know and love. Fed up with
             complicated build systems? Hate always having to learn 20XX's next
             popular JS framework™? Then don't! Drop rainboot.css into your HTML
             and pretend like React was never invented.
           </p>
         </div>
-        <div class="col text-center">
-          <img src="assets/img02.png" class="rounded" style="height: 20rem;" />
-        </div>
       </div>
       <div class="row my-5">
-        <div class="col text-center">
-          <img src="assets/img03.png" class="rounded" style="height: 20rem;" />
+        <div class="col-md-6 order-1 d-flex justify-content-center">
+          <img src="assets/img03.png" class="rounded w-50" />
         </div>
-        <div class="col d-flex flex-column justify-content-center">
-          <h1>Open-source</h1>
+        <div class="col-md-6 order-2 d-flex flex-column justify-content-center">
+          <h1 class="my-3">Open-source</h1>
           <p>
             rainboot.css is open source. Found a bug? Want a feature? File an
             issue or make a contribution and then yell at me until I figure out
@@ -75,13 +76,23 @@ <h1>Open-source</h1>
       </div>
     </div>
   </div>
-  <div id="get-started" class="py-5 text-light w-100 d-flex flex-column
-  align-items-center" style="background-color: black;">
+
+  <div id="get-started" class="py-5 w-100 d-flex flex-column align-items-center text-light"
+    style="background-color: black;">
     <h1 class="display-5 fw-bold">Get started!</h1>
     <div class="mt-3">
-      <a class="btn btn-primary" href="https://github.com/jasmaa/rainboot.css/releases">Download here</a>
+      <a class="btn btn-primary" href="https://github.com/jasmaa/rainboot.css/releases">
+        Download here
+      </a>
     </div>
   </div>
+
+  <footer class="mt-5 w-100">
+    <hr />
+    <div class="container-fluid">
+      <p>Made with <img src="assets/love.gif" /></p>
+    </div>
+  </footer>
 </body>
 
 </html>