You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@activemq.apache.org by ma...@apache.org on 2018/11/06 11:55:23 UTC

[activemq-website] 34/45: Use placeholder content while we decide on real content

This is an automated email from the ASF dual-hosted git repository.

martyntaylor pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/activemq-website.git

commit 058cdc416c33fc4aa95e625de75ea6acc3371439
Author: Martyn Taylor <mt...@redhat.com>
AuthorDate: Wed Sep 26 13:39:37 2018 +0100

    Use placeholder content while we decide on real content
---
 _includes/features.html        |  63 +++++---------
 _includes/splash.html          |   4 +-
 assets/img/example-diagram.png | Bin 0 -> 40746 bytes
 index.html                     | 189 +++++++++++++++++++++--------------------
 projects/artemis/index.html    | 101 ++++++++++++++--------
 projects/classic/index.html    |  92 ++++++++++++++------
 projects/cms/index.html        |  92 ++++++++++++++------
 projects/nms/index.html        |  93 ++++++++++++++------
 8 files changed, 384 insertions(+), 250 deletions(-)

diff --git a/_includes/features.html b/_includes/features.html
index e262926..8c4b5e6 100644
--- a/_includes/features.html
+++ b/_includes/features.html
@@ -7,8 +7,9 @@
         <div class="col-sm-12 narative-alt">
           <div class="card">
             <div class="card-body narative-alt">
-              <span>Create messaging infrastructure for any environment! Internet of Things, Cloud Messaging, Micro Services or Enterprise,
-                we have all the bells and whistles required.  Read about some of our core features below.</span>
+              <div class="card-body narative-alt">
+                  <span>Narative: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"</span>
+              </div>
             </div>
           </div>
         </div>
@@ -25,24 +26,18 @@
         <div class="col-sm-12 col-md-4">
           <div style="padding: 10px;" class="card card-white">
             <h5 style="margin-left: 10px" class="card-title card-title-purple text-purple">
-              PROTOCOL TRANSLATION
+              Why choose ActiveMQ over other projects.
             </h5>
             <h6>
-              SEND IN ONE PROTOCOL RECIEVE IN ANOTHER
+              Subtitle.
             </h6>
             <div class="card-body">
               <div class="row">
                 <div class="col-sm-12 col-lg-12 feature-img">
-                  <img  src="/assets/img/features/protocols.png"></img>
+                  <img  src="/assets/img/example-diagram.png"></img>
                 </div>
                 <div class="col-sm-12 col-lg-12 feature-narative">
-                  <p>Applications and deployment environments are varied
-                  by their very nature.  Use protocols that best suit your  specific
-                  applications and let ActiveMQ do the work of integrating the
-                  specific tecnologies for you.</p>
-
-                  <p>Produce telemetry data using MQTT for devices with limited
-                  resources.  Process via AMQP or JMS in your enterprise application.</p>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                 </div>
                 <div class="row">
                   <div class="col-sm-12">
@@ -54,26 +49,20 @@
           </div>
         </div>
         <div class="col-sm-12 col-md-4">
-          <div style="padding: 10px" class="card card-white feature-purple">
-            <h5 style="maring-left: 10px" class="card-title card-title-pink text-pink">
-              BUILT IN REPLICATION
+          <div style="padding: 10px;" class="card card-white">
+            <h5 style="margin-left: 10px" class="card-title card-title-pink text-pink">
+              Why choose ActiveMQ over other projects?
             </h5>
             <h6>
-              SEND IN ONE PROTOCOL RECIEVE IN ANOTHER
+              Subtitle
             </h6>
             <div class="card-body">
               <div class="row">
                 <div class="col-sm-12 col-lg-12 feature-img">
-                  <img  src="/assets/img/features/protocol-translation.png"></img>
+                  <img  src="/assets/img/example-diagram.png"></img>
                 </div>
                 <div class="col-sm-12 col-lg-12 feature-narative">
-                  <p>Applications and deployment environments are varied
-                  by their very nature.  Use protocols that best suit your  specific
-                  applications and let ActiveMQ do the work of integrating the
-                  specific tecnologies for you.</p>
-
-                  <p>Produce telemetry data using MQTT for devices with limited
-                  resources.  Process via AMQP or JMS in your enterprise application.</p>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                 </div>
                 <div class="row">
                   <div class="col-sm-12">
