» CS 268: Lecture 9 – Position Continued

CS 268: Lecture 9 – Position Continued

March 3, 2020 by Chris Johnson. Filed under lectures, spring-2020, webdev.

Dear students:

Last time we started exploring the position property of CSS. We examined relative positioning only, but we didn’t see a compelling use case for why we’d want anything but static positioning. I hope to address that today by looking at fixed and absolute positioning, which can be used to achieve useful layout effects.

Fixed Position

An element with a fixed position is anchored against the viewport of the browser. This kind of positioning is often used to make what is called a heads-up display in games, which are UI elements like mini-maps and health bars that are laid over the screen and don’t move with the rest of the content.

Unlike relative positioning, the element does not leave its statically-positioned shadow box consuming space in the flow. The element is removed completely from the normal static flow.

We can make a message appear at the bottom of the screen alerting a user that a site uses cookies, like this:

The notice is structured with this HTML:

<div id="cookie-notice">
  <p>This site eats your cookies.</p>
  <span id="cookie-notice-closer">&#x2716;</span>
</div>

We apply some cosmetics with this CSS:

#cookie-notice {
  color: white;
  background-color: rgba(0, 0, 0, 0.9);
  padding: 10px;
  font-family: sans-serif;
  border-radius: 5px;
}

#cookie-notice p {
  margin: 0;
}

#cookie-notice-closer {
  color: rgb(255, 20, 20);
  cursor: pointer;
}

#cookie-notice-closer:hover {
  text-shadow: 0 0 3px white;
}

To push the X over to the right, we can use this Flexbox layout:

#cookie-notice {
  /* ... */
  display: flex;
  flex-direction: row;
}

#cookie-notice p {
  flex-grow: 1; 
}

To anchor the notice to the bottom of the page, we declare a fixed position and define just three of the edges:

#cookie-notice {
  /* ... */
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
}

The top and height will be automatically calculated based on the content.

To actually close the notice, we’ll need some JavaScript. We add a click event handler like so:

const cookieNotice = document.getElementById('cookie-notice');
const cookieNoticeCloser = document.getElementById('cookie-notice-closer');
cookieNoticeCloser.addEventListener('click', function() {
  cookieNotice.style.display = 'none'; 
});

Activity

With exactly one neighbor, claim your task on Crowdsource. (Everyone will be assigned task 1.) Then recreate the following slideshow:

Apply styling to the following starter code to match the page above:

<!DOCTYPE html>
<html>
<head>
  <title>...</title>
  <style>

/* Add your CSS here. */

  </style>
</head>
<body>
  <img id="photo">
  <div id="previous-button" class="navigation-button">&#x2b05;</div>
  <div id="next-button" class="navigation-button">&#x2b05;</div>

  <script>
// The list of image URLs
const urls = [
  'http://www.traveller.com.au/content/dam/images/g/u/n/q/h/0/image.related.articleLeadwide.620x349.gunpvd.png/1488330286332.png',
  'http://images.mentalfloss.com/sites/default/files/styles/mf_image_16x9/public/57159-istock-486456250.jpg?itok=pYToxS1l&resize=1100x619',
  'https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/australia/Quokka_Sam-West.jpg?crop=0,886,2365,1773&wid=1640&hei=1230&scl=1.4420731707317074',
  'https://cdn.newsapi.com.au/image/v1/0b92e2f32090adb38fc51da0673f0c38?width=1024',
];

// The index (serial number) of the current image
let i = 0;

// Grab handles onto HTML elements.
const previousButton = document.getElementById('previous-button');
const nextButton = document.getElementById('next-button');
const photo = document.getElementById('photo');

function advance(delta) {
  i = (i + delta + urls.length) % urls.length;
  photo.src = urls[i];
}

previousButton.addEventListener('click', () => advance(-1));
nextButton.addEventListener('click', () => advance(1));

advance(0);
  </script>
</body>
</html>

Some of the steps are not obvious, so I offer a couple of hints:

There’s not a right arrow that matches the left arrow. But you can turn a left arrow into a right arrow with a negative scale transform.
The image is sized to fit the viewport. The object-fit property determines how it fills the available space.

Submit your solution on Crowdsource.

Absolute Position

An element with an absolute position is anchored against the box of its nearest non-static ancestor. This kind of positioning is often used to make child elements appear in a spatial location within or near their parents.

Unlike relative positioning, the element does not leave a statically-positioned shadow box consuming space in the flow.

Bulletin Board

For our first example of absolute positioning, we’ll create this bulletin board of photos:

We start with this HTML structure containing three Polaroid div elements:

<div class="polaroid">
  <img src="pin.svg" class="pin">
  <img src="quokka.jpg" class="photo">
  <div class="label">quokka</div>
</div>

<div class="polaroid">
  <img src="pin.svg" class="pin">
  <img src="quokka.jpg" class="photo">
  <div class="label">cuddle bunny</div>
</div>

<div class="polaroid">
  <img src="pin.svg" class="pin">
  <img src="quokka.jpg" class="photo">
  <div class="label">night fury</div>
</div>

The basic layout is made of three inline-block elements laid over some cork, which we achieve with this CSS:

body {
  background-image: url('cork.jpg');
}

.polaroid {
  margin: 20px;
  background-color: white;
  box-shadow: -5px 5px 10px black;
  display: inline-block;
}

The labels use a special font, which we grab from Google Fonts with this link tag:

<link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet">

Now we can apply this style:

.label {
  text-align: center;
  font-family: 'Permanent Marker', cursive;
  font-size: 24pt;
}

The photos are square with some padding around the edges, which we can achieve with these style rules:

.photo {
  display: block;
  padding: 10px 10px 0 10px;
  object-fit: cover;
  width: 400px;
  height: 400px;
}

The pins should be placed on top of the photos. This is a call for absolute positioning! We can center the image at the top of its parent Polaroid with this style:

.pin {
  width: 100px;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: -9px;
}

But we need to establish who the parent is. The browser will walk up the document structure and locate the first non-static ancestor. We want that to be the Polaroid. What do we do to make it non-static? We must make it either fixed, absolute, or relative. Since we want the photos to flow, so we use relative.

.polaroid {
  /* ... */
  position: relative;
}

For a little garnish, we rotate the Polaroids a bit with these transform properties:

.polaroid:nth-child(1) {
  transform: rotate(5deg);
}

.polaroid:nth-child(2) {
  transform: rotate(-3deg);
}

.polaroid:nth-child(3) {
  transform: rotate(-1deg);
}

Menus

For our next example, we’ll add dropdown menus to our navigation links.

Instead of starting from scratch, we’ll build off this structure, which is similar to one of our previous activities:

<!DOCTYPE html>
<html>
<head>
  <title>...</title>
  <style>
body {
  margin: 0;
}

main {
  padding: 10px;
}

header h1 {
  margin: 0;
  padding: 10px;
  background-color: black;
  font-family: sans-serif;
  color: white;
}

.categories {
  border-top: 1px solid white;
  list-style: none;
  background-color: gray;
  color: white;
  display: flex;
  justify-content: flex-start;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

.category {
  padding: 10px;
  border-right: 1px solid white;
}

.dropdown li:hover, .category:hover {
  background-color: rgb(10, 10, 10);
}

  </style>
</head>
<body>
  <header>
    <h1>Oprah 2020: She's More Than Talk</h1>
  </header>

  <nav>
    <ul class="categories">
      <li class="category">
        Alpha
        <ul class="dropdown">
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
        </ul>
      </li>
      <li class="category">
        Beta
        <ul class="dropdown">
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
        </ul>
      </li>
      <li class="category">
        Gamma
        <ul class="dropdown">
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
        </ul>
      </li>
    </ul>
  </nav>

  <main>
    ...
  </main>
</body>
</html>

We first establish each category label as an anchor point with this style:

.category {
  /* ... */
  position: relative;
}

Then we style the dropdown menus, which are children of the category items, as follows:

.dropdown {
  position: absolute;
  background-color: gray;
  list-style: none;
  padding: 0;
  margin: 0;
  top: 100%;
  left: 0;
}

We anchor the top edge to be 100% below the parent’s top edge and the left edge to be aligned with the parent’s left edge.

We only want the a menu to be visible when its category is covered, so we add these rules:

.dropdown {
  /* ... */
  display: none;
}

.category:hover > .dropdown {
  display: block;
}

We apply this style to separate the menu items:

.dropdown li {
  border-top: 1px solid white;
  padding: 10px;
  margin: 0;
}

The right edge of the menus will default to match the parent’s right edge, which means each menu will have a slightly different size. We could fix the size, but that might be hard to get right in a sustainable way. Instead, we can just suppress wrapping with this style:

.dropdown li {
  /* ... */
  white-space: nowrap;
}

TODO

Here’s your TODO list for next time:

Make note that we will have our midterm exam during lecture on March 19. It will be a hand-written exam with questions designed to draw out your understanding of HTML and CSS. Topics will include things we have discussed in lecture.
Your project 1 must be completely turned in by the end of Friday, March 20. This includes the critique from your client. I’ll share a grading rubric with you soon.

See you next time.

Sincerely,

P.S. It’s time for a haiku!

two graves
Dad’s: Loving Father
Son’s: position: absolute
left: 2.5ft

P.P.S. Here’s the code we wrote together in class…

cookies.html

<!DOCTYPE html>

<html lang="en">
  <head>
    <title>...</title>
    <style>

#cookie-notice {
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  font-family: sans-serif;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: fixed;
  bottom: 10px;
  left: 10px;
  right: 10px;
}

#cookie-notice > p {
  margin: 0;
}

#cookie-notice-closer {
  color: red;
  cursor: pointer;
}

    </style>
  </head>

  <body>
    <div id="cookie-notice">
      <p>This site eats your cookies.</p>
      <span id="cookie-notice-closer">&#x2716;</span>
    </div>

    <script>

