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

Refactor Activity Section Layout and update CSS #594

Closed
wants to merge 2 commits into from
Closed

Refactor Activity Section Layout and update CSS #594

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4049d00
Refractor Activity Section Layout and update CSS
soumyaranjan-panda Dec 15, 2024
9594535
Merge branch 'master' into update-activity-section
soumyaranjan-panda Dec 15, 2024
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
2 changes: 1 addition & 1 deletion assets/activity-numbers.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 38 additions & 0 deletions css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,41 @@
#navLogo {
margin-top: 6px;
}

/*--
service Start
--*/
#service .service-item {
padding: 10px;
margin-bottom: 20px;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 50vh;
min-height: 500px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

#service .service-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
cursor: pointer;
}

#service .service-item img{
height: 50%;
width: 100%;
object-fit: contain;
}

@media only screen and (max-width: 576px) {
#service .service-item {
height: auto;
}
#service .service-item img{
height: 50vw;
}
}
79 changes: 38 additions & 41 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -442,102 +442,99 @@ <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>
</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 ">
<div class="col-sm-6 col-md-4">
<div class="service-item">
<img class="span1" src='{{ site.baseurl }}/assets/activity-numbers.svg' alt="Numbers activity svg">
<img class="span1" src='{{ site.baseurl }}/assets/activity-numbers.svg' alt="Numbers activity svg">
<br>
<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>
</div>
</div>-->
<div class="col-sm-6 col-md-3">
<div class="service-item">
</div>
<div class="col-sm-6 col-md-4">
<div class="service-item">
<img class="span1" src='{{ site.baseurl }}/assets/activity-finance.svg' alt="Finance activity svg">
<br>
<h4>Finance</h4>
<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>
<div class="col-sm-6 col-md-3">
<div class="service-item" >
<div class="col-sm-6 col-md-4">
<div class="service-item" >
<img class="span1" src='{{ site.baseurl }}/assets/activity-maze.svg' alt="Maze Web activity svg">
<br>
<h4>Maze</h4>
<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>
</div>
<div class="col-sm-6 col-md-3">
<div class="service-item">
<div class="col-sm-6 col-md-4">
<div class="service-item">
<img class="span1" src='{{ site.baseurl }}/assets/activity-measure.svg' alt="Measure activity svg">
<br>
<h4>Measure</h4>
<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>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="service-item">
<div class="col-sm-6 col-md-4">
<div class="service-item">
<img class="span1" src='{{ site.baseurl }}/assets/activity-turtle3d.svg' alt="TurtleBlocks3D activity svg">
<br>
<h4>TurtleBlocks3D</h4>
<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>
</div>
<div class="col-sm-6 col-md-3">
<div class="col-sm-6 col-md-4">
<div class="service-item">
<img class="span1" src='{{ site.baseurl }}/assets/activity-words.svg' alt="Words activity svg">
<br>
<h4>Words</h4>
<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>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="service-item">
<div class="col-sm-6 col-md-4">
<div class="service-item">
<img class="span1" src='{{ site.baseurl }}/assets/activity-ruler.svg' alt="Ruler activity svg">
<br>
<h4>Ruler</h4>
<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>
</div>
<div class="col-sm-6 col-md-3">
<div class="service-item">
<div class="col-sm-6 col-md-4">
<div class="service-item">
<img class="span1" src='{{ site.baseurl }}/assets/activity-star-chart.svg' alt="StarChart activity svg">
<br>
<h4>StarChart</h4>
<h4>StarChart</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>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="service-item">
<div class="col-sm-6 col-md-4">
<div class="service-item">
<img class="span1" src='{{ site.baseurl }}/assets/activity-recall.svg' alt="Recall activity svg">
<br>
<h4>Recall</h4>
<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>
</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">
<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>
</div>
<br>
<div class="row">
<div class="col-md-12 text-center">
<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>
</div>
</div>
</section>
Expand Down