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

Jump to bottom

feat: Update Acitivity section #527

Closed
wants to merge 1 commit into from
Closed

feat: Update Acitivity section #527

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
112 changes: 96 additions & 16 deletions css/airspace.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,28 +222,94 @@ font header .navbar-default .navbar-nav li a:hover {
/*--
service Start
--*/
@media (min-width: 576px) and (max-width: 767.98px) {
.col-custom {
flex: 0 0 100%; /* 50% width */
max-width: 100%;
}
}
#service {
text-align: center;
padding: 90px 0;
background-color: #f8f9fa;
}
#service .section-title h2 {
font-size: 2.5rem;
color: #333;
margin-bottom: 20px;
}
#service .section-title p {
font-size: 1.1rem;
color: #666;
margin: 0 auto 40px;
}
#service .activity-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
}
#service .service-item {
padding-bottom: 30px;
background-color: #ffffff;
border-radius: 10px;
padding: 30px 20px;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#service .service-item i {
font-size: 60px;
color: #4A4656;
#service .service-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
#service .activity-icon {
width: 80px;
height: 80px;
margin-bottom: 20px;
}
#service .service-item h4 {
padding-top: 20px;
margin: 0;
color: #666;
font-size: 1.25rem;
color: #333;
margin-bottom: 10px;
}
#service .service-item p {
color: #888;
padding-top: 10px;
margin: 0;
font-size: 14px;
line-height: 1.8;
color: #666;
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 20px;
}
#service .activity-button {
display: inline-block;
padding: 10px 20px;
background-color: #4A4656;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
#service .activity-button:hover {
background-color: #5a566a;
}

#service .view-all-button {
display: inline-block;
padding: 12px 30px;
background-color: #4A4656;
color: #fff;
text-decoration: none;
border-radius: 5px;
font-size: 1.1rem;
transition: background-color 0.3s ease;
}
#service .view-all-button:hover {
background-color: #5a566a;
}
#service .important-note {
margin-top: 40px;
font-size: 0.9rem;
color: #666;
}
#service .important-note a {
color: #4A4656;
text-decoration: underline;
}
/*--
donation section start
Expand Down Expand Up @@ -1623,11 +1689,25 @@ header.large li{ margin-top: 0px; }
/*--
service Start
--*/
#service {
padding-top: 100px;

