Deprecated: Return type of Illuminate\Container\Container::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /customers/5/8/5/perabuis.be/httpd.www/INT2_the_messy_desktop/vendor/illuminate/container/Container.php on line 1345

Deprecated: Return type of Illuminate\Container\Container::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /customers/5/8/5/perabuis.be/httpd.www/INT2_the_messy_desktop/vendor/illuminate/container/Container.php on line 1356

Deprecated: Return type of Illuminate\Container\Container::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /customers/5/8/5/perabuis.be/httpd.www/INT2_the_messy_desktop/vendor/illuminate/container/Container.php on line 1368

Deprecated: Return type of Illuminate\Container\Container::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /customers/5/8/5/perabuis.be/httpd.www/INT2_the_messy_desktop/vendor/illuminate/container/Container.php on line 1381

Deprecated: Return type of Illuminate\Support\Fluent::offsetExists($offset) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /customers/5/8/5/perabuis.be/httpd.www/INT2_the_messy_desktop/vendor/illuminate/support/Fluent.php on line 95

Deprecated: Return type of Illuminate\Support\Fluent::offsetGet($offset) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /customers/5/8/5/perabuis.be/httpd.www/INT2_the_messy_desktop/vendor/illuminate/support/Fluent.php on line 106

Deprecated: Return type of Illuminate\Support\Fluent::offsetSet($offset, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /customers/5/8/5/perabuis.be/httpd.www/INT2_the_messy_desktop/vendor/illuminate/support/Fluent.php on line 118

Deprecated: Return type of Illuminate\Support\Fluent::offsetUnset($offset) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /customers/5/8/5/perabuis.be/httpd.www/INT2_the_messy_desktop/vendor/illuminate/support/Fluent.php on line 129

Deprecated: Return type of Illuminate\Support\Fluent::jsonSerialize() should either be compatible with JsonSerializable::jsonSerialize(): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /customers/5/8/5/perabuis.be/httpd.www/INT2_the_messy_desktop/vendor/illuminate/support/Fluent.php on line 73

Deprecated: Return type of Illuminate\Database\Eloquent\Model::offsetExists($offset) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /customers/5/8/5/perabuis.be/httpd.www/INT2_the_messy_desktop/vendor/illuminate/database/Eloquent/Model.php on line 1807

Deprecated: Return type of Illuminate\Database\Eloquent\Model::offsetGet($offset) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /customers/5/8/5/perabuis.be/httpd.www/INT2_the_messy_desktop/vendor/illuminate/database/Eloquent/Model.php on line 1818

Deprecated: Return type of Illuminate\Database\Eloquent\Model::offsetSet($offset, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /customers/5/8/5/perabuis.be/httpd.www/INT2_the_messy_desktop/vendor/illuminate/database/Eloquent/Model.php on line 1830

Deprecated: Return type of Illuminate\Database\Eloquent\Model::offsetUnset($offset) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /customers/5/8/5/perabuis.be/httpd.www/INT2_the_messy_desktop/vendor/illuminate/database/Eloquent/Model.php on line 1841

Deprecated: Return type of Illuminate\Database\Eloquent\Model::jsonSerialize() should either be compatible with JsonSerializable::jsonSerialize(): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /customers/5/8/5/perabuis.be/httpd.www/INT2_the_messy_desktop/vendor/illuminate/database/Eloquent/Model.php on line 1353
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">

  <link rel="stylesheet" href="https://use.typekit.net/lhx8ylu.css">
 
  <title>The messy desktop -  Ways to clean up</title>
</head>
<body>
<header class="header" id="home">
    <a class="header__logo" href="index.php?page=home">
    
    <img class="logo__img" src="assets/img/logo.png" alt="logo the messy desktop" width="32" height="27">
        <p class="logo__text">The messy desktop</p>
</a>
    <nav class="header__navigation">
        <ul class="menu">
            <li class="menu__item"><a class="item__link" href="index.php?page=home">Why clean up</a>
            </li>
            <li class="menu__item"><a class="item__link item__link--underline" href="index.php?page=cleanup">Ways to clean up</a></li>
            <li class="menu__item"><a class="item__link " href="index.php?page=login">My desktop</a></li>
        </ul>
    </nav>
    
    
    <h1 class="header__title --hidden">The messy desktop</h1>
</header>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>

  <main class="main">
    
<div class="flow">
  <h2 class="flow__title title"><span class="pink">Go</span> with the <span class="flow__title--marked">flow</span></h2>
  
  <section class="ready">
    <h3 class="ready__title title">Where do I start?</h3>
    <p class="ready__text text">Do you get a feeling of stress when seeing a well-thought-out folder system? Are you more the spontaneous type? Then <span class="--bold">this guide is here for you.</span> No stress, just freedom to make the choices you want. </p>
    <img class="ready__illustration" src="assets/img/working_girl.png" alt="illustration of a working girl" width="747" height="516">
   
  </section>
  <section class="dayOff">
    <div class="dayOff__description">
      <h3 class="dayOff__title title">Take the day off</h3>
      <p class="dayOff__text text">You deserve a day off because you are not a chaotic person, you just have <span class="--bold">a lot of memories.</span> So when you go through your files there is <span class="--bold">no way you could do it quickly and rapid.</span> We advise you to cherish those moments and take all the time you need. Enjoy!</p>
    </div>
      <div class="dayOff__stamp"><p class="dayOff__stamp--text">Go on a trip down memory lane</p></div>
  </section>
  <section class="categorize">
      <h3 class="categorize__title title">Categorize, categorize, categorize</h3>
      <p class="categorize__text text">Start small and <span class="--bold">categorise the way you want.</span> We know, you are probably not that fond of the word categorise. However <span class="--bold">it may help you,</span> find a categorising system that works for you. </p>
  </section>
</div>


<section class="small">
  <div class="small__container">
    <div class="small__yourself">
      <h4 class="yourself__title">Start small</h4>
      <p class="yourself__text text">Try to organise these files the way you want.</p>
     <div class="yourself__box">
          <img class="box__file box__file--1" src="assets/img/organise/file1.png" alt="a file to organise" width="106" height="128">
          <img class="box__file box__file--2" src="assets/img/organise/file2.png" alt="a file to organise" width="72" height="79">
          <img class="box__file box__file--3" src="assets/img/organise/file3.png" alt="a file to organise" width="85" height="81">
          <img class="box__file box__file--4" src="assets/img/organise/file4.png" alt="a file to organise" width="69" height="102">
      </div>
      <a class="yourself__button button">Done organising</a>
    </div>
    <div class="small__result --hidden">
      <p class="result__title"> Well done</p>
      <p class="result__text text">We like the way you did it! Here is another possibility to inspire you.</p>
      <div class="result__box">
          <img class="result__img" src="assets/img/organise_tip.png" alt="tip to organise" width="388" height="160">
      </div>
         </div>
</div>
</section >

<section class="dailyTip">
  <img class="dailyTip__img" src="assets/img/daily_tip1.png" alt="tip of the day" width="377" height="445">
  <div class="dailyTip__description">
    <h4 class="dailyTip__title">Tip of the day</h4>
    <p class="dailyTip__text text">Sorting alphabetically or by date is an option. But why not try a more fun way and categorise your files by color?</p>
  </div>
  <img class="dailyTip__img" src="assets/img/daily_tip2.png" alt="tip of the day" width="377" height="445">
  
</section>
<section class="panic">
  <h3 class="panic__title">Panic button</h3>
  <p class="panic__description text --hidden">Feeling stressed? Not feeling well? Overwhelmed? Press the panic button!</p>
</section>

<section class="wayout">
  <div class="wayout__description">
     <h3 class="wayout__title title">The easy way out</h3>
     <p class="wayout__text text">Well here you are. You really tried but cleaning up just isn’t your thing? <span class="--bold">Don’t worry!</span> There is an easy way out. In just <span class="--bold">3 simple steps</span> you can still clean up your desktop.</p>
     <img src="assets/img/folder_dump.gif" alt="the easy way out"  width="400" height="400" >
  </div>
  <div class="wayout__recap">
    <p class="recap__subtitle">The easiest way to clean up</p>
    <ul class="recap__list">
      <li class="recap__list--item">1. Make a new folder</li>
      <li class="recap__list--item">2. Drag all your files in there</li>
      <li class="recap__list--item">3. Your desktop is now clean :)</li>
    </ul>
  </div>
</section>

<div class="link">
<div class="link__container">
    <p class="link__title title"> Having a <span class="link__title--underlined">good time?</span> Want to have even more <span class="link__title--marked">fun?</span></p>
    <a class="link__button button" href="index.php?page=login">Share your progress</a>
</div>
</div>




<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/Draggable.min.js"></script>


  <script src="./js/script_cleanup.js"></script>  </main>
  <div class="panicState --hidden">
  <p class="panicState__title title">Enough with the cleaning for today. </p>
  <p class="panicState__text">We hope to see you back when you feel ready again. Take care!</p>
  <p class="panicState_ps">Ps: Try calling your mom, they often are great organisers.</p>
  
  </div>
  <footer class="footer">
      <a class="header__logo" href="index.php?page=home">
        
        <img class="logo__img" src="assets/img/logo.png" alt="logo the messy desktop" width="32" height="27">
            <p class="logo__text">The messy desktop</p>
      </a>
        <nav class="header__navigation">
            <ul class="menu">
                <li class="menu__item"><a class="item__link" href="index.php?page=home">Why clean up</a>
                </li>
                <li class="menu__item"><a class="item__link" href="index.php?page=cleanup">Ways to clean up</a></li>
                <li class="menu__item"><a class="item__link" href="index.php?page=login">My desktop</a></li>
            </ul>
        </nav>
  </footer>
  <script src="./js/script_clearAll.js"></script>
</body>
</html>