@@ -85,31 +74,25 @@
           </div>
         </div>
         <div class="col-sm-12 col-md-4">
-          <div style="padding: 10px" class="card card-white feature-purple">
-            <h5 style="maring-left: 10px" class="card-title card-title-orange text-orange">
-              BUILT IN REPLICATION
+          <div style="padding: 10px;" class="card card-white">
+            <h5 style="margin-left: 10px" class="card-title card-title-orange text-orange">
+              Why choose ActiveMQ over other projects?
             </h5>
             <h6>
-              SEND IN ONE PROTOCOL RECIEVE IN ANOTHER
+              Subtitle.
             </h6>
             <div class="card-body">
               <div class="row">
                 <div class="col-sm-12 col-lg-12 feature-img">
-                  <img  src="/assets/img/features/ha-replicated.png"></img>
+                  <img  src="/assets/img/example-diagram.png"></img>
                 </div>
                 <div class="col-sm-12 col-lg-12 feature-narative">
-                  <p>Applications and deployment environments are varied
-                  by their very nature.  Use protocols that best suit your  specific
-                  applications and let ActiveMQ do the work of integrating the
-                  specific tecnologies for you.</p>
-
-                  <p>Produce telemetry data using MQTT for devices with limited
-                  resources.  Process via AMQP or JMS in your enterprise application.</p>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                 </div>
-              </div>
-              <div class="row">
-                <div class="col-sm-12">
-                  <button style="margin-top: 10px" href="#" class="btn btn-success">Find out more<i class="fa-info-circle fa btn-icon"></i></button>
+                <div class="row">
+                  <div class="col-sm-12">
+                    <button style="margin-top: 10px" href="#" class="btn btn-danger">Find out more<i class="fa-info-circle fa btn-icon"></i></button>
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/_includes/splash.html b/_includes/splash.html
index f3d2e4c..0451c99 100644
--- a/_includes/splash.html
+++ b/_includes/splash.html
@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="col-12 slider slider-{{ page.project_class }} slider-lg parent d-none d-lg-block">
+  <div class="col-12 slider slider-{{ page.project_class }} slider-lg parent d-none d-xl-block">
     <div class="row child" style="width: 100%">
       <div class="col-2 align-middle"></div>
       <div class="col-6 slider-text align-middle">
@@ -14,7 +14,7 @@
       </div>
     </div>
   </div>
-  <div class="col-12 slider slider-{{ page.project_class }} d-md-none d-lg-none d-xl-none d-inline-block">
+  <div class="col-12 slider slider-{{ page.project_class }} d-xl-none d-inline-block">
     <div class="row" style="padding: 50px 10px 20px 10px">
       <div class="col-7 slider-text align-middle">
           <p style="font-size: 30px">{{ page.project_name }}</p>
diff --git a/assets/img/example-diagram.png b/assets/img/example-diagram.png
new file mode 100644
index 0000000..7a64474
Binary files /dev/null and b/assets/img/example-diagram.png differ
diff --git a/index.html b/index.html
index cc83603..d8f4121 100644
--- a/index.html
+++ b/index.html
@@ -2,114 +2,115 @@
 layout: default
 ---
 <div class="row">
-  <div class="col-12 slider slider-main slider-lg parent d-none d-lg-block">
-    <div class="row child" style="width: 100%">
-      <div class="col-2 align-middle"></div>
-      <div class="col-6 slider-text align-middle">
-          <div class="child">
-            A SUITE OF OPEN SOURCE PROJECTS FOR HIGH PERFORMANCE MESSAGING
-          </div>
+<div class="col-12 slider slider-main slider-lg parent d-none d-lg-block">
+<div class="row child" style="width: 100%">
+  <div class="col-2 align-middle"></div>
+  <div class="col-6 slider-text align-middle">
+      <div class="child">
+        EXAMPLE STRAP LINE: <p>A SUITE OF OPEN SOURCE PROJECTS FOR HIGH PERFORMANCE MESSAGING</p>
       </div>
-      <div class="col-4 align-middle" >
-        <img src="/assets/img/main-logo.png" style="height: 250px"/>
-      </div>
-    </div>
   </div>