const cookieNotice = document.getElementById('cookie-notice');
const cookieNoticeCloser = document.getElementById('cookie-notice-closer');
cookieNoticeCloser.addEventListener('click', () => {
  cookieNotice.style.display = 'none';
});

    </script>

    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut cumque maxime quae inventore qui possimus architecto recusandae non quaerat, ipsam officia provident reiciendis iure nesciunt nam assumenda animi esse eum dolores, incidunt similique. Est corrupti harum sapiente saepe iste temporibus voluptatem odio, incidunt accusantium eaque delectus dicta impedit quam a earum dolore autem ipsa, soluta ea consequatur ullam facilis? Corrupti sit minima dignissimos unde asperiores deleniti ea omnis, laboriosam eveniet corporis exercitationem veritatis doloribus rerum necessitatibus? Architecto assumenda iure incidunt consequuntur error sit recusandae impedit minima necessitatibus reiciendis ex eius velit eveniet, deleniti, illo veritatis eum ratione corporis. Iure, facere?</p>
    <p>Repellat, aliquam cumque ad mollitia esse provident obcaecati illum voluptatum omnis sequi labore nemo corporis natus animi accusantium fugiat molestias amet eius. Rerum, quam sint excepturi quisquam fuga obcaecati earum veritatis voluptatibus. Nihil, placeat! Fuga ea at officiis omnis impedit error est sed praesentium officia debitis incidunt libero, voluptate saepe recusandae autem asperiores, commodi, eaque doloribus iure accusamus mollitia odio illum. Distinctio ducimus minima ratione unde veniam dolor omnis, rerum, saepe odio est et necessitatibus sunt totam placeat nihil quos dicta fugit dolore autem soluta in laborum vel. A porro sit exercitationem! Voluptatum nihil cumque, impedit voluptates ad enim ipsam?</p>
    <p>Quod minima id culpa assumenda voluptatum debitis eveniet rerum, rem, expedita velit quam non officiis voluptates saepe consequatur neque repellat reiciendis ut blanditiis delectus. Eveniet quibusdam ipsam ea, eligendi provident sapiente voluptas veniam cumque libero labore vero dicta iure neque repudiandae, quis hic! Quam autem, eos deserunt id omnis quis nostrum vel odio molestiae praesentium ex, corporis a consequuntur. Deleniti, at, esse nemo consequuntur neque excepturi nostrum dolor iste aut sed velit quibusdam cumque eaque architecto alias asperiores sint, animi vel voluptates voluptatibus deserunt laborum. Architecto facilis tenetur maiores ex distinctio necessitatibus, dolores mollitia! Aspernatur, culpa! Quod enim perferendis labore.</p>
    <p>Modi officia delectus corporis error vitae totam possimus perspiciatis voluptate veniam dolorum, eaque ab nemo quidem repellendus soluta ducimus iste tenetur numquam dicta similique vel voluptatem quaerat vero? Assumenda aut dignissimos atque magnam eos tenetur, sed hic at amet unde impedit quisquam, minima enim asperiores dolore nobis voluptatum necessitatibus! Aspernatur fugit ut deserunt ipsam dolorum error nisi itaque eaque, sunt ipsum tenetur vel inventore facere praesentium velit reiciendis amet enim nihil soluta voluptate. Accusamus autem nostrum, ipsa iusto dignissimos earum cupiditate exercitationem molestias error repellendus totam beatae quos facere libero repudiandae quidem perspiciatis aliquam quas vero, pariatur doloremque dolore. Maiores.</p>
    <p>Dolorem eius eum quo ratione. Impedit harum in consectetur tenetur hic rerum provident distinctio, debitis, eos quo voluptatem non, est quibusdam nisi vitae sunt. Sapiente ullam architecto quos, iure enim ipsam alias ad a iusto accusamus in velit ratione quasi sed dolorem delectus magni dolore. Nam voluptatum perferendis atque dicta ex sunt mollitia quisquam blanditiis. Possimus eveniet ratione hic provident quos quo necessitatibus, facilis libero magnam numquam delectus id? Molestiae quisquam porro numquam velit ut mollitia optio quos ex reiciendis exercitationem, rerum praesentium voluptate amet alias dolorem fuga debitis. Neque aut iure mollitia, error inventore quod reprehenderit fuga recusandae libero?</p>
    <p>Voluptas dolorem quisquam itaque quasi suscipit, alias aperiam aliquam tempore commodi deserunt dicta, nam saepe sapiente mollitia numquam, vero vitae dolor quae minima dignissimos dolorum obcaecati repudiandae? Assumenda veniam soluta natus minima doloremque porro dolore ea, asperiores at quas accusamus recusandae modi delectus ab ratione aliquam sint possimus cupiditate inventore doloribus mollitia quaerat! Nihil, ipsam mollitia! Molestiae amet recusandae aliquid nesciunt accusantium rerum aperiam ipsam autem id magni tempora, voluptatibus unde quia minus illum natus eligendi perspiciatis dignissimos est porro? Quibusdam, beatae! Autem numquam fugiat voluptatum ullam adipisci fuga, incidunt aspernatur tempore error magni sunt reiciendis officia enim, illum dicta?</p>
    <p>Accusantium totam voluptatibus, eligendi explicabo hic quis possimus laborum, corporis doloremque eveniet deleniti omnis amet nisi delectus velit eius repellat asperiores nam sapiente quo inventore unde sequi? Non quisquam adipisci sit facere iusto hic, sed expedita repellat quidem pariatur animi quia earum enim cumque maiores veniam. At tempora labore quod asperiores explicabo voluptates atque quasi doloribus quaerat obcaecati natus necessitatibus quae unde, repudiandae delectus magnam commodi vero modi itaque. Facere beatae illo distinctio dolorum dolores. Necessitatibus ducimus quibusdam accusantium culpa reprehenderit provident maiores? Ab atque amet molestiae tenetur? Voluptatibus, quidem nulla! Possimus nihil repudiandae unde explicabo ducimus perspiciatis autem accusantium!</p>
    <p>Animi iusto esse tempora illum earum, culpa quia eius at, vero dolore laboriosam. Sequi laborum minima suscipit! Aliquid laborum id necessitatibus nostrum. Expedita deleniti id dolore quidem placeat. Voluptates iusto eos laborum eaque. Totam quaerat asperiores aliquid, quod esse ipsa recusandae dolorum hic. Beatae repudiandae explicabo perspiciatis ipsum optio, similique quo commodi eum inventore nihil sint corporis deserunt aut? Provident eligendi consequatur autem illo? Facere commodi ratione nulla, veniam, fugit eius aliquid, consequatur hic totam minus quis dignissimos quisquam molestias repellendus nam unde molestiae eum natus debitis! Labore, ut exercitationem quas enim doloremque sint aliquam excepturi eveniet veritatis ipsam? Maxime?</p>
    <p>Impedit aliquid aspernatur et natus praesentium, ea eligendi repellat earum veritatis nisi. Possimus repellat deserunt corrupti perferendis quia fugiat eius quidem magnam! Voluptate rerum magnam, consectetur consequuntur neque dignissimos eligendi eveniet assumenda sint quasi iure adipisci minus accusamus ullam earum aliquid libero architecto minima aperiam deserunt, alias quas natus ipsum! Delectus accusamus mollitia non similique illo consectetur ratione tempore odio? Ipsam dolor aperiam, id minima dolores dolorum nihil ex corrupti magnam asperiores voluptatum ut assumenda? Ipsam ex cumque iste nostrum laboriosam consequuntur amet harum sunt atque magni, facere ad modi aliquid rem distinctio voluptate ut quas, cum dignissimos. Dignissimos, commodi.</p>
    <p>Maxime, accusantium tempora? Recusandae deserunt ipsam at modi ducimus dolor repellat sint assumenda earum cupiditate, quibusdam quaerat voluptatum rem ullam ipsa. Quae officiis sed repudiandae quis blanditiis repellendus doloribus vero, iure saepe dignissimos aliquam explicabo impedit distinctio eaque quos recusandae nam tempora placeat laudantium ex eveniet ea accusamus ullam ab? Vero corporis fuga maxime eligendi nihil consequuntur rem nostrum dolorum adipisci voluptatibus repellat vitae labore dicta quos tempora ea deleniti, ipsam rerum ab eius distinctio earum sint odit. Quibusdam culpa harum accusamus aut, repudiandae nobis commodi inventore maxime! Eveniet, quam iure? Harum libero placeat officiis praesentium at fuga ex fugiat.</p>
    <p>Assumenda quidem nam voluptatem sed, corporis ad ex incidunt omnis veritatis aperiam recusandae eligendi esse eveniet reiciendis dolorum enim officia dolore aliquid placeat, ipsam id rerum hic! Praesentium, sit blanditiis cupiditate autem, fugit dignissimos repudiandae facere aliquid modi magni nobis id sed commodi. Modi, molestiae nulla? Vitae, nemo molestias doloribus, quisquam repellat nobis perferendis aut debitis, exercitationem a consequatur iure blanditiis? Repellendus mollitia, culpa nobis non enim, quia blanditiis eveniet incidunt animi nostrum molestiae at repudiandae ex ut voluptatum autem! Beatae voluptate eum dolorum enim, qui nam aspernatur, molestiae voluptatem provident sed iusto nisi culpa quas fugit voluptatum voluptates quod.</p>
    <p>Iure molestias commodi quae vitae in natus reprehenderit, possimus, voluptatum, iste corrupti non! Culpa cupiditate iusto incidunt tempore fuga assumenda enim id deserunt officia odio voluptas, maxime laborum iste exercitationem repellat, nobis voluptates voluptatem ab aspernatur aut provident veniam, tenetur sapiente. Itaque, soluta ea doloremque beatae odit cupiditate debitis, libero quos nemo, dolores rem nulla iure odio blanditiis quibusdam quaerat quae omnis dignissimos magni assumenda qui sit! Consequatur, laboriosam quis placeat ex atque saepe voluptatibus debitis earum, laudantium sapiente maxime voluptates asperiores nostrum enim sed modi quisquam. Quod fugiat voluptas commodi. Modi quam aspernatur a accusamus ab eius laborum nesciunt.</p>
    <p>Velit voluptatum, blanditiis mollitia similique molestiae distinctio. Ducimus illo ex dolores ullam odit aliquam quis eveniet ratione, voluptates harum eligendi illum veritatis quia at obcaecati non iusto laborum dignissimos nostrum, atque iure nulla. Facere blanditiis mollitia quas. Nesciunt veritatis neque eligendi repellendus laudantium cum ipsa dicta atque ipsum? Consequatur eius, cum ipsum nesciunt magni, vitae nihil iste nulla asperiores fugiat dolorem laboriosam nemo saepe fuga facilis animi voluptates officiis? Esse, dolore aliquid! Tempore porro eius aut eos saepe quasi, culpa illo architecto odit accusantium possimus itaque ratione, excepturi tenetur asperiores voluptate ab commodi nisi minus sapiente consequuntur blanditiis. Assumenda, aliquam.</p>
    <p>Ducimus non harum veritatis commodi? Voluptate adipisci quibusdam porro aperiam repellendus inventore fugiat debitis perferendis vero blanditiis cupiditate magni ad ratione voluptatum quas molestiae illum, illo sit ut neque, saepe nihil obcaecati harum voluptatibus! Voluptatem aliquid minus minima atque nostrum ex, veritatis explicabo possimus omnis expedita distinctio consectetur iste ab mollitia repudiandae, numquam quos nesciunt sed itaque cum voluptate. Fugit vitae nihil, accusamus veniam excepturi dolor quia accusantium, sit maiores aliquid laborum nisi! Minima sunt, consequuntur aut dolores nemo ab animi aspernatur, qui corporis saepe deserunt quae nostrum. Commodi impedit doloremque, enim inventore debitis beatae saepe deserunt ipsum harum maiores!</p>
    <p>Aut nemo sed, illo, sapiente accusantium molestias expedita eius laborum aperiam explicabo maiores quas assumenda voluptatibus molestiae eligendi sunt voluptatum illum vero rem nulla labore asperiores culpa? Cum illum molestias, ratione enim vero totam ad est placeat velit impedit porro dolor eius explicabo culpa sequi sunt odio dolores voluptatem temporibus ipsa. Repellendus libero doloribus dicta possimus voluptates eius saepe, iusto aut tempore praesentium sapiente, tempora cupiditate quae modi omnis dolore tenetur labore laboriosam error consequatur consectetur voluptatibus! Vel recusandae sed quisquam aliquid neque expedita ex consequatur adipisci itaque in delectus facere deserunt eos architecto saepe aspernatur, totam ab laborum optio!</p>
    <p>Tenetur error amet delectus consectetur sed quod consequuntur! Error iure commodi veritatis facere, ullam iusto eaque, omnis nemo incidunt impedit nesciunt quis! Maxime, velit? Consequuntur et nam minus dicta reiciendis, eaque aliquid officia aperiam repellat, maiores quasi esse facere doloremque explicabo earum neque voluptate. Expedita explicabo obcaecati earum corrupti temporibus at quos. Vitae deserunt sunt, dolore exercitationem autem beatae quia accusantium sed, velit ad iste porro, sequi dignissimos! Voluptas quos obcaecati amet nihil laborum voluptates placeat molestiae rem molestias cupiditate dignissimos ducimus, adipisci id neque dolorem provident, voluptatem, vel libero quod? Nobis officia odio explicabo rem minus quo necessitatibus qui?</p>
    <p>Deserunt odio dolor soluta veniam cumque! Quisquam, minus nulla. Voluptates autem nisi adipisci ducimus perferendis beatae consequuntur dicta doloribus quod porro totam consequatur aliquid id laudantium, sunt aperiam laboriosam alias quas eius itaque. Aliquam porro quae, accusantium aspernatur voluptatum nihil deleniti pariatur, provident aut ex quis ut dolore maiores quia totam? Inventore repellat in neque numquam non placeat eos sit animi nobis quisquam doloremque ducimus iusto suscipit maxime ipsa, corrupti quibusdam voluptatibus alias odio sint error. Fugit molestiae incidunt nemo exercitationem minus doloremque, tenetur corporis doloribus officia dolorem, veniam numquam et necessitatibus blanditiis impedit recusandae nisi quibusdam beatae tempora nulla?</p>
    <p>Nesciunt, adipisci officia soluta quod accusantium quis nostrum placeat pariatur, perspiciatis voluptas beatae voluptates ullam officiis provident cupiditate dolorum odio iusto, iste veniam voluptatum. Officia ex, minima omnis consequatur eaque molestiae est nesciunt nulla vero a placeat, repellat ad illo esse minus voluptatibus iste nisi eveniet quia unde sed fugiat! Corrupti magni excepturi architecto recusandae asperiores repudiandae doloribus sit cupiditate id natus, tempore illum ratione voluptatibus nulla reiciendis optio, autem veniam nemo est iusto odit. Voluptatibus in repellat quo! Ad ab ratione necessitatibus cupiditate qui voluptas ipsum dolore provident quae incidunt ea ullam animi debitis voluptatem, inventore laborum suscipit beatae?</p>
    <p>Sed quibusdam minima non odio qui voluptas minus at expedita vel ipsa? Itaque, suscipit? Doloremque cum repellendus facilis ratione iusto sed odio rerum iure numquam expedita sunt debitis quo totam tenetur, magnam necessitatibus temporibus architecto hic consequuntur nisi explicabo consequatur reprehenderit ducimus nostrum? Deleniti vero a veritatis nesciunt est? Tempore, explicabo eos tempora dolorum vel temporibus nostrum fugiat? Fugit nihil nesciunt voluptate quidem ad. Est quae quasi voluptatibus animi eum laborum, culpa unde dolorum adipisci alias dignissimos doloremque tempore corrupti aspernatur ipsum placeat, delectus dolores? Odit ut aut ad amet, ratione a explicabo quam totam facere accusamus quis nobis non.</p>
    <p>Rem delectus numquam blanditiis aliquid laudantium, similique labore voluptatibus est, ex et eaque laboriosam eos vitae iusto! Sint, explicabo itaque nisi excepturi cum exercitationem accusantium. Dicta veritatis odio eius alias vero corporis aliquid? Quaerat soluta quam, placeat eveniet dicta quidem amet quia, aut vero ullam incidunt reiciendis suscipit saepe numquam delectus animi enim culpa dolor? Consequuntur tempore labore eveniet? Perferendis iste dolorum cum, odit modi velit architecto mollitia blanditiis consectetur praesentium repellat illum dolor expedita vero corrupti delectus asperiores harum atque nam cumque ipsam itaque libero, quia minima? Sapiente vel accusantium blanditiis eligendi reiciendis facilis, non qui corporis quidem iusto?</p>
    <p>Assumenda corporis nam reprehenderit quos magnam. Nemo libero illo dolor provident deleniti eum rerum at vitae? Accusamus architecto hic nobis autem aspernatur fuga numquam quia doloremque voluptates facilis voluptas quasi laborum, dolorum vel eaque voluptatibus sed cum, possimus animi tempora! Cumque, numquam error vel debitis suscipit perspiciatis totam nulla, praesentium quibusdam natus eum laboriosam expedita voluptatem qui quam at! Perferendis perspiciatis quas provident quasi nisi magnam, quae eum ipsam distinctio rem qui praesentium asperiores. Voluptate, ea porro minima consectetur odio id praesentium alias, sequi, quos inventore reiciendis placeat omnis voluptatem cupiditate nulla et quia ipsam! Saepe suscipit nisi temporibus harum?</p>
    <p>Recusandae dolorem repellat, dolor vitae soluta nam tempora fuga similique consectetur beatae dolorum maxime inventore neque minus dolore laboriosam ea temporibus a provident, veritatis maiores eligendi deleniti excepturi. Tempora, illum? Fuga explicabo aliquam debitis magnam ullam laudantium totam iure. Nulla est, deserunt, voluptatibus ex eos minima necessitatibus obcaecati, iusto nobis dignissimos illo animi quasi. Optio repudiandae quibusdam laudantium fugit ipsum omnis necessitatibus aut earum est quis reiciendis voluptatum, impedit tenetur quas dicta laboriosam voluptates autem hic harum, dolorum rem consectetur, illum enim nihil. Reprehenderit temporibus sapiente sed quo veritatis accusamus perspiciatis. Ab dicta cupiditate ipsam cum fugit laborum perferendis ratione.</p>
    <p>Mollitia impedit atque adipisci iure quod ad culpa esse assumenda reprehenderit maxime a dicta voluptatem temporibus dolores minima ipsam iusto quos sit fugiat asperiores vel nulla, suscipit illo. A reiciendis corporis accusantium minima facere hic omnis, dolore minus fuga soluta provident nulla delectus! Quidem quaerat laudantium maxime eius deserunt fugiat minima magni vitae quas inventore doloribus numquam nisi ipsa, voluptatem nobis ratione! Laudantium commodi sint dignissimos placeat reprehenderit nam maiores est repellendus earum ducimus, ipsam magni recusandae maxime ipsum voluptatibus blanditiis pariatur ratione illo omnis laboriosam nobis expedita corrupti, voluptatum eaque? Deserunt iste, autem non dolorum dignissimos hic quaerat tempore?</p>
    <p>Amet soluta, laboriosam quo accusamus consequuntur fugit porro et maiores iure illum repellendus. Facere quas voluptate natus! Laborum incidunt aliquam nemo corporis ea temporibus ipsam quia fugit necessitatibus, quibusdam tempora hic praesentium rem reprehenderit? Fugit eum praesentium reiciendis quaerat expedita libero dolorem quo, incidunt ex dolores eius neque optio tempore saepe odio perspiciatis veritatis laudantium repudiandae similique debitis nobis. Autem quasi officia illo impedit? Quisquam quia, esse quo aliquam facilis aliquid quam quibusdam, laudantium fugiat id nesciunt similique perspiciatis obcaecati recusandae qui quis doloribus maxime consectetur vero voluptas. At sunt porro, nesciunt nisi accusamus praesentium odio laudantium aspernatur neque rerum!</p>
    <p>Fugit temporibus rem, deserunt accusamus animi deleniti laudantium illo asperiores a repellat similique, neque numquam aliquid, aperiam porro saepe nobis consequuntur. Reiciendis excepturi officiis omnis praesentium dicta aliquam beatae aut natus, vel exercitationem nulla sint ipsa assumenda ex, sed autem, facere accusamus! Alias rem numquam exercitationem quod, dolores voluptate nostrum odio! Velit nostrum veniam culpa, unde quo quam dolorum reiciendis consectetur. Magni, tenetur iste! At possimus fugit aspernatur consectetur nihil quo animi eveniet labore aut in ratione placeat quas, consequuntur, suscipit optio tenetur a repellat incidunt dicta saepe? Perspiciatis, ratione nihil. Pariatur saepe animi quod architecto! Vero magni voluptas et?</p>
    <p>Natus dolores, obcaecati excepturi, soluta dolor nisi distinctio modi explicabo ab consequatur cum consectetur! Excepturi ea quo necessitatibus earum eligendi rem animi incidunt tempora ut temporibus voluptate, molestiae aliquam inventore saepe accusantium. Facere fuga beatae veniam officia eaque, atque earum velit? Illum minima quasi quas possimus vero blanditiis dicta eius, numquam hic eum molestias enim! Ullam, perspiciatis. Ad repellat perferendis voluptates assumenda. Libero officiis quibusdam doloremque ipsam perspiciatis assumenda nulla rerum ullam? Alias, voluptate quae unde incidunt quaerat repellendus illo. Fugiat aspernatur architecto inventore sed at officia, magnam nulla odio distinctio nam. Enim nisi voluptates quibusdam veritatis corrupti dolorum minus!</p>
    <p>Repellat consequatur reiciendis dolor dolorum voluptate qui odio consectetur. Inventore nulla voluptates earum sit voluptatum qui hic fugit id illum officiis impedit, consectetur incidunt tempore possimus quae officia labore aut quaerat aperiam voluptate. Illum fuga corporis ipsam dolore pariatur consequatur at consequuntur corrupti rem, maxime tempora repellendus, necessitatibus quidem quas atque, sapiente animi! Ea molestiae impedit laudantium rem, in ratione id modi pariatur! Vitae error, esse quasi animi fugiat numquam. Dicta mollitia quo deleniti, tenetur impedit quaerat! Repellendus vero quas ipsum dolores illo placeat cupiditate, quibusdam vel labore eveniet, enim odio unde nam veniam eaque perspiciatis. Veniam a libero autem!</p>
    <p>Dolore, fugit in vero accusamus deserunt maxime odit itaque sit eum repellendus quod saepe deleniti delectus animi, fugiat inventore at aliquam, officia similique. Eveniet nemo temporibus repellat, asperiores harum odit natus? Sed, aperiam nihil illum consectetur molestiae temporibus ipsum quos ullam iure modi fugiat dolores magnam optio culpa obcaecati at nostrum aspernatur corrupti hic dignissimos esse quis. Pariatur totam tempora nemo ipsa consequatur qui dolores ipsam assumenda. Esse reiciendis, aliquam nam totam pariatur voluptate ipsam rerum eius maxime magni facilis molestias qui eveniet. Quisquam sint a, delectus autem exercitationem voluptatum perspiciatis illo reiciendis soluta architecto mollitia necessitatibus recusandae omnis explicabo?</p>
    <p>Fuga aliquid iure voluptas? Voluptas molestias sit suscipit corrupti? Vitae alias pariatur dolorem? Itaque veniam iusto illum praesentium illo iure dolor vitae rerum laudantium numquam perferendis aliquam iste temporibus, provident architecto quidem unde sint quam expedita atque fugiat incidunt hic doloribus? Minus, aperiam facilis, repellendus odit error quas delectus eum ex laudantium magni recusandae tenetur molestias voluptatum assumenda voluptate eveniet ipsa labore. Consequuntur corrupti iure autem, qui animi molestiae nisi cupiditate nobis tempora id quia dignissimos quidem doloribus optio sit facere odio a perferendis vitae dolorem officiis architecto cum. Veniam officiis beatae soluta quisquam, iure maxime ipsa vel! Veritatis, illo?</p>
    <p>Sequi modi aliquid consequatur. Suscipit dicta, quos debitis animi ab unde! Exercitationem explicabo quam, suscipit minus fugit odit consequatur perferendis. Ipsa aliquid voluptates iusto officia culpa animi pariatur tempore beatae totam, reiciendis cupiditate ipsum, exercitationem dolor debitis necessitatibus vero molestiae id facere dolorum! Error porro ratione omnis aliquam corrupti praesentium commodi quasi officia. Nihil nobis voluptatum, ea quas quidem, velit tenetur dolorem ab autem, illo eligendi! Omnis cumque animi adipisci? Dolorum hic sequi laborum officiis rem blanditiis, accusantium, provident optio voluptas repellendus reprehenderit dolore? Assumenda illum pariatur corporis maiores atque facere, quo ratione magni vero, fuga neque accusantium nihil blanditiis!</p>
    <p>Distinctio est perspiciatis cupiditate quae qui aut veritatis, recusandae, omnis a ut consectetur. Tempore cum corrupti, in, iste eligendi qui delectus voluptas libero dolores architecto odit distinctio veniam reiciendis eum alias ipsum consequuntur iusto, provident ea culpa adipisci. Qui facilis culpa et quia voluptate ea voluptatem numquam, asperiores cumque nam modi maiores cum atque explicabo, nobis natus, ullam dolorum! Qui explicabo iste quae hic quas quia illo quo inventore pariatur. Et qui officiis beatae nulla culpa natus aut nisi amet! Omnis, libero eaque iusto reiciendis consequuntur fugiat in aperiam consequatur atque sapiente quod nisi qui, vero at molestiae ipsum neque.</p>
    <p>Eveniet placeat cumque incidunt! Ex beatae nobis in assumenda hic explicabo velit dolor nisi incidunt praesentium possimus nemo est unde illo, delectus expedita qui consequatur odio laborum tempora voluptatum fuga. Numquam, accusantium repellat ab quaerat iure perferendis dignissimos aut laudantium similique voluptate eum vero soluta officiis itaque explicabo voluptatem saepe molestias maxime delectus obcaecati nemo non aperiam? Voluptas consectetur odio a placeat, ipsa, itaque doloribus, at laborum ipsum quisquam eveniet sequi illum quo. Deleniti magnam animi esse inventore natus sint impedit alias fugit illo reprehenderit, eos corporis quae provident, ut incidunt assumenda placeat voluptates officiis quis minima aliquid cum voluptatibus?</p>
    <p>Voluptas unde autem excepturi explicabo at iste earum exercitationem inventore nobis ex obcaecati eius quisquam vel qui, ad quod! Assumenda repellat porro ex sit. Rerum odit quae iure ex exercitationem nobis, distinctio nihil dicta soluta maxime blanditiis quibusdam qui libero temporibus unde dolorem nemo ullam! Dolore adipisci tenetur perferendis asperiores deserunt maxime veritatis debitis, fugiat hic sapiente exercitationem laboriosam architecto reiciendis nihil eligendi aliquid placeat aliquam illo repellendus temporibus distinctio! Saepe reprehenderit incidunt id et impedit, laborum, exercitationem nemo nostrum facilis cupiditate libero. Quae laudantium quasi, laboriosam repellendus vel accusamus doloremque iure dolores aperiam dolorem ipsum similique sunt aspernatur placeat.</p>
    <p>Amet consequatur sint quam quibusdam impedit magnam ab nulla aliquam hic quae nisi, reprehenderit corporis, distinctio assumenda illo autem non ullam obcaecati. Non necessitatibus eum autem consectetur ipsam, tempore molestias unde, dolores animi laboriosam aspernatur sunt. Voluptate veritatis tenetur ratione rerum quasi unde, sapiente aliquam voluptas esse doloremque? Quibusdam soluta praesentium expedita eos suscipit qui sit natus deserunt nesciunt aspernatur odio consequatur dolorum sed, adipisci vitae, asperiores excepturi molestias quae fugiat modi. Hic et ullam, veniam fugiat soluta odit perferendis non dolores officia inventore beatae in nostrum quas nisi? Iure voluptatum magnam pariatur totam quam id earum, incidunt quasi ratione!</p>
    <p>Mollitia aliquid accusantium alias sequi soluta sunt ex at provident ducimus. Dolores ipsa minima, incidunt temporibus suscipit illum veniam debitis. Cum optio esse laboriosam ipsum illo velit consequuntur sit possimus enim, a maiores est modi eaque laborum tenetur perspiciatis impedit repellat? Deleniti, facere quos mollitia magnam incidunt quam magni amet repellendus voluptatibus? Dolores dicta magni voluptatum necessitatibus corporis repellendus ducimus eos enim sit exercitationem. Veniam, numquam! Ex officia amet animi ducimus. Expedita vero dignissimos dolores numquam soluta eligendi nobis, quaerat consequatur error. Modi, fuga, impedit, asperiores doloribus sapiente veritatis laboriosam eaque ut porro quas similique natus corrupti nesciunt quia totam?</p>
    <p>Fuga deleniti repellat voluptate optio eum quaerat, iusto itaque iste veritatis sit modi labore quisquam nam minima at eligendi magnam similique libero porro consequatur repudiandae facilis magni corporis hic. Ad omnis non consequuntur, laudantium possimus consectetur quibusdam sunt delectus voluptatum neque dignissimos. Explicabo commodi saepe facere quas facilis voluptatum, odio, porro odit aliquam dolores neque velit dolore, nesciunt corporis exercitationem vitae ipsam? Nisi veniam accusantium eos natus rem dolore possimus praesentium adipisci, voluptatum placeat aperiam, sapiente iure, aut ipsa officia commodi veritatis quia aliquam tempore laudantium necessitatibus cum magni? Minus voluptates impedit accusamus aperiam dolores, earum laboriosam illo ipsum fugit!</p>
    <p>Sequi itaque quam delectus iure facilis. Eligendi illo rem ratione nemo modi, maxime minima quis enim, voluptatem voluptatibus itaque labore perspiciatis facilis consequatur voluptas provident dicta maiores asperiores ad dolorem dolores. Placeat alias velit iure tempora natus quidem doloribus sint hic, non rem ut perspiciatis, dolores dolorum eum ipsum facilis tenetur saepe impedit ea ducimus nihil? Nobis, libero eos iure eveniet sed mollitia, dolores saepe eius accusamus sequi, non facilis maiores? Numquam placeat architecto officiis ipsum unde fugit perferendis quaerat, incidunt modi saepe, labore ad animi amet expedita aperiam tenetur doloribus nemo consequuntur ratione. Repellat minus sunt non suscipit illo?</p>
    <p>Hic, mollitia iste explicabo voluptates enim deleniti cupiditate dolore commodi officia alias neque possimus praesentium ex doloribus expedita veritatis repudiandae voluptatem minus dolor sint. Quam, eveniet. Vitae, nobis repudiandae. Nemo repellendus consequatur quisquam quos sit aut illo cum suscipit quae dicta, facere explicabo voluptate unde modi quaerat corporis quidem asperiores eum deleniti provident eius? Incidunt obcaecati quos repellendus natus vero facere commodi neque, voluptatem perspiciatis laudantium. Voluptatum eaque, incidunt eveniet, consectetur sint qui nesciunt quas nihil quod excepturi officiis alias optio debitis esse blanditiis? Maiores, ipsa atque fuga magnam possimus, nostrum voluptates aliquam labore, sequi ipsum dolore iste deserunt? Aspernatur.</p>
    <p>Doloremque inventore animi dolore ratione quam fugiat et voluptatum cupiditate voluptatibus! Maiores itaque voluptates incidunt facere. Dolore reiciendis incidunt deserunt atque debitis fugiat iste, accusantium veniam repellat unde porro molestias? Voluptatibus dolores expedita repellat? Repellendus, sed? Amet autem officiis quidem necessitatibus? Aspernatur, quasi? Voluptates, doloribus veritatis laudantium inventore unde impedit facere dolorum libero odio. Dignissimos eveniet provident libero voluptatem magnam esse corrupti adipisci reiciendis itaque quaerat possimus, eius architecto vel! Pariatur, accusantium natus provident quos maxime odit minus dolores! Quod vitae fugit distinctio magnam sed. Incidunt dignissimos, repudiandae repellat optio aspernatur ut consequuntur tempora eos minus hic suscipit quis. Illum.</p>
    <p>Quibusdam quo distinctio facilis asperiores natus voluptatem, perspiciatis dolorum sequi illum culpa harum nobis minus illo quam odit officiis rem! In, iure nostrum illo illum nisi repellendus quasi obcaecati repellat blanditiis soluta adipisci et mollitia! Porro quod quis distinctio! Ipsum autem maxime, earum obcaecati nobis atque vitae eveniet suscipit iste esse recusandae laboriosam fugit temporibus, ad nemo omnis. Ut animi minima, quam deleniti iure praesentium eius soluta aliquam, tempore unde ipsa obcaecati est numquam earum esse itaque rem tempora excepturi quae quidem cum possimus non explicabo. Tempora sapiente, aliquid ducimus debitis, perferendis amet explicabo nobis magni modi libero cum. Iusto!</p>
    <p>Fugiat delectus amet, ipsa est velit tenetur earum? Dignissimos tempore voluptatum, esse quasi pariatur facilis cum autem quaerat, nam fuga nisi. Vitae officiis fugit iste, dicta consequuntur omnis, sit unde modi provident ratione nesciunt, nam cupiditate. Excepturi beatae nulla numquam nemo ratione hic libero possimus accusantium officiis in corrupti tempora facilis totam doloremque esse dolore magnam, consequuntur inventore odio sed nihil! Sed atque ea non delectus? Voluptatibus odit ab quis molestiae nulla, cumque vero dicta fugit iusto ullam doloribus enim debitis deserunt ratione dolorum obcaecati molestias dolorem vel fuga nisi rerum ipsum autem? Voluptates incidunt, veritatis dignissimos vitae sint quibusdam.</p>
    <p>Itaque sed nemo exercitationem dolor nihil. Atque sapiente accusantium nemo ipsam quisquam ut veniam magni dignissimos est tempore rerum unde iusto sit molestias impedit blanditiis, vel quibusdam nostrum ullam laboriosam, distinctio a vero et. Cumque nostrum delectus totam reprehenderit adipisci. Tenetur soluta tempora eligendi, debitis exercitationem placeat aliquid assumenda? Corrupti, rerum, iste culpa eius quaerat earum, sint ipsa labore quos quam autem! Cupiditate minima ullam necessitatibus maxime enim. Facere commodi quae repellendus quibusdam modi ab inventore expedita dolorem consequuntur repellat pariatur nostrum ea tempora quas harum iusto quia sapiente, nisi itaque corrupti tenetur at laborum rem corporis! Eligendi, animi ipsam!</p>
    <p>Culpa corporis optio molestiae! Ex harum excepturi quos non necessitatibus sed repellendus commodi accusantium impedit debitis facilis, ipsa nam eos! Architecto repudiandae eos molestias similique et natus ab eveniet ratione quaerat, eius, unde eum officiis veniam voluptas. Aut, doloremque culpa enim possimus adipisci delectus, hic sed eius velit sint et ipsum corporis maiores optio non, voluptatibus accusantium quam expedita. Unde debitis asperiores sapiente molestiae? A sed assumenda fugit aliquam nulla deleniti, dolorum officiis reprehenderit excepturi eum alias repellat similique dicta architecto, hic qui voluptate? Dolore voluptas deleniti officiis blanditiis, maxime illum hic ut modi distinctio excepturi, commodi eum veritatis reprehenderit.</p>
    <p>Sequi dolorum nam sapiente laudantium repellendus maxime odit excepturi iste cumque, error facere qui tenetur cupiditate quos eveniet praesentium quas laborum molestiae veniam id atque ducimus eos harum. Sequi quisquam autem a suscipit! Optio voluptatum suscipit doloremque molestias culpa dolor corrupti, necessitatibus magnam quam soluta id quis odio natus. Saepe sit quam ipsam corrupti et dolorum perferendis laboriosam consequatur repudiandae architecto earum eius laudantium, debitis sint ut autem fugit exercitationem dolorem error ipsum? Saepe quas tempora amet qui quia temporibus, dolorum minus dicta. Mollitia magni rerum vero! Harum maxime vero incidunt magni qui! Provident asperiores fugiat neque eligendi, architecto minima.</p>
    <p>Totam nulla qui fugiat vero magni. Exercitationem, pariatur aliquid repudiandae neque voluptates nostrum dolorem nam libero non earum enim optio consequatur, eligendi labore officia culpa facere nemo. Dolore non enim quod exercitationem temporibus! Voluptatem, reiciendis necessitatibus doloremque assumenda quidem harum recusandae nemo quas facilis asperiores pariatur consectetur est nihil et eum quo modi. Quae nesciunt veritatis quaerat est perspiciatis suscipit possimus, atque sit ad accusantium! Aspernatur inventore beatae laudantium animi iste dignissimos, eveniet quis officiis, doloremque nobis voluptas quaerat iure repellat optio reprehenderit hic repudiandae enim molestiae ipsam aliquid cum molestias sed illo quam. Unde eaque eum consectetur fugiat nesciunt.</p>
    <p>Aliquid porro hic tempore numquam ipsam placeat unde saepe, minus nostrum a vero eaque molestias, voluptatibus quas magni nihil! Soluta atque repellendus nisi dignissimos odio minima, fugit hic temporibus nostrum exercitationem illo nobis dolor perferendis natus modi officia quos non, laborum vel at voluptatem tempora aspernatur earum eos? Totam praesentium ad voluptatibus consequatur ullam! Molestias odio nostrum eos obcaecati qui vero veritatis quia commodi dolores velit ab assumenda, ipsam et fuga nulla aliquid autem, architecto aliquam ad quam? Accusamus corrupti expedita esse dolore iste quo aspernatur saepe nobis vitae! Nihil harum fuga non at neque consectetur maxime sint obcaecati temporibus?</p>
    <p>Molestiae, blanditiis nostrum ipsum eveniet distinctio deleniti praesentium sint soluta optio dolorum aliquid omnis qui expedita aperiam fugiat. Deleniti, illo corrupti tempora fuga sed dolores distinctio quasi cum temporibus quisquam ex molestiae ratione iure porro iste consequatur debitis numquam aliquam tenetur modi sit voluptatem nesciunt aspernatur? Quidem reiciendis autem praesentium aspernatur animi, esse porro amet nesciunt repellat perferendis commodi eveniet, architecto beatae saepe tempora sit dolore unde necessitatibus corrupti sequi id quas officiis, earum velit. Quibusdam pariatur est fugiat numquam libero commodi, facere accusantium, ullam, nihil illo nam. Recusandae maxime iure accusantium ea esse eius assumenda vero, ut quisquam enim!</p>
    <p>Sint, ad, sapiente quasi maiores optio quo quidem deleniti neque modi, molestias culpa aspernatur. Fuga ratione debitis dicta iure ipsa ea explicabo dolore, dolores nihil voluptate officiis tempora temporibus corrupti non recusandae asperiores provident saepe. Quis nemo ab quisquam culpa cupiditate iure provident architecto assumenda laborum quasi qui, nisi ullam maxime reprehenderit inventore minima neque quae voluptate? Earum facilis nulla molestiae, quod amet, in laboriosam, rem deserunt repellat hic possimus. Explicabo dolores consequuntur mollitia neque, eos vel similique fugit consectetur, dicta odio sequi, soluta deleniti fuga dignissimos atque at laudantium quisquam magnam nulla veniam itaque tempora. Quisquam placeat sed doloribus.</p>
    <p>Fugiat cumque nihil fuga dolorum officia id adipisci, hic temporibus labore, pariatur dignissimos minus est porro, exercitationem dicta impedit! Corporis delectus architecto nesciunt reprehenderit voluptatum, eligendi illo? Commodi quia veniam, rem tempore ut vel consequuntur voluptatibus modi dicta aliquid unde consequatur sapiente minima pariatur dolore, doloremque non laudantium voluptate voluptatum, magnam quisquam sed! Laborum, eius. Molestiae distinctio numquam magni quidem culpa nemo consectetur inventore suscipit omnis! Incidunt voluptatibus quidem magnam quaerat magni fugiat aspernatur possimus suscipit veniam! Consequuntur, quaerat voluptate. Autem ratione maxime maiores vitae odit incidunt doloremque magni eius quod perspiciatis magnam velit, quas minima inventore porro facilis placeat.</p>
    <p>Necessitatibus, ullam id, autem natus hic nisi ea tempora doloremque vel accusamus ad qui provident voluptates officia aliquam et! Reiciendis dignissimos provident aspernatur asperiores a ullam incidunt est velit culpa neque tempore mollitia id, at praesentium dolorum rerum minus atque voluptate vitae debitis soluta ipsa! Commodi dignissimos porro quae deleniti assumenda quam dolores adipisci consequatur nemo! Pariatur ipsum voluptatem porro, numquam possimus asperiores explicabo molestias illo praesentium repellat vitae aspernatur deleniti placeat qui itaque? Doloremque enim, amet earum ut voluptatum modi aperiam a voluptates, dignissimos sequi architecto cum veniam saepe eius beatae commodi laborum ea ipsa molestias cupiditate. Exercitationem, delectus!</p>
    <p>Laudantium eveniet sed distinctio aspernatur dolorum, ex vel libero deleniti vitae blanditiis nostrum eaque doloremque, dicta provident ad exercitationem sunt culpa! Veritatis, illo cupiditate voluptas assumenda voluptatum excepturi dignissimos saepe consequatur tempora inventore odio, quae animi vel aliquid omnis doloribus libero, voluptatibus laudantium rem non. Possimus perspiciatis quae facilis labore repellendus, ut eaque commodi corporis temporibus, distinctio reprehenderit qui? Facilis sapiente fugiat, architecto hic modi tempore sit enim doloremque odio velit explicabo exercitationem inventore nulla harum incidunt ipsa? Odio fugit expedita libero ipsum ipsa ipsam, aliquid dolor perferendis harum magni veritatis culpa minima quidem ea architecto exercitationem ad consectetur itaque!</p>
    <p>Nulla ea delectus aliquam tenetur! Illo dolorem iure aliquam animi distinctio, natus beatae dolores magni, quo aperiam fuga assumenda dolorum repellendus, mollitia fugiat ullam maiores? Deserunt ad, suscipit corrupti accusantium aspernatur explicabo neque quia molestiae tempora facere iste eos inventore molestias cupiditate voluptate nisi ducimus deleniti animi ea fugiat numquam, sequi cum! Assumenda, vel aut voluptate est neque unde quibusdam tempore dolorem saepe velit ea ipsa nostrum? Id, dolorum, pariatur repellendus dolore architecto qui deleniti odit quis corrupti consequuntur sapiente accusamus perferendis cum obcaecati dolor aspernatur quod ex. Illo ducimus pariatur accusantium esse repellat quas natus eum quisquam labore earum?</p>
    <p>Suscipit accusamus dolorem qui quaerat libero consectetur dolorum aut eum consequatur, ab delectus repudiandae perspiciatis, similique nam incidunt necessitatibus dolor, sed eveniet at voluptates tempora. Perferendis, quibusdam. Ad itaque laudantium, quia explicabo officiis aliquid autem deserunt modi quibusdam repudiandae ex. Distinctio facilis natus itaque repellendus expedita officiis maxime optio, laudantium tempore dolor deleniti? Reprehenderit dignissimos, animi inventore hic facilis dolorum, tempora sint omnis aspernatur velit nulla fugiat dolores, quaerat quidem? Fuga quae, ipsam neque blanditiis laboriosam, officiis molestiae ipsa error optio perferendis distinctio dolore omnis maiores debitis dolorem voluptatum quibusdam qui reiciendis doloremque ea amet nam soluta? Suscipit, a quas.</p>
    <p>Perferendis doloremque cumque repudiandae aut vitae quas sapiente voluptatum atque quibusdam, nihil ab inventore dicta dolorem. Incidunt consequatur facilis maiores molestias quod voluptatibus numquam nulla ipsa delectus. Fugit ducimus distinctio vel! Aperiam excepturi, deleniti dolore non ex reprehenderit quasi architecto consequuntur praesentium provident esse? Vel voluptas illo natus nemo porro quasi officiis dolor labore, qui veniam soluta harum earum tempore consequatur doloribus necessitatibus maiores fuga beatae dolores officia eum aut laborum. Nam, nisi id voluptas adipisci aut pariatur eveniet molestias doloribus magnam, aliquid laboriosam neque sunt ex. Eaque natus accusantium odit et eos nihil itaque tenetur qui, beatae, sit quae!</p>
    <p>Aperiam cum illo accusantium vitae expedita natus magni dolorum veniam delectus in. Quia illo error amet fugiat ratione exercitationem nemo nulla reiciendis repellendus, dolorem quae modi voluptate doloremque aut! Totam porro consectetur voluptatem nobis eos distinctio dolore beatae, odit ducimus ipsa quia magnam voluptatibus autem architecto optio aperiam placeat? Suscipit ratione fugiat similique odit sequi laboriosam modi incidunt qui, quis cumque est voluptates vitae excepturi veritatis ut placeat nesciunt quisquam! Distinctio porro cum sapiente cumque, iste illum neque unde ad nemo? Nisi error, ab recusandae odio, soluta atque ea consequuntur minus esse totam distinctio voluptas reiciendis quidem cupiditate non quo?</p>
    <p>Accusamus commodi eaque sunt nihil odio ab suscipit obcaecati nesciunt repellendus magnam. Ab pariatur corporis eos amet asperiores maxime aliquid quisquam qui, ad et molestias, tenetur distinctio est odio reprehenderit ipsum consectetur? Laborum atque quae eaque culpa ex impedit nulla nihil voluptatibus tempore autem delectus error suscipit dolor quidem optio repellat commodi ea incidunt, molestias quos sequi unde corrupti! Dolor eos totam, modi debitis laudantium dicta quia. Et earum culpa pariatur. Ratione nobis rem cum error praesentium laboriosam veniam tempore animi cumque harum commodi aspernatur dolorem cupiditate accusantium iste et inventore voluptatum ut sapiente, explicabo omnis? Voluptas laboriosam cupiditate quia.</p>
    <p>Consequuntur beatae dolorum quidem rem numquam. At eum culpa quis sequi laboriosam perspiciatis explicabo, modi ipsam est tenetur nihil quod vel nemo dolorum natus atque praesentium perferendis ad, iste ipsum impedit eveniet nisi fugiat assumenda. Aperiam ducimus autem voluptatem voluptatum necessitatibus? Facere vitae odio libero fuga ad consectetur nam, sit a nisi impedit porro soluta corrupti expedita! Quam id assumenda facilis quibusdam harum architecto velit asperiores quae praesentium maiores fugit deleniti, reprehenderit quidem ea eius molestiae. Quasi et minus eaque quidem saepe consectetur sapiente quaerat voluptatibus, accusantium pariatur repellendus corporis aut commodi eos consequatur distinctio incidunt atque praesentium excepturi. Veritatis.</p>
    <p>Id architecto fugiat dolorem natus minus blanditiis, autem nulla distinctio vel dolores quaerat corporis enim doloribus tempora facilis cum mollitia eius laborum, quos fuga odio. Aliquid autem ipsam facilis quam animi labore, tenetur quas atque, dolores voluptatum quis ipsum reprehenderit iure fugit voluptates. Tempore corrupti doloremque possimus veritatis reiciendis! Culpa id error accusantium fugiat quisquam voluptatem ducimus quos itaque illo facere praesentium voluptatibus facilis iusto sed molestiae minus aut reiciendis aperiam amet ullam placeat, repellat, ea vero deleniti. Consequatur, maiores tempore atque fuga necessitatibus fugiat minima quibusdam odio voluptatum quo dolorem amet, labore expedita. Aperiam incidunt consequatur consequuntur sint nisi?</p>
    <p>Aut, voluptate, totam itaque modi incidunt sapiente eveniet fuga laborum, exercitationem inventore ex dolorum ea. Minus praesentium necessitatibus nostrum sequi, quae rerum ab cupiditate officia autem commodi explicabo perferendis. Temporibus sint facilis blanditiis quidem iusto excepturi laborum iste, ullam autem dignissimos harum dolores aperiam. Error voluptatem sequi obcaecati accusantium assumenda beatae eligendi rerum atque, minima amet nam! Nobis quaerat tempore totam, accusamus enim dolor! A omnis voluptates veritatis dolores error illum voluptatem aliquam. Doloremque voluptatum, blanditiis ducimus quos quibusdam sit adipisci explicabo iure ea. Nesciunt harum velit porro blanditiis sunt, architecto quisquam quam perferendis natus inventore at laboriosam soluta doloremque!</p>
    <p>Illum iure consequuntur porro architecto explicabo minima sapiente obcaecati earum assumenda, esse voluptas atque iusto perferendis molestiae quam beatae, aperiam reiciendis neque doloribus repellendus. Autem vitae laudantium ab facere quis amet, architecto debitis iusto? Obcaecati et earum repellendus quas, vel, eveniet quis odit iste totam sit ipsam repudiandae amet quam praesentium? Saepe, a commodi dolores incidunt aut veniam laboriosam quas animi rem tenetur error? Placeat molestiae illum aperiam vero nobis animi atque soluta aliquam tempora voluptate nulla ex, tenetur, quibusdam laborum corporis deleniti culpa eum aliquid architecto? Cupiditate corrupti sapiente vel, molestias quos aliquid ex, minima, ut nihil dolor a.</p>
    <p>Natus numquam nobis fuga rerum nam ducimus provident in voluptatibus, molestias ab! Tenetur inventore atque esse pariatur vero commodi, accusamus neque quam, autem harum facere similique ipsum voluptates eos aliquam numquam fuga, velit itaque laudantium explicabo dignissimos. Ab minus, maiores labore temporibus consequuntur quasi cum modi laborum. Voluptatibus aut iste sint. Aspernatur, harum incidunt aut illum voluptatem delectus dignissimos et! Id iusto tenetur quam nihil saepe nemo esse dolorum quaerat officiis facere? Culpa expedita eum illum debitis ratione, quia dolorem quam vel illo aliquam esse voluptas eos deleniti numquam dolor consectetur repudiandae sed quidem doloremque, tempora magnam vitae! Nemo, quos?</p>
    <p>Quia nulla distinctio est. Quibusdam in accusamus ratione voluptate deleniti, optio quidem magni laboriosam nesciunt, aliquid similique ipsam? Sequi maiores dolores sint vitae officia et possimus, qui ad eius esse libero deleniti placeat mollitia quis voluptatem adipisci. Saepe beatae nostrum ipsam ipsa iste corporis quae est tempore sint cumque eligendi exercitationem vel sed ullam, esse accusantium, culpa provident in quaerat placeat quibusdam? Minima saepe doloribus numquam ut consectetur. Dolor sint non enim eaque. Odit et, in tenetur mollitia ipsum quae amet. Totam nesciunt exercitationem earum fuga laudantium facere. Provident accusantium obcaecati soluta in voluptatibus illo quisquam eveniet consequatur rerum tenetur.</p>
    <p>Provident facilis maiores incidunt dolor reprehenderit dicta voluptates, ipsam laudantium molestiae amet enim illum vero! Eum tempora molestias rem dolore, omnis aperiam doloribus. Quia explicabo temporibus corrupti provident quo sapiente dolorum dolores velit illo architecto impedit mollitia eos, modi deleniti minus qui commodi officiis beatae inventore cupiditate harum. Sequi tenetur quo voluptatem nihil est, aspernatur, cupiditate repellendus eligendi laudantium assumenda placeat perferendis laboriosam, similique eius repellat. Similique illum cum in assumenda aut. Quam ut porro esse recusandae libero. Quia recusandae placeat voluptas iste similique molestiae odit aperiam libero quaerat eius repellendus enim dolorem deserunt debitis, earum dolorum aut ipsum quod?</p>
    <p>Impedit saepe illum, nulla, ea voluptates ipsum esse minima dolore vitae modi tenetur autem ratione velit aliquid omnis aspernatur obcaecati, nisi nihil asperiores! Possimus corporis error veritatis quasi. Tenetur autem vel exercitationem expedita atque deserunt vitae neque possimus, hic, eius nemo voluptatibus illo et doloribus? Quas et deleniti maiores sit ipsa ducimus laudantium laborum itaque aperiam praesentium amet, nostrum doloremque molestiae facilis reiciendis ea alias iste nesciunt? Quasi culpa voluptatibus laborum odit, vel maiores enim non consequuntur eveniet praesentium quas vero expedita, itaque minus debitis? Consequatur quisquam laboriosam ratione voluptate natus expedita suscipit quae? Totam ex tenetur culpa dolore illo.</p>
    <p>Reiciendis deleniti numquam id illo. Vitae earum saepe repudiandae rerum deleniti? Beatae commodi ad, molestiae nostrum officia cum dolorem hic fugit eius natus quidem animi excepturi nesciunt, velit quia consequuntur incidunt rerum esse magni alias! Itaque cupiditate suscipit, eum iusto ratione quas ducimus nisi iure, quis minus enim quisquam sunt aliquid. Vel cumque ratione vero eveniet reiciendis, aperiam voluptate veritatis tempore dolor consectetur! Vel sequi tenetur in nemo, quisquam cum porro officiis. Enim, libero dolorem officia voluptatem sunt voluptatum perferendis in aspernatur qui maxime, error voluptas. Similique veniam fugiat consequuntur sapiente voluptatum quaerat ipsa, ea in harum, maxime repellat impedit?</p>
    <p>Enim, voluptatum eveniet odit suscipit minima eius veritatis esse minus consectetur autem beatae ducimus ullam obcaecati eum, qui, aperiam labore ratione incidunt expedita repellendus quis! Obcaecati at aspernatur, quia non optio eveniet sit, quis ducimus consequatur harum totam aliquam quos distinctio impedit dolorem doloribus sapiente cum mollitia? Ipsum excepturi quis alias. Id officia temporibus ab vitae, non obcaecati? Dicta ipsam esse, dolorum laudantium veritatis non quibusdam? Autem iusto voluptates laboriosam illo aspernatur voluptate numquam incidunt, maxime molestiae ut quasi voluptatibus eaque repellendus et molestias iure facilis explicabo eius suscipit quia doloremque, cum perferendis odio? Magnam voluptatem neque repellendus cumque aperiam!</p>
    <p>Non debitis, cum vitae maiores praesentium corrupti laboriosam quisquam porro laborum ducimus corporis doloribus, est earum dolorum veritatis. Rem voluptatum officia veniam repellat a quibusdam dolorem iure perferendis recusandae tempore exercitationem tempora, dicta in iste. Laudantium corrupti veritatis sequi inventore earum, eligendi consequatur nostrum commodi aut nam ullam dolore aliquid nemo? Repellendus ex, magni eligendi atque ducimus cumque! Mollitia sed odit reprehenderit, suscipit et deleniti, minima consequuntur consectetur ducimus, adipisci nulla deserunt rerum. Optio facilis, provident atque in fugit possimus hic omnis vitae earum. Et quas est autem at dolores, maxime asperiores, pariatur sapiente neque reiciendis sed nihil a tempore.</p>
    <p>Unde natus explicabo deleniti tenetur possimus, eos laborum accusantium ullam, quis saepe dolor eaque impedit nemo molestias ex velit, aspernatur ut minus harum eligendi incidunt? Velit quod eveniet magni necessitatibus inventore consequuntur error odit autem assumenda! Minus voluptatem at quae cum nobis porro eius quasi beatae quidem reiciendis adipisci animi eum dolorum accusamus, omnis non ex consequatur nesciunt, rem obcaecati. Excepturi hic dolores nisi dolorum autem harum deserunt iste aut vitae iusto, assumenda repellat incidunt voluptatem illo perferendis, soluta blanditiis ut! Ab vitae tenetur, consectetur explicabo mollitia dicta natus repudiandae voluptatem exercitationem excepturi. Error, consectetur ratione. Dolores iusto incidunt doloremque.</p>
    <p>Asperiores a eum illo. Sit ea tempore, omnis aut nisi praesentium neque cum nostrum laudantium tenetur saepe aspernatur exercitationem vero amet veniam harum officia. Temporibus distinctio, asperiores cupiditate ea repudiandae ratione aut provident porro obcaecati. Nam tempora autem natus modi qui saepe, dolor fugiat minima beatae est consequatur quod numquam vero commodi dolore alias quisquam! Rem facilis debitis in aliquam illum, magni a, officiis doloribus nemo quod et minima officia aperiam vel. Architecto tenetur labore sit nesciunt iste placeat est perferendis quidem aut incidunt repudiandae dolorum nam voluptatum corrupti quisquam ipsa ipsam impedit, autem deleniti eveniet facilis nemo? Esse, temporibus!</p>
    <p>Cumque aliquid maxime nam quod delectus earum harum accusantium. Laudantium nam dolorem reprehenderit alias? Nisi praesentium, ullam autem nostrum quidem eos dignissimos similique voluptatem nihil delectus repellat rem atque debitis consectetur illo, necessitatibus, optio deserunt suscipit quam! Minus incidunt aut, perspiciatis excepturi fugiat nostrum sint saepe omnis, exercitationem provident tenetur cupiditate! Deserunt, aliquid. Voluptas reiciendis totam quam eveniet, fugiat tempora deleniti quidem culpa laboriosam, soluta fuga tenetur quia sed aperiam veritatis aut quod iusto aliquid odio unde? Fuga cupiditate tempora, commodi fugiat et aspernatur, alias incidunt dolores vitae, rerum placeat. In commodi error quasi neque tenetur a alias incidunt sed.</p>
    <p>Nihil voluptate explicabo autem rerum quos quo amet ea a, et, aliquam earum laudantium mollitia optio placeat, nisi tempore at consequuntur? Voluptas sit, suscipit voluptates veniam explicabo numquam. Doloremque, laborum odio saepe quasi fugit doloribus vel totam praesentium eaque expedita quibusdam asperiores optio rem veniam inventore soluta quia corporis labore qui quae iusto ut tempora. Neque veritatis impedit repellendus inventore! Recusandae consequatur alias accusamus soluta repellat voluptatum numquam dignissimos, illo, adipisci magni illum commodi corrupti. Quibusdam laboriosam nemo sed. Quasi neque, consequatur ducimus perferendis nihil voluptatibus repellat earum in, modi asperiores error molestias architecto debitis harum nulla aliquid porro dignissimos?</p>
    <p>Cum quam, impedit nam corporis pariatur doloribus porro repellat delectus minima nostrum, quaerat architecto dignissimos libero iure voluptas laboriosam numquam nulla sapiente! Minus recusandae numquam perferendis et temporibus ipsa dolorum eius saepe beatae molestiae iusto maxime vel, magni fugiat quaerat dignissimos incidunt molestias architecto aliquid sed perspiciatis. Quibusdam sint labore soluta iure fugit eaque rem quidem ratione ut reprehenderit necessitatibus quos odio corrupti facere vero, ipsam perspiciatis dicta? Optio reiciendis sequi porro amet placeat! Ad dolorum exercitationem neque eaque earum excepturi voluptates et, itaque modi ipsam minus sapiente quam quasi unde aliquid? Quasi dolorum vitae, ullam maiores ut at architecto.</p>
    <p>Eos consequuntur distinctio autem maxime modi. Beatae nesciunt ea magni a fugit porro blanditiis vero ducimus itaque? Fuga eius cupiditate provident autem vitae sapiente reprehenderit error sunt molestiae quaerat in dignissimos asperiores similique rem harum quia ex, sequi et. Fugiat perferendis numquam repellat, cumque ipsum perspiciatis dolores, saepe officiis tenetur optio ex molestias ipsam nihil. Tempora at nisi nostrum temporibus placeat eligendi quisquam suscipit quis consequuntur beatae tenetur ipsum fugit architecto modi laudantium, facere nulla. Exercitationem officiis, ullam, dignissimos illo facilis quae vel totam nam beatae pariatur natus necessitatibus saepe officia? Aut veritatis perferendis libero deleniti delectus non reprehenderit doloribus!</p>
    <p>At eligendi rerum reprehenderit. Beatae provident distinctio cum expedita voluptates quod ducimus deleniti? Nisi non beatae quasi! Repellat illum corrupti iste enim vero in dolore architecto maxime sed explicabo at beatae perferendis hic repudiandae praesentium, aliquid error. Aut assumenda possimus eum obcaecati qui minus, est temporibus quibusdam nam eveniet quam et quo consequatur adipisci consequuntur accusamus ad. Nulla, veritatis quo! Debitis cum dolorum accusamus est, facere eius earum laboriosam temporibus beatae atque officia quas, labore obcaecati et totam quae voluptate quisquam similique suscipit possimus? Quis amet voluptatem earum provident voluptas eos temporibus accusantium laboriosam voluptates ducimus autem at, eveniet iure.</p>
    <p>Et soluta vero magni itaque veniam cupiditate facilis, mollitia quod? Dolore consequatur eos eum aperiam corrupti aliquid sint recusandae ea possimus laboriosam sapiente libero impedit voluptatum architecto fugit voluptatem delectus vel totam deleniti explicabo, assumenda id! Obcaecati, harum numquam. Adipisci impedit veritatis, quis officiis harum minus debitis quod non eos dolor ea soluta expedita voluptatibus illum ipsa dolore, deserunt aperiam qui, tempore eum cum distinctio vitae dolorum esse. Numquam, illo voluptates praesentium, quas itaque iste quisquam perferendis nam laborum, maiores reiciendis quidem vitae voluptate ducimus ratione iusto non. Totam amet unde nihil laudantium non at quidem officiis temporibus! Harum, deleniti.</p>
    <p>Ex, voluptas, delectus expedita placeat doloremque dignissimos voluptates ad eveniet tenetur corrupti velit blanditiis commodi alias molestias hic facilis deserunt fugiat iste cupiditate aspernatur officiis perferendis ab quas! Hic ipsum ducimus excepturi dolor asperiores dicta ea, nam laudantium quam, aperiam veritatis doloribus, odio aliquid beatae eligendi aut voluptatem dolorem quis totam! Itaque tempore, quo, facere eaque, consequatur fugit eveniet possimus debitis aut deserunt asperiores vitae quaerat at voluptate dolor vel reiciendis perferendis officia. Reprehenderit quod recusandae corporis facilis, id magni deserunt deleniti consectetur eos minima voluptates repellat architecto quo odio blanditiis sed. Magni quo odio sunt nulla officia! Neque, doloribus.</p>
    <p>Numquam sequi obcaecati voluptate eum laborum cupiditate ut minima incidunt, iure nulla accusantium saepe fugit perspiciatis aperiam at labore? Recusandae, sed itaque! Odio sed nam suscipit? Alias, ipsa dignissimos. Ut exercitationem nesciunt neque atque suscipit expedita, laudantium earum consequatur, eaque tempora odit. Natus beatae explicabo sit rerum. Deleniti beatae sit fugiat sed culpa cupiditate assumenda nostrum corrupti autem minima libero, praesentium in voluptas nobis aspernatur quae quia animi asperiores. Illum dignissimos, labore, aliquam, voluptates porro tempora totam laudantium repudiandae magni maiores pariatur! Officiis ratione, excepturi, doloremque eos, placeat rerum recusandae exercitationem numquam aspernatur ullam delectus nostrum maxime! Asperiores, beatae reprehenderit.</p>
    <p>Dolor at libero, quidem, tempore atque ex voluptatibus facere deleniti aspernatur, fuga hic distinctio. Saepe voluptas voluptates nulla omnis aliquam dolore mollitia iure debitis asperiores. Quisquam nobis, dolor officiis minus dignissimos deleniti voluptates animi! Atque vitae earum numquam magnam? Excepturi debitis assumenda rerum nisi quos dignissimos cupiditate molestias laudantium voluptas a reiciendis omnis id tempora consequatur voluptates ad ut iusto repellat magni, corporis nihil! Molestiae laudantium explicabo culpa, sint eos eius quibusdam quod ipsa enim necessitatibus? Dignissimos nam sint provident voluptate ducimus, eum, impedit asperiores soluta odit aliquid harum, suscipit temporibus consequuntur architecto debitis dolor at dolores. Praesentium, expedita officia?</p>
    <p>Modi dolore hic fugit eius, explicabo, aperiam voluptatibus officiis quae quod, itaque laborum consectetur temporibus! Ipsa, incidunt quaerat, magni ducimus tempore fugiat dolores deleniti eos architecto, vel rerum. Cumque, est ex cum quia eos aspernatur delectus ipsam sint ea voluptate molestiae vel vero distinctio qui. Deserunt sit qui officiis perferendis, velit harum vitae repellat voluptates minus cumque quos totam ad, blanditiis voluptate consequuntur iste amet recusandae doloribus tempore eos animi illum. Placeat, voluptatibus iure, nisi, dolorem voluptatum sunt quam repellendus consectetur nemo adipisci magnam voluptate assumenda. Fugiat facere ratione eius nemo labore deleniti in cum. Accusantium maiores distinctio eveniet asperiores.</p>
    <p>Voluptates, neque deleniti. Eos odit ducimus illum iusto, perferendis et beatae, veritatis maiores dolore, nisi repellendus ipsa! Animi, totam sapiente, nemo natus saepe consequatur esse magni porro eum quae placeat dolorem ad dolore reprehenderit amet in obcaecati? Laboriosam ducimus, esse facilis rerum a aperiam. Tempora placeat laborum odit ea omnis corporis incidunt beatae error animi obcaecati facere earum, inventore consectetur delectus quam fugit minima officiis recusandae, rem quidem, totam voluptatem itaque laudantium. Officiis delectus perferendis beatae deserunt quasi hic nobis praesentium libero aspernatur porro eius optio quam corporis voluptates neque, impedit quis autem dolores. Dignissimos non sequi fugit deserunt. Doloribus.</p>
    <p>Hic, blanditiis obcaecati tempora totam optio laborum inventore nobis sed, quia rem facilis, omnis consequatur nulla accusantium mollitia cumque veritatis ut reprehenderit at alias quo aperiam provident tempore nihil. Aperiam tenetur mollitia aut, dolorem possimus totam voluptatum modi maiores id est ut obcaecati adipisci aliquid dolores, rem, exercitationem non asperiores unde error iusto velit repellat iste amet in! Maxime accusamus aut nobis voluptas accusantium minus vel exercitationem aliquid eaque fugit assumenda id illo voluptate itaque repellendus saepe adipisci, necessitatibus rem provident consectetur beatae suscipit! Qui debitis ad magnam soluta reiciendis earum alias distinctio aliquid. Est, eaque? Sapiente nostrum beatae natus!</p>
    <p>Quo debitis necessitatibus aspernatur, maiores rem assumenda accusantium explicabo soluta dolores illo aut dicta, laudantium veritatis reiciendis doloremque. Quaerat dolores nisi animi magnam? Voluptatum id, praesentium et natus quaerat quas sint labore, soluta asperiores ex maxime dolores reprehenderit adipisci magnam cumque laudantium unde eos pariatur ut! Ex distinctio non eos omnis sint iure dolor libero veniam odio, amet necessitatibus autem enim quas deserunt incidunt explicabo porro nobis numquam! Voluptates, error? Facere placeat, nobis consequatur beatae voluptatem quaerat! Voluptatem veniam ad sit, dolorem deserunt doloribus nam vero autem obcaecati similique fugit rerum repellendus, accusamus repudiandae mollitia consectetur, sequi perferendis voluptatibus hic.</p>
    <p>Quam quidem exercitationem, modi alias illum odio fugit esse sint, pariatur ipsam aliquam obcaecati officia excepturi possimus cumque quia? Quasi magni dignissimos repellat aut distinctio recusandae iure inventore. Facere fugiat vero deleniti repudiandae quaerat mollitia nobis modi odit dolores iusto eum officia excepturi qui maiores quae dolorum, tenetur ipsam aspernatur quasi cupiditate. Perferendis, eaque tempore. In, aperiam, quos labore reprehenderit asperiores amet debitis earum neque laborum commodi dolorem beatae facere error mollitia, obcaecati dolorum repellat eos architecto dolor sit fuga. Id neque possimus repellat unde, magnam distinctio. Quae dolorem nihil veniam officia ipsa ratione. Dolor beatae consequuntur similique earum deleniti.</p>
    <p>Maxime tempore hic natus cumque ratione culpa nobis incidunt architecto quos ullam nam iure dolore reprehenderit, obcaecati rem magni exercitationem modi. Odio, magnam! Odit libero facere facilis temporibus fuga totam ullam laudantium? Repellendus in tempora et, deserunt sint eligendi iure impedit, sit libero eum beatae pariatur veniam error neque perferendis quo dolore harum sapiente dolorem consectetur labore laboriosam doloremque velit aperiam? Nihil nemo odio nesciunt enim autem vero, eum inventore? Doloribus, aut consequatur ipsum eius dolor culpa incidunt eveniet nesciunt consectetur voluptates atque illum libero, pariatur velit dignissimos doloremque amet, officia nemo odit porro labore est provident? Animi, ab sint.</p>
    <p>Modi cumque veniam quam amet culpa dolorum non iure, et distinctio minima facilis blanditiis vero delectus repellat ab. Tempora similique reprehenderit error libero odio doloribus ipsam hic quis, commodi fugiat perferendis sapiente quod a magnam quo voluptatem mollitia fugit alias officiis aperiam! Fugit amet officiis voluptate distinctio impedit, quos minima fuga eaque vero cum necessitatibus, quas quaerat, suscipit doloribus esse culpa. Aspernatur necessitatibus qui illum quasi dolorem consectetur dicta repellendus ut dolore ipsam expedita facere accusamus sunt perspiciatis, nobis architecto adipisci, earum consequuntur! Esse ut deleniti omnis quod, provident et quo, in eaque praesentium eveniet molestiae. Unde expedita praesentium doloribus?</p>
    <p>Cumque, natus. Excepturi saepe praesentium, laboriosam molestiae hic asperiores, quo libero impedit eligendi soluta facere consectetur quis odio voluptate cumque explicabo ducimus assumenda repellat deserunt minima aspernatur obcaecati cum. Adipisci nobis quod repellendus illo. Necessitatibus repudiandae magni amet ut illo molestiae porro. Quis impedit, eligendi ut optio debitis provident sed nam fugit rem perferendis mollitia deleniti labore ullam. Quia ea quidem perspiciatis praesentium neque! Assumenda culpa quas obcaecati optio eligendi quae ullam impedit molestiae commodi accusantium deserunt maxime dignissimos harum quia ratione sed cupiditate provident, rem possimus tenetur, aperiam animi sequi. Vel sequi quia odit laboriosam itaque quibusdam, quos sapiente.</p>
    <p>Atque soluta qui harum, aliquam quos veniam necessitatibus molestias voluptates perferendis commodi corrupti aspernatur quis beatae error quidem fugiat mollitia debitis ea nulla reprehenderit ipsa ut recusandae. Inventore neque iure voluptate vel, qui unde maiores mollitia laborum, ullam consectetur deleniti beatae voluptatum odio repudiandae tempore dolor illum expedita at harum aut quae veritatis, sequi ratione possimus! Sint, rerum quia! Voluptatem aliquid earum necessitatibus provident, excepturi quisquam odio similique quo dolores consectetur ipsum error repudiandae quidem ipsam a consequatur dolore! Impedit optio, odit beatae sunt voluptate officia quasi, fugiat facere iure ea maiores distinctio repudiandae blanditiis iusto amet voluptas accusantium porro?</p>
    <p>Quidem ut assumenda aliquid iusto alias optio. Aperiam error perferendis ullam facere quidem labore minus accusamus rem, unde ipsam. Deserunt culpa enim libero fuga doloremque consectetur odio perferendis assumenda sequi iste expedita sunt porro mollitia similique quis sapiente dolores nemo est aliquid commodi, quae eius rerum tempore magni. Sed facere ducimus adipisci officia praesentium recusandae illo quaerat in sequi, doloremque autem molestias labore laudantium fugiat consequuntur ratione eligendi delectus amet fugit, explicabo quisquam et! Quo minima in, accusamus corrupti ipsa, cum itaque quaerat porro odio commodi aliquam nam rem fugiat provident dolorem architecto sequi soluta. Esse nisi reiciendis fugiat quidem.</p>
    <p>Numquam fuga voluptate dolorem fugit dolor. Veritatis harum unde, accusantium quod beatae nesciunt quisquam quibusdam quidem magni vitae omnis aliquam adipisci odio aut voluptas ab placeat obcaecati. Nam adipisci earum quam atque eveniet, sequi obcaecati, totam eos autem praesentium perferendis beatae vitae culpa eius optio voluptates minima inventore sunt! Magni possimus nesciunt tempore beatae saepe sapiente in, quam culpa inventore laborum. Sit molestias laudantium dignissimos eum iure odit quos earum aperiam. Reprehenderit facere quaerat modi nulla accusantium alias dolorem laudantium, voluptate ea doloremque mollitia hic laborum maiores blanditiis nesciunt ex, error corrupti et, at nemo? Ducimus, temporibus earum. Dolorum, quasi.</p>
    <p>Recusandae nihil ipsam quisquam quas placeat, unde voluptatibus vel explicabo omnis maxime dolorem incidunt delectus saepe veniam et eos dolores, consectetur autem repellat amet beatae ipsa cupiditate soluta natus. Nemo, reprehenderit enim consequatur quos repellendus perferendis. Sit amet maxime iusto consectetur qui enim quaerat, perferendis neque repellendus, consequatur blanditiis pariatur nesciunt? Omnis consequatur minus nisi placeat rerum obcaecati deserunt, est itaque tenetur, corporis cumque iusto minima? Voluptatum non voluptate cupiditate dolores molestiae. Veniam, temporibus dignissimos fugit qui optio quas! Consectetur quae porro optio dolor! Consequuntur ullam exercitationem modi animi enim! Voluptates quasi non accusamus dolorum sed libero quo maiores. Laboriosam!</p>
    <p>Atque facilis nihil, architecto fuga, eum facere iusto corporis laudantium veritatis amet aut cumque omnis? Deleniti ad cum illo magnam laudantium? Totam numquam quidem impedit. Consequuntur, expedita ducimus. Magnam maxime amet vel temporibus eligendi aperiam eveniet quia iusto voluptatibus. Sequi quasi laudantium debitis odio ipsum quos provident tenetur alias saepe non eum delectus inventore repudiandae reprehenderit error, eligendi praesentium autem adipisci magni, labore a eos placeat, illo obcaecati! Sit omnis dolor asperiores atque earum, assumenda enim dignissimos consectetur eaque eos voluptate rem excepturi dolorem unde beatae praesentium aliquam minus nam mollitia! Vel quasi in eius accusantium est ducimus explicabo fugit!</p>
    <p>Fugiat dolorem, ipsum quaerat nesciunt, totam saepe voluptates non natus porro vero repellendus dolores sapiente. Aperiam delectus non ullam fugit, quae ipsa a aliquam accusantium blanditiis laudantium dolorum voluptatum dolorem ipsum culpa. Tempora delectus neque perspiciatis ipsam excepturi, quia esse id, harum soluta amet odit beatae voluptates omnis quam officia, nostrum culpa deserunt. Dolore molestias ut suscipit reprehenderit optio vitae nisi amet officiis cumque eaque labore maiores, expedita dolorum tenetur magni? Minus, dolor? Maxime blanditiis, temporibus labore illum ab neque a nostrum exercitationem quod explicabo deserunt quidem, deleniti voluptate beatae accusamus eligendi eum pariatur fugit minus. Veritatis rem optio in.</p>
    <p>Adipisci fugiat ducimus nemo quam, velit quaerat delectus architecto facilis ipsa consectetur dolore veritatis sequi nihil distinctio obcaecati exercitationem vero. Id mollitia dolore fuga eum dolorem voluptatum illum voluptates laborum illo, expedita iure voluptatem vel in alias sunt eius ipsum odit asperiores corrupti quae, doloribus animi tempore. Libero, eaque laborum? Temporibus, in ea labore suscipit voluptas distinctio architecto accusamus deleniti nostrum blanditiis nemo fugiat aliquid adipisci officiis ipsam praesentium molestias maxime beatae eius obcaecati. Molestias quibusdam perferendis distinctio quam ea nesciunt quae pariatur, voluptatibus incidunt dolor, delectus quia magni. Deleniti aspernatur aperiam eos vitae id neque modi consectetur, a quisquam.</p>
    <p>Consequuntur laboriosam voluptatem quaerat accusantium quas ad voluptatibus quisquam nam eius? Repellat, repellendus dicta veniam perspiciatis excepturi minima? Incidunt quaerat suscipit iusto accusamus. Consectetur impedit laborum rem minima expedita, debitis numquam a cumque distinctio dolor, repudiandae quia ipsam quas veniam ducimus, incidunt perferendis. Facere, ab. Illum quis maiores laudantium, tempore cumque omnis ad dolore assumenda pariatur eveniet vel atque recusandae eligendi ullam temporibus nemo repellendus id necessitatibus quidem. Exercitationem, dolores, ducimus ab accusamus deserunt error unde obcaecati eos quisquam non necessitatibus a magnam possimus adipisci maxime consequuntur animi incidunt, distinctio omnis quia eveniet beatae quis molestiae. Asperiores, omnis? Aspernatur, similique!</p>
    <p>Maxime nemo deserunt impedit hic nostrum? Quam mollitia, ducimus ut cum repellat reiciendis, id obcaecati nisi et iure sequi totam, corrupti odit at error fugiat? Maxime atque, culpa libero in saepe similique porro debitis fugiat repellendus eos sequi commodi voluptatum dicta. Accusamus exercitationem voluptatibus fugit, eveniet nesciunt placeat inventore ullam delectus hic doloribus officiis autem, consequatur sed, maxime soluta. Suscipit, laboriosam, voluptas commodi nisi quas quos distinctio officiis in minus asperiores at. Accusantium debitis nisi, vel rerum blanditiis quisquam commodi sunt nulla est sapiente placeat odit facilis dolorem? Nisi deleniti amet nemo rerum id voluptatum atque animi vero quo dicta?</p>
    <p>Velit, consequatur? Ducimus ad expedita perferendis tempore, deserunt nulla omnis neque dolorem accusamus? Nam placeat voluptas molestias, earum alias beatae reprehenderit quas vel facilis tenetur temporibus pariatur ullam doloribus quidem qui sapiente delectus amet. Reiciendis voluptate exercitationem dolores enim temporibus aspernatur, quas excepturi harum saepe, facilis debitis! Laudantium dignissimos cum ut eveniet amet magnam optio, corrupti ipsam commodi quo, officiis consequuntur cumque minus vitae mollitia ratione veritatis? Voluptatibus voluptas ratione vitae architecto quis dicta officia eveniet consequatur quidem dolorem, nihil magnam, mollitia esse perferendis? Illum odit obcaecati praesentium cum ducimus cupiditate nostrum impedit, magni similique quod ipsam est, illo earum.</p>
    <p>Pariatur quis commodi eligendi repudiandae ipsam fugiat officiis nulla eos dicta? Consectetur veritatis error tempore eligendi ea modi totam cumque, unde praesentium nisi vel repellendus optio fuga animi nulla asperiores ratione aut sed at facere, minus laboriosam, nostrum nemo. Velit mollitia, assumenda similique molestiae est nesciunt neque. Nemo, rem quidem non error id sunt voluptatem ipsam commodi ipsum velit, odit vel magni, deserunt maiores fuga itaque earum. Fuga minus dolore dignissimos eaque, culpa vel sit animi ipsa excepturi amet incidunt sed quia earum vitae autem officiis modi ratione inventore perferendis? Corrupti minima nulla laboriosam explicabo consequuntur quae molestias, quam vel!</p>
    <p>Nihil, laudantium! Vero, rerum dolor ducimus vel nihil tempora iure et, tempore ex expedita numquam, similique doloremque? Esse dolor dolorem, illum magni pariatur minima ea fuga, vitae, nulla reprehenderit facilis exercitationem. Maiores assumenda dicta harum aut ad est voluptates accusamus reprehenderit distinctio quidem perspiciatis cumque asperiores voluptatem, blanditiis aspernatur odit pariatur sint saepe deserunt dignissimos fuga quas. Error non nam, quo earum aspernatur dolore ut vitae quaerat ex. Facilis voluptatem quia vero consequatur modi. Hic odio qui dolore ratione voluptatem cumque maiores aperiam ipsa nemo! Placeat, consequatur consectetur sed ut aliquam quidem ipsam. Aut et sit quia laudantium veritatis porro.</p>
    <p>Reprehenderit, autem molestiae quam obcaecati hic libero nulla ab, dicta, repellendus ipsum assumenda et nostrum accusantium. Distinctio, voluptatibus molestias! Laboriosam, numquam autem magni a aliquam quas aspernatur ullam illo earum cupiditate nemo officiis similique sed, commodi ratione recusandae suscipit consequuntur atque dolore modi rem consequatur voluptatibus minus id! Commodi facilis quisquam iste odit voluptate. Et animi aut molestiae veniam in doloribus possimus placeat error similique autem? Beatae vel sed possimus non minus consequuntur minima aliquam. Corrupti temporibus deserunt fuga animi fugiat tempore corporis voluptatibus, ex atque. Possimus amet quidem blanditiis eum, pariatur molestias, vitae, facere voluptatibus consectetur minima nulla. Eveniet.</p>
    <p>Ducimus cupiditate aperiam ipsum quam dignissimos, nihil nostrum recusandae quisquam doloribus id suscipit similique animi reiciendis harum veniam eveniet debitis ut blanditiis, obcaecati alias est sequi sit. Quidem natus pariatur ipsum vitae et animi suscipit accusantium vero ratione eaque, iste cupiditate excepturi nesciunt quasi dolorum deleniti neque tempora minima, aut aliquam obcaecati, qui voluptatem non! Odio nihil sunt accusamus quae hic soluta mollitia consectetur a ipsam, ab magni explicabo eaque magnam ipsum itaque veniam tempora. Explicabo quasi ab amet, sunt a commodi aliquam eveniet. Possimus, neque. Consequatur eius, illum ab vitae reprehenderit perferendis nam illo saepe assumenda rem sint error!</p>
  </body>
