Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Carousel added for booting soas steps #642

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Carousel added for booting soas steps #642

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
383f680
Better row_col arrangement
Vishvsalvi Jan 14, 2025
385ab60
Adding carousel in booting-soas page
Vishvsalvi Jan 14, 2025
7a71c6f
Added Download and Learn buttons
Vishvsalvi Jan 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 18 additions & 98 deletions booting-soas.html
View file
Open in desktop
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
Open in desktop
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