<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel="stylesheet">
    <script src="https://use.fontawesome.com/c192036237.js"></script>


  <?php
    //define a variable to make the current page's menu item show the current page
    $thisPage='outdoor';
  ?> 
    
    
    <header>
      <picture>
        <source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/logo.webp" />
        <img src="https://danieljeffery.co.uk/sheena/images/logo.jpg" alt="logo" height="100" class="logo" />
      </picture>
<?php
require 'includes/menu.php';      
?>      
    </header>
    <main class="container">
      
      <h1>
        Outdoor Learning Sessions
      </h1>
      <section class="outdoorSection">
        <article id="01">
            <picture class="outdoorPicture">
            <source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/outdoor1.webp" />
            <img src="https://danieljeffery.co.uk/sheena/images/outdoor1.jpg" alt="child with insect" class="outdoorImage" />
          </picture>
        </article> 
        
        <article  id="02">
          <picture class="outdoorPicture">
            <source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/outdoor2.webp" />
            <img src="https://danieljeffery.co.uk/sheena/outdoor2.jpg" alt="children playing in woods" class="outdoorImage" />
          </picture>
        </article>
        
        <article  id="03">
          <picture class="outdoorPicture">
            <source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/outdoor3.webp" />
            <img src="https://danieljeffery.co.uk/sheena/images/outdoor3.jpg" alt="girl in tree" class="outdoorImage" />
          </picture>
        </article>

        <article  id="04">
          <p class="teacherSubTitle">Literacy in the Environment</p>
          <p class="teachersText">Literacy lessons don’t have to happen indoors. Use nature to inspire simple poetry and storytelling. We will play with words and get creative with language whilst enjoying being in the outdoors.</p>
        </article>
        
        <article id="05">  
          <p class="teacherSubTitle">Minibeast Discovery</p>
          <p class="teachersText">Discover what minibeasts are lurking in your school grounds. A minibeast hunt combined with themed games and activities will gain an insight into the fascinating world of invertebrates.</p>
        </article>
        
        <article id="06">
          <p class="teacherSubTitle">Sensory Exploration</p>
          <p class="teachersText">Develop a connection to the natural world through a multitude of senses. Develop improved wellbeing, physical literacy and emotional intelligence by exploring nature.</p>
        </article>
        
        <article id="07">
          <p class="teacherSubTitle">Food Chains</p>
          <p class="teachersText">Do you know what eats what in the British woodland environment? Introduction to simple food chains and what they are comprised of. Develop understanding of how energy flows through the eco system and what happens when humans impact on it.</p>
        </article>
        
        <article id="08">
          <p class="teacherSubTitle">How the Water Works</p>
          <p class="teachersText">Explore how the water cycle works in nature and how our usage impacts on nature. </p>
        </article>
        
        <article id="09">
          <p class="teacherSubTitle">What does a tree do?</p>
          <p class="teachersText">Examine what the different parts of a tree actually do and consider how important they are to us and the world we live in. Includes tree measuring and exploring carbon lockup.</p>
        </article>
        
        <article id="10">
          <p class="teacherSubTitle">Natural Art</p>
          <p class="teachersText">Let their creativity flow using the natural environment as inspiration. We will explore nature’s colours, textures and shapes before the group work to create their own masterpieces</p>
        </article>
        
        <article id="11">
        <p class="teacherSubTitle">Bespoke Sessions</p>
        <p class="teachersText">Not sure how to link a topic to outdoor learning? We are always up for a challenge, so get in touch!</p>
        </article>

        <article id="12">
          <picture class="outdoorPicture">
            <source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/outdoor3.webp" />
            <img src="https://danieljeffery.co.uk/sheena/images/outdoor3.jpg" alt="boy hugging a tree" class="outdoorImage" />
          </picture>
        </article>
        
        <article id="13">
          <picture  class="outdoorPicture">
            <source type="https://danieljeffery.co.uk/sheena/image/webp" srcset="images/outdoor5.webp" />
            <img src="https://danieljeffery.co.uk/sheena/images/outdoor5.jpg" alt="child in fallen leaves" class="outdoorImage" />
          </picture>
        </article>
        
        <article id="14">
          <picture class="outdoorPicture">
            <source type="https://danieljeffery.co.uk/sheena/image/webp" srcset="images/outdoor6.webp" />
            <img src="https://danieljeffery.co.uk/sheena/images/outdoor6.jpg" alt="boy in tree" class="outdoorImage" />
          </picture>
        </article>
        
      </section>
      
      
    </main>
    <div>
    </div>
