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 -  Why 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 " 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">
    <!--WELCOME / HEADER / INTRO-->

<div class="mess">
<p>.</p>
  <!--Deze hidden hierboven verwijderen voor full experience-->
 <div class="mess__container"> 
      <p class="mess__text">We would appreciate it if you clicked this button &#8600</p>
      <a class="mess__button"><p class="mess__button--text">click here</p></a>
  
    </div>
</div>


<section class="order">
      <a class="order__button"><h2 class="order__button--title">Like this <span class="button__title--marked">feeling?</span></h2></a>
      <p class="order__text">learn more</p>
      <svg class="order__arrow" viewBox="0 0 54.25 29.31"><defs><style>.cls-1{fill:none;stroke:#ff5502;stroke-linecap:round;stroke-width:4px;}</style></defs><path id="Path_63" data-name="Path 63" class="cls-1" d="M32.86,28.52,57.21,42l25.4-13.5" transform="translate(-30.61 -26.27)"/><path id="Path_64" data-name="Path 64" class="cls-1" d="M32.86,39.52,57.21,53l25.4-13.5" transform="translate(-30.61 -26.27)"/></svg>
</section>


<section class="intro">
  <div class="intro__controlText">
        <h2 class="controlText__title title">Cleaning up your desktop can give you the <span class="controlText__title--marked">feeling</span> of being in <span class="controlText__title--outline">control</span></h2>
        <p class="controlText__text text">Do you love the freedom to do whatever you want? We get you! But did you also sigh of relief when seeing the cleaned up desktop above? There could be an alternative, <span class="--bold">less boring way to clean up your desktop.</span> Start small and get one victory at a time. </p>
        <a class="controlText__button button" href="index.php?page=cleanup">clean up your desktop</a>
  </div>   
      <div class="intro__deskIllustration">
      <a class="deskIllustration__cleanButton"><p class="deskIllustration__cleanButton--text">hover to clean up</p></a>
          <img class="deskIllustration__imgDesktop" src="assets/img/chaos_desktop.png" alt="illustration of a messy desktop" width="880" height="847">
                </div>
</section>

<section class="impression">
  <div class="impression__firstImpression">
        <h3 class="firstImpression__title title">Make a good first <span class="firstImpression__title--underlined">impression<span></h3>
        <p class="firstImpression__text text">We all know how important first impressions can be. So <span class="--bold">your messy desktop could very possibly scare people away.</span> Of course everybody handles mess and chaos in a different way, what would your reaction be to a messy desktop?</p>
  </div>
  <div class="impression__stamp">Experience less stress</div>
  <div class="impression__form"  id="impression">
        <form method="get" action="index.php#impression" class="impressionForm">
                <p class="impressionForm__question">How do you react when you encounter a messy desktop?</p>
                <!-- <input type="hidden" name="action" value="addMessage" />-->
                <div class="cleanuplabels">
                <label class="impressionForm__label" id="3">
                        <input class="impressionForm__input" type="radio" name="impressions" value="3" >Aargh!! Clean this mess!
                        <span class="error"></span>
                </label>
                <label class="impressionForm__label" id="2">
                        <input class="impressionForm__input" type="radio" name="impressions" value="2" >Mmm, could be improved
                        <span class="error"></span>
                </label>
                <label class="impressionForm__label" id=1>
                        <input class="impressionForm__input" type="radio" name="impressions" value="1" >Not my problem
                        <span class="error"></span>
                </label>
                </div>
                <button type="submit" class="impressionForm__submit">Tell us</button>
        </form>
            <p class="impressionForm__answer"></p>
    </div>
  
</section>
<div class="darkBackground">
                            
<section class="wally">
   
        <p>.</p>
        <h3 class="wally__title title">Where is <span class="--lineThrough">Wally</span> the file?</h3>
        <p class="wally__question">Can you reveal <span class="wally__question--marked">wally.pdf</span> in the files below?</p>
           
            <div class="wallyContainer">
                    <div class="wallyContainer__timer">
                        <div class="wallyContainer__timer">
                            <a class="timer__button start">Find wally.pdf</a>
                            <p class="timer__clock clock --hidden"></p>
                            <p class="timer__succesMessage"></p>
                        </div>
                    </div>
            </div>
        <a class="reset --hidden">Try again</a>
            
</section>
<section class="error404">
    <img class="error404__img1" src="assets/img/errors/error1.png" alt="illustration of computer error" width="201" height="206">
    <img class="error404__img2" src="assets/img/errors/error2.png" alt="illustration of computer error" width="136" height="101">
    <img class="error404__img3" src="assets/img/errors/error3.png" alt="illustration of computer error" width="225" height="223">
    <div class="error404__text">   
        <h3 class="error404__title title"> <span class="--lineThrough">Error 404 </span></h3>
        <p class="error404__description text">Ever seen these error messages? Aren’t they the most frustrating things ever! What would you give to never see these again?</p>
    </div>
    <img class="error404__img4" src="assets/img/errors/error4.png" alt="illustration of computer error" width="307" height="125">
    <img class="error404__img5" src="assets/img/errors/error5.png" alt="illustration of computer error" width="136" height="101">
    <img class="error404__stamp" src="assets/img/errors/stamp_lost.png" alt="illustration of computer error" width="463" height="124">
    <img class="error404__img6" src="assets/img/errors/error6.png" alt="illustration of computer error" width="201" height="205">


</section>

<section class="join">
<div class="join__container">
    <h3 class="join__title title"> Okay, I'm in. Where do I <span class="join__title--marked">start</span> ?</h3>
    <div class="join__buttons">
    <a class="join__buttons--cleanup button" href="index.php?page=cleanup">Clean up your desktop</a>
    <a class="join__buttons--progress button" href="index.php?page=login">Monitor your progress</a>
    <div>
</section>
</div>
</div>

<script src="./js/script_index.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>