v8index.htm

@@ -120,16 +120,68 @@
             </nav>
         </div>
 
-        <main class="container">
+        <main >
             <div>
-                <h1>Page example</h1>
-                <p class="lead">
-                    Test test test Test Test Test test test test Test
-                </p>
+                <div class="container col-xxl-8 px-4 py-5">
+                    <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
+                      <div class="col-10 col-sm-8 col-lg-6">
+                        <img src="/r/image/ss-overview.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
+                      </div>
+                      <div class="col-lg-6">
+                        <h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image</h1>
+                        <p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
+                        <div class="d-grid gap-2 d-md-flex justify-content-md-start">
+                          <button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button>
+                          <button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                <div class="px-4 pt-5 my-5 text-center border-bottom">
+                    <h1 class="display-4 fw-bold">Centered screenshot</h1>
+                    <div class="col-lg-6 mx-auto">
+                        <p class="lead mb-4">
+                            Quickly design and customize responsive mobile-first
+                            sites with Bootstrap, the world’s most popular
+                            front-end open source toolkit, featuring Sass
+                            variables and mixins, responsive grid system,
+                            extensive prebuilt components, and powerful
+                            JavaScript plugins.
+                        </p>
+                        <div
+                            class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5"
+                        >
+                            <button
+                                type="button"
+                                class="btn btn-primary btn-lg px-4 me-sm-3"
+                            >
+                                Primary button
+                            </button>
+                            <button
+                                type="button"
+                                class="btn btn-outline-secondary btn-lg px-4"
+                            >
+                                Secondary
+                            </button>
+                        </div>
+                    </div>
+                    <div class="overflow-hidden" style="max-height: 30vh">
+                        <div class="container px-5">
+                            <img
+                                src="/r/image/logo.svg"
+                                class="img-fluid border rounded-3 shadow-lg mb-4"
+                                alt="Example image"
+                                width="700"
+                                height="500"
+                                loading="lazy"
+                            />
+                        </div>
+                    </div>
+                </div>
             </div>
         </main>
 
-        <footer class="footer mt-auto py-3 border-top">
+        <footer class="footer mt-auto py-5 border-top">
             <div class="container">
                 <div class="row">
                     <p class="col-lg-6 pt-2 text-muted">