</html>

slideshow.html

<!DOCTYPE html>
<html>
<head>
  <title>...</title>
  <style>
      #photo {
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          height: 100%;
          width: 100%;
          object-fit: cover;
      }

      #previous-button, #next-button {
          font-size: 75px;
          z-index: 1;
          top: 50%;
      }

      #previous-button{
          position: fixed;
          left: 10px;
      }

      #next-button{
          transform: rotate(180deg);
          position: fixed;
          right: 10px;
      }

      #previous-button:hover, #next-button:hover {
        cursor: pointer;
        color: yellow;
      }

  </style>
</head>
<body>
    <div id="previous-button" class="navigation-button">&#x2b05;</div>
  <img id="photo">
  
  <div id="next-button" class="navigation-button">&#x2b05;</div>

  <script>
// The list of image URLs
const urls = [
  'http://www.traveller.com.au/content/dam/images/g/u/n/q/h/0/image.related.articleLeadwide.620x349.gunpvd.png/1488330286332.png',
  'http://images.mentalfloss.com/sites/default/files/styles/mf_image_16x9/public/57159-istock-486456250.jpg?itok=pYToxS1l&resize=1100x619',
  'https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/australia/Quokka_Sam-West.jpg?crop=0,886,2365,1773&wid=1640&hei=1230&scl=1.4420731707317074',
  'https://cdn.newsapi.com.au/image/v1/0b92e2f32090adb38fc51da0673f0c38?width=1024',
];