<?php
require 'includes/footer.php';      
?> 
/* Override browser defaults */
* {
      padding: 0px;
      border: 0px;
      margin: 0px;
      box-sizing: border-box;
  }

/*To remove the horrid black border in Chrome when an input acquires focus*/
*,*:focus,*:hover{
    outline:none;
}

article h1{
  font-size: 2rem;
}

img,source{
  display:block;
}

/* Define variables to be used for colours*/
:root{
  --headlineColor: #ca6;
  --textColor: #094;
  --backgroundColor: #ffe;
  --otherColor: #ce6;
  --otherColor2: #fa5;
}

html {
  height: 100%;
}

body {
  background-image: url("https://www.danieljeffery.co.uk/sheena/images/background3.jpg");

  background-repeat: no-repeat;
  background-attachment: fixed;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto 1fr auto;
  justify-items: center;
  align-items: center;
  gap: 20px;
  min-height: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Chelsea Market', cursive;
  color: var(--headlineColor);
  padding: 5px;
  Margin: 5px;
}

p,address, span, ul, li, dl, dt, dd{
  font-family: 'Chelsea Market', cursive;
  color: var(--textColor);
  font-size: 1.2rem;
  padding: 5px;
  Margin: 5px;
}

dt {
  color: var(--headlineColor);
  margin: 0 0 0 30px;
}

li{
  padding: 0;
  margin: 0 0 0 60px;
}


header {
  margin: 3px;
  display: flex;
  flex-direction: row;
  width: 70%;  
  align-items: flex-start;
  gap: 5px;
  }

  
.footer {
  font-size: small; 
}      

footer.container {
  display: flex;
  flex-direction: column;
  border-radius: 4px 4px 0px 0px;
}

.socialMedia{
  color: var(--headlineColor);
}

a:link, a:visited {
  color: var(--headlineColor);
  text-decoration: none;
}

a:hover {
  color: var(--textColor); 
}

.logo{
border: solid 1px var(--headlineColor);
}

.container {
  min-height: 100%;
  width: 90%;
  background-color: var(--backgroundColor);
  border-radius: 4px;
}


 
.teacherSubTitle{
  color: var(--otherColor);
  padding: 0px;
  margin: 0 20px 0 20px;
}

.teachersText{
  padding: 0 20px 10px 20px;
  margin: 0px;
}

.teachersImage{
  height: 50%;
  width: 100%;
  object-fit: cover;
  margin: 20px 0;
  /*overflow: hidden;*/
  /*object-fit: cover;*/
}

.teachersArticle{
  overflow: hidden;
}

.outdoorSection{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.outdoorPicture{
  display: flex;
  justify-content:center;
}

.outdoorImage{
  width: 50%;
  padding: 20px;
}

  /* To alter the order of the items on the outdoor/php page */
 
section.outdoorSection >  article:nth-child(11) {order: 1;}
section.outdoorSection >  article:nth-child(13) {order: 2;}
section.outdoorSection >  article:nth-child(5) {order: 3;}
section.outdoorSection >  article:nth-child(1) {order: 4;}
section.outdoorSection >  article:nth-child(8) {order: 5;}
section.outdoorSection >  article:nth-child(6) {order: 6;}
section.outdoorSection >  article:nth-child(12) {order: 7;}
section.outdoorSection >  article:nth-child(7) {order: 8;}
section.outdoorSection >  article:nth-child(10) {order: 9;}
section.outdoorSection >  article:nth-child(14) {order: 10;}
section.outdoorSection >  article:nth-child(4) {order: 11;}
section.outdoorSection >  article:nth-child(2) {order: 12;}
section.outdoorSection >  article:nth-child(3) {order: 13;}
section.outdoorSection > article:nth-child(9) {order: 14;}

/* *** Desktop *** */
@media screen and (min-width: 992px){
   
}

/* *** Tablet and desktop *** */
@media screen and (min-width: 600px) {

      p, th, td, input, select, pre, span, ul, li, dl, dt,dd{
      font-size: 1rem;
    }
    
  .container {
    width: 70%;
  }    
    
  footer.container {
    flex-direction: row;
}
   
header {
  align-items: flex-end;
  }
  
/* Styling outdoors.php */  
.outdoorSection{
  display: grid;
  grid-template-columns: 2fr 4fr 2fr;
  align-items: center;
}  
  
.outdoorImage{
  width: 100%;
  height: 33.333%;
  padding: 0;
}  
  
div.pics1{
  height: 100%;
}  
  
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.