From 4049d000b227f6c7486a4d6e48e00a216a3a6498 Mon Sep 17 00:00:00 2001
From: soumrnjn <soumyaranjanpanda988@gmail.com>
Date: Mon, 16 Dec 2024 00:16:09 +0530
Subject: [PATCH] Refractor Activity Section Layout and update CSS

---
 assets/activity-numbers.svg |  2 +-
 css/custom.css              | 38 ++++++++++++++++++
 index.html                  | 79 ++++++++++++++++++-------------------
 3 files changed, 77 insertions(+), 42 deletions(-)

diff --git a/assets/activity-numbers.svg b/assets/activity-numbers.svg
index 28af8dc7..240d0c80 100644
--- a/assets/activity-numbers.svg
+++ b/assets/activity-numbers.svg
@@ -1 +1 @@
-<svg stroke-width='3.5' fill='#fff' stroke='#000' height='55' viewBox='0 0 45 45' width='55' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'><defs/><g font-size='16' fill='none' font-family='Times New Roman' transform='matrix(1 0 0-1 0 41.25)'><g stroke='none'><path d='m.001.001h41.25v41.25h-41.25z'/><ellipse rx='15.12' ry='15.12' fill='#fff' transform='matrix(.75088-.66044.66044.75088 20.67 20.535)'/></g><ellipse stroke-width='5.482' rx='17.882' ry='17.882' stroke-miterlimit='79.84' transform='matrix(.93385-.35766.35766.93385 20.67 20.535)'/><text font-size='26.801' x='0' y='0' font-weight='bold' fill='#000' stroke='none' font-family='Arial' transform='matrix(1 0 0-1 13.414 11.07)'>9</text><ellipse stroke-width='1.694' rx='11.555' ry='11.555' stroke-miterlimit='79.84' transform='matrix(.93388-.35759.35759.93388 20.67 20.535)'/><g fill='#000' stroke='none'><path d='m18.02 36.06l.571-3.613h3.549l.507 3.74z'/><path d='m18.02 4.834l.571 3.612h3.549l.507-3.739z'/><path d='m35.943 18.14l-3.612.57v3.55l3.739.507z'/><path d='m5.484 18.14l3.613.57v3.55l-3.739.507z'/><path d='m8.213 29.373l2.957-2.151 2.51 2.51-2.286 3z'/><path d='m33.721 29.373l-2.957-2.151-2.51 2.51 2.285 3z'/><path d='m33.721 11.309l-2.957 2.151-2.51-2.51 2.285-3z'/><path d='m7.442 11.309l2.957 2.151 2.51-2.51-2.285-3z'/></g></g></svg>
\ No newline at end of file
+<svg stroke-width='3.5' fill='#fff' stroke='#000' height='55' viewBox='0 0 42 42' width='55' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'><defs/><g font-size='16' fill='none' font-family='Times New Roman' transform='matrix(1 0 0-1 0 41.25)'><g stroke='none'><path d='m.001.001h41.25v41.25h-41.25z'/><ellipse rx='15.12' ry='15.12' fill='#fff' transform='matrix(.75088-.66044.66044.75088 20.67 20.535)'/></g><ellipse stroke-width='5.482' rx='17.882' ry='17.882' stroke-miterlimit='79.84' transform='matrix(.93385-.35766.35766.93385 20.67 20.535)'/><text font-size='26.801' x='0' y='0' font-weight='bold' fill='#000' stroke='none' font-family='Arial' transform='matrix(1 0 0-1 13.414 11.07)'>9</text><ellipse stroke-width='1.694' rx='11.555' ry='11.555' stroke-miterlimit='79.84' transform='matrix(.93388-.35759.35759.93388 20.67 20.535)'/><g fill='#000' stroke='none'><path d='m18.02 36.06l.571-3.613h3.549l.507 3.74z'/><path d='m18.02 4.834l.571 3.612h3.549l.507-3.739z'/><path d='m35.943 18.14l-3.612.57v3.55l3.739.507z'/><path d='m5.484 18.14l3.613.57v3.55l-3.739.507z'/><path d='m8.213 29.373l2.957-2.151 2.51 2.51-2.286 3z'/><path d='m33.721 29.373l-2.957-2.151-2.51 2.51 2.285 3z'/><path d='m33.721 11.309l-2.957 2.151-2.51-2.51 2.285-3z'/><path d='m7.442 11.309l2.957 2.151 2.51-2.51-2.285-3z'/></g></g></svg>
\ No newline at end of file
diff --git a/css/custom.css b/css/custom.css
index 22ff5911..7dbe2ff4 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -15,3 +15,41 @@
 .intro_img>.container>div>div>div>p {
   padding: 0 10px;
 }
+
+/*--
+  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;
+  }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 66b59f1c..445b58b6 100755
--- a/index.html
+++ b/index.html
@@ -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>