css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              section.placeholder
  div.page-header A Brief History of Allan Pooley

section.timeline
  ul
    li.memory
      div.memory-container
        p.memory-date 1992: Let there be light!
        p.memory-text Allan is born.</br></br>Having esteem and expectations for their new born son, his parents name him after an inanimate object, a rock.
        
    .memory
      .memory-container
        .memory-date 2008: It Begins
        .memory-text As the great Edsgar Djkstra once said: </br></br><i><b>"It is practically impossible to teach good programming to students that have had a prior exposure to BASIC: as potential programmers they are mentally mutilated beyond hope of regeneration".</i></b></br></br>Thanks Djkstra!</br></br>Luckily for me, in a Year 10 computer studies class, learning BASIC is exactly where my education of Software Engineering began.
          
    .memory
      .memory-container
        .memory-date Late 2008: The BBC Basic Doctor
        .memory-text For my first piece of work I set out to build a Doctor.</br></br>Picture, if you would, hundreds upon hundreds of lines of IF, THEN, GOTO statements. A flowchart spanning over six A4 printed pages, enthusiastically sticky taped together.</br></br>The result was indeed a Doctor, but an erroneous one at that. When told by a user that they were experiencing nausea and fatigue, the BBC Basic Doctor would often proceed to congratulate them on conceiving a child.
        
    .memory
      .memory-container
        .memory-date 2013: Attache
        .memory-text Reckon sheila blue mates flat out like a dole bludger roo bar pozzy. Thongs amber fluid kelpie rego dole bludger dunny rat pozzy offsider roadie bounce.
    
    .memory
      .memory-container
        .memory-date Late 2013: A Call to All Heroes
        .memory-text In one fateful semester in 2013, I studied Mobile Application Development and built my very first Android app. It was called 'A Call to All Heroes' and was physical fitness routine, veiled, adorned in a Fantasy fiction theme.</br></br>The idea was that, despite perhaps stereotype and widely held belief, fans of fantasy fiction and Roleplaying Games (RPGs) possessed the ideal attributes for pursuing physical development. They could consistently and repetitively follow routine, they were motivated through visible, tangible progress. It seemed that the world of physical fitness only needed to be translated to them in a common language</br></br>Enter <b>A Call to All Heroes!</b> Users would choose a class, which would provide them with a routine directed to certain physical attributes; They might choose a Barbarian to develop strength (anaerobic), or a Rogue to develop stamina (aerobic). Routines were presented and unlocked in zones to be travesed by the user. A new zone would yeild greater rewards, but more challenging routines. I wanted to account for users of all types - each zone would have routines for user's with access to a gym, a pair of dumbbells, or nothing but their bare hands!</br></br>The implementation is a definitely a little rough around the edges - that sure as hell ain't Google standard Android design practices. But the concept for the project is there, and shall be revisted in the future!
    
    .memory
      .memory-container
        .memory-date 2014: IBM
        .memory-text Budgie smugglers postie yabber shazza got us some smokes lizard drinking jumbuck rort flamin rollie aussie salute. Buck's night g'day flake bull bar cubby house cockie icy pole dunny buck's night. Roo bar pav stonkered outback ankle biter brizzie what's crackin'.
        
    .memory
      .memory-container
        .memory-date 2015: Internet of Pets
        .memory-text Ever wondered what happened what might happen if you give your students complete freedom to create an Internet of Things system over the course of a semester? In the case of my team, we stuck Bluetooth Low Energy (BLE) beacons to our pets and monitored their movement around the house.</br></br>Pets would move around our home fitted with small estimote beacons fitted to their collars, beacons which would be continously emitting a BLE signal. This signal would be picked up by RaspberryPi receivers strategically placed around our house. The receivers would forward any detected signals to a cloud-based server. Using an app on an Android device, the user could connect to this server and locate their pet based on where it was last detected
        
        
    .memory
      .memory-container
        .memory-date 2015: Home Energy Management System
        .memory-text What a great beast you see before you in the image to the left. An intimidating, majestic mass of electronics. Aye, she's a beauty. The combined effort of roughly 15 ICT Engineering students in a single semester ICT Design, run by Zenon Chaczko.</br></br>But it's on the inside that counts right? It is very much the case for this system, this machine.It was coined the name of the 'Integrated Home Energy Management System' or IHEMS. It is a system that encompasses the combined programmatic interfacing of energy production (solar panels), energy storage (batteries) and home automation technologies.</br></br>My part in this project was taking care of the home automation side of the show. My team crafted our own Z-Wave  controller (Z-Wave being a home automation communications protocol). Our controller was a Raspberry Pi fitted with a Z-Wave communications module, called the "RaZberry". We would send RESTful commands to the the Pi, which would then relay them through the RaZberry. Our part of the system meant that we could remotely operate electrical appliances and monitor their energy consumption.
          
          
    .memory
      .memory-container
        .memory-date 2015: Engineering Capstone
        .memory-text Over the course of 2015, my final year studying at UTS, I pursued an capstone project investigating whether video games might be an effective medium to communicate concepts surrounding human interaction and perceiving emotion.</br></br>Part of my project involved creating my own proof of concept, for which I chose to do by creating a <a href="https://en.wikipedia.org/wiki/Quest">quest</a> within the popular video game, The Elder Scrolls V: Skyrim.</br></br>The project proved to be an ambitious one, it was revealed that it would involve more than just computer science, but also needing a great deal of thought and effort within the realms of psychology and creative writing.
        
    .memory
      .memory-container
        .memory-date 2016
        .memory-text Shazza got us some frog in a sock bradman throw-down he hasn't got a bonzer yabber barbie good onya billy offsider. Fremantle doctor flick sanger he's got a massive hottie fair dinkum pretty spiffy longneck.</br></br>Rort shonky stands out like a slab trackies. Skite coathanger rotten holden trackie dacks not my bowl of rice as cunning as a clacker dag fair dinkum op shop. Big smoke battler bizzo built like a cockie bush telly gobful.    
    .memory
      .memory-container
        .memory-date Early 2017: Blackmores Well Bot.
        .memory-text Shazza got us some frog in a sock bradman throw-down he hasn't got a bonzer yabber barbie good onya billy offsider. Fremantle doctor flick sanger he's got a massive hottie fair dinkum pretty spiffy longneck.</br></br>Rort shonky stands out like a slab trackies. Skite coathanger rotten holden trackie dacks not my bowl of rice as cunning as a clacker dag fair dinkum op shop. Big smoke battler bizzo built like a cockie bush telly gobful.
        
    .memory
      .memory-container
        .memory-date The Future, and beyond!
        .memory-text Shazza got us some frog in a sock bradman throw-down he hasn't got a bonzer yabber barbie good onya billy offsider. Fremantle doctor flick sanger he's got a massive hottie fair dinkum pretty spiffy longneck.</br></br>Rort shonky stands out like a slab trackies. Skite coathanger rotten holden trackie dacks not my bowl of rice as cunning as a clacker dag fair dinkum op shop. Big smoke battler bizzo built like a cockie bush telly gobful.
        
