<section class="navigation">
  Notifications
  <ul class="notifications">
    <li>
      <p>Something new happen and you might want to check out here</p>
      <time datetime="19:12">1 minutes ago</time>
    </li>
    <li>
      <p>Knight upload new photos here</p>
      <time datetime="19:08">4 minutes ago</time>
    </li>
    <li>
      <p>Amy posted new ride here</p>
      <time datetime="19:07">5 minutes ago</time>
    </li>
    <li>
      <p>Nik updated his photo</p>
      <time datetime="19:04">8 minutes ago</time>
    </li>
    <li>
      <p>Amy updated her photo</p>
      <time datetime="19:03">9 minutes ago</time>
    </li>
    <li>
      <p>Nik uploaded new photos here</p>
      <time datetime="19:01">11 minutes ago</time>
    </li>
  </ul>
</section>
<article>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum lorem vitae ante viverra dignissim. Phasellus ac hendrerit orci. Ut pharetra commodo diam, sed posuere nisl consequat non. Curabitur lacinia ac lacus quis posuere. Nulla ut tincidunt augue. Nunc id dui ipsum. Mauris convallis odio velit, ac fermentum sapien ornare sed. Quisque id elit et eros posuere lacinia. Donec in nisi ut augue semper malesuada sed vel leo. Integer massa orci, tincidunt at sapien posuere, facilisis consectetur orci. Sed laoreet lorem eu orci ullamcorper mattis. Duis sed tempus elit. Maecenas rutrum velit a augue vestibulum, sit amet dignissim nunc tempor. Nam sed erat sed felis rutrum dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris tincidunt dolor vitae mauris commodo luctus.
  </p>
  <p>
    Pellentesque fermentum posuere malesuada. Morbi eget dignissim est. Donec dictum commodo erat, ac dignissim nibh tempor nec. Vivamus laoreet nisi at pulvinar tincidunt. Maecenas mattis consequat sem, quis eleifend nibh. Vivamus sed vulputate dui, quis cursus sem. Aliquam sed diam odio. Sed in scelerisque nulla, id porta neque. Suspendisse finibus erat libero, et pulvinar urna laoreet a. Morbi pellentesque odio sit amet sapien vestibulum congue. Suspendisse posuere accumsan quam, a imperdiet ipsum fringilla eget.
  </p>
  <p>
    Fusce euismod porta nibh. Curabitur vel nulla non tellus finibus hendrerit nec vel ante. Nunc id neque non nibh elementum sodales non nec nisi. Donec volutpat vestibulum augue, et convallis orci sagittis in. Praesent aliquam vulputate ipsum, eget dapibus erat vehicula a. Sed turpis dui, semper quis gravida vel, pharetra eu justo. Morbi tincidunt ac risus vel gravida. Integer maximus rutrum tempor. Morbi eget gravida augue. Pellentesque faucibus porttitor magna eget fermentum. Integer nec facilisis magna, quis ornare sapien. Phasellus at ante est. Sed hendrerit est eu volutpat maximus.
  </p>
  <p>
    Phasellus gravida eu mi eu suscipit. Ut ac varius lectus, et posuere ex. Cras ullamcorper diam id elit viverra tristique. Cras at rutrum diam. Pellentesque vel suscipit dolor. Nullam rutrum placerat massa, sollicitudin feugiat turpis. Vestibulum malesuada at turpis vel facilisis. Vivamus vitae nisi posuere, mollis nulla pulvinar, ultrices enim. Vestibulum eleifend libero nec pretium sodales. Morbi iaculis ut odio ut condimentum.
  </p>
  <p>
    Nam et egestas lectus. Quisque facilisis fermentum turpis sed vehicula. Quisque tempor lacus at metus lobortis, non sollicitudin tortor ultrices. Suspendisse sagittis sapien eget aliquet lobortis. Nam fringilla fringilla augue. Quisque sed lectus tincidunt, auctor dui gravida, posuere urna. Duis ante quam, ullamcorper eget odio nec, facilisis consequat libero. Duis blandit eget metus at vulputate. Donec ornare mauris dignissim porttitor luctus. Praesent dapibus varius lacinia. Pellentesque at justo ornare, elementum lectus ut, egestas ligula. In sed augue nec arcu convallis feugiat id sit amet risus. Nam lacus magna, luctus a consequat sit amet, faucibus non ligula.
  </p>
  <p>
    Donec ut erat eu urna facilisis sollicitudin non eu ante. Curabitur bibendum sapien odio. Phasellus eu est viverra felis bibendum mollis. Maecenas vitae posuere metus, vel auctor augue. Vivamus sit amet venenatis lorem, ac interdum nisi. Vestibulum ut scelerisque mauris. Etiam ullamcorper ornare velit, vel elementum elit vestibulum non.
  </p>
  <p>
    Vivamus ac laoreet risus. Pellentesque malesuada metus quis neque fringilla, ut luctus est ultrices. Curabitur suscipit porttitor quam eget tincidunt. Phasellus sit amet efficitur urna. Duis placerat congue ante, sit amet tristique dui dictum vel. Vivamus pellentesque lorem non vestibulum volutpat. Sed rutrum leo sed nisl varius, tristique aliquam lacus varius.
  </p>
  <p>
    Etiam eros ipsum, suscipit at diam ut, pellentesque pharetra erat. Vestibulum vel euismod enim, vitae finibus velit. Proin in purus vulputate, dictum enim vel, suscipit sem. Donec suscipit sed risus nec malesuada. Duis nisl lacus, fermentum iaculis blandit id, cursus cursus nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur imperdiet, dui non convallis porta, mauris enim euismod odio, eget interdum ex ex in felis. Maecenas eu ullamcorper dolor, quis laoreet orci. Duis molestie augue in feugiat accumsan. Nunc pretium accumsan sapien a efficitur. In eget hendrerit nisi.
  </p>
  <p>
    Curabitur hendrerit nisl efficitur imperdiet tristique. Integer quis maximus neque. Duis vulputate urna nunc, sit amet suscipit dolor ullamcorper eget. Integer nec consequat lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce ut lacus at felis bibendum vehicula. Sed at volutpat sapien. Proin sed consectetur nisi. Cras sed orci risus. Nulla in leo id massa molestie malesuada. Cras vitae nisl sed dui auctor vestibulum vel ullamcorper mauris. In hac habitasse platea dictumst. Cras neque turpis, finibus at ullamcorper eu, efficitur nec felis. Sed suscipit quis mi sit amet laoreet. Suspendisse convallis finibus urna ut ullamcorper. Morbi ornare in leo a molestie.
  </p>
  <p>
    Nullam eu libero tempus, cursus lectus vitae, dapibus libero. Aliquam lacinia suscipit nulla, et dapibus metus ullamcorper in. Cras accumsan dictum eros, nec suscipit erat consectetur et. Ut porttitor dui dolor, vitae fringilla ipsum placerat a. Donec feugiat purus ut vestibulum mollis. Fusce maximus eros lectus. Integer gravida sed risus eu rhoncus.
  </p>
  <p>
    Pellentesque eu ante ut magna gravida condimentum. Quisque vulputate lorem rhoncus mauris condimentum imperdiet. Sed malesuada eu leo vel lobortis. Sed hendrerit et lacus ac semper. Morbi rhoncus eros dui. Integer a diam nibh. Quisque molestie dictum iaculis. Pellentesque vel dignissim tortor. Maecenas varius feugiat dictum. Curabitur suscipit purus id nibh laoreet, in aliquam ligula ultrices. Suspendisse porta, ipsum at semper efficitur, sem mi commodo neque, vitae varius mi sem sed tellus. Curabitur non varius purus.
  </p>
  <p>
    Sed id augue sit amet neque lobortis imperdiet. Nullam in viverra massa, ut rhoncus nibh. Curabitur interdum lobortis condimentum. Praesent molestie nisi mollis, tincidunt ante at, ornare leo. Sed dictum elit metus, vel bibendum tellus posuere vel. Sed elit metus, finibus fringilla luctus sit amet, tempor eget libero. Duis vel porta sapien, a mattis elit. Phasellus auctor lorem risus, nec posuere sapien volutpat quis. Sed metus metus, eleifend et hendrerit sed, efficitur pulvinar nisi. Integer tincidunt laoreet metus eget convallis. Praesent ac bibendum nulla. Proin maximus consectetur ligula nec aliquam.
  </p>
  <p>
    Quisque sollicitudin sapien id consectetur semper. Donec tincidunt vitae tortor vel eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae lectus dapibus, euismod purus vel, tincidunt risus. Phasellus ac tincidunt elit, vitae euismod eros. Etiam id nisi quis massa rutrum condimentum nec ut eros. Pellentesque mattis ultricies interdum. Duis lobortis et enim non convallis. Mauris augue lacus, ultrices id ligula vel, volutpat lobortis erat. Praesent rhoncus mollis accumsan.
  </p>
  <p>
    Morbi accumsan laoreet urna, ut aliquam ipsum pulvinar ac. Sed sed est ac magna ultricies efficitur eget nec magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean vestibulum vitae magna nec auctor. Praesent vel nisl ut est convallis sollicitudin vel ut urna. Integer vestibulum massa sit amet nisl semper, id mollis purus mollis. Vestibulum posuere congue neque, sit amet tempor diam finibus quis. In venenatis est sed urna varius feugiat. Maecenas tincidunt ultrices nulla, eget convallis enim. Sed nec volutpat erat.
  </p>
  <p>
    Aenean ornare interdum lectus, in euismod neque rutrum sit amet. Morbi in lobortis nisi. Nullam sem est, fermentum eu arcu a, tincidunt lacinia dolor. Sed accumsan enim odio, et ullamcorper justo molestie id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla rhoncus, dolor eu consequat auctor, tortor lacus venenatis ipsum, sed eleifend tortor est sed justo. Quisque condimentum vitae libero non consectetur. Donec mattis urna lacinia, feugiat metus sit amet, tincidunt justo. Mauris vestibulum mauris est, et vulputate tellus convallis at. Nunc ac gravida nibh, in consequat tortor. Quisque sed libero a nulla tempor varius.
  </p>
  <p>
    Aliquam et porttitor justo, ac maximus eros. Morbi eu nisi hendrerit, tristique leo eget, malesuada quam. Nam ut metus est. Cras pellentesque nec ipsum quis dictum. Maecenas at rutrum quam. Cras laoreet hendrerit nisi, a fermentum libero sollicitudin id. Proin dictum dignissim nibh, a euismod ante rhoncus vitae. Praesent sodales nunc at ornare facilisis. Nulla ac finibus elit, vulputate porta mi. Praesent imperdiet faucibus magna et pulvinar. Morbi semper maximus turpis, quis cursus metus molestie ut.
  </p>
  <p>
    Nam vitae ex sed lectus suscipit placerat sit amet faucibus ipsum. Donec maximus lectus at elit dictum, ut fermentum metus eleifend. Nam eu cursus est. Vestibulum vel nisi augue. Nam facilisis bibendum nulla, non mattis neque blandit nec. Mauris in magna faucibus lorem mollis imperdiet ut posuere lectus. Sed sit amet accumsan eros, eu consectetur velit. Praesent nunc sem, hendrerit ac odio sit amet, imperdiet sagittis mi. Vivamus semper, tortor ut lacinia gravida, lacus nunc scelerisque sem, et sodales lacus sem ut dolor. Duis a gravida purus, id pulvinar nibh. Donec consequat eu ipsum nec gravida. In luctus sem non pulvinar tristique. Phasellus suscipit malesuada justo, a sollicitudin turpis ultricies id. Nunc rhoncus interdum enim, vitae luctus neque suscipit vel. Aliquam at suscipit nulla.
  </p>
  <p>
    Curabitur interdum consequat sollicitudin. Cras sodales ultricies erat sit amet commodo. Nulla viverra, est in venenatis porta, magna erat iaculis ligula, non eleifend velit mi et erat. Suspendisse porta ex mi, nec tristique magna malesuada vitae. Ut eu sollicitudin eros, luctus ullamcorper massa. Cras in blandit nunc, id rutrum neque. Nulla mattis dolor vel pharetra placerat. Curabitur faucibus urna sed lacus blandit pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris condimentum sapien magna, quis convallis libero finibus vel. Duis semper tellus at quam faucibus, ut dignissim metus commodo. Nam ante nisl, fringilla suscipit laoreet eu, elementum tincidunt mauris. Duis ac lectus ante. Proin quis magna in sapien facilisis hendrerit.
  </p>
  <p>
    Suspendisse dapibus, neque ac pretium facilisis, ligula urna ullamcorper erat, eget ornare nisl elit nec lacus. Ut nec purus tempor, tempor risus sit amet, tristique ipsum. Vivamus at leo cursus, auctor dolor in, euismod dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eleifend accumsan venenatis. Aliquam eget nulla finibus, egestas dui eu, tincidunt ligula. Cras et maximus eros. Sed ligula velit, commodo eu massa vitae, porta pellentesque mauris. Praesent et purus dapibus, elementum magna vel, euismod felis. Ut gravida sapien eu felis porta ultrices nec id quam. Quisque id euismod orci. In cursus vel mauris eu vehicula. Nullam tempus ligula sed euismod mollis. Aenean vestibulum dignissim ipsum consectetur consectetur. Aliquam est ex, euismod sit amet tellus at, cursus viverra eros.
  </p>
  <p>
    Cras sagittis orci ut lacus commodo eleifend. Nam porttitor magna augue, non condimentum ante fringilla vitae. Nam mollis nulla vitae quam porta euismod. Aenean maximus lacus sit amet egestas commodo. Duis tristique lectus non tristique facilisis. Vivamus in tellus massa. Etiam facilisis ullamcorper tellus non pretium. Curabitur id eros quis leo eleifend aliquet vel et nibh. Nulla maximus mi a eros accumsan pretium. In bibendum accumsan ante, non elementum ante accumsan et. Etiam ut tellus eleifend, fermentum justo id, dictum quam. In eget neque sem. Nulla facilisi. In faucibus, justo sit amet suscipit suscipit, velit est euismod mauris, blandit sodales urna nibh ut lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  </p>
  <p>
    Suspendisse porta ipsum enim, a eleifend lectus venenatis ac. Nulla vel pulvinar metus, vitae varius libero. Phasellus facilisis venenatis felis, non blandit nisl molestie vel. Nullam non felis ac lacus scelerisque dapibus ut non dolor. Pellentesque nec varius nisl. Fusce mi risus, lacinia et risus pulvinar, condimentum molestie leo. Proin sit amet viverra diam, id accumsan ligula. Cras volutpat scelerisque sapien in tincidunt. Aenean velit erat, rhoncus eget condimentum nec, aliquet non quam. Vivamus tempor est in vulputate fringilla. Ut malesuada risus quis est sagittis maximus. Mauris erat sapien, congue vel pharetra quis, fringilla sed ligula.
  </p>
  <p>
    Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin faucibus risus nunc, et tincidunt eros commodo eu. Phasellus varius, elit quis lacinia bibendum, velit mauris fermentum arcu, a laoreet arcu erat at dolor. In eleifend enim nec nibh imperdiet pretium. Mauris et neque ante. In sit amet hendrerit tellus. Nulla vehicula, tortor in vestibulum porta, lacus nulla ultrices velit, tincidunt tincidunt quam augue id felis. Duis vehicula turpis vel est condimentum, eget commodo nibh imperdiet.
  </p>
  <p>
    Etiam quis condimentum dolor, at feugiat urna. Praesent pretium massa vel ante luctus mattis. Cras eu turpis velit. Ut a sem non metus venenatis lobortis. In hac habitasse platea dictumst. Vivamus id ante hendrerit, vulputate lacus molestie, tincidunt dui. Phasellus mattis sapien a ante maximus aliquam. Vivamus efficitur tortor massa, eu euismod eros auctor at.
  </p>
  <p>
    Donec lobortis interdum vulputate. Vivamus eget facilisis arcu. Nam pharetra viverra augue, ut finibus felis semper ac. Cras porta arcu ac arcu tincidunt, sed pharetra elit ultrices. Suspendisse tristique sodales massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam accumsan consectetur risus et sodales. Nam nec arcu non tellus venenatis bibendum in nec nisi. Nulla ac pellentesque sapien, quis venenatis nibh. Proin id magna risus. Curabitur quis nisi a dui scelerisque pretium.
  </p>
  <p>
    Sed sit amet tortor dictum, sodales velit vitae, consequat magna. Nam nec ex odio. Sed lobortis erat nec sapien tristique, id dictum felis luctus. Etiam eu feugiat felis. Curabitur vitae aliquam ipsum, et fringilla libero. Nam quis metus et dui molestie iaculis. Suspendisse condimentum dolor non odio vestibulum, eu sollicitudin orci lobortis. Nullam in sollicitudin orci.
  </p>
  <p>
    Cras ultrices, nulla quis suscipit mollis, ante massa congue lectus, id suscipit quam dolor vitae velit. Sed eget bibendum velit. Maecenas eget rhoncus arcu. Phasellus augue lorem, commodo non pretium eleifend, molestie nec ex. Donec pulvinar imperdiet augue. Sed eu libero felis. Nunc malesuada, orci eu feugiat rhoncus, tellus est vehicula metus, ac scelerisque tortor quam sed mi. Sed ullamcorper risus metus, non mollis augue lacinia sollicitudin. Curabitur tempus sem imperdiet nisi suscipit ullamcorper eu eget nibh. Sed molestie nibh est, blandit consequat nulla sagittis quis. Sed finibus ipsum ex, eget fringilla ante dignissim a. Phasellus tincidunt magna non hendrerit laoreet.
  </p>
  <p>
    Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas dictum enim enim, vel varius neque tempor sit amet. Suspendisse potenti. Mauris id consectetur odio. Suspendisse eu nulla non elit dictum sagittis. Nunc aliquet erat id justo dictum hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent ultricies lectus id est imperdiet, id auctor ex tincidunt. Sed metus sapien, elementum ac sagittis ac, mollis ut augue. Suspendisse potenti. Vivamus volutpat orci ut nibh auctor elementum. Mauris at metus quis nisi efficitur ultricies nec in purus. Nulla id lacus nunc. Donec purus tortor, tempor at leo ut, varius dictum est. Maecenas imperdiet, lectus nec ullamcorper porttitor, ligula lorem vehicula dolor, nec pretium nisi nunc quis nisl. Vivamus ut blandit quam, quis aliquet metus.
  </p>
  <p>
    Phasellus eleifend dui non nisl elementum, ut sollicitudin ipsum consectetur. Proin at est porttitor, convallis ante eget, eleifend ligula. Ut massa neque, scelerisque eu tortor ut, faucibus aliquam turpis. Mauris molestie sed ante at tempor. Aenean efficitur vitae ex non lobortis. Integer ut leo suscipit, commodo turpis sit amet, lacinia libero. In vitae leo sed purus commodo bibendum. Aenean a mauris mauris. Proin maximus magna consequat nisl eleifend fermentum. Suspendisse iaculis pretium vehicula. Ut aliquet, magna sit amet vestibulum pulvinar, purus justo mattis nulla, sit amet scelerisque odio orci id sem. Phasellus eget massa et libero ultrices ultricies at nec elit. In iaculis fringilla risus eu rhoncus. Morbi posuere erat quis urna tincidunt pretium.
  </p>
  <p>
    Mauris diam diam, luctus nec tincidunt ac, faucibus in augue. Nam in finibus dolor. Aliquam sed risus accumsan, gravida quam a, imperdiet ipsum. In gravida ultrices felis in ultrices. Vestibulum magna tellus, scelerisque vel hendrerit non, pellentesque eu nunc. Ut ut congue augue. Donec odio lacus, fermentum in sapien sit amet, accumsan lacinia lectus. Proin lobortis metus at semper dignissim. Phasellus ornare tortor in leo pharetra suscipit.
  </p>
  <p>
    Quisque purus nunc, luctus non interdum non, efficitur non leo. Vestibulum vestibulum, nisl eget tempor vestibulum, arcu erat imperdiet purus, sed gravida libero ligula eu lectus. Quisque pulvinar id urna nec imperdiet. Suspendisse sed dignissim sapien, at congue nisl. Proin a pellentesque nisi. Praesent tristique, orci et varius venenatis, arcu magna dictum lacus, sit amet sagittis arcu augue id dolor. Mauris quis vulputate erat. Mauris finibus purus odio, at commodo massa lacinia at. In aliquet eros vel felis tristique, vel efficitur urna elementum. In hac habitasse platea dictumst. Nulla non sem dictum, venenatis nisl vitae, rhoncus odio. Mauris semper, orci vel laoreet sagittis, neque justo interdum justo, nec consectetur ipsum magna in leo. Sed nibh ipsum, blandit et efficitur at, laoreet eget est. Maecenas ultrices elit ultricies libero hendrerit placerat. Praesent dictum est sit amet lorem mattis, placerat sollicitudin est aliquam.
  </p>
</article>
.navigation {
  padding: 0 1rem;
  position: relative;
  font-family: sans-serif;
}

.notifications {
  background: white;
  width: 250px;
  height: 300px;
  border: 1px solid grey;
  position: absolute;
  top: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

ul {
  list-style: none;
  padding-left: 0;
}

li {
  border-top: 1px solid grey;
  border-bottom: 0;
  padding: 0.5rem;
}

li:first-child {
  border-top: 0;
}

li:last-child {
  border-bottom: 1px solid grey;
}

time {
  color: grey;
  font-size: 0.8rem;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.