-  <div class="col-12 slider d-md-none d-lg-none d-xl-none d-inline-block">
-    <div class="row" style="padding: 80px 10px 80px 10px";>
-      <div class="col-8 slider-text-small align-middle">
-          <div class="child">
-            A SUITE OF OPEN SOURCE PROJECTS FOR HIGH PERFORMANCE MESSAGING
-          </div>
-      </div>
-      <div class="col-4 align-middle">
-        <img src="/assets/img/main-logo.png" style="height: 120px; float: right"/>
+  <div class="col-4 align-middle" >
+    <img src="/assets/img/main-logo.png" style="height: 250px"/>
+  </div>
+</div>
+</div>
+<div class="col-12 slider d-md-none d-lg-none d-xl-none d-inline-block">
+<div class="row" style="padding: 80px 10px 80px 10px";>
+  <div class="col-8 slider-text-small align-middle">
+      <div class="child">
+        EXAMPLE STRAP LINE: <p>A SUITE OF OPEN SOURCE PROJECTS FOR HIGH PERFORMANCE MESSAGING</p>
       </div>
-    </div>
   </div>
+  <div class="col-4 align-middle">
+    <img src="/assets/img/main-logo.png" style="height: 120px; float: right"/>
+  </div>
+</div>
+</div>
 </div>
 
 <div class="container">
-  <!-- Narative -->
-  <div class="row d-none d-lg-block">
-    <div class="col-sm-12 narative">
-      <div class="card">
-        <div class="card-body narative">
-            <span>From brokers to clients Apache ActiveMQ has everything required to build scalable, fault tolerant, messaging infrastructure.  Proven
-            resilience, standards based technologies and super fast performance.</span>
-        </div>
-      </div>
+<!-- Narative -->
+<div class="row d-none d-lg-block">
+<div class="col-sm-12 narative">
+  <div class="card">
+    <div class="card-body narative">
+        <span>Narative: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"</span>
     </div>
   </div>
-  <!-- Projects -->
-  <div class="row">
-    <div class="col-lg-3 col-md-6">
-      <div class="card card-purple">
-        <div class="card-body">
-          <h5 class="card-title text-purple">ActiveMQ Artemis</h5>
-          <h6>BROKER + JMS CLIENT</h6>
-          <p>Artemis is ActiveMQ's next generation message broker</p>
-          <ul>
-            <li>Event driven engine</li>
-            <li>Multi protocol support</li>
-            <li>Built in data replication</li>
-            <li>JMS 2.0</li>
-          </ul>
-          <a style="margin-top: 10px" href="/projects/artemis" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
-          <button style="margin-top: 10px" href="#" class="btn btn-warning">Download Latest<i class="fa-download fa btn-icon"></i></button>
-        </div>
-      </div>
+</div>
+</div>
+<!-- Projects -->
+<div class="row">
+<div class="col-lg-3 col-md-6">
+  <div class="card card-purple">
+    <div class="card-body">
+      <h5 class="card-title text-purple">ActiveMQ Artemis</h5>
+      <h6>BROKER + JMS CLIENT</h6>
+      <p>Short description of ActiveMQ Artemis</p>
+      <ul>
+        <li>Feature 1</li>
+        <li>Feature 2</li>
+        <li>Feature 3</li>
+        <li>Feature 4</li>
+      </ul>
+      <a style="margin-top: 10px" href="/projects/artemis" class="btn btn-warning">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+      <button style="margin-top: 10px" href="#" class="btn btn-warning">Download Latest<i class="fa-download fa btn-icon"></i></button>
     </div>