// The index (serial number) of the current image
let i = 0;

// Grab handles onto HTML elements.
const previousButton = document.getElementById('previous-button');
const nextButton = document.getElementById('next-button');
const photo = document.getElementById('photo');

function advance(delta) {
  i = (i + delta + urls.length) % urls.length;
  photo.src = urls[i];
}

previousButton.addEventListener('click', () => advance(-1));
nextButton.addEventListener('click', () => advance(1));

advance(0);
  </script>
</body>
</html>

bulletin_board.html

<!DOCTYPE html>

<html lang="en">
  <head>
    <link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet">
    <title>...</title>
    <style>

body {
  background-image: url('cork.jpg');
}

.label {
  font-family: 'Permanent Marker', cursive;
  font-size: 24pt;
}

.polaroid {
  margin: 20px;
  background-color: white;
  display: inline-block;
  text-align: center;
  position: relative;
  box-shadow: -10px 10px 10px black;
  transform: rotate(-10deg);
}

.pin {
  width: 80px;
  position: absolute;
  left: 50%;
  top: 0;
}

.photo {
  margin: 10px;
  width: 300px;
  height: 300px;
  object-fit: cover;
}
      
    </style>
  </head>

  <body>

    <div class="polaroid">
      <img src="pin.svg" class="pin">
      <img src="quokka.jpg" class="photo">
      <div class="label">quokka</div>
    </div>
    
    <div class="polaroid">
      <img src="pin.svg" class="pin">
      <img src="quokka.jpg" class="photo">
      <div class="label">cuddle bunny</div>
    </div>
    
    <div class="polaroid">
      <img src="pin.svg" class="pin">
      <img src="quokka.jpg" class="photo">
      <div class="label">night fury</div>
    </div>

  </body>
</html>