#service .container{
max-width: 100%;
}
#service .activity-grid {
gap: 20px;
}
#service .service-item {
padding: 20px 15px;
}
#service .activity-icon {
width: 60px;
height: 60px;
}
#service .service-item h4 {
font-size: 1.1rem;
}
#service .thumbnail {
padding-bottom: 70px;
#service .service-item p {
font-size: 0.8rem;
}
/*--
call-to-action Start
Expand Down
130 changes: 57 additions & 73 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -438,110 +438,94 @@ <h3 class="text-center">For more details, click the link below!</h3>
<div class="container">
<div class="row">
<div class="section-title">
<h2>Already using Sugar? We have many activities for you!</h2>
<p>The Sugar Learning Platform is a complete environment for teaching and learning, which includes individual activities. If you're already using the Sugar Desktop Environment, then you can install from the activities below, which has links to some of our most popular activities.</p>
<h2>Explore Sugar Activities</h2>
<p>Discover a world of interactive learning with our most popular Sugar activities. Perfect for students already using the Sugar Desktop Environment.</p>
</div>
</div>
<div class="row "><!-- This is one too many for this 4x2 grid and the SVG -- and only this SVG -- renders too large
<div class="col-sm-6 col-md-3">
<div class="row activity-grid">
<div class="col-sm-6 col-md-4 col-lg-3 col-custom">
<div class="service-item">
<img class="span1" src='{{ site.baseurl }}/assets/activity-numbers.svg' alt="Numbers activity svg">
<br>
<img class="activity-icon" src='{{ site.baseurl }}/assets/activity-numbers.svg' alt="Numbers activity icon">
<h4>Numbers</h4>
<p>Play with numbers</p>
<a href="https://activities.sugarlabs.org/en-US/sugar/addon/4336"><button type="button" class="btn bt-raised btn-custom bt customMargin4">Get Numbers</button></a>
<p>Have fun experimenting with numbers</p>
<a href="https://activities.sugarlabs.org/en-US/sugar/addon/4336" class="activity-button">Get Numbers</a>
</div>
</div>-->
<div class="col-sm-6 col-md-3">
<div class="service-item">
<img class="span1" src='{{ site.baseurl }}/assets/activity-finance.svg' alt="Finance activity svg">
<br>
<h4>Finance</h4>
<p>Roleplay with money</p>
<a href="https://activities.sugarlabs.org/en-US/sugar/addon/4040"><button type="button" class="btn bt-raised btn-custom bt customMargin4" >Get Finance</button></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-custom">
<div class="service-item">
<img class="activity-icon" src='{{ site.baseurl }}/assets/activity-finance.svg' alt="Finance activity icon">
<h4>Finance</h4>
<p>Learn money management through roleplay</p>
<a href="https://activities.sugarlabs.org/en-US/sugar/addon/4040" class="activity-button">Get Finance</a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="service-item" >
<img class="span1" src='{{ site.baseurl }}/assets/activity-maze.svg' alt="Maze Web activity svg">
<br>
<h4>Maze</h4>
<p>Have fun with progressive challenges</p>
<a href="https://activities.sugarlabs.org/en-US/sugar/addon/4727"><button type="button" class="btn bt-raised btn-custom bt customMargin4" >Get Maze Web</button></a>
<div class="col-sm-6 col-md-4 col-lg-3 col-custom">
<div class="service-item" >
<img class="activity-icon" src='{{ site.baseurl }}/assets/activity-maze.svg' alt="Maze Web activity icon">
<h4>Maze</h4>
<p>Solve puzzles with increasing difficulty</p>
<a href="https://activities.sugarlabs.org/en-US/sugar/addon/4727" class="activity-button">Get Maze Web</a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="service-item">
<img class="span1" src='{{ site.baseurl }}/assets/activity-measure.svg' alt="Measure activity svg">
<br>
<h4>Measure</h4>
<div class="col-sm-6 col-md-4 col-lg-3 col-custom">
<div class="service-item">
<img class="activity-icon" src='{{ site.baseurl }}/assets/activity-measure.svg' alt="Measure activity icon">
<h4>Measure</h4>
<p>Use your computer to measure things in the physical world</p>
<a href="https://activities.sugarlabs.org/en-US/sugar/addon/4197"><button type="button" class="btn bt-raised btn-custom bt customMargin4" >Get Measure</button></a>
<a href="https://activities.sugarlabs.org/en-US/sugar/addon/4197" class="activity-button">Get Measure</a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="service-item">
<img class="span1" src='{{ site.baseurl }}/assets/activity-turtle3d.svg' alt="TurtleBlocks3D activity svg">
<br>
<h4>TurtleBlocks3D</h4>
<p>Are you already using TurtleBlocks? Try it in three dimensions!</p>
<a href="https://activities.sugarlabs.org/en-US/sugar/addon/4757"><button type="button" class="btn bt-raised btn-custom bt customMargin4" >Get TurtleBlocks3D</button></a>
<div class="col-sm-6 col-md-4 col-lg-3 col-custom">
<div class="service-item">
<img class="activity-icon" src='{{ site.baseurl }}/assets/activity-turtle3d.svg' alt="TurtleBlocks3D activity icon">
<h4>TurtleBlocks3D</h4>
<p>Are you already using TurtleBlocks? Try it in 3D!</p>
<a href="https://activities.sugarlabs.org/en-US/sugar/addon/4757" class="activity-button">Get TurtleBlocks3D</a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="col-sm-6 col-md-4 col-lg-3 col-custom">
<div class="service-item">
<img class="span1" src='{{ site.baseurl }}/assets/activity-words.svg' alt="Words activity svg">
<br>
<h4>Words</h4>
<img class="activity-icon" src='{{ site.baseurl }}/assets/activity-words.svg' alt="Words activity icon">
<h4>Words</h4>
<p>Compose and share your ideas</p>
<a href="https://activities.sugarlabs.org/en-US/sugar/addon/4315"><button type="button" class="btn bt-raised btn-custom bt customMargin4" >Get Words</button></a>
<a href="https://activities.sugarlabs.org/en-US/sugar/addon/4315" class="activity-button">Get Words</a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="service-item">
<img class="span1" src='{{ site.baseurl }}/assets/activity-ruler.svg' alt="Ruler activity svg">
<br>
<h4>Ruler</h4>
<p>Measure and explore math</p>
<a href="https://activities.sugarlabs.org/en-US/sugar/addon/4192"><button type="button" class="btn bt-raised btn-custom bt customMargin4" >Get Ruler</button></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-custom">
<div class="service-item">
<img class="activity-icon" src='{{ site.baseurl }}/assets/activity-ruler.svg' alt="Ruler activity icon">
<h4>Ruler</h4>
<p>Learn measurement and math concepts</p>
<a href="https://activities.sugarlabs.org/en-US/sugar/addon/4192" class="activity-button">Get Ruler</button></a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="service-item">
<img class="span1" src='{{ site.baseurl }}/assets/activity-star-chat.svg' alt="StarChart activity svg">
<br>
<h4>StartChart</h4>
<div class="col-sm-6 col-md-4 col-lg-3 col-custom">
<div class="service-item">
<img class="activity-icon" src='{{ site.baseurl }}/assets/activity-star-chat.svg' alt="StarChart activity icon">
<h4>StartChart</h4>
<p>Explore numbers and information in charts</p>
<a href="https://activities.sugarlabs.org/en-US/sugar/addon/4300"><button type="button" class="btn bt-raised btn-custom bt customMargin4">StarChart</button></a>
</div>
<a href="https://activities.sugarlabs.org/en-US/sugar/addon/4300" class="activity-button">StarChart</a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="service-item">
<img class="span1" src='{{ site.baseurl }}/assets/activity-recall.svg' alt="Recall activity svg">
<br>
<h4>Recall</h4>
<div class="col-sm-6 col-md-4 col-lg-3 col-custom">
<div class="service-item">
<img class="activity-icon" src='{{ site.baseurl }}/assets/activity-recall.svg' alt="Recall activity icon">
<h4>Recall</h4>
<p>Test your memory with this fun game</p>
<a href="https://v4.activities.sugarlabs.org/app/org.sugarlabs.RecallActivity.html"><button type="button" class="btn bt-raised btn-custom bt customMargin4">Get Recall</button></a>
<a href="https://v4.activities.sugarlabs.org/app/org.sugarlabs.RecallActivity.html" class="activity-button">Get Recall</a>
</div>
</div>
</div>
</div>
</section>

<!-- Activites website redirect section -->
<section id="call-to-action">
<div class="container customMargin3">
<div class="row">
<div class="col-md-12 text-center">
<div class="col-md-12 customMargin7">
<h3>Check out the remaining hundreds of activities!</h3>
<p>We have hundreds of activities to explore.</p>
<a href="https://v4.activities.sugarlabs.org/"><button type="button" class="btn bt-raised btn-custom bt">Go to Sugar Activity Library</button></a><br><br>
<p><em>Important: Please know that in order to install and try them, you need to be running the Sugar Desktop Environment. If you don't have that already, please consider your other options</a> to explore Sugar: <a class="footerHeaderStyle" href="{{ site.baseurl }}/#try">Try Sugar!</a></em></p>
<p>We have hundreds of activities to explore.</p>
<a href="https://v4.activities.sugarlabs.org/" class="view-all-button">Go to Sugar Activity Library</a>
<p class="important-note"><strong>Note:</strong> These activities require the Sugar Desktop Environment. Don't have it? <a href="{{ site.baseurl }}/try-sugar.html">Try Sugar now!</a></p>
</div>
</div>
</div>
</section>

<!-- Donate -->
<section id="donation">
<div class="container">
Expand Down