Skip to content

Commit

Permalink
Carousel added for booting soas steps (#642)
Browse files Browse the repository at this point in the history 
* Better row_col arrangement

* Adding carousel in booting-soas page

* Added Download and Learn buttons
  • Loading branch information
@Vishvsalvi
Vishvsalvi authored Jan 20, 2025
1 parent c5eff07 commit d6e6a2f
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 108 deletions.
116 changes: 18 additions & 98 deletions booting-soas.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -34,141 +38,57 @@ <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>
The function key may differ from computer to computer, but when in doubt, press ESC, F9, F12 together continously until you get redirected to the BIOS or a boot selection menu.
<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>
Expand Down
32 changes: 22 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -176,7 +188,7 @@ <h4 data-target="170" class="count">0</h4>
</div>
</div>
</div>
</div>
<!-- </div> -->
</div>
</section>

Expand Down

0 comments on commit d6e6a2f

Please sign in to comment.