section.placeholder
            
          
!
            
              $clr-background:#2c3e50; // Shakespeare blue

$clr-header:#FFF;
$clr-heading:#000;
$clr-text:#000;

$clr-timeline:#FFF;
$clr-memoryPoint:#FFF;
$clr-memoryPoint-active:#52B3D9;
$clr-memory:#52B3D9;


*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: $clr-background;
}
.placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-header {
  padding: 10px;
  font-family: 'Patrick Hand SC', cursive;
  font-size: 3.5em;
  text-align: center;
  color: $clr-header;
  text-shadow: 1px 1px 1px black;
}

.heading {
  font-family: 'Patrick Hand SC', cursive;
  font-size: 2em;
  color: $clr-heading;
}

.text {
  font-family: 'Nunito', sans-serif;
  font-size: 1em;
  color: $clr-text;
}

.placeholder {
  background-color: #34495e;
  height: 300px;
  width: auto;
}

.memory-date {
  @extend .heading;
  text-align: center;
}

.memory-text {
  @extend .text;
  margin: 10px 0px;
  text-align: center;
}

.timeline{
  margin: 50px 0px;
}

.memory {
  list-style-type: none; // Removes bullet points
  position: relative; // Positioning timeline relative to its container.
  margin: 0 auto; // object will sit centrally within parent container.
  width: 6px; // Why are you here width 6px? What is your purpose?
  padding-top: 50px; // Whitespace for timeline
  background: $clr-timeline; // Giving it a pretty background.
}

