Skip to content

Commit

Permalink
add hatfield info
Browse files Browse the repository at this point in the history
  • Loading branch information
@evemartin
evemartin committed Jul 16, 2024
1 parent aafb12c commit bbb8163
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 16 deletions.
Binary file added portal/static/portal/img/howe_dell_1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added portal/static/portal/img/howe_dell_2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added portal/static/portal/img/long_europe_map.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
57 changes: 41 additions & 16 deletions portal/templates/portal/ten_year_map.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,17 @@

<div class="background container" id="map-container" style="position:relative">
<section class="background background--primary">
<img title="world map" alt="World map" src="{% static 'portal/img/world_map.png' %}" width="95%"/>
<!-- TODO: The pins no longer map to the right location when in mobile view -->
<button class="map-pin" id="hatfield" style="left: 71.7%; top: 28.5%" onclick="setActivePin('hatfield')" data-target="#carousel-ten-year-map" data-slide-to="0">
<img title="world map" alt="World map" src="{% static 'portal/img/long_europe_map.png' %}" width="95%"/>
<button class="map-pin" id="hatfield" style="left: 35%; top: 27.7%" onclick="setActivePin('hatfield')" data-target="#carousel-ten-year-map" data-slide-to="0">
<map-pin id="hatfield-pin" />
</button>
<button class="map-pin" id="barcelona" style="left: 72.4%; top: 43.6%" onclick="setActivePin('barcelona')" data-target="#carousel-ten-year-map" data-slide-to="1">
<button class="map-pin" id="barcelona" style="left: 38.2%; top: 59%" onclick="setActivePin('barcelona')" data-target="#carousel-ten-year-map" data-slide-to="1">
<map-pin id="barcelona-pin" />
</button>
<button class="map-pin" id="krakow" style="left:81%; top: 29.3%" onclick="setActivePin('krakow')" data-target="#carousel-ten-year-map" data-slide-to="2">
<button class="map-pin" id="krakow" style="left:60.7%; top: 31.3%" onclick="setActivePin('krakow')" data-target="#carousel-ten-year-map" data-slide-to="2">
<map-pin id="krakow-pin" />
</button>
<button class="map-pin" id="sofia" style="left:84.7%; top: 42%" onclick="setActivePin('sofia')" data-target="#carousel-ten-year-map" data-slide-to="3">
<button class="map-pin" id="sofia" style="left:68.5%; top: 55%" onclick="setActivePin('sofia')" data-target="#carousel-ten-year-map" data-slide-to="3">
<map-pin id="sofia-pin" />
</button>
</section>
Expand All @@ -50,51 +49,77 @@

<div class="carousel-inner" role="listbox">
<div class="item active" id="hatfield-carousel">
<div class="col-sm-6 carousel-image-wrapper">
<img src="{% static 'portal/img/icon_step_by_step.png' %}" alt="Illustration of person climbing steps with flag">
<!-- <div class="col-sm-6 carousel-image-wrapper">
<img src="{% static 'portal/img/howe_dell.png' %}" alt="Illustration of person climbing steps with flag">
</div> -->
<div class="col-sm-6">
<div class="row carousel-image-wrapper">
<img src="{% static 'portal/img/howe_dell_1.png' %}" alt="Illustration of The Union Jack flag">
</div>
<div class="row carousel-image-wrapper" style="margin-top:15px">
<img src="{% static 'portal/img/howe_dell_2.png' %}" alt="Illustration of The Union Jack flag">
</div>
</div>
<div class="col-sm-6 carousel-text">
<h4>
<b>Hatfield</b>
<b>Howe Dell School, Hatfield, UK</b>
</h4>
<h5>
Our world tour begins in Hatfield, where we're running a robotics workshop with the local Howe Dell school!
Led by our team and volunteers, students will get to design their own robot, with the potential to win a
specially 3D-printed trophy.
July 2024
</h5>
<p>
We completed the UK leg of our world tour with an enthusiastic reception from Year 4 students at Howe Dell Primary School
in Hatfield. The pupils were captivated by our presentation on different types of robots and Ocado Group's automation
technology used in sorting and packing deliveries. They were then tasked with designing robots to solve problems, producing
creative concepts like robot childminders and homework helpers. Midway through, we introduced them to coding with Rapid Router,
explaining algorithms and letting them experiment with the levels. The students were thrilled about the competition for the
best robot design, which included a prize of a golden 3D printed medal. Teachers praised the engaging and educational workshop,
while Ocado volunteers found the experience rewarding and beneficial for developing their communication and teaching skills.
The children's designs were exceptional, making the judging process challenging, but ultimately a few standout innovations were
selected.
</p>
<div>
<a href="" class="button button--primary button-right-arrow">Learn more</a>
<a href="https://www.linkedin.com/company/code-for-life-uk/posts/?feedView=all" class="button button--primary button-right-arrow">Learn more</a>
</div>
</div>
</div>
<div class="item" id="barcelona-carousel">
<div class="col-sm-6 carousel-image-wrapper">
<img src="{% static 'portal/img/icon_step_by_step.png' %}" alt="Illustration of person climbing steps with flag">
<img src="{% static 'portal/img/logo_cfl.png' %}" alt="CFL logo">
</div>
<div class="col-sm-6 carousel-text">
<h5>
Barcelona
</h5>
<p>
Coming soon!
</p>
</div>
</div>
<div class="item" id="krakow-carousel">
<div class="col-sm-6 carousel-image-wrapper">
<img src="{% static 'portal/img/icon_step_by_step.png' %}" alt="Illustration of person climbing steps with flag">
<img src="{% static 'portal/img/logo_cfl.png' %}" alt="CFL logo">
</div>
<div class="col-sm-6 carousel-text">
<h5>
Krakow
</h5>
<p>
Coming soon!
</p>
</div>
</div>
<div class="item" id="sofia-carousel">
<div class="col-sm-6 carousel-image-wrapper">
<img src="{% static 'portal/img/icon_tracking.png' %}" alt="Illustration of a progress chart">
<img src="{% static 'portal/img/logo_cfl.png' %}" alt="CFL logo">
</div>
<div class="col-sm-6 carousel-text">
<h5>
Sofia
</h5>
<p>
Coming soon!
</p>
</div>
</div>
</div>
Expand Down

0 comments on commit bbb8163

Please sign in to comment.