-    <div class="col-lg-3 col-md-6">
-      <div class="card card-pink">
-        <div class="card-body">
-          <h5 class="card-title text-pink">ActiveMQ Classic</h5>
-          <h6>BROKER + JMS CLIENT</h6>
-          <p>The original highly functional message broker</p>
-          <ul>
-            <li>Multi protocol support</li>
-            <li>Camel Support</li>
-            <li>Spring Support</li>
-            <li>JMS 1.1</li>
-          </ul>
-          <a style="margin-top: 10px" href="/projects/classic" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
-          <button style="margin-top: 10px" href="#" class="btn btn-secondary">Download Latest<i class="fa-download fa btn-icon"></i></button>
-        </div>
-      </div>
+  </div>
+</div>
+<div class="col-lg-3 col-md-6">
+  <div class="card card-pink">
+    <div class="card-body">
+      <h5 class="card-title text-pink">ActiveMQ 5</h5>
+      <h6>BROKER + JMS CLIENT</h6>
+      <p>Short description of ActiveMQ 5</p>
+      <ul>
+        <li>Feature 1</li>
+        <li>Feature 2</li>
+        <li>Feature 3</li>
+        <li>Feature 4</li>
+      </ul>
+      <a style="margin-top: 10px" href="/projects/classic" class="btn btn-secondary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+      <button style="margin-top: 10px" href="#" class="btn btn-secondary">Download Latest<i class="fa-download fa btn-icon"></i></button>
     </div>
-    <div class="col-lg-3 col-md-6">
-      <div class="card card-orange">
-        <div class="card-body">
-          <h5 class="card-title text-orange">NMS</h5>
-          <h6>.NET CLIENTS</h6>
-          <p>A JMS type API in written in .NET</p>
-          <ul>
-            <li>Multi protocol support</li>
-            <li>Support for ActiveMQ advanced features</li>
-            <li>Simple API</li>
-          </ul>
-          <a style="margin-top: 10px" href="/projects/nms" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
-          <button style="margin-top: 10px" href="#" class="btn btn-success">Download Latest<i class="fa-download fa btn-icon"></i></button>
-        </div>
-      </div>
+  </div>
+</div>
+<div class="col-lg-3 col-md-6">
+  <div class="card card-orange">
+    <div class="card-body">
+      <h5 class="card-title text-orange">NMS</h5>
+      <h6>.NET CLIENTS</h6>
+      <p>Short description of NMS Clients</p>
+      <ul>
+        <li>Feature 1</li>
+        <li>Feature 2</li>
+        <li>Feature 3</li>
+        <li>Feature 4</li>
+      </ul>
+      <a style="margin-top: 10px" href="/projects/nms" class="btn btn-success">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+      <button style="margin-top: 10px" href="#" class="btn btn-success">Download Latest<i class="fa-download fa btn-icon"></i></button>
     </div>
-    <div class="col-lg-3 col-md-6">
-      <div class="card card-blue">
-        <div class="card-body">
-          <h5 class="card-title text-blue">CMS</h5>
-          <h6>C++ CLIENT</h6>
-          <p>A JMS type API in written in C++</p>
-          <ul>
-            <li>Supports Openwire and Stomp protocols</li>
-            <li>Failover supportl</li>
-            <li>Simple API</li>
-          </ul>
-          <a style="margin-top: 10px" href="/projects/cms" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
-          <button style="margin-top: 10px" href="#" class="btn btn-info">Download Latest<i class="fa-download fa btn-icon"></i></button>
-        </div>
-      </div>
+  </div>
+</div>
+<div class="col-lg-3 col-md-6">
+  <div class="card card-blue">
+    <div class="card-body">
+      <h5 class="card-title text-blue">CMS</h5>
+      <h6>C++ CLIENT</h6>
+      <p>Short description of CMS Client</p>
+      <ul>
+        <li>Feature 1</li>
+        <li>Feature 2</li>
+        <li>Feature 3</li>
+        <li>Feature 4</li>
+      </ul>
+      <a style="margin-top: 10px" href="/projects/cms" class="btn btn-info">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+      <button style="margin-top: 10px" href="#" class="btn btn-info">Download Latest<i class="fa-download fa btn-icon"></i></button>
     </div>
   </div>
+</div>
+</div>
 
 </div>
 
diff --git a/projects/artemis/index.html b/projects/artemis/index.html
index 92d2c89..ecd0879 100644
--- a/projects/artemis/index.html
+++ b/projects/artemis/index.html
@@ -12,23 +12,26 @@ latest_version: 2.6.0
         <div class="container">
             <!-- Narative 2 -->
             <div class="row">
-                <div class="col-sm-6">
+                <div class="col-12">
                     <div class="card card-purple">
                         <div class="card-body">
-                            <h5 class="card-title text-purple">Aysnchronous Architecture</h5>
-                            <h6>A scalable and foo bar</h6>
-                            <p>Artemis has been developed using a completely non blocking architecture. This means that
-                            unlike ActiveMQ it does not have bounded client or destination limits. </p>
-                            <a style="margin-top: 10px" href="/projects/artemis/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
-
-                        </div>
-
-                    </div>
-                </div>
-                <div class="col-sm-6">
-                    <div class="card">
-                        <div class="card-body">
-                            <img class="float-right logo-sm" src="/assets/img/features/protocol-translation.png"/>
+                            <div class="row">
+                              <div class="col-sm-12 col-md-6">
+                                <div class="card">
+                                    <div class="card-body">
+                                      <h5 class="card-title text-purple">Feature Title</h5>
+                                      <h6>Short description of feature</h6>
+                                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"</p>
+                                      <a style="margin-top: 10px" href="/projects/artemis/index.html" class="btn btn-warning">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+                                    </div>
+                                </div>
+                              </div>
+                              <div class="col-sm-12 col-md-6 parent d-none d-md-block">
+                                <div class="child align-center" style="text-align: center">
+                                  <img class="align-center" style="width: 60%; margin: auto" src="/assets/img/example-diagram.png"/>
+                                </div>
+                              </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -42,29 +45,59 @@ latest_version: 2.6.0
         <div class="container">
             <!-- Narative 2 -->
             <div class="row project-narative-alt">
-                <div class="col-sm-6">
-                    <div class="card project-narative-alt">
+                <div class="col-12">
+                    <div class="card card-purple project-narative-alt">
                         <div class="card-body">
-                            <img class="float-right logo-sm" src="/assets/img/features/protocol-translation.png"/>
+                            <div class="row">
+                              <div class="col-sm-12 col-md-6">
+                                <div class="card">
+                                    <div class="card-body  project-narative-alt">
+                                      <h5 class="card-title text-purple">Feature Title</h5>
+                                      <h6>Short description of feature</h6>
+                                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"</p>
+                                      <a style="margin-top: 10px" href="/projects/artemis/index.html" class="btn btn-warning">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+                                    </div>
+                                </div>
+                              </div>
+                              <div class="col-sm-12 col-md-6 parent d-none d-md-block">
+                                <div class="child align-center" style="text-align: center">
+                                  <img class="align-center" style="width: 60%; margin: auto" src="/assets/img/example-diagram.png"/>
+                                </div>
+                              </div>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="col-sm-6">
-                    <div class="card card-purple-right project-narative-alt">
-                        <div class="card-body">
-                            <h5 class="card-title text-purple">Multi Protocol</h5>
-                            <h6>Support for multiple Clients</h6>
-                            <p>Artemis supports multiple protocols which means it supports a rich set of clients written
-                                in different technologies </p>
-                            <ul>
-                                <li>The Artemis Protocol (core)</li>
-                                <li>The ActiveMQ protocol (Openwire)</li>
-                                <li>AMQP</li>
-                                <li>STOMP</li>
-                                <li>MQTT</li>
-                            </ul>
-                            <a style="margin-top: 10px" href="/projects/artemis/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+            </div>
+        </div>
+    </div>
+</div>
 
+<div class="row project-narative">
+    <div class="col-12">
+        <div class="container">
+            <!-- Narative 2 -->
+            <div class="row">
+                <div class="col-12">
+                    <div class="card card-purple">
+                        <div class="card-body">
+                            <div class="row">
+                              <div class="col-sm-12 col-md-6">
+                                <div class="card">
+                                    <div class="card-body">
+                                      <h5 class="card-title text-purple">Feature Title</h5>
+                                      <h6>Short description of feature</h6>
+                                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"</p>
+                                      <a style="margin-top: 10px" href="/projects/artemis/index.html" class="btn btn-warning">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+                                    </div>
+                                </div>
+                              </div>
+                              <div class="col-sm-12 col-md-6 parent d-none d-md-block">
+                                <div class="child align-center" style="text-align: center">
+                                  <img class="align-center" style="width: 60%; margin: auto" src="/assets/img/example-diagram.png"/>
+                                </div>
+                              </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -72,5 +105,3 @@ latest_version: 2.6.0
         </div>
     </div>
 </div>
-
-{% include users.html %}
diff --git a/projects/classic/index.html b/projects/classic/index.html
index 7c660cd..cd81751 100644
--- a/projects/classic/index.html
+++ b/projects/classic/index.html
@@ -12,22 +12,26 @@ latest_version: 5.15.4
         <div class="container">
             <!-- Narative 2 -->
             <div class="row">
-                <div class="col-sm-6">
+                <div class="col-12">
                     <div class="card card-pink">
                         <div class="card-body">
-                            <h5 class="card-title text-pink">foo</h5>
-                            <h6>bar</h6>
-                            <p>some words </p>
-                            <a style="margin-top: 10px" href="/projects/classic/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
-
-                        </div>
-
-                    </div>
-                </div>
-                <div class="col-sm-6">
-                    <div class="card">
-                        <div class="card-body">
-                            <img class="float-right logo-sm" src="/assets/img/features/protocol-translation.png"/>
+                            <div class="row">
+                              <div class="col-sm-12 col-md-6">
+                                <div class="card">
+                                    <div class="card-body">
+                                      <h5 class="card-title text-pink">Feature Title</h5>
+                                      <h6>Short description of feature</h6>
+                                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"</p>
+                                      <a style="margin-top: 10px" href="/projects/artemis/index.html" class="btn btn-secondary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+                                    </div>
+                                </div>
+                              </div>
+                              <div class="col-sm-12 col-md-6 parent d-none d-md-block">
+                                <div class="child align-center" style="text-align: center">
+                                  <img class="align-center" style="width: 60%; margin: auto" src="/assets/img/example-diagram.png"/>
+                                </div>
+                              </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -41,21 +45,59 @@ latest_version: 5.15.4
         <div class="container">
             <!-- Narative 2 -->
             <div class="row project-narative-alt">
-                <div class="col-sm-6">
-                    <div class="card project-narative-alt">
+                <div class="col-12">
+                    <div class="card card-pink project-narative-alt">
                         <div class="card-body">
-                            <img class="float-right logo-sm" src="/assets/img/features/protocol-translation.png"/>
+                            <div class="row">
+                              <div class="col-sm-12 col-md-6">
+                                <div class="card">
+                                    <div class="card-body  project-narative-alt">
+                                      <h5 class="card-title text-pink">Feature Title</h5>
+                                      <h6>Short description of feature</h6>
+                                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"</p>
+                                      <a style="margin-top: 10px" href="/projects/artemis/index.html" class="btn btn-secondary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+                                    </div>
+                                </div>
+                              </div>
+                              <div class="col-sm-12 col-md-6 parent d-none d-md-block">
+                                <div class="child align-center" style="text-align: center">
+                                  <img class="align-center" style="width: 60%; margin: auto" src="/assets/img/example-diagram.png"/>
+                                </div>
+                              </div>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="col-sm-6">
-                    <div class="card card-pink-right project-narative-alt">
-                        <div class="card-body">
-                            <h5 class="card-title text-pink">foo</h5>
-                            <h6>bar</h6>
-                            <p>somem more words</p>
-                            <a style="margin-top: 10px" href="/projects/classic/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+            </div>
+        </div>
+    </div>
+</div>
 
+<div class="row project-narative">
+    <div class="col-12">
+        <div class="container">
+            <!-- Narative 2 -->
+            <div class="row">
+                <div class="col-12">
+                    <div class="card card-pink">
+                        <div class="card-body">
+                            <div class="row">
+                              <div class="col-sm-12 col-md-6">
+                                <div class="card">
+                                    <div class="card-body">
+                                      <h5 class="card-title text-pink">Feature Title</h5>
+                                      <h6>Short description of feature</h6>
+                                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"</p>
+                                      <a style="margin-top: 10px" href="/projects/artemis/index.html" class="btn btn-secondary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+                                    </div>
+                                </div>
+                              </div>
+                              <div class="col-sm-12 col-md-6 parent d-none d-md-block">
+                                <div class="child align-center" style="text-align: center">
+                                  <img class="align-center" style="width: 60%; margin: auto" src="/assets/img/example-diagram.png"/>
+                                </div>
+                              </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -63,5 +105,3 @@ latest_version: 5.15.4
         </div>
     </div>
 </div>