.memory::after {
  content: ''; // No content, rather inserting a morphed empty container, a shape.
  position: absolute;
  
  left: 50%; // Horizontally center the element respective to its parent;
  transform: translateX(-50%); // move the element left exactly to 50% of its width
 
  bottom: 0; // Placing shape at bottom of memory box
  
  // Making a sweet little circle that marks this memory on the timeline
  width: 30px; 
  height: 30px;
  border: 2px solid black;
  border-radius: 50%;
  
  // Timeline circle before it becomes activated 'in-view'
  background: $clr-memoryPoint;
  transition: background .5s ease-in-out;
  
}

.memory.in-view::after {
  // Circle after it becomes activated 'in-view'.
  background: $clr-memoryPoint-active;
}

.memory-container {
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 15px;
  border-radius: 10px;
  background: $clr-memory;
  
  // Initially hiding the memory containers
  // They will reappear with application of class '.in-view'
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease-in-out;
}

.memory-container.in-view {
  transform: none;
  visibility: visible;
  opacity: 1;
}

.memory-container::before {
  content: '';
  position: absolute;
  bottom: 7px; // Why are you here? What does this 7px mean!?!?
  width: 0;
  height: 0;
  border-style: solid;
}

.memory:nth-child(odd) .memory-container {
  left: 45px;
  transform: translate3d(200px,0,0);
}

.memory:nth-child(odd) .memory-container.in-view {
  transform: none;
}

.memory:nth-child(odd) .memory-container::before {
  // Making that sweet little accordion that points to the left.
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent $clr-memory transparent transparent;
}

.memory:nth-child(even) .memory-container {
  right: 470px; // The mirror image of our leftward memory. 460px to the right = width (400px) + padding (15px) + relative positioning (45px) + ??
  // original author uses left: -439px?
  // Width of each div + Desired spacing - Width of each list item = 400px + 45px - 6px = 439px
  transform: translate3d(-200px,0,0);
}

.memory:nth-child(even) .memory-container.in-view {
  transform: none;
}

.memory:nth-child(even) .memory-container::before {
  // Making that sweet little accordion that points to the right.
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent $clr-memory;
}

/* ---- TIMELINE RESPONSIVENESS --- */

@media screen and (max-width: 900px) {
  // Making memory containers significantly smaller in the case of small screens.
  .memory-container {
    width: 250px;
  }
  .memory:nth-child(even) .memory-container {
    right: 320px; /* 250 + 45 - 6*/
  }
}

@media screen and (max-width: 600px) {
  .memory {
    margin-left: 20px;
  }
  
  .memory-container {
    width: calc(100vw - 91px);
  }
  
  .memory:nth-child(even) .memory-container {
    left: 45px;
  }
  .memory:nth-child(even) .memory-container::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent $clr-memory transparent transparent;
  }
}


            
          
!
            
              var memories = document.querySelectorAll(".memory-container"); // All the memories that appear as we scroll down the timeline
var circles = document.querySelectorAll(".memory"); // The greater memory element, but visually, simply the circle attached to the timeline.

function elementInView(el) {
  // The vertical distance between the top of the page and the top of the element.
  var elementOffset = $(el).offset().top;
  // The height of the element, including padding and borders.
  var elementOuterHeight = $(el).outerHeight();
  // Height of the window without margins, padding, borders.
  var windowHeight = $(window).height();
  // The vertical distance between the top of the page and the top of the viewport.
  var scrollOffset = $(this).scrollTop();

  if (elementOuterHeight < windowHeight) {
    // Element is smaller than viewport.
    if (scrollOffset > (elementOffset + elementOuterHeight - windowHeight)) {
      // Element is completely inside viewport, reveal the element!
      return true;
    }
  } else {
    // Element is larger than the viewport, handle visibility differently.
    // Consider it visible as soon as it's top half has filled the viewport.
    if (scrollOffset > elementOffset) {
      // The top of the viewport has touched the top of the element, reveal the element!
      return true;
    }
  }
  return false;
}

function handler() {
  for (var i = 0; i < circles.length; i++) {
    if (elementInView(circles[i])) {
      memories[i].classList.add("in-view");
      circles[i].classList.add("in-view");
    }
  }
}

$(window).on('DOMContentLoaded load resize scroll', handler);
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console