From d6e6a2f6172d8ead0f846f0f5489f6e3b730b7a3 Mon Sep 17 00:00:00 2001
From: Vishv Salvi <82429084+Vishvsalvi@users.noreply.github.com>
Date: Mon, 20 Jan 2025 09:12:15 +0530
Subject: [PATCH] Carousel added for booting soas steps (#642)

* Better row_col arrangement

* Adding carousel in booting-soas page

* Added Download and Learn buttons
---
 booting-soas.html | 116 +++++++---------------------------------------
 index.html        |  32 +++++++++----
 2 files changed, 40 insertions(+), 108 deletions(-)

diff --git a/booting-soas.html b/booting-soas.html
index 5eeb25dc..b1aa7d24 100755
--- a/booting-soas.html
+++ b/booting-soas.html
@@ -8,6 +8,10 @@
 <div class="section-title1">
   <span class="tag tag-regular">BOOT SOAS</span>
 </div>
+<div class="text-center" style="margin-top: 20px;">
+  <a href="https://fedoraproject.org/spins/soas/download"><button type="button" class="btn bt-raised btn-custom bt customMargin4">Download SoaS</button></a>
+  <a href="https://www.sugarlabs.org/trisquel/"><button type="button" class="btn bt-raised btn-custom bt customMargin4">Learn about Trisquel Sugar TOAST</button></a>
+</div>
 
 <!-- Introduction section -->
 <section id="testimonial" class="zeroMarPadBtm">
@@ -34,112 +38,42 @@ <h2>Boot Sugar On A Stick</h2>
       <h3 class="text-center customMargin1" >FOLLOW THE STEPS BELOW...</h3>
     </div>
     <div class="row">
-      <div class="col-md-12" >
-        <div class="row justify-content-center">
-          <div class="col-md-8 col-md-push-2">
-            <div>
-              <img id="imgrflt" src="{{ site.baseurl }}/assets/soas2.jpg" alt="Step 1 screenshot" class="customImageStyle">
+      <div class="col-md-12">
+        <div class="testimonial-carousel">
+          <div id="testimonial-slider2" class="owl-carousel text-center">
+            <div class="text-center">
+              <img id="imgrflt" src="{{ site.baseurl }}/assets/soas2.jpg" alt="Step 1 screenshot" class="customImageStyle" style="width: 50%; display: block; margin: 0 auto; padding-bottom: 20px;">
               <h3 class="text-center">STEP 1: Sugar on a Stick</h3>
               <p> To boot sugar labs OS on your computer, you will need a bootable sugar on stick set-up already.
                 <br>
-                To see how to set it up, visit the <a href="https://wiki.sugarlabs.org/go/Sugar_on_a_Stick/Installation" target="_blank" class="hrefCustomColor">wiki</a>.</p>    
+                To see how to set it up, visit the <a href="https://wiki.sugarlabs.org/go/Sugar_on_a_Stick/Installation" target="_blank" class="hrefCustomColor">wiki</a>.</p>
             </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-
-<!-- "Booting SOAS" section -->
-<section id="intro" class="customMarPadCombo1">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-12" >
-        <div class="row justify-content-center">
-          <div class="col-md-8 col-md-push-2">
             <div>
-              <img id="imgrflt" src="{{ site.baseurl }}/assets/boot1.jpg" alt="Step 2 screenshot" class="customImageStyle">
+              <img id="imgrflt" src="{{ site.baseurl }}/assets/boot1.jpg" alt="Step 2 screenshot" class="customImageStyle" style="width: 50%; display: block; margin: 0 auto; padding-bottom: 20px;">
               <h3 class="text-center">STEP 2: Plug it In</h3>
               <p> Once you have your sugar stick, plug it in to a USB port on your computer.
                 <br>
                 The picture on the right will show you what it should look like.</p>
             </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div> 
-</section>
-
-<!-- "Booting SOAS" section -->
-<section id="intro" class="customMarPadCombo1">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-12" >
-        <div class="row justify-content-center">
-          <div class="col-md-8 col-md-push-2">
             <div>
-              <img id="imgrflt" src="{{ site.baseurl }}/assets/boot2.jpg" alt="Step 3 screenshot" class="customImageStyle">
+              <img id="imgrflt" src="{{ site.baseurl }}/assets/boot2.jpg" alt="Step 3 screenshot" class="customImageStyle" style="width: 50%; display: block; margin: 0 auto; padding-bottom: 20px;">
               <h3 class="text-center">STEP 3: Boot Device Select <nobold>(Windows)</nobold></h3>
               <p>To boot from the USB, you will need to press "Shift" while clicking "restart" as shown in the picture.
                 <br>
                 This will take you into an advanced boot tab.</p>
             </div>
-          </div>
-        </div>
-      </div> 
-    </div>
-  </div>
-</section>
-
-<!-- "Booting SOAS" section -->
-<section id="intro" class="customMarPadCombo1">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-12" >
-        <div class="row justify-content-center">
-          <div class="col-md-8 col-md-push-2">
             <div>
-              <img id="imgrflt" src="{{ site.baseurl }}/assets/boot3.jpg" alt="Step 4 screenshot" class="customImageStyle">
+              <img id="imgrflt" src="{{ site.baseurl }}/assets/boot3.jpg" alt="Step 4 screenshot" class="customImageStyle" style="width: 50%; display: block; margin: 0 auto; padding-bottom: 20px;">
               <h3 class="text-center">STEP 4: Select Boot from USB <nobold>(Windows)</nobold></h3>
               <p>Once you are in the advanced boot tab, select "Use a Device".</p>  
             </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-
-<!-- "Booting SOAS" section -->
-<section id="intro" class="customMarPadCombo1">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-12" >
-        <div class="row justify-content-center">
-          <div class="col-md-8 col-md-push-2">
             <div>
-              <img id="imgrflt" src="{{ site.baseurl }}/assets/boot4.jpg" alt="Step 5 screenshot" class="customImageStyle">
+              <img id="imgrflt" src="{{ site.baseurl }}/assets/boot4.jpg" alt="Step 5 screenshot" class="customImageStyle" style="width: 50%; display: block; margin: 0 auto; padding-bottom: 20px;">
               <h3 class="text-center">STEP 5: Select USB <nobold>(Windows)</nobold></h3>
               <p>Now select your USB drive to boot into Sugar OS.</p>
             </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-
-<!-- "Booting SOAS" section -->
-<section id="intro" class="customMarPadCombo1">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-12" >
-        <div class="row justify-content-center">
-          <div class="col-md-8 col-md-push-2">
             <div>
-              <img id="imgrflt" src="{{ site.baseurl }}/assets/boot5.jpg" alt="Step 6 screenshot" class="customImageStyle">
+              <img id="imgrflt" src="{{ site.baseurl }}/assets/boot5.jpg" alt="Step 6 screenshot" class="customImageStyle" style="width: 50%; display: block; margin: 0 auto; padding-bottom: 20px;">
               <h3 class="text-center">STEP 6: Boot Sugar <nobold>(Traditional Boot)</nobold></h3>
               <p> This is an alternative method for non-Windows computers. Start your computer by pressing the power button, then press F9 continously to select boot order.
                 <br>
@@ -147,28 +81,14 @@ <h3 class="text-center">STEP 6: Boot Sugar <nobold>(Traditional Boot)</nobold></
                 <br>
                 Usually the name will have the model name of your USB stick, once it is selected with arrow keys, press enter to boot up Sugar.</p>    
             </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
- 
-<!-- "Booting SOAS" section -->         
-<section id="intro" class="customMarPadCombo1">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-12" >
-        <div class="row justify-content-center">
-          <div class="col-md-8 col-md-push-2">
             <div>
-              <img id="imgrflt" src="{{ site.baseurl }}/assets/browse-palette-ss.png" alt="Step 7 screenshot" class="customImageStyle">
+              <img id="imgrflt" src="{{ site.baseurl }}/assets/browse-palette-ss.png" alt="Step 7 screenshot" class="customImageStyle" style="width: 50%; display: block; margin: 0 auto; padding-bottom: 20px;">
               <h3 class="text-center">STEP 7: Enjoy Sugar on a Stick</h3>
               <p>Once you selected to boot from your Sugar USB, you should be directed into the Sugar OS interface.</p>
               <br>
               <p>If you have problems during the boot process, you can ask for help on the Sugar Labs <a href="https://matrix.to/#/#sugar:matrix.org" target="_blank" class="hrefCustomColor">matrix room</a>.</p>
-	    </div>
-	  </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/index.html b/index.html
index 66b59f1c..74e0b98e 100755
--- a/index.html
+++ b/index.html
@@ -121,7 +121,7 @@ <h2 >EXCITED?</h2>
 <!-- By the numbers -->
 <section id="testimonial" class="customPadding5">
   <div class="container">
-    <div class="row">
+    <!-- <div class="row"> -->
       <div class="col-md-12">
         <div class="row justify-content-center">
           <div class="col-md-8 col-md-push-2">
@@ -132,40 +132,52 @@ <h2>Sugar Labs by the numbers</h2>
           </div>
         </div>
         <div class="row justify-content-around">
-          <div class="col-md-5 col-md-push-1">
+          <div class="col-md-4 col-md-push-1">
             <div class="block">
               <ul class="counter-box clearfix" style="display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0; list-style-type: none;">
-                <li style="flex-basis: 45%; margin-bottom: 20px;">
+                <li style="flex-basis: 100%; margin-bottom: 20px;">
                   <div class="block" style="text-align: center;">
                     <h4 data-target="55" class="count">0</h4>
                     <span>Mentors helping youth learn in programs like Google Code-In (GCI) and Google Summer of Code</span>
                   </div>
                 </li>
-                <li style="flex-basis: 45%; margin-bottom: 20px;">
+                <li style="flex-basis: 100%; margin-bottom: 20px;">
                   <div class="block" style="text-align: center;">
                     <h4 data-target="1450" class="count">0</h4>
                     <span>Problem-solving tasks completed by students ages 13-17.</span>
                   </div>
                 </li>
-                <li style="flex-basis: 45%; margin-bottom: 20px;">
+              </ul>
+            </div>
+          </div>
+          <div class="col-md-4 col-md-push-1">
+            <div class="block">
+              <ul class="counter-box clearfix" style="display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0; list-style-type: none;">
+                <li style="flex-basis: 100%; margin-bottom: 20px;">
                   <div class="block" style="text-align: center;">
                     <h4 data-target="344" class="count">0</h4>
                     <span>Projects for teaching and learning created by Sugar Labs students and teachers.</span>
                   </div>
                 </li>
-                <li style="flex-basis: 45%; margin-bottom: 20px;">
+                <li style="flex-basis: 100%; margin-bottom: 20px;">
                   <div class="block" style="text-align: center;">
                     <h4 data-target="11531321" class="count">0</h4>
                     <span>Activities Downloaded</span>
                   </div>
                 </li>
-                <li style="flex-basis: 45%; margin-bottom: 20px;">
+              </ul>
+            </div>
+          </div>
+          <div class="col-md-4 col-md-push-1">
+            <div class="block">
+              <ul class="counter-box clearfix" style="display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0; list-style-type: none;">
+                <li style="flex-basis: 100%; margin-bottom: 20px;">
                   <div class="block" style="text-align: center;">
                     <h4 data-target="3000000" class="count">0</h4>
-                   <span>Kids whose lives have been enriched by using the Sugar Learning Platform</span>
+                    <span>Kids whose lives have been enriched by using the Sugar Learning Platform</span>
                   </div>
                 </li>
-                <li style="flex-basis: 45%; margin-bottom: 20px;">
+                <li style="flex-basis: 100%; margin-bottom: 20px;">
                   <div class="block" style="text-align: center;">
                     <h4 data-target="170" class="count">0</h4> 
                     <span>Languages our educational software has been translated into</span>
@@ -176,7 +188,7 @@ <h4 data-target="170" class="count">0</h4>
           </div>
         </div>
       </div>
-    </div>
+    <!-- </div> -->
   </div>
 </section>