-
-{% include users.html %}
diff --git a/projects/cms/index.html b/projects/cms/index.html
index f64e871..bde942e 100644
--- a/projects/cms/index.html
+++ b/projects/cms/index.html
@@ -12,22 +12,26 @@ latest_version: 2.6.0
         <div class="container">
             <!-- Narative 2 -->
             <div class="row">
-                <div class="col-sm-6">
+                <div class="col-12">
                     <div class="card card-blue">
                         <div class="card-body">
-                            <h5 class="card-title text-blue">foo</h5>
-                            <h6>bar</h6>
-                            <p>some words </p>
-                            <a style="margin-top: 10px" href="/projects/classic/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
-
-                        </div>
-
-                    </div>
-                </div>
-                <div class="col-sm-6">
-                    <div class="card">
-                        <div class="card-body">
-                            <img class="float-right logo-sm" src="/assets/img/features/protocol-translation.png"/>
+                            <div class="row">
+                              <div class="col-sm-12 col-md-6">
+                                <div class="card">
+                                    <div class="card-body">
+                                      <h5 class="card-title text-blue">Feature Title</h5>
+                                      <h6>Short description of feature</h6>
+                                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"</p>
+                                      <a style="margin-top: 10px" href="/projects/artemis/index.html" class="btn btn-info">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+                                    </div>
+                                </div>
+                              </div>
+                              <div class="col-sm-12 col-md-6 parent d-none d-md-block">
+                                <div class="child align-center" style="text-align: center">
+                                  <img class="align-center" style="width: 60%; margin: auto" src="/assets/img/example-diagram.png"/>
+                                </div>
+                              </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -41,21 +45,59 @@ latest_version: 2.6.0
         <div class="container">
             <!-- Narative 2 -->
             <div class="row project-narative-alt">
-                <div class="col-sm-6">
-                    <div class="card project-narative-alt">
+                <div class="col-12">
+                    <div class="card card-blue project-narative-alt">
                         <div class="card-body">
-                            <img class="float-right logo-sm" src="/assets/img/features/protocol-translation.png"/>
+                            <div class="row">
+                              <div class="col-sm-12 col-md-6">
+                                <div class="card">
+                                    <div class="card-body  project-narative-alt">
+                                      <h5 class="card-title text-blue">Feature Title</h5>
+                                      <h6>Short description of feature</h6>
+                                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"</p>
+                                      <a style="margin-top: 10px" href="/projects/artemis/index.html" class="btn btn-info">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+                                    </div>
+                                </div>
+                              </div>
+                              <div class="col-sm-12 col-md-6 parent d-none d-md-block">
+                                <div class="child align-center" style="text-align: center">
+                                  <img class="align-center" style="width: 60%; margin: auto" src="/assets/img/example-diagram.png"/>
+                                </div>
+                              </div>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="col-sm-6">
-                    <div class="card card-blue-right project-narative-alt">
-                        <div class="card-body">
-                            <h5 class="card-title text-blue">foo</h5>
-                            <h6>bar</h6>
-                            <p>some more words</p>
-                            <a style="margin-top: 10px" href="/projects/classic/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+            </div>
+        </div>
+    </div>
+</div>
 
+<div class="row project-narative">
+    <div class="col-12">
+        <div class="container">
+            <!-- Narative 2 -->
+            <div class="row">
+                <div class="col-12">
+                    <div class="card card-blue">
+                        <div class="card-body">
+                            <div class="row">
+                              <div class="col-sm-12 col-md-6">
+                                <div class="card">
+                                    <div class="card-body">
+                                      <h5 class="card-title text-blue">Feature Title</h5>
+                                      <h6>Short description of feature</h6>
+                                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"</p>
+                                      <a style="margin-top: 10px" href="/projects/artemis/index.html" class="btn btn-info">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+                                    </div>
+                                </div>
+                              </div>
+                              <div class="col-sm-12 col-md-6 parent d-none d-md-block">
+                                <div class="child align-center" style="text-align: center">
+                                  <img class="align-center" style="width: 60%; margin: auto" src="/assets/img/example-diagram.png"/>
+                                </div>
+                              </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -63,5 +105,3 @@ latest_version: 2.6.0
         </div>
     </div>
 </div>
-
-{% include users.html %}
diff --git a/projects/nms/index.html b/projects/nms/index.html
index d975dc6..5605283 100644
--- a/projects/nms/index.html
+++ b/projects/nms/index.html
@@ -6,29 +6,32 @@ project_top_narative: The NMS API This allows you to build .NET applications in
 project_class: nms
 latest_version: 2.6.0
 ---
----
 
 <div class="row project-narative">
     <div class="col-12">
         <div class="container">
             <!-- Narative 2 -->
             <div class="row">
-                <div class="col-sm-6">
+                <div class="col-12">
                     <div class="card card-orange">
                         <div class="card-body">
-                            <h5 class="card-title text-orange">foo</h5>
-                            <h6>bar</h6>
-                            <p>some words </p>
-                            <a style="margin-top: 10px" href="/projects/classic/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
-
-                        </div>
-
-                    </div>
-                </div>
-                <div class="col-sm-6">
-                    <div class="card">
-                        <div class="card-body">
-                            <img class="float-right logo-sm" src="/assets/img/features/protocol-translation.png"/>
+                            <div class="row">
+                              <div class="col-sm-12 col-md-6">
+                                <div class="card">
+                                    <div class="card-body">
+                                      <h5 class="card-title text-orange">Feature Title</h5>
+                                      <h6>Short description of feature</h6>
+                                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"</p>
+                                      <a style="margin-top: 10px" href="/projects/artemis/index.html" class="btn btn-danger">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+                                    </div>
+                                </div>
+                              </div>
+                              <div class="col-sm-12 col-md-6 parent d-none d-md-block">
+                                <div class="child align-center" style="text-align: center">
+                                  <img class="align-center" style="width: 60%; margin: auto" src="/assets/img/example-diagram.png"/>
+                                </div>
+                              </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -42,21 +45,59 @@ latest_version: 2.6.0
         <div class="container">
             <!-- Narative 2 -->
             <div class="row project-narative-alt">
-                <div class="col-sm-6">
-                    <div class="card project-narative-alt">
+                <div class="col-12">
+                    <div class="card card-orange project-narative-alt">
                         <div class="card-body">
-                            <img class="float-right logo-sm" src="/assets/img/features/protocol-translation.png"/>
+                            <div class="row">
+                              <div class="col-sm-12 col-md-6">
+                                <div class="card">
+                                    <div class="card-body  project-narative-alt">
+                                      <h5 class="card-title text-orange">Feature Title</h5>
+                                      <h6>Short description of feature</h6>
+                                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"</p>
+                                      <a style="margin-top: 10px" href="/projects/artemis/index.html" class="btn btn-danger">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+                                    </div>
+                                </div>
+                              </div>
+                              <div class="col-sm-12 col-md-6 parent d-none d-md-block">
+                                <div class="child align-center" style="text-align: center">
+                                  <img class="align-center" style="width: 60%; margin: auto" src="/assets/img/example-diagram.png"/>
+                                </div>
+                              </div>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="col-sm-6">
-                    <div class="card card-orange-right project-narative-alt">
-                        <div class="card-body">
-                            <h5 class="card-title text-orange">foo</h5>
-                            <h6>bar</h6>
-                            <p>somem more words</p>
-                            <a style="margin-top: 10px" href="/projects/classic/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+            </div>
+        </div>
+    </div>
+</div>
 
+<div class="row project-narative">
+    <div class="col-12">
+        <div class="container">
+            <!-- Narative 2 -->
+            <div class="row">
+                <div class="col-12">
+                    <div class="card card-orange">
+                        <div class="card-body">
+                            <div class="row">
+                              <div class="col-sm-12 col-md-6">
+                                <div class="card">
+                                    <div class="card-body">
+                                      <h5 class="card-title text-orange">Feature Title</h5>
+                                      <h6>Short description of feature</h6>
+                                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"</p>
+                                      <a style="margin-top: 10px" href="/projects/artemis/index.html" class="btn btn-danger">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+                                    </div>
+                                </div>
+                              </div>
+                              <div class="col-sm-12 col-md-6 parent d-none d-md-block">
+                                <div class="child align-center" style="text-align: center">
+                                  <img class="align-center" style="width: 60%; margin: auto" src="/assets/img/example-diagram.png"/>
+                                </div>
+                              </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -64,5 +105,3 @@ latest_version: 2.6.0
         </div>
     </div>
 </div>
-
-{